Corepress 主题手机显示底部导航并精心美化

2024年10月29日 Wordpress美化慕白

此页面的默认 H1 标题

在 Corepress 主题中，手机端默认是不显示友情链接的。然而，在某些情况下，我们可能希望在手机端也能够展示友情链接，以便为用户提供更全面的浏览体验。如果有这样的需求，可以添加如下代码。

这些代码就像是一把神奇的钥匙，能够开启手机端友情链接的显示之门。通过添加特定的代码片段，我们可以打破默认的设置，让友情链接在手机屏幕上得以呈现。

至于美化方面，则需要根据自己的实际情况进行调整。因为不同的网站风格、主题颜色和用户需求都各不相同，所以美化的方式也会因人而异。可以从字体大小、颜色搭配、图标设计等多个方面入手，精心打造出符合自己网站特色的手机端友情链接展示效果。

无论是为了提高用户的便利性，还是为了增强网站的整体美观度，添加代码并进行适当的美化都是一个值得尝试的方法。它可以让我们的网站在手机端更加完善和吸引人，为用户带来更好的浏览体验。

代码部署

/** 手机显示底部导航并美化 */
@media screen and (max-width: 800px) {
  .friend-links {
    display: block !important;
  }
  .friend-links .list-plane-title {
/*      padding: 5px 0px 5px 0px; */
      padding: 0px;
    }
    .friend-links-list img {
        display: none !important;
    }
    .friend-links .list-plane-title > div {
        padding: 5px 0px 5px 15px;
        font-size: 16px;
        clear: both;
    }
    .list-plane-linksdescribe, .friend-links-apply{
        display:none!important
    }
    .friend-links-list {
        padding: 10px !important;
        margin: 0 5px;
        display: block;
    }
    .friend-links-list a {
        font-size: 12px;
        margin-bottom: 5px;
        color: #262525!important;
        -webkit-tap-highlight-color: transparent;
    }
    .friend-links-item {
        margin-right: 0px;
    }
    .friend-links-item:not(:first-child):before {
        content: "";
        width: 4px;
        height: 4px;
        margin: 0 .3em;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        background:#262525;
        opacity: .3;
        vertical-align: .2em;
    }
}