热门

WordPress子比美化给网站增加一个漂亮的网址导航

美化教程6个月前发布忆余函

837 0 0

演示图

WordPress子比美化给网站增加一个漂亮的网址导航

演示页面：网址导航-初一小盏 (vxras.com)

教程引言

如果你希望给自己的网站友链进行分类，那这将是不二之选，本页面将会获取后台链接所设置的链接分类及分类下的网址等各信息，页面外观免费分享给大家

PHP页面代码

将PHP代码放置于主题目录下的Pages文件夹下命名为Nav.php 或者其他名字，只要你能记得住

<?php
/**
 * Template name: DearLicy - 导航页
 * Description:   DearLicy_links
 */
get_header();
?>
<style>
ol, ul {
  list-style-type: none;
}
</style>
<body id="Jitheme.com" class="archive post-type-archive post-type-archive-links logo-left">
  <div id="page" class="site up action ji_haeder">
    <div id="content" class="site-content">
      <div class="b2-single-content wrapper">
        <div id="links" class="content-area links wrapper links-home">
          <main id="main" class="site-main mini-site-main">
            <div id="primary-home" class="content-area">
              <div class="home-links-content">
                <div class="b2-tab-links is-affixed" style="position: relative;">
    <div class="zib-widget" style="position: fixed;transform: translate3d(0px, 0px, 0px);top: 120px;left: 0px;width: 150px;margin-left: 20px;z-index:999;">
        <div class="mini-submenu b2-radius">
            <i class="fa fa-home"></i>网址导航
        </div>
        <div class="b2-tab-link-in">
            <ol class="toc-list">
                <?php
                $link_cats = get_terms('link_category', array('hide_empty' => false));
                if (!empty($link_cats) && !is_wp_error($link_cats)):
                    foreach ($link_cats as $key => $link_cat):
                        $isActive = $key == 0 ? 'is-active-li' : '';
                        echo '<li class="toc-list-item ' . $isActive . '">';
                        echo '<a href="#link-' . $link_cat->term_id . '" class="toc-link node-name--H2 ' . ($isActive ? 'is-active-link' : '') . '">' . $link_cat->name . '</a>';
                        echo '</li>';
                    endforeach;
                endif;
                ?>
            </ol>
        </div>
        <div class="mini-submenu b2-radius">
            <a href="/link-register" data-class="full-sm modal-dialog" data-remote="/wp-admin/admin-ajax.php?action=add_ajax_admin_widget_links" data-toggle="RefreshModal">
                <i class="fa fa-music"></i>申请入驻
            </a>
        </div>
    </div>
</div>

                <div class="home-links-right">
                  <div class="links_list">
                    <div class="site-warp  b2-radius" style="background-image: url(https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msOOV.img);background-position-x: center;background-position-y: center;background-repeat: no-repeat;background-attachment: fixed;background-size: cover;">
                      <div class="site-search wrapper">
                        <h3>网址导航 · 友情链接</h3>
                        <ul class="search-tmenu">
                          <li class="active">
                            <span>常用</span>
                          </li>
                          <li>
                            <span>工具</span>
                          </li>
                          <li>
                            <span>社区</span>
                          </li>
                          <li>
                            <span>灵感</span>
                          </li>
                        </ul>
                        <div class="sousk">
                          <form id="searchForm" class="shadow b2-radius" action="/?s=" method="get" target="_blank">
                            <input id="searchinput" class="" type="text" placeholder="站内搜索" autocomplete="off">
                            <button id="searc-submit" class="jitheme-site-search" type="submit">搜索</button>
                          </form>
                          <div class="b2-links-yl">
                          </div>
                        </div>
                        <div class="subnav">
                          <div class="subnav-item active">
                            <ul class="search-bmenu uk-padding-remove">
                              <li class="search-item on" url="/?s=">站内</li>
                              <li class="search-item" url="https://www.baidu.com/s?wd=">百度</li>
                              <li class="search-item" url="https://www.google.com/search?q=">Google</li>
                              <li class="search-item" url="https://www.so.com/s?q=">360</li>
                              <li class="search-item" url="https://www.sogou.com/web?query=">搜狗</li>
                              <li class="search-item" url="https://cn.bing.com/search?q=">必应</li>
                              <li class="search-item" url="https://yz.m.sm.cn/s?q=">神马</li>
                            </ul>
                          </div>
                          <div class="subnav-item">
                            <ul class="search-bmenu uk-padding-remove">
                              <li class="search-item on" url="http://rank.chinaz.com/all/">权重查询</li>
                              <li class="search-item" url="http://link.chinaz.com/">友链检测</li>
                              <li class="search-item" url="https://icp.aizhan.com/">备案查询</li>
                              <li class="search-item" url="http://ping.chinaz.com/">PING检测</li>
                              <li class="search-item" url="http://tool.chinaz.com/Links/?DAddress=">死链检测</li>
                            </ul>
                          </div>
                          <div class="subnav-item">
                            <ul class="search-bmenu uk-padding-remove">
                              <li class="search-item on" url="https://www.zhihu.com/search?type=content&q=">知乎</li>
                              <li class="search-item" url="http://weixin.sogou.com/weixin?type=2&query=">微信</li>
                              <li class="search-item" url="http://s.weibo.com/weibo/">微博</li>
                              <li class="search-item" url="https://www.douban.com/search?q=">豆瓣</li>
                            </ul>
                          </div>
                          <div class="subnav-item">
                            <ul class="search-bmenu uk-padding-remove">
                              <li class="search-item on" url="https://huaban.com/search/?q=">花瓣</li>
                              <li class="search-item" url="https://dribbble.com/search/">dribbble</li>
                              <li class="search-item" url="https://www.behance.net/search?search=">behance</li>
                              <li class="search-item" url="http://www.zcool.com.cn/search/content?&word=">站酷</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                    <?php
