博客 / WordPress/ WordPress非插件添加面包屑导航的方法

WordPress非插件添加面包屑导航的方法

WordPress非插件添加面包屑导航的方法

一、在主题的 functions.php 文件中添加面包屑导航代码

将以下代码添加到您当前主题的 functions.php 文件末尾。请注意,此代码适用于较新版本的 WordPress,并已修正了原始代码中的一些语法错误和潜在问题。

// 面包屑导航函数开始
function cmp_breadcrumbs() {
    $delimiter = '»'; // 分隔符
    $before = ''; // 当前页面前标记
    $after = ''; // 当前页面后标记
    if ( !is_home() && !is_front_page() || is_paged() ) {
        echo '
'; // 面包屑容器,样式可在主题的 style.css 中定义 global $post; $homeLink = home_url(); echo '首页 ' . esc_html($delimiter) . ' '; if ( is_category() ) { // 分类存档页 global $wp_query; $cat_obj = $wp_query->get_queried_object(); $thisCat = $cat_obj->term_id; $thisCat = get_category($thisCat); $parentCat = get_category($thisCat->parent); if ($thisCat->parent != 0) { $cat_code = get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '); echo str_replace('' . get_the_time('Y') . ' ' . esc_html($delimiter) . ' '; echo '' . get_the_time('F') . ' ' . esc_html($delimiter) . ' '; echo $before . get_the_time('d') . $after; } elseif ( is_month() ) { // 按月存档页 echo '' . get_the_time('Y') . ' ' . esc_html($delimiter) . ' '; echo $before . get_the_time('F') . $after; } elseif ( is_year() ) { // 按年存档页 echo $before . get_the_time('Y') . $after; } elseif ( is_single() && !is_attachment() ) { // 文章单页 if ( get_post_type() != 'post' ) { // 自定义文章类型 $post_type = get_post_type_object(get_post_type()); $slug = $post_type->rewrite; echo '' . $post_type->labels->singular_name . ' ' . esc_html($delimiter) . ' '; // 如需显示文章标题,请取消下一行的注释 // echo $before . get_the_title() . $after; } else { // 标准文章 $cat = get_the_category(); if ($cat) { $cat = $cat[0]; $cat_code = get_category_parents($cat, TRUE, ' ' . $delimiter . ' '); echo str_replace('labels->singular_name . $after; } elseif ( is_attachment() ) { // 附件页面 $parent = get_post($post->post_parent); $cat = get_the_category($parent->ID); if ($cat) { $cat = $cat[0]; echo '' . $parent->post_title . ' ' . esc_html($delimiter) . ' '; } echo $before . get_the_title() . $after; } elseif ( is_page() && !$post->post_parent ) { // 顶级页面 echo $before . get_the_title() . $after; } elseif ( is_page() && $post->post_parent ) { // 子页面 $parent_id = $post->post_parent; $breadcrumbs = array(); while ($parent_id) { $page = get_page($parent_id); $breadcrumbs[] = '' . get_the_title($page->ID) . ''; $parent_id = $page->post_parent; } $breadcrumbs = array_reverse($breadcrumbs); foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . esc_html($delimiter) . ' '; echo $before . get_the_title() . $after; } elseif ( is_search() ) { // 搜索结果页 echo $before; printf('关于“%s”的搜索结果', get_search_query()); echo $after; } elseif ( is_tag() ) { // 标签存档页 echo $before; printf('关于标签“%s”的资料', single_tag_title('', false)); echo $after; } elseif ( is_author() ) { // 作者存档页 global $author; $userdata = get_userdata($author); echo $before; printf('作者“%s”发布的资料', $userdata->display_name); echo $after; } elseif ( is_404() ) { // 404页面 echo $before; _e('页面未找到', 'cmp'); echo $after; } if ( get_query_var('paged') ) { // 分页 if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo sprintf( __(' (第 %s 页)', 'cmp'), get_query_var('paged') ); } echo '
'; } } // 面包屑导航函数结束

主要修正与说明:

  • 修正了多处 URL 拼接的语法错误(如 "'/" . $homeLink . "/" 的错误写法)。
  • 为所有输出的链接和动态内容添加了 esc_url()esc_html() 等安全转义函数,提升安全性。
  • 修正了函数名(应为 functions.php,而非 function.php)。
  • 在获取分类等数据前添加了条件判断,避免可能出现的未定义变量错误。
  • 将部分中文提示语调整为更通用的表述。

二、在主题模板中调用面包屑导航

在您希望显示面包屑导航的模板文件(例如 header.phpsingle.phppage.php)中,找到合适的位置(通常在标题上方),插入以下调用代码:

<?php if (function_exists('cmp_breadcrumbs')) cmp_breadcrumbs(); ?>

添加后,面包屑导航将根据当前页面类型(首页、文章、页面、分类等)动态生成链接路径。

自定义样式

面包屑导航的 HTML 结构被包裹在 <div id="nowplace"> 中。您可以通过在主题的 style.css 文件中添加 CSS 规则来美化其外观,例如:

#nowplace {
    font-size: 14px;
    margin: 15px 0;
    color: #666;
}
#nowplace a {
    color: #0073aa;
    text-decoration: none;
}
#nowplace a:hover {
    text-decoration: underline;
}
#nowplace .current {
    color: #333;
    font-weight: bold;
}

通过以上步骤,您无需安装插件即可为 WordPress 网站添加一个功能完整、可自定义的面包屑导航。

发表评论

您的邮箱不会公开。必填项已用 * 标注。