如何利用WP原生链接功能实现轻量化导航站页面？-FUNION数字营销

大家好，我是Funion数字营销实战派飞小优，有很多企业主在后期网站运营不错后需要添加导航站功能，很多人想直接采用第三方的导航站主题来实现，这个办法固然很好，但是从你运营的站点及SEO还有后期运营项目的情况来看，能尽量少开启一个后台就少开一个，毕竟没那么多运营人员和技术来维护，所以作为过来人，我教你一个轻量化实现导航站方案——原生链接功能实现导航站需求。

具体实现方案逻辑

主要是采用页面模板来进行构造代码实现，WP原生支持页面和文章等模板，因此我们可以利用这个原生功能来最小化方案实现。因为从后期运营这角度来看，你只需要维护一个后台即可，不用切换多个后台然后在运营，另一个方面从SEO 角度来看这个是比较友好的，因为可以增加权重。

方案实现步骤

在后台创建page-navsite.php模板，若是采用宝塔，则具体位置位于www/wwwroot/xxx/wp-content/themes/xxx/根目录下，创建这个页面模板文件即可，如：

构造函数代码

这个代码具体与实际运营需求相关，这个因人而异，代码逻辑如下：

<?php
/**
 * Template Name: 导航站模板-mvp版本
 */
get_header();
?>
<div class="cb-nav-container">
    <!-- 搜索区域 -->
    <div class="cb-nav-search-wrap">
        <input type="search" 
               class="cb-nav-search-field" 
               placeholder="搜索资源..." 
               id="cb-nav-search-input"/>
    </div>

    <!-- 主体布局 -->
    <div class="cb-nav-main-container">
        <!-- 左侧分类菜单 -->
        <div class="cb-nav-sidebar">
            <div class="cb-nav-category-item cb-nav-active" data-category="all">
                <a>全部资源</a>
            </div>
            <?php
            $categories = get_terms([
                'taxonomy' => 'link_category',
                'hide_empty' => false
            ]);
            
            foreach ($categories as $category) : ?>
                <div class="cb-nav-category-item" data-category="<?php echo $category->term_id; ?>">
                    <a><?php echo esc_html($category->name); ?></a>
                </div>
            <?php endforeach; ?>
        </div>

        <!-- 右侧链接内容 -->
        <div class="cb-nav-content">
            <div class="cb-nav-link-section cb-nav-active" id="section-all">
                <?php 
                $all_links = get_bookmarks();
                foreach ($all_links as $link) : ?>
                    <div class="cb-nav-link-card">
                        <a href="<?php echo esc_url($link->link_url); ?>" target="_blank">
                            <?php echo esc_html($link->link_name); ?>
                        </a>
                        <?php if ($link->link_description) : ?>
                            <p><?php echo esc_html($link->link_description); ?></p>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <?php foreach ($categories as $category) :
                $category_links = get_bookmarks(['category' => $category->term_id]);
                if ($category_links) : ?>
                    <div class="cb-nav-link-section" id="section-<?php echo $category->term_id; ?>">
                        <?php foreach ($category_links as $link) : ?>
                            <div class="cb-nav-link-card">
                                <a href="<?php echo esc_url($link->link_url); ?>" target="_blank">
                                    <?php echo esc_html($link->link_name); ?>
                                </a>
                                <?php if ($link->link_description) : ?>
                                    <p><?php echo esc_html($link->link_description); ?></p>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif;
            endforeach; ?>
        </div>
    </div>
</div>

<script>
jQuery(function($) {
    // 分类切换功能
    $('.cb-nav-category-item').click(function() {
        $('.cb-nav-category-item').removeClass('cb-nav-active');
        $(this).addClass('cb-nav-active');
        
        $('.cb-nav-link-section').removeClass('cb-nav-active');
        $('#section-' + $(this).data('category')).addClass('cb-nav-active');
    });
    
    // 搜索功能
    $('#cb-nav-search-input').on('keyup', function() {
        var searchTerm = $(this).val().toLowerCase();
        var $currentSection = $('.cb-nav-link-section.cb-nav-active');
        
        $currentSection.find('.cb-nav-link-card').each(function() {
            var text = $(this).text().toLowerCase();
            $(this).toggle(text.indexOf(searchTerm) > -1);
        });
    });
});
</script>

<?php get_footer(); ?>

然后在将其依赖的css文件写好装到style.css中，css代码自行解决，如：

前端测试DEMO

装好后我们再切换到后台，可以看到页面属性中多出来page-navsite.php模板，如：

在切换前端查看该页面这正好输出你的布局样式，如：

搜索查询，显示返回数据

写在最后

按此方案，基本上就可以实现一个比较友好的导航站需求，不需要通过安装插件及另外购买主题实现，纯SEO友好方案实现，不过该方案有个弊端，就是不能通过自定义头像实现前端视觉，主要是WP开发者一开始就将这个功能用于处理友情链接需求场景，因此没有给过多的丰富功能，若有这方面需求，可以通过采用CPT（自定义文章类型）与自定义字段方式结合来实现，这样你就可以实现更完美的导航站需求，更多数字营销和建站优化，请持续关注FUNION数字营销！