wordpress网址导航-wordpress网址导航页面制作教程-FUNION数字营销

大家好，我是FUNION数字营销实战派飞小优，最近在测试一个站点时因业务场景需要，必须搭建一个网址导航工具，看了很多实战方案，不想做的复杂和繁琐，只希望简单一点，类似收藏夹功能，方便自己和用户使用。那具体是如何实现呢？其实在WordPress中开发网址导航页面可以通过以下几种4种方法实现：

四种实现方法

使用插件

安装插件：
- 登录到你的WordPress后台。
- 进入“插件”菜单，点击“添加新”。
- 在搜索框中输入“导航菜单”或“链接列表”，你会看到一些相关的插件，比如“Simple Links List”、“Links Manager”等。
- 选择一个你喜欢的插件并点击“安装现在”，然后激活它。
配置插件：
- 安装并激活插件后，通常会在后台的“设置”或“链接”菜单中出现一个新的选项。
- 进入该选项，按照插件的说明添加和管理你的网址链接。
显示导航页面：
- 有些插件会提供短代码或页面构建器模块，你可以将其添加到任何页面或文章中。
- 如果插件提供自定义页面模板，你可以创建一个新的页面并选择该模板来显示导航链接。

使用自定义页面模板

创建自定义页面模板：
- 在你的主题文件夹中创建一个新的PHP文件，例如page-links.php。
- 在该文件中添加以下代码：

<?php
/*
Template Name: Links Navigation
*/
get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <h1>网址导航</h1>
        <ul>
            <?php
            $links = array(
                array('name' => 'Google', 'url' => 'https://www.google.com'),
                array('name' => 'Facebook', 'url' => 'https://www.facebook.com'),
                array('name' => 'Twitter', 'url' => 'https://www.twitter.com'),
                // 添加更多链接
            );

            foreach ($links as $link) {
                echo '<li><a href="' . esc_url($link['url']) . '">' . esc_html($link['name']) . '</a></li>';
            }
            ?>
        </ul>
    </main><!-- #main -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

创建新页面并选择模板：
- 登录到WordPress后台，进入“页面”菜单，点击“添加新”。
- 在页面编辑器的右侧，你会看到“页面属性”下的“模板”选项。
- 选择你刚刚创建的“Links Navigation”模板。
- 发布页面。

使用短代码

创建短代码：
- 在你的主题的functions.php文件中添加以下代码：

function links_navigation_shortcode() {
    $links = array(
        array('name' => 'Google', 'url' => 'https://www.google.com'),
        array('name' => 'Facebook', 'url' => 'https://www.facebook.com'),
        array('name' => 'Twitter', 'url' => 'https://www.twitter.com'),
        // 添加更多链接
    );

    $output = '<ul>';
    foreach ($links as $link) {
        $output .= '<li><a href="' . esc_url($link['url']) . '">' . esc_html($link['name']) . '</a></li>';
    }
    $output .= '</ul>';

    return $output;
}
add_shortcode('links_navigation', 'links_navigation_shortcode');

使用短代码：
- 在任何页面或文章中，你可以使用[links_navigation]短代码来显示导航链接。

使用页面构建器

如果你使用的是页面构建器（如Elementor、Beaver Builder或者其他可视化编辑器等），你可以使用它们的模块来创建链接列表或导航菜单。

安装并激活页面构建器。
创建新页面，选择页面构建器编辑模式。
添加链接列表模块，并按照模块的设置添加和管理你的网址链接。
发布页面。

具体实例开发实践案例参考

笔者只要是利用Wordpress自带链接功能进行开发，整体也利用了页面构建器功能封装，可以灵活输出到任意需求页面。先看看具体案例，如下：

具体案例实现教程

新建页面，选择页面属性

回到前端页面，选择对应的区块

选择Html+网址导航链接模块拖入到页面中，提前做好两栏布局

输入代码实例

左侧导航代码实例输入后，如下，CSS就免了，因为每个人有自己的喜好，A标签中的锚点ID换成你字节

<div class="sidebar-nav">
	<ul class="nav-menu"> 
		<li class="nav-menu-item">
		  <a href="锚点ID" class="menu-a active" >测试导航一</a></li>
		<li class="nav-menu-item">
		  <a href="锚点ID" class="menu-a" >测试导航2</a></li>
		<li class="nav-menu-item">
		  <a href="锚点ID" class="menu-a" >测试导航3</a></li>
		<li class="nav-menu-item">
		  <a href="锚点ID" class="menu-a" >测试导航3</a></li>
		<li class="nav-menu-item">
		  <a href="锚点ID" class="menu-a" >测试导航3</a></li>
	</ul>	
</div>

写在最后

以上就是飞优为大家介绍的通过以上4方法，你可以在WordPress中轻松创建和管理网址导航页面。选择哪种方法取决于你的具体需求和技术水平。有更多关于SEO基础建站和外贸建站优化需求不妨提交下方表单，我们会在第一时间联系您，给您指定方案！

* 文章内容很有用，那就5星好评吧!😘

好评 5

Your page rank:

利用WordPress如何开发网址导航页面?