l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 中显示面包屑导航链接

如何在 WordPress 中显示面包屑导航链接

Bug编译狮

Bug编译狮

在 WordPress 中实现面包屑导航链接可以帮助用户更好地理解网站结构和当前位置。以下是如何在 WordPress 中添加面包屑导航链接的步骤。

步骤 1: 导入或创建新主题

首先，确保你有一个活跃的 WordPress 主题。如果你还没有主题，请根据自己的需求选择合适的主题并安装到你的 WordPress 网站中。

步骤 2: 打开主题文件夹

进入你的主题目录，通常位于 wp-content/themes/ 目录下。在这个目录中找到与页面相关的文件，例如 header.php 或 footer.php 文件。

步骤 3: 添加面包屑导航链接

打开你想添加面包屑导航链接的文件（比如 header.php）。你需要找到模板部分来插入新的代码。这可能看起来像这样：

<?php if ( is_home() ) : ?>
    <div class="breadcrumb">
        <span class="home">Home</span>
        <a href="<?php echo esc_url( home_url('/')); ?>">Previous Page</a>
        <?php
            $current_page = get_queried_object();
            $parent_id   = $current_page->term_id;
            $args         = array(
                'taxonomy' => 'category',
                'orderby'  => 'name',
                'order'    => 'ASC',
                'child_of' => $parent_id,
                'hierarchical' => true,
                'pad_counts' => false
            );
            $categories = get_categories($args);
        ?>
        <?php foreach ($categories as $category) { ?>
            <a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>"><?php echo $category->cat_name; ?></a>
            <?php if (!empty($category->parent)) { ?>
                <span>&rsaquo;</span>
                <?php } ?>
        <?php } ?>
        <span class="separator">&raquo;</span>
        <a href="<?php echo esc_url( home_url('/') ); ?>"><?php _e('Home'); ?></a>
    </div>
<?php elseif (is_single()) : ?>
    <!-- Single post template -->
    <div class="breadcrumb">
        <span class="single-post-title"><?php the_title(); ?></span>
        <a href="<?php echo esc_url( get_permalink( get_the_ID() )); ?>">Previous Post</a>
        <a href="<?php echo esc_url( home_url('/')); ?>">Next Post</a>
        <?php
            $post = get_post();
            $current_term = wp_get_post_terms($post->ID, 'category');
            $current_term_id = end($current_term)->term_id;
            $args = array(
                'taxonomy' => 'category',
                'orderby'  => 'name',
                'order'    => 'ASC',
                'child_of' => $current_term_id,
                'hierarchical' => true,
                'pad_counts' => false
            );
            $categories = get_categories($args);
        ?>
        <?php foreach ($categories as $category) { ?>
            <a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>"><?php echo $category->cat_name; ?></a>
            <?php if (!empty($category->parent)) { ?>
                <span>&rsaquo;</span>
                <?php } ?>
        <?php } ?>
        <span class="separator">&raquo;</span>
        <a href="<?php echo esc_url( home_url('/') ); ?>"><?php _e('Home'); ?></a>
    </div>
<?php endif; ?>

步骤 4: 安装插件（可选）

为了简化面包屑导航的管理，你可以考虑安装一些插件如“Breadcrumbs”或“Breadcrumb Menu”，这些插件可以自动处理面包屑导航的生成和样式设置。

示例代码解释

  • if ( is_home() ) 和 elseif (is_single()): 这些条件判断是否当前页面是首页还是单个文章页面。
  • get_queried_object(): 获取当前页面的分类对象。
  • get_category_link(): 根据类别 ID 返回分类链接。
  • get_category(): 获取所有子类别及其父类别的数组。
  • wp_get_post_terms(): 提取文章中的类别信息。
  • get_category_link(): 将类别 ID 转换为链接。

通过上述步骤，你可以在 WordPress 页面上成功地添加面包屑导航链接。这样不仅提升了用户体验，还使网站布局更加清晰有序。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

如何在 WordPress 中显示面包屑导航链接

教学目标：

  • 理解面包屑导航的基本概念。
  • 学习如何在 WordPress 主题或插件中添加面包屑导航功能。

教学内容：

  1. 面包屑导航简介：
    • 面包屑导航是一种用于网站结构展示的技术，它允许用户查看当前页面相对于首页的路径。
  2. 如何在 WordPress 中添加面包屑导航：
    • 使用主题自带的面包屑导航插件（如“WP Breadcrumb”）。
    • 自定义 HTML 代码来创建面包屑导航。
  3. 自定义面包屑导航样式：
    • 控制面包屑颜色、字体大小等外观属性。
  4. 面包屑导航与 SEO 的关系：
    • 如何使用面包屑导航提高网页的可见性。
  5. 高级主题设置：
    • 使用主题选项控制面包屑的显示位置和格式。

演示代码示例：

  1. 使用内置面包屑导航插件：

    // 获取当前页面 URL
$current_page_url = get_permalink();

// 获取上一级页面 URL
$parent_page_id = get_parent_post_id();
if ($parent_page_id) {
   $previous_page_url = get_permalink($parent_page_id);
} else {
   $previous_page_url = '';
}

// 创建面包屑导航数组
$breadcrumb = array(
   'url' => $current_page_url,
   'title' => get_the_title(),
);

// 将面包屑导航插入到页面顶部
echo '<ul class="breadcrumb">';
while (isset($breadcrumb['url'])) {
   echo '<li><a href="' . esc_url($breadcrumb['url']) . '">' . esc_html($breadcrumb['title']) . '</a></li>';
   $breadcrumb = wp_parse_args($breadcrumb, array('url' => '', 'title' => ''));
}
echo '</ul>';

  2. 自定义面包屑导航 HTML 代码：

    <nav aria-label="breadcrumb">
   <ol>
       <?php foreach ($breadcrumb as $key => $value): ?>
           <li><a href="<?php echo esc_url($value['url']); ?>"><?php echo esc_html($value['title']); ?></a></li>
       <?php endforeach; ?>
   </ol>
</nav>

  3. 面包屑导航样式调整：

    .breadcrumb li a {
   color: #007bff;
}

.breadcrumb li a:hover {
   color: #0069d9;
}

.breadcrumb li.active {
   font-weight: bold;
   color: #0069d9;
}

  4. 面包屑导航与 SEO 关系：

    • 在标题标签中包含面包屑导航可以改善搜索引擎对网站的抓取。
    • 通过关键词优化面包屑导航可以帮助提升搜索排名。

  5. 高级主题设置：

    • 在 WordPress 主题的“功能 > 插件管理”菜单下，选择并激活“WP Breadcrumb”插件。
    • 进入“设置”面板，调整面包屑的位置和样式。

结论：

通过上述步骤，您可以在 WordPress 中轻松地为您的站点添加面包屑导航，从而帮助用户更方便地理解网站结构。这不仅有助于提高用户体验，还能促进 SEO 能力的提升。

最新更新