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

PetitQ WordPress教程 2022-11-04 1.25K 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 面包屑导航功能

已有 312 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

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

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

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

WordPress教程

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

代码实例

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

相关文章

WordPress子主题中覆盖父主题的函数功能

WordPress 批量为所有文章自动添加自定义字段

纯代码实现让 WordPress 只搜索文章标题排除文章内容

发表回复取消回复

热销模板

WordPress教程

代码实例

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复