// 获取所有链接分类
$link_cats = get_terms('link_category');

// 遍历每个分类
foreach ($link_cats as $link_cat) :
    // 获取当前分类下的链接
    $bookmarks = get_bookmarks( array( 'category' => $link_cat->term_id ) );
?>
    <div class="dh-box link-box-0 b2-radius">
        <div class="link-title tit">
            <div class="link-title-left">
                <h2 class="title-theme" id="link-<?php echo $link_cat->term_id ?>"><?php echo $link_cat->name; ?></h2>
            </div>
        </div>
        <div class="homebk8 homebk12 mb20">
            <div class="homebk8-ctn">
                <ul id="mod-4">
                    <?php foreach ($bookmarks as $bookmark): ?>
                        <li class="box whitebg-sm">
                            <div class="homebk12-item">
                                <div class="homebk12-img">
                                    <!-- 使用书签的图片或默认图片 -->
                                    <div class="homebk12-imgbg" style="background-image:url('<?php echo $bookmark->link_image ?: 'https://www.vxras.com/wp-content/uploads/2024/05/猫爪.png'; ?>');"></div>
                                </div>
                                <h3><?php echo $bookmark->link_name; ?></h3>
                                <p class="link-desc"><?php echo $bookmark->link_description; ?></p>
                                <div class="homebk6-btn">
                                    <a href="<?php echo $bookmark->link_url; ?>" title="查看详情" class="ckxq">查看详情</a>
                                    <a href="<?php echo $bookmark->link_url; ?>" title="直达网站" rel="nofollow" target="_blank" class="zdwz">直达网站</a>
                                </div>
                            </div>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </div>
    </div>
<?php endforeach; ?>
                    
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    </div>
  </div>
  <script>
// 首页搜索条逻辑
        var jsonData = ["百度一下", "权重查询(不带http/https)", "知乎", "花瓣"];
        var jsonDataUrl = ["https://www.baidu.com/s?wd=", "http://rank.chinaz.com/all/", "https://www.zhihu.com/search?type=content&q=", "https://www.huaban.com/search"];

        $('.search-tmenu li').click(function() {
            var _index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $('.subnav').each(function() {
                $(this).find('div').eq(_index).addClass("active").siblings().removeClass("active");
            })
            console.log(_index);
        });

        $(".subnav-item").on("shown", function() {
            $("#searchForm").attr("action", jsonDataUrl[$(this).index()]);
            $("#searchinput").attr("placeholder", jsonData[$(this).index()]);
        });

        $(".search-item").on("click", function() {
            $("#searchForm").attr("action", $(this).attr("url"));
            $("#searchinput").attr("placeholder", $(this).html());
            $(this).addClass("on").siblings().removeClass("on");
        });

        $("#searc-submit").click(function() {
            window.open($("#searchForm").attr("action") + $("#searchinput").val());
            return false;
        });

        $('#searchForm').keydown(function(e) {
            if (e.keyCode == 13) {
                window.open($("#searchForm").attr("action") + $("#searchinput").val());
                return false;
            }
        });
</script>
</body>
<?php
get_footer();
?>

CSS代码

放置于后台自定义css内

/*导航页*/
.homebk12 .homebk8-ctn li {
    width: calc(20% - 16px)
}

@media (max-width: 799px) {
    .b2-tab-links {
        display:none
    }

    .homebk12 .homebk8-ctn li {
        width: calc(50% - 16px)
    }
}
@media (min-width: 799px) {
    .home-links-right {
        margin-right: 20px;
    }
}
.wrapper {
    margin: 0 auto
}

.b2-radius {
    border-radius: 4px
}

.link-desc {
    display: -webkit-box;
    overflow: hidden;
    box-sizing: border-box;
    margin: 4px 0 8px;
    height: 15px;
    font-size: 13px;
    line-height: 1.3;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.dh-box {
    margin-bottom: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px
}

.dh-box .tit {
    font-size: 0;
    line-height: 51px
}

.dh-box .tit h2 {
    font-weight: 700;
    font-size: 16px
}

.dh-box .tit h2 {
    display: inline-block;
    vertical-align: middle
}

.b2-tab-links .toc-list {
    margin-right: 0;
    padding: 0;
    border-radius: 0 0 5px 5px;
    text-align: center;
    font-size: 14px
}

.b2-tab-links .toc-list-item {
    margin-bottom: 0
}

.b2-tab-links a.toc-link {
    display: inline-block;
    padding: 5px 10px;
    height: unset;
    border-radius: var(--main-radius);
    background-color: unset;
    line-height: 25px
}

.b2-tab-links .toc-list-item {
    margin-bottom: 5px
}

.mini-submenu {
    position: relative;
    display: block;
    margin-bottom: 5px;
    padding: 11px 20px 11px 15px;
    text-align: center;
    white-space: nowrap;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer
}

.toc-list-item:hover {
    border-radius: var(--main-radius);
    color: #fff
}

.mini-submenu i {
    display: inline-block;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: #28c687;
    color: #fff;
    vertical-align: top;
    text-align: center;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px
}

i {
    font-style: unset
}

.box:not(.post-3) {
    background: var(--main-bg-color)!important
}

.mb20 {
    margin-bottom: 16px
}

.homebk8-ctn ul {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap
}

.homebk8-ctn li {
    padding: 20px;
    width: 14.28%;
    border-radius: 5px;
    text-align: center;
    transition: .2s
}

.whitebg-sm {
    border-radius: 8px!important;
    background: #fff
}

.homebk12 .homebk6-btn {
    flex-direction: column
}

.homebk6-btn {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .2s;
    justify-content: center;
    align-items: center
}

.homebk12 .homebk8-ctn li {
    position: relative;
    overflow: hidden;
    margin-right: 16px;
    margin-bottom: 16px;
    transition: .2s;
    box-shadow: 0 0 10px var(--main-shadow);
}

.homebk12 .homebk8-ctn li:hover .homebk12-item {
}

.homebk12 .homebk8-ctn li:hover .homebk6-btn {
    opacity: 1;
    z-index: 999
}

.homebk12 .homebk6-btn {
    flex-direction: column
}

.homebk12 .homebk8-ctn .homebk6-btn a {
    margin-bottom: 10px;
    height: 28px
}

.homebk12 .homebk8-ctn .homebk6-btn a:hover {
    margin-top: 0;
    opacity: .9
}

.homebk12 .homebk8-ctn li .homebk12-img {
    position: relative;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    padding: 6px;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #f4f4f4
}

.homebk12 .homebk8-ctn li:hover .homebk12-img {
    opacity: 0
}

.homebk12-img .homebk12-imgbg {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: block;
    width: 66px;
    height: 66px;
    background: #eee;
    background-size: cover;
    transform: translate(-50%,-50%)
}

.homebk12 .homebk8-ctn li p {
    overflow: hidden;
    text-align: center
}

.homebk12 .homebk8-ctn .homebk6-btn a {
    margin-bottom: 10px;
    height: 28px
}

.homebk6-btn a.ckxq {
    background: #2dc5ff
}

.homebk6-btn a.zdwz {
    background: #47e193
}

.homebk6-btn a {
    display: block;
    margin: 0 5px;
    width: 80px;
    height: 28px;
    border-radius: 3px;
    background: #999;
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 28px;
    transition: .3s
}

.homebk12 .homebk8-ctn li p {
    overflow: hidden;
    text-align: center
}

.homebk8-ctn li p {
    overflow: hidden;
    color: var(--this-text);
    text-overflow: ellipsis;
    font-size: 12px
}

.homebk8-ctn li h3 {
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 15px
}

.homebk8-ctn li:hover h3 {
    opacity: 0
}

.mb20 {
    margin-bottom: 20px
}

.site-warp {
    display: flex;
    overflow: hidden;
    height: 300px;
    align-items: center
}

.site-search h3 {
    margin-bottom: 20px;
    color: #fff;
    text-align: center;
    letter-spacing: .5px;
    font-size: 26px
}

.site-search form {
    position: relative;
    display: flex;
    width: 100%;
    border-radius: 4px 0 0 4px;
    background: #fff
}

.site-search input {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 4px;
    color: var(--this-text);
    text-indent: 10px
}

.site-search button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: inline-block;
    margin: auto;
    padding: 0;
    width: 80px;
    height: 36px;
    outline: 0;
    border: 0;
    border-radius: 4px;
    background: var(--theme-color);
    color: #fff;
    text-align: center;
    font-size: 14px;
    line-height: 38px;
    cursor: pointer;
    transition: all .1s
}

.search-tmenu {
    margin-bottom: 20px;
    padding: 0;
    text-align: center
}

.search-tmenu li {
    display: inline-block;
    padding: 0 12px
}

.search-tmenu li span {
    display: inline-block;
    padding-bottom: 10px;
    color: #fff;
    font-size: 14px;
    cursor: pointer
}

.search-tmenu .active span {
    position: relative;
    display: inline-block;
    color: #fff
}

.search-tmenu .active span::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 3px;
    background: #fff;
    content: ''
}

.search-bmenu {
    text-align: center
}

.search-bmenu .on {
    color: #fff;
    opacity: 1
}

.search-item {
    display: inline-block;
    margin: 0 10px;
    color: #fff;
    font-size: 14px;
    opacity: .5;
    cursor: pointer
}

.subnav {
    margin-top: 15px
}

.subnav-item {
    display: none
}

.subnav .active {
    display: block!important
}

.sousk {
    display: flex;
    border: 5px solid rgb(255 255 255 / 18%)
}

.b2-links-yl {
    right: 0;
    padding: 5px;
    border-radius: 0 4px 4px 0;
    background: #fff;
    text-align: center;
    line-height: 26px
}

.b2-tab-links a.toc-link {
    margin: 0
}

.home-links-content {
    display: flex;
    flex-wrap: nowrap
}

.b2-tab-links {
    width: 200px;
    min-width: 200px
}

.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active {
    background-image: linear-gradient(to top,#ef0053 0%,#ef0053 100%);
    color: #fff
}

button {
    border-radius: var(--main-radius)
}

.home-links-right {
    width: 100%;
}

链接提交弹窗PHP代码

由于我们摈弃了友情链接页面采取网址导航页面，所以还是有必要保留前端网址提交，将下方代码放置于functions.php，如果你创建了func.php那就放这个文件里

//将子比友链提交注册为弹窗
function add_ajax_admin_widget_links()
{
    zib_ajax_send_ajaxpager(zib_submit_links_card());
    exit;
}
add_action('wp_ajax_add_ajax_admin_widget_links', 'add_ajax_admin_widget_links');
add_action('wp_ajax_nopriv_add_ajax_admin_widget_links', 'add_ajax_admin_widget_links');

© 版权声明

文章版权归作者所有，未经允许请勿转载。

相关文章

WordPress子比主题添加滚动播报小工具美化版

忆余函

212

【zibll主题美化】狐狸库自定义底部样式

忆余函

518

子比主题美化子比主题美化提醒小工具代码

忆余函

517

子比主题 – 论坛九宫格图片

忆余函

286

一个好看的粒子时钟

忆余函

427

WordPress子比主题美化添加用户注册滚动

忆余函

723

暂无评论

暂无评论...

回忆余函（www.alh6.com）918技术导航集网址、资源、资讯于一体的 WordPress 导航主题，简约优雅的设计风格，全面的前端用户功能，简单的模块化配置，欢迎您的体验

友链申请免责声明版权声明关于我们

Copyright © 2024 回忆余函 | 忆余函技术导航浙ICP备2023047572号由 OneNav 强力驱动