wordpress - 带有子项列表(类别或页面)的自定义面包屑

标签 wordpress wordpress-theming custom-wordpress-pages

我目前正在构建我的第一个 WordPress 模板(使用 Bootstrap 4),我需要将面包屑集成到我的页面中。
我可以看到我们当前使用的主题也提供了面包屑,但由于这些是默认的面包屑,这还远远不够。
我的意思是,默认面包屑很简单:
主页/类别/子类别/页
我需要构建的更像是:
主页/类别/子类别/页面也是如此,但是当您将鼠标悬停在类别或子类别时,您应该会看到当前选定选项的子项。

e.g. hovering HOME will display the available categories:

Home / Category / Subcategory / Page
  |
Category A
Category B
Category C


Or, to see the other available subcategories, it will look like this:

Home / Category / Subcategory / Page
         |
       Subcategory A
       Subcategory B
       Subcategory C
我已经为静态页面构建了这个。代码如下所示:
<div class="d-none d-md-block">
     <div class="dropdown">
          <div class="dropdown-menu">
               <a class="dropdown-item" href="~/Category1">Category 1</a>
               <a class="dropdown-item" href="~/Category2">Category 2</a>
               <a class="dropdown-item" href="~/Category3">Category 3</a>
          </div>

          <a class="dropdown-toggle" data-toggle="dropdown">
             Home
          </a>
     </div>

     <div class="dropdown">
          <div class="dropdown-menu">
               <a class="dropdown-item" href="~/Catgeory4/SubCat1">SubCat 1</a>
               <a class="dropdown-item" href="~/Catgeory4/SubCat2">SubCat 2</a>
               <a class="dropdown-item" href="~/Catgeory4/SubCat3">SubCat 3</a>
               <a class="dropdown-item" href="~/Catgeory4/SubCat4">SubCat 4</a>
          </div>

          <a class="dropdown-toggle" data-toggle="dropdown">
             Category 4
          </a>
     </div>

     <a href="~/Catgeory4/SubCat2/Page" class="crumb active">Page</a>
</div>
问题是,这是我的第一个 WordPress 模板,而且我对 wordpress 特定的 php 只有一个基本概念:-[
因此,如果您知道提供这种结构的插件,我会很高兴使用它。
如果我必须在模板中构建它,我也很好..我只是不知道如何在这里开始,所以它会产生一段动态的代码......
PS(如果它确实有帮助的话):这是来自基本主题的当前 get_breadrumb 函数:
if ( ! function_exists( 'bizbuzz_get_breadcrumb' ) ) {
/**
 *  Header image / Slider.
 *
 * @since 1.0.0
 */
function bizbuzz_get_breadcrumb() {

    $enable_breadcrumb = bizbuzz_get_option( 'enable_breadcrumb' );
    if ( $enable_breadcrumb ) {
        $args = array(
            'separator'    => '>',
            'show_current' => 1,
            'show_on_home' => 0,
        );
        if ( is_home() || is_front_page() ) {

            if ( $args['show_on_home'] ) {
                ?>
                <div id="bizbuzz-breadcrumb">
                    <div class="rt-wrapper">
                        <?php bizbuzz_default_breadcrumb( $args ); ?>
                    </div>
                </div>
                <?php
            }
        } else {
            ?>
            <div id="bizbuzz-breadcrumb">
                <div class="rt-wrapper">
                    <?php bizbuzz_default_breadcrumb( $args ); ?>
                </div>
            </div>
            <?php
        }
     }
   }
}

最佳答案

试试这个代码,它在我身边工作。

function custom_breadcrumbs()
{
    // Set variables for later use
    $here_text        = __( 'You are currently here!' );
    $home_link        = home_url('/');
    $home_text        = __( 'Home' );
    $link_before      = '<span typeof="v:Breadcrumb">';
    $link_after       = '</span>';
    $link_attr        = ' rel="v:url" property="v:title"';
    $link             = $link_before . '<a' . $link_attr . ' href="%1$s">%2$s</a>' . $link_after;
    $delimiter        = ' &raquo; ';              // Delimiter between crumbs
    $before           = '<span class="current">'; // Tag before the current crumb
    $after            = '</span>';                // Tag after the current crumb
    $page_addon       = '';                       // Adds the page number if the query is paged
    $breadcrumb_trail = '';
    $category_links   = '';

    /** 
     * Set our own $wp_the_query variable. Do not use the global variable version due to 
     * reliability
     */
    $wp_the_query   = $GLOBALS['wp_the_query'];
    $queried_object = $wp_the_query->get_queried_object();

    // Handle single post requests which includes single pages, posts and attatchments
    if ( is_singular() ) 
    {
        /** 
         * Set our own $post variable. Do not use the global variable version due to 
         * reliability. We will set $post_object variable to $GLOBALS['wp_the_query']
         */
        $post_object = sanitize_post( $queried_object );

        // Set variables 
        $title          = apply_filters( 'the_title', $post_object->post_title );
        $parent         = $post_object->post_parent;
        $post_type      = $post_object->post_type;
        $post_id        = $post_object->ID;
        $post_link      = $before . $title . $after;
        $parent_string  = '';
        $post_type_link = '';

        if ( 'post' === $post_type ) 
        {
            // Get the post categories
            $categories = get_the_category( $post_id );
            if ( $categories ) {
                // Lets grab the first category
                $category  = $categories[0];

                $category_links = get_category_parents( $category, true, $delimiter );
                $category_links = str_replace( '<a',   $link_before . '<a' . $link_attr, $category_links );
                $category_links = str_replace( '</a>', '</a>' . $link_after,             $category_links );
            }
        }

        if ( !in_array( $post_type, ['post', 'page', 'attachment'] ) )
        {
            $post_type_object = get_post_type_object( $post_type );
            $archive_link     = esc_url( get_post_type_archive_link( $post_type ) );

            $post_type_link   = sprintf( $link, $archive_link, $post_type_object->labels->singular_name );
        }

        // Get post parents if $parent !== 0
        if ( 0 !== $parent ) 
        {
            $parent_links = [];
            while ( $parent ) {
                $post_parent = get_post( $parent );

                $parent_links[] = sprintf( $link, esc_url( get_permalink( $post_parent->ID ) ), get_the_title( $post_parent->ID ) );

                $parent = $post_parent->post_parent;
            }

            $parent_links = array_reverse( $parent_links );

            $parent_string = implode( $delimiter, $parent_links );
        }

        // Lets build the breadcrumb trail
        if ( $parent_string ) {
            $breadcrumb_trail = $parent_string . $delimiter . $post_link;
        } else {
            $breadcrumb_trail = $post_link;
        }

        if ( $post_type_link )
            $breadcrumb_trail = $post_type_link . $delimiter . $breadcrumb_trail;

        if ( $category_links )
            $breadcrumb_trail = $category_links . $breadcrumb_trail;
    }

    // Handle archives which includes category-, tag-, taxonomy-, date-, custom post type archives and author archives
    if( is_archive() )
    {
        if (    is_category()
             || is_tag()
             || is_tax()
        ) {
            // Set the variables for this section
            $term_object        = get_term( $queried_object );
            $taxonomy           = $term_object->taxonomy;
            $term_id            = $term_object->term_id;
            $term_name          = $term_object->name;
            $term_parent        = $term_object->parent;
            $taxonomy_object    = get_taxonomy( $taxonomy );
            $current_term_link  = $before . $taxonomy_object->labels->singular_name . ': ' . $term_name . $after;
            $parent_term_string = '';

            if ( 0 !== $term_parent )
            {
                // Get all the current term ancestors
                $parent_term_links = [];
                while ( $term_parent ) {
                    $term = get_term( $term_parent, $taxonomy );

                    $parent_term_links[] = sprintf( $link, esc_url( get_term_link( $term ) ), $term->name );

                    $term_parent = $term->parent;
                }

                $parent_term_links  = array_reverse( $parent_term_links );
                $parent_term_string = implode( $delimiter, $parent_term_links );
            }

            if ( $parent_term_string ) {
                $breadcrumb_trail = $parent_term_string . $delimiter . $current_term_link;
            } else {
                $breadcrumb_trail = $current_term_link;
            }

        } elseif ( is_author() ) {

            $breadcrumb_trail = __( 'Author archive for ') .  $before . $queried_object->data->display_name . $after;

        } elseif ( is_date() ) {
            // Set default variables
            $year     = $wp_the_query->query_vars['year'];
            $monthnum = $wp_the_query->query_vars['monthnum'];
            $day      = $wp_the_query->query_vars['day'];

            // Get the month name if $monthnum has a value
            if ( $monthnum ) {
                $date_time  = DateTime::createFromFormat( '!m', $monthnum );
                $month_name = $date_time->format( 'F' );
            }

            if ( is_year() ) {

                $breadcrumb_trail = $before . $year . $after;

            } elseif( is_month() ) {

                $year_link        = sprintf( $link, esc_url( get_year_link( $year ) ), $year );

                $breadcrumb_trail = $year_link . $delimiter . $before . $month_name . $after;

            } elseif( is_day() ) {

                $year_link        = sprintf( $link, esc_url( get_year_link( $year ) ),             $year       );
                $month_link       = sprintf( $link, esc_url( get_month_link( $year, $monthnum ) ), $month_name );

                $breadcrumb_trail = $year_link . $delimiter . $month_link . $delimiter . $before . $day . $after;
            }

        } elseif ( is_post_type_archive() ) {

            $post_type        = $wp_the_query->query_vars['post_type'];
            $post_type_object = get_post_type_object( $post_type );

            $breadcrumb_trail = $before . $post_type_object->labels->singular_name . $after;

        }
    }   

    // Handle the search page
    if ( is_search() ) {
        $breadcrumb_trail = __( 'Search query for: ' ) . $before . get_search_query() . $after;
    }

    // Handle 404's
    if ( is_404() ) {
        $breadcrumb_trail = $before . __( 'Error 404' ) . $after;
    }

    // Handle paged pages
    if ( is_paged() ) {
        $current_page = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : get_query_var( 'page' );
        $page_addon   = $before . sprintf( __( ' ( Page %s )' ), number_format_i18n( $current_page ) ) . $after;
    }

    $breadcrumb_output_link  = '';
    $breadcrumb_output_link .= '<div class="breadcrumb">';
    if (    is_home()
         || is_front_page()
    ) {
        // Do not show breadcrumbs on page one of home and frontpage
        if ( is_paged() ) {
            $breadcrumb_output_link .= $here_text . $delimiter;
            $breadcrumb_output_link .= '<a href="' . $home_link . '">' . $home_text . '</a>';
            $breadcrumb_output_link .= $page_addon;
        }
    } else {
        $breadcrumb_output_link .= $here_text . $delimiter;
        $breadcrumb_output_link .= '<a href="' . $home_link . '" rel="v:url" property="v:title">' . $home_text . '</a>';
        $breadcrumb_output_link .= $delimiter;
        $breadcrumb_output_link .= $breadcrumb_trail;
        $breadcrumb_output_link .= $page_addon;
    }
    $breadcrumb_output_link .= '</div><!-- .breadcrumbs -->';

    return $breadcrumb_output_link;
}
add_shortcode('custom_breadcrumbs','custom_breadcrumbs');
显示面包屑代码
echo do_shortcode('[custom_breadcrumbs]');

关于wordpress - 带有子项列表(类别或页面)的自定义面包屑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63339155/

相关文章:

css - Wordpress 子主题 css 优先级

一行 CSS,无法比较免费和付费主题文件

wordpress - 如何以编程方式将文章发布到 WordPress?

wordpress - 如何修复 Hugo CMS 中 `found no layout file for "` 的错误 "page"HTML”?

sql - Wordpress SQL 命令将作者 John Doe 的所有帖子设置为草稿

php - 根据 WooCommerce 中的特定订单备注完成订单

html - 网站右侧巨大的空白

wordpress - 改变可变产品价格woocommerce的风格

wordpress - 如何在 WP-admin UI 中隐藏高级自定义字段(ACF)?

wordpress - 如何显示自定义帖子类型的 Pod 数据