• Skip to primary navigation
  • Skip to main content

桓桓鄉寇

如果一開始沒有高牆,就沒有所謂的侵略了嗎?

  • 首頁
  • WordPress 筆記
  • 主機
  • 前端
  • 意見回饋
You are here: 首頁 / PHP / 在 Breadcrumbs NavXT 中加入 li 的屬性值

在 Breadcrumbs NavXT 中加入 li 的屬性值

2020-09-24 by Eric Chuang Leave a Comment

大家好,我是 Eric。

最近為了幫公司網站改版,改善導覽標記 (breadcrumb) 的顯示方式,重新讀了一次 Google 的官方文件。以下是 Google 提供的示範語法:

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

如果今天你使用的是 Breadcrumbs NavXT 這款外掛來製作導覽標記,會發現 Breadcrumbs NavXT 無法接收 li 的 itemprop、itemscope 與 itemtype 等屬性質。

此時,你可以透過 Breadcrumbs NavXT 提供的勾點 bcn_allowed_html 來加入相關的支援:

/**
 * Filters the KSES so that Breadcrumb NavXT can allow <li> with certain 
 * attributes.
 * 
 * @since 2.0.0
 * @param array $allowed_tags 
 * @link https://mtekk.us/archives/docs/bcn_allowed_html/
 */
add_filter( 'bcn_allowed_html', 'hyc_list_kses', 10, 1 );
function hyc_list_kses( $allowed_tags ){
	$allowed_tags['li'] = array(
		'class'     => array(),
		'id'        => array(),
		'itemprop'  => array(),
		'itemscope' => array(),
		'itemtype'  => array(),
	);
	return $allowed_tags;
}

參考資料

〈導覽標記〉

所屬分類: PHP, WordPress, WordPress 小功能, WordPress 筆記 標籤: breadcrumbs, SEO, WordPress

關於 Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

讀者互動

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料。

Copyright © 2021 · Genesis Sample on Genesis Framework · WordPress