为 Hestia 主题添加自定义的 Yoast 面包屑导航

WordPress 的 Hestia 主题支持 Yoast 面包屑导航，可以按照 Ref1 中的方法把面包屑添加到网站中。不过，在此基础上还能做得更多。

自定义 Yoast 面包屑

Yoast 面包屑的设置位于 SEO > Search Appearance > Breadcrumbs。Hestia 主题默认加载 font-awesome-solid（fas），因此可以在面包屑中使用 font-awesome 图标，而不会影响性能。

下面是我在网站的 Breadcrumbs settings 中所做的设置

<!--Separator between breadcrumbs     --><span style="color:#016087"><i class="fas fa-caret-right"></i></span> 
<!--Anchor text for the Homepage      --><i class="fas fa-home"></i>
<!--Prefix for the breadcrumb path    -->
<!--Prefix for Archive breadcrumbs    -->Archives for
<!--Prefix for Search Page breadcrumbs--><i class="fas fa-search"></i> for
<!--Breadcrumb for 404 Page           -->Error 404: Page not found

• [x] 勾选 "Show blog page"

• [ ] 取消勾选 "Bold the last page"

效果应该是这样的

在主题中添加面包屑代码

然后把下面的代码添加到主题或子主题的 functions.php 中。

面包屑代码

add_theme_support( 'yoast-seo-breadcrumbs' );

// Single post
add_action( 'hestia_before_single_post_wrap', 'add_yoast_breadcrumbs', 100 );
// Single page
add_action( 'hestia_before_page_content', 'add_yoast_breadcrumbs', 100 );
// Index
add_action( 'hestia_index_page_before_content', 'add_yoast_breadcrumbs', 100 );

function add_yoast_breadcrumbs() {
    if ( function_exists( 'yoast_breadcrumb' ) ) {
            global $wp_query;
            if( 0 == $wp_query->current_post ) {
                if ($wp_query->is_singular())
                {
                    yoast_breadcrumb( '<p id="breadcrumbs">','<a href="#comments"> <i class="fas fa-comment-dots"></i></a></p>' );
                } elseif ($wp_query->found_posts <= 1)
                {
                    yoast_breadcrumb( '<p id="breadcrumbs">','  <span style="color:#505050"><i class="fas fa-folder-open"></i> have ' . $wp_query->found_posts . ' post <i class="fas fa-grin"></i></span></p>' );
                } else {
                    yoast_breadcrumb( '<p id="breadcrumbs">','  <span style="color:#505050"><i class="fas fa-folder-open"></i> total ' . $wp_query->found_posts . ' posts <i class="fas fa-grin"></i></span></p>' );
                }
            }
    }
}

说明

add_theme_support

add_theme_support( 'yoast-seo-breadcrumbs' );

为主题添加 Yoast 面包屑支持，详见 Ref2。

add_action

// Single post
add_action( 'hestia_before_single_post_wrap', 'add_yoast_breadcrumbs', 100 );
// Single page
add_action( 'hestia_before_page_content', 'add_yoast_breadcrumbs', 100 );
// Index
add_action( 'hestia_index_page_before_content', 'add_yoast_breadcrumbs', 100 );

把动作（函数）挂到主题的钩子上。100 是优先级，默认值为 10，数值越小，优先级越高。

add_yoast_breadcrumbs

function add_yoast_breadcrumbs() {
    if ( function_exists( 'yoast_breadcrumb' ) ) {
            global $wp_query;
            if( 0 == $wp_query->current_post ) {
                if ($wp_query->is_singular())
                {
                    yoast_breadcrumb( '<p id="breadcrumbs">','<a href="#comments"> <i class="fas fa-comment-dots"></i></a></p>' );
                } elseif ($wp_query->found_posts <= 1)
                {
                    yoast_breadcrumb( '<p id="breadcrumbs">','  <span style="color:#505050"><i class="fas fa-folder-open"></i> have ' . $wp_query->found_posts . ' post <i class="fas fa-grin"></i></span></p>' );
                } else {
                    yoast_breadcrumb( '<p id="breadcrumbs">','  <span style="color:#505050"><i class="fas fa-folder-open"></i> total ' . $wp_query->found_posts . ' posts <i class="fas fa-grin"></i></span></p>' );
                }
            }
    }
}

首先，用 $wp_query->current_post 只选取页面里的第一篇文章，防止同一页面出现重复的面包屑。

然后，用 $wp_query->is_singular 判断当前项是页面还是文章。

如果是文章，就显示面包屑和指向评论区的链接。

否则当前项是页面，显示面包屑和该页面中的文章数。

Reference Links

在 Hestia 中添加 Yoast 面包屑（Add Yoast breadcrumbs in Hestia）

为主题添加 Yoast SEO 面包屑支持（Add theme support for Yoast SEO breadcrumbs）