代码添加 WordPress 面包屑导航功能

PetitQ WordPress教程 2022-11-04 976 0 0

网站导航不足会导致不良的用户体验（UX）和跳出率上升。您的主菜单可能需要一些补充功能，以帮助用户筛选您的内容，例如 WordPress 面包屑导航。面包屑（其名称源自 Hansel 和 Gretel 的童话故事）向用户显示了他们通过您的文章和页面所经过的路径。他们留下了一些易于访问的链接，以引导访问者回到他们的来路。在本文中，我们将进一步探讨什么是面包屑导航，以及为什么应将它们包含在 WordPress 网站中。我们还将深入探讨如何添加面包屑导航，包括代码方案和插件方案。

面包屑是导航是一系列连接的导航链接，这些链接显示了您浏览网站页面的路径。它们在您浏览站点时出现，并形成一个层次结构，该层次结构从您访问的第一页开始，随后是每个后续页面。他们的主要目的是使用户能够轻松地回溯，从而改善站点的 UX，除此以外，面包屑导航对于整体网站体验和 SEO 都有好处。

也想出现在这里？联系我们吧

增强的导航功能可能会降低跳出率，因为用户可以更轻松地找到所需内容。例如，当搜索产品，类别，品牌，价格等内容时，电子商务站点可能很快就变成一个兔子洞。通常的导航栏菜单可能会使用户走得比需要的更远，因此提供面包屑更有意义。这样一来，他们可以回退到特定类别或搜索前的界面。如前所述，面包屑还可以提高您网站的 SEO。他们通过协助搜索引擎浏览页面并了解其层次结构和链接结构。

代码实例

如果您的主题没有面包屑功能，您也可以自己实现该功能。这涉及编辑当前主题的 functions.php 文件。跳到此方法之前，请确保为您的站点创建备份。这样，如果发生故障，您可以回滚到干净的版本。您还应该使用子主题，以防止主题更新期间所做的更改被覆盖。将以下代码添加到现用主题的 functions.php 文件中：

```
function ah_breadcrumb() {
```
```
 
```

  // Check if is front/home page, return

```
  if ( is_front_page() ) {
```
```
    return;
```
```
  }
```
```
 
```
```
  // Define
```
```
  global $post;
```

  $custom_taxonomy  = ''; // If you have custom taxonomy place it here

```
 
```
```
  $defaults = array(
```
```
    'seperator'   =>  '»',
```
```
    'id'          =>  'ah-breadcrumb',
```
```
    'classes'     =>  'ah-breadcrumb',
```

    'home_title'  =>  esc_html__( 'Home', '' )

```
  );
```
```
 
```

  $sep  = '<li class="seperator">'. esc_html( $defaults['seperator'] ) .'</li>';

```
 
```

  // Start the breadcrumb with a link to your homepage

  echo '<ul id="'. esc_attr( $defaults['id'] ) .'" class="'. esc_attr( $defaults['classes'] ) .'">';

```
 
```
```
  // Creating home link
```

  echo '<li class="item"><a href="'. get_home_url() .'">'. esc_html( $defaults['home_title'] ) .'</a></li>' . $sep;

```
 
```
```
  if ( is_single() ) {
```
```
 
```
```
    // Get posts type
```
```
    $post_type = get_post_type();
```
```
 
```
```
    // If post type is not post
```
```
    if( $post_type != 'post' ) {
```
```
 
```

      $post_type_object   = get_post_type_object( $post_type );

      $post_type_link     = get_post_type_archive_link( $post_type );

```
 
```

      echo '<li class="item item-cat"><a href="'. $post_type_link .'">'. $post_type_object->labels->name .'</a></li>'. $sep;

```
 
```
```
    }
```
```
 
```
```
    // Get categories
```

    $category = get_the_category( $post->ID );

```
 
```
```
    // If category not empty
```
```
    if( !empty( $category ) ) {
```
```
 
```

      // Arrange category parent to child

      $category_values      = array_values( $category );

      $get_last_category    = end( $category_values );

      // $get_last_category    = $category[count($category) - 1];

      $get_parent_category  = rtrim( get_category_parents( $get_last_category->term_id, true, ',' ), ',' );

      $cat_parent           = explode( ',', $get_parent_category );

```
 
```

      // Store category in $display_category

```
      $display_category = '';
```
```
      foreach( $cat_parent as $p ) {
```

        $display_category .=  '<li class="item item-cat">'. $p .'</li>' . $sep;

```
      }
```
```
 
```
```
    }
```
```
 
```

    // If it's a custom post type within a custom taxonomy

    $taxonomy_exists = taxonomy_exists( $custom_taxonomy );

```
 
```

    if( empty( $get_last_category ) && !empty( $custom_taxonomy ) && $taxonomy_exists ) {

```
 
```

      $taxonomy_terms = get_the_terms( $post->ID, $custom_taxonomy );

      $cat_id         = $taxonomy_terms[0]->term_id;

      $cat_link       = get_term_link($taxonomy_terms[0]->term_id, $custom_taxonomy);

      $cat_name       = $taxonomy_terms[0]->name;

```
 
```
```
    }
```
```
 
```

    // Check if the post is in a category

    if( !empty( $get_last_category ) ) {

```
 
```
```
      echo $display_category;
```

      echo '<li class="item item-current">'. get_the_title() .'</li>';

```
 
```
```
    } else if( !empty( $cat_id ) ) {
```
```
 
```

      echo '<li class="item item-cat"><a href="'. $cat_link .'">'. $cat_name .'</a></li>' . $sep;

      echo '<li class="item-current item">'. get_the_title() .'</li>';

```
 
```
```
    } else {
```
```
 
```

      echo '<li class="item-current item">'. get_the_title() .'</li>';

```
 
```
```
    }
```
```
 
```
```
  } else if( is_archive() ) {
```
```
 
```
```
    if( is_tax() ) {
```
```
      // Get posts type
```
```
      $post_type = get_post_type();
```
```
 
```
```
      // If post type is not post
```
```
      if( $post_type != 'post' ) {
```
```
 
```

        $post_type_object   = get_post_type_object( $post_type );

        $post_type_link     = get_post_type_archive_link( $post_type );

```
 
```

        echo '<li class="item item-cat item-custom-post-type-' . $post_type . '"><a href="' . $post_type_link . '">' . $post_type_object->labels->name . '</a></li>' . $sep;

```
 
```
```
      }
```
```
 
```

      $custom_tax_name = get_queried_object()->name;

      echo '<li class="item item-current">'. $custom_tax_name .'</li>';

```
 
```
```
    } else if ( is_category() ) {
```
```
 
```

      $parent = get_queried_object()->category_parent;

```
 
```
```
      if ( $parent !== 0 ) {
```
```
 
```

        $parent_category = get_category( $parent );

        $category_link   = get_category_link( $parent );

```
 
```

        echo '<li class="item"><a href="'. esc_url( $category_link ) .'">'. $parent_category->name .'</a></li>' . $sep;

```
 
```
```
      }
```
```
 
```

      echo '<li class="item item-current">'. single_cat_title( '', false ) .'</li>';

```
 
```
```
    } else if ( is_tag() ) {
```
```
 
```
```
      // Get tag information
```

      $term_id        = get_query_var('tag_id');

```
      $taxonomy       = 'post_tag';
```

      $args           = 'include=' . $term_id;

      $terms          = get_terms( $taxonomy, $args );

      $get_term_name  = $terms[0]->name;

```
 
```
```
      // Display the tag name
```

      echo '<li class="item-current item">'. $get_term_name .'</li>';

```
 
```
```
    } else if( is_day() ) {
```
```
 
```
```
      // Day archive
```
```
 
```
```
      // Year link
```

      echo '<li class="item-year item"><a href="'. get_year_link( get_the_time('Y') ) .'">'. get_the_time('Y') . ' Archives</a></li>' . $sep;

```
 
```
```
      // Month link
```

      echo '<li class="item-month item"><a href="'. get_month_link( get_the_time('Y'), get_the_time('m') ) .'">'. get_the_time('M') .' Archives</a></li>' . $sep;

```
 
```
```
      // Day display
```

      echo '<li class="item-current item">'. get_the_time('jS') .' '. get_the_time('M'). ' Archives</li>';

```
 
```
```
    } else if( is_month() ) {
```
```
 
```
```
      // Month archive
```
```
 
```
```
      // Year link
```

      echo '<li class="item-year item"><a href="'. get_year_link( get_the_time('Y') ) .'">'. get_the_time('Y') . ' Archives</a></li>' . $sep;

```
 
```
```
      // Month Display
```

      echo '<li class="item-month item-current item">'. get_the_time('M') .' Archives</li>';

```
 
```
```
    } else if ( is_year() ) {
```
```
 
```
```
      // Year Display
```

      echo '<li class="item-year item-current item">'. get_the_time('Y') .' Archives</li>';

```
 
```
```
    } else if ( is_author() ) {
```
```
 
```
```
      // Auhor archive
```
```
 
```
```
      // Get the author information
```
```
      global $author;
```

      $userdata = get_userdata( $author );

```
 
```
```
      // Display author name
```

      echo '<li class="item-current item">'. 'Author: '. $userdata->display_name . '</li>';

```
 
```
```
    } else {
```
```
 
```

      echo '<li class="item item-current">'. post_type_archive_title('', false) .'</li>';

```
 
```
```
    }
```
```
 
```
```
  } else if ( is_page() ) {
```
```
 
```
```
    // Standard page
```
```
    if( $post->post_parent ) {
```
```
 
```
```
      // If child page, get parents
```

      $anc = get_post_ancestors( $post->ID );

```
 
```
```
      // Get parents in the right order
```
```
      $anc = array_reverse( $anc );
```
```
 
```
```
      // Parent page loop
```

      if ( !isset( $parents ) ) $parents = null;

```
      foreach ( $anc as $ancestor ) {
```
```
 
```

        $parents .= '<li class="item-parent item"><a href="'. get_permalink( $ancestor ) .'">'. get_the_title( $ancestor ) .'</a></li>' . $sep;

```
 
```
```
      }
```
```
 
```
```
      // Display parent pages
```
```
      echo $parents;
```
```
 
```
```
      // Current page
```

      echo '<li class="item-current item">'. get_the_title() .'</li>';

```
 
```
```
    } else {
```
```
 
```

      // Just display current page if not parents

      echo '<li class="item-current item">'. get_the_title() .'</li>';

```
 
```
```
    }
```
```
 
```
```
  } else if ( is_search() ) {
```
```
 
```
```
    // Search results page
```

    echo '<li class="item-current item">Search results for: '. get_search_query() .'</li>';

```
 
```
```
  } else if ( is_404() ) {
```
```
 
```
```
    // 404 page
```

    echo '<li class="item-current item">' . 'Error 404' . '</li>';

```
 
```
```
  }
```
```
 
```
```
  // End breadcrumb
```
```
  echo '</ul>';
```
```
 
```
```
}
```

然后，您还需要将以下行添加到主题的 header.php 文件中：

第一个片段将面包屑添加到您的主题。第二个“调用”相关功能，以便导航链接出现在页眉中。请注意，您可能需要删除开头的搜索外观。

启用面包屑后，您将可以访问用于配置它们的多个选项。在大多数情况下，默认设置就足够了。但是，请随时进行更改以适合您的口味。之后，单击“ 保存更改”按钮。如果您的主题不支持面包屑，则仍需要包含一些代码以完成启用它们。在您的子主题的 header.php 文件末尾添加以下代码段：

```
<?php
```

if ( function_exists('yoast_breadcrumb') ) {

  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );

```
}
```
```
?>
```

面包屑导航可以作为 WordPress 网站上主要导航菜单的必要补充。这个漂亮的功能改善了您网站的用户体验，并帮助搜索引擎了解您的内容及其整体结构。

代码添加 WordPress 面包屑导航功能

已有 244 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

WordPress教程

代码添加 WordPress 面包屑导航功能

代码实例

代码添加 WordPress 面包屑导航功能

相关文章

WordPress 后台加速缓存插件 WP Admin Cache 使用教程

为导航菜单添加个性图标字体

WordPress 编辑器复制粘贴上传图片

发表回复取消回复

热销模板

WordPress教程

代码实例

代码添加 WordPress 面包屑导航功能

相关文章

发表回复 取消回复

热销模板

发表回复取消回复