在没有插件的情况下创建面包屑

时间:2018-06-17 05:34:05

标签: wordpress breadcrumbs

当我们点击主菜单的任何页面时,如何创建面包屑home->page->post名称,打开当时面包屑创建的帖子列表home ->page将其命名为ok但现在当我们点击任何帖子时breadcrumb创建home->post类别name->post名称是当我们点击痕迹栏布局上的帖子类别名称时显示的不同我们想要的是页面链接,而不是类别链接。所以当我们打开任何帖子时我们需要创建像这个home->page name->post名称一样的面包屑,所以当我们点击页面名称时打开帖子列表页面,而不是类别页面。

2 个答案:

答案 0 :(得分:6)

WordPress不提供内置面包屑功能。因此,您必须使用插件或自行编码(或从下面的参考文献中复制)。

事实上,如果提供类似的功能,插件或自定义代码没有多大区别。因此,使用更方便的一个。

如果您想添加自定义代码,请参阅以下两种资源:

https://www.techpulsetoday.com/wordpress-breadcrumbs-without-plugin/

https://www.thewebtaylor.com/articles/wordpress-creating-breadcrumbs-without-a-plugin

https://www.codexworld.com/wordpress-how-to-display-breadcrumb-without-plugin/

https://gist.github.com/tinotriste/5387124

您可以查看它们并根据需要进行修改!

我希望它有所帮助!

答案 1 :(得分:3)

这是我的两分钱。年份是 2021 年。

为了我的爱,我无法理解一个带有大量粘贴链接且没有实际代码的答案(如果您可以称其为答案)如何获得如此多的赞成票。

常规的面包屑方法未经优化,大部分方法(插件等)都不适合自定义主题。

<头>
版本
至少需要 WordPress: 5.6.0
需要 PHP: 8.0
经过 WordPress 测试: 5.7.2

我决定构建一个基于 URL 的面包屑导航,它更高效,并且适用于具有基本 css 知识的任何主题。

我想要一些通用的,没有任何默认样式的东西,我可以在任何主题的任何地方使用,而无需考虑页面层次结构。

它需要对 SEO 友好并正确处理帖子和页面标题。

尽管我正在努力使这篇文章保持最新,但我的 GitHub 上始终以非官方插件的形式提供最新版本。

显示面包,格式化的面包屑列表。


<?php

if ( ! function_exists( 'the_bread' ) ) {

    /**
     * Display the bread, a formatted crumbs list.
     * 
     * @since 1.0.0
     * 
     * @param Array $ingredients[separator] The crumb's separator. Default to >.
     * @param Array $ingredients[offset] Crumbs offset. Accept positive/negative Integer. Default to 0. Refer to array_slice. https://www.php.net/manual/en/function.array-slice.php.
     * @param Array $ingredients[length] Crumbs length. Accept positive/negative Integer. Default to null. Refer to array_slice. https://www.php.net/manual/en/function.array-slice.php.
     * 
     * @return Array Formated crumbs list.
     */
    function the_bread(
        $ingredients = [
            'separator' => '>',
            'offset' => 0,
            'length' => null,
        ]
    ) { 

        $flour = $_SERVER['REQUEST_URI'];

        if ( str_contains( $flour, '?' ) )
            $flour = substr( $flour, 0, strpos( $flour, '?' ) );

        $flour = ( str_ends_with( $flour, '/' ) ? explode( '/', substr( $flour, 1, -1 ) ) : explode( '/', substr( $flour, 1 ) ) );

        $crumbs = [];

        foreach ( $flour as $crumb ) {

            $slug = esc_html( $crumb );

            $url = esc_url( $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . '/' . substr( implode( '/', $flour ), 0, strpos( implode( '/', $flour ), $crumb ) ) . $crumb. '/' );

            array_push( $crumbs, ( object )
                [
                    'slug' => $slug,
                    'url' => $url,
                ]
            );

        };

        $offset =  ( empty( $ingredients['offset'] ) ? 0 : $ingredients['offset'] );
        $length =  ( empty( $ingredients['length'] ) ? null : $ingredients['length'] );

        $crumbs = array_slice( $crumbs, $offset, $length );

        echo '<ol class="? bread" itemscope itemtype="https://schema.org/BreadcrumbList">';

        $i = 0;
        foreach ( $crumbs as $crumb ) {
            $i++;

            echo '<li class="crumb" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                <a itemprop="item" href="' . $crumb->url . '">
                    <span itemprop="name">' . ( url_to_postid( $crumb->url ) ? get_the_title( url_to_postid( $crumb->url ) ) : ucfirst( str_replace( '-', ' ', $crumb->slug ) ) ) . '</span>
                </a>
                <meta itemprop="position" content="' . $i . '">
            </li>';

            if ( $i !== sizeof( $crumbs ) && ! empty( $ingredients['separator'] ) )
                echo $ingredients['separator'];

        };

        echo '</ol>';

    };

};

参数

<头>
参数 说明
$ingredients (可选)用于显示面包的参数数组。
'separator' 面包屑的分隔符。默认为 >
'offset' 面包屑偏移。接受正/负整数。默认为 0。请参阅array_slice
'length' 面包屑长度。接受正/负整数。默认为 null。请参阅array_slice

示例:带有自定义分隔符的面包屑

<?php

$ingredients = array(
    'separator' => '→',
);

the_bread( $ingredients );

示例:仅显示最后 3 个面包屑

<?php

$ingredients = array(
    'offset' => -3,
    'length' => 3,
);

the_bread( $ingredients );

帖子和页面标题处理

在某些情况下,例如,在帖子或页面标题中使用撇号时,碎屑可能无法反映实际标题。将 url_to_postid() 函数与 get_the_title() 函数结合使用,我们可以将 crumb URL 转换为其匹配的帖子或页面磁贴。这由 the_bread() 函数自动处理。

HTML5 结构输出

<ol class="? bread" itemscope="" itemtype="https://schema.org/BreadcrumbList">
    <li class="crumb" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="http://example.com/where/">
            <span itemprop="name">Where</span>
        </a>
        <meta itemprop="position" content="1">
    </li>
    >
    <li class="crumb" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="http://example.com/where/is/">
            <span itemprop="name">Is</span>
        </a>
        <meta itemprop="position" content="2">
    </li>
    >
    <li class="crumb" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="http://example.com/where/is/my/">
            <span itemprop="name">My</span>
        </a>
        <meta itemprop="position" content="3">
    </li>         
    >
    <li class="crumb" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="http://example.com/where/is/my/bread/">
            <span itemprop="name">Bread</span>
        </a>
        <meta itemprop="position" content="4">
    </li>
</ol>

造型

  • <ol> 标签带有 css 类,?bread (fallback)
  • 每个 <li> 标签都带有类 crumb

最小的 css 样板(可选)

.?,
.bread {
  list-style-type: none;
  margin:0;
  padding:0;
}

.? li,
.bread li {
  display: inline-block;
}

.? li.crumb:last-child a,
.bread li.crumb:last-child a {
  text-decoration: none;
  pointer-events: none;
  color: inherit;
}

案例处理,重定向到 404 的类别/自定义分类法


由于 WordPress 不会生成类别/自定义分类法根页面,因此面包屑将重定向到 404。

您可以创建一个以您的类别/自定义分类标号命名的页面,并将其用作术语索引,方法是创建自定义页面模板并遍历它们。

相关问题