WordPress面包屑导航怎么做(3种方法教会你)

WordPress面包屑导航怎么做?3种方法教会你

在 WordPress 中添加面包屑的初学者指南,不充分的网站导航会导致糟糕的用户体验 (UX) 和跳出率增加。您的主菜单可能需要一些补充功能来帮助用户筛选您的内容,例如 WordPress 面包屑。

面包屑 - 其名称源自 Hansel 和 Gretel 的童话故事 - 向用户展示他们浏览您的帖子和页面的路径。他们留下了一系列易于访问的链接,以引导访问者回到他们来的地方。

在本文中,我们将进一步探讨面包屑是什么以及为什么您应该将它们包含在您的 WordPress 网站中。我们还将深入探讨如何使用和不使用插件添加它们。让我们跳进去!

了解 WordPress 面包屑以及为什么要使用它们

面包屑是一系列连接的导航链接,显示您浏览网站页面的路径。它们在您浏览站点时出现并形成一个层次结构,从您访问的第一个页面开始,然后是每个后续站点。

面包屑通常显示在页面顶部以便于访问:

Wordpress面包屑导航怎么做(3种方法教会你)

它们的主要目的是使用户能够轻松回溯,改善您网站的用户体验。但是,面包屑对整体网站体验和 SEO 都有好处。

增强的导航可能会降低跳出率,因为用户可以更轻松地找到他们正在寻找的内容。例如,电子商务网站在搜索产品、类别、品牌、价格等时很快就会变成一个兔子洞。

通常的导航栏菜单可能会将用户带回不必要的距离,因此提供面包屑更有意义。然后,这使他们能够仅在使他们回到特定类别或搜索所需的范围内回溯他们的步骤。

如前所述,面包屑也可以提高您网站的 SEO。他们通过协助搜索引擎浏览您的页面并了解它们的层次结构和链接结构来实现这一点,无论您发布了多少内容。

如何将 WordPress 面包屑添加到您的网站(3 种方法)

让我们来看看在您的网站上启用面包屑导航的三种方法。尽管它们都达到了相似的效果,但在难度和便利性方面却有所不同。哪种解决方案最适合您将取决于您的需求。

1. 选择一个包含面包屑的主题

可以说,以面包屑添加到你的网站最简单的方法是通过安装带有此功能的内置主题。这些主题的例子包括Flatsome和店主。

如果您对直接编辑主题文件感到不舒服,或者您不想安装新插件,这可能是您的最佳选择。但是,在已建立的网站上切换主题可能很困难,并且通常需要在某种程度上进行品牌重塑。

此外,您可能找不到既适合您的口味又具有面包屑功能的主题。如果是这种情况,您将需要探索以下其他方法之一。

2. 通过自定义代码实现面包屑

如果您的主题没有面包屑功能,您也可以自己实现该功能。这涉及编辑当前主题的functions.php文件。

在开始使用此方法之前,请确保为您的站点创建备份。这样,如果出现问题,您可以回滚到干净的版本。您还应该使用子主题来防止您的更改在主题更新期间被覆盖。

您还需要考虑熟悉微数据,以帮助您获得面包屑导航的全部 SEO 优势。Google 有一些关于如何实现BreadcrumbList 架构的示例

可以通过三种方式访问​​您的主题文件,以便您可以对其进行编辑:

  • 使用文件传输协议 (FTP) 和 FTP 客户端(例如FileZilla)连接到您的服务器。
  • 使用您的网络主机的文件管理器工具,该工具应该可以从您的帐户仪表板访问。
  • 通过导航到外观 > 主题编辑器来访问 WordPress 的内置代码编辑

网上有很多关于如何为 WordPress编码面包屑的示例。您可以自由地进行一些研究并根据您喜欢的方式进行工作。但是,如果您正在寻找快速修复方法,可以将以下代码添加到活动主题的functions.php文件中:

<?php
// WordPress Breadcrumb Function
// Add this code into your theme function file.

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() .'</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文件中:

<?php
// Call the breadcrumb function where you want to display

ah_breadcrumb();

第一个片段为您的主题添加面包屑。第二个“调用”相关函数,以便导航链接出现在您的标题中。请注意,您可能需要删除此代码的开头<?php才能使用主题的现有文件。

根据您对代码的熟练程度,您可以编写自定义函数来在您的网站上启用面包屑导航。您还可以使用 CSS 修改它们的外观。

3. 使用插件添加面包屑

向 WordPress 站点添加面包屑功能的最后一种方法需要使用插件。有专门的工具可用于此,例如Breadcrumb NavXT。

或者,您可能已经在使用Yoast SEO。如果是这样,这个插件还提供了一种启用面包屑的方法。这并不奇怪,因为我们已经注意到此功能可以提高您网站的 SEO。

我们将继续向您展示该过程如何与 Yoast SEO 配合使用。首先,您需要安装并激活它。接下来,导航到SEO > 搜索外观

在这里,从面包屑选项卡启用面包屑功能:

Wordpress面包屑导航怎么做(3种方法教会你)启用面包屑导航后,您将可以访问多个用于配置它们的选项。在大多数情况下,默认设置就足够了。但是,您可以随意进行更改以适合您的口味。之后,单击“保存更改”按钮。

如果您的主题不支持面包屑,您仍然需要包含一些代码来完成启用它们。在子主题的header.php文件末尾添加此代码段:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

请注意,您可能不需要包含<?php?>标签,具体取决于您的主题。此外,您可以在其中包含上述代码的其他一些文件是single.phppage.php,就在页面标题之后。

结论

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

回顾一下,您可以通过以下三种方式在 WordPress 中添加面包屑:

  1. 安装包含面包屑的主题。
  2. 通过编辑主题的functions.php文件来实现面包屑导航。
  3. 使用插件,例如Yoast SEO或Breadcrumb NavXT。

您对在 WordPress 中实现面包屑有任何疑问吗?在下面的评论部分让我们知道!

版权声明:363导航网 发表于 2021-12-23 13:18:50。
转载请注明:WordPress面包屑导航怎么做(3种方法教会你) | 363导航网

暂无评论

暂无评论...