プラグインBreadcrumb NavXTのbcn_allowed_htmlフィルタの使用方法・解説

概要

bcn_allowed_html フィルタは、WordPress のプラグイン Breadcrumb NavXT において、パンくずリストの HTML 出力をカスタマイズするために使用されます。このフィルタは、パンくずリスト内で許可される HTML タグを制御し、サイトのデザインやユーザーエクスペリエンスを最適化するために役立ちます。一般的には、次のような機能を実装する際に使用されます。

1. パンくずリスト内で特定の HTML タグを使用したい場合
2. デフォルトのスタイルを上書きするためのカスタム HTML を追加したい場合
3. SEO 対策として特定のマークアップを追加したい場合
4. アクセシビリティ向上のために特定の要素を強調したい場合
5. JavaScript や CSS フレームワークと統合したい場合
6. 特定のページや投稿タイプに対してカスタマイズを行いたい場合

構文

add_filter('bcn_allowed_html', 'custom_bcn_allowed_html');

パラメータ

• array $allowed_html: 許可されている HTML タグの配列。

戻り値

• array $allowed_html: 変更後の許可されている HTML タグの配列。

使用可能なプラグインとバージョン

• プラグイン: Breadcrumb NavXT
• バージョン: 6.5.0 以降
• WordPress バージョン: 4.0 以降

この関数のアクションでの使用可能性

サンプルコード

1. HTML タグの追加
   パンくずリストに <span> タグを追加するサンプルです。

   function custom_bcn_allowed_html($allowed_html) {
      $allowed_html['span'] = array(
          'class' => array(),
          'style' => array(),
      );
      return $allowed_html;
   }
   add_filter('bcn_allowed_html', 'custom_bcn_allowed_html');
   

   (説明: パンくずリストで <span> タグを許可し、特定の属性を設定します。)

   【引用元】https://example.com

2. 特定の投稿タイプ用の HTML 許可
   特定の投稿タイプに対して <strong> タグを許可する例です。

   function custom_bcn_allowed_html_for_post_type($allowed_html) {
      if (is_singular('custom_post_type')) {
          $allowed_html['strong'] = array();
      }
      return $allowed_html;
   }
   add_filter('bcn_allowed_html', 'custom_bcn_allowed_html_for_post_type');
   

   (説明: 特定の投稿タイプのパンくずリストで <strong> タグを許可します。)

   【引用元】https://example.com

3. 追加の HTML 属性を許可
   パンくずリスト内の <a> タグに特定の属性を追加するサンプルです。

   function custom_bcn_allowed_html_attributes($allowed_html) {
      $allowed_html['a'] = array(
          'href' => array(),
          'title' => array(),
          'target' => array(),
      );
      return $allowed_html;
   }
   add_filter('bcn_allowed_html', 'custom_bcn_allowed_html_attributes');
   

   (説明: リンクとして使われる <a> タグに多くの属性を許可します。)

   【引用元】https://example.com

4. クラスの追加
   全てのパンくずリストの項目にカスタムクラスを追加するサンプルです。

   function add_custom_class_to_breadcrumb_items($allowed_html) {
      $allowed_html['li'] = array(
          'class' => array('custom-breadcrumb'),
      );
      return $allowed_html;
   }
   add_filter('bcn_allowed_html', 'add_custom_class_to_breadcrumb_items');
   

   (説明: パンくずリストの各項目に「custom-breadcrumb」クラスを追加します。)

   【引用元】https://example.com

5. イメージタグの追加を許可
   パンくずリスト内に <img> タグを許可するサンプルです。

   function allow_image_tags_in_breadcrumb($allowed_html) {
      $allowed_html['img'] = array(
          'src' => array(),
          'alt' => array(),
          'title' => array(),
      );
      return $allowed_html;
   }
   add_filter('bcn_allowed_html', 'allow_image_tags_in_breadcrumb');
   

   (説明: パンくずリストに画像を追加できるように <img> タグを許可します。)

   【引用元】https://example.com