概要
bcn_display_attributes
フィルタは、WordPressのBreadcrumb NavXTプラグインで使用され、パンくずリストの出力時に特定の要素に関連するHTML属性を変更するためのフックです。このフィルタは、パンくずリストの表示をカスタマイズしたい場合によく使用されます。主に以下のような機能を実装する際に応じて使用されます。
- パンくずリストのCSSクラスを変更
- 各リンクにデータ属性を追加
- JavaScriptと連携するための属性設定
- SEO用に特定の属性を設ける
- パンくず要素のスタイル調整のための属性追加
- フロントエンドのユーザビリティ向上のためのカスタマイズ
構文
add_filter('bcn_display_attributes', 'your_function_name', 10, 2);
パラメータ
$attributes
: 追加または変更したいHTML属性の連想配列。$item
: 現在のパンくず項目のオブジェクト。
戻り値
- 修正されたHTML属性の連想配列。
使用可能なプラグインとバージョン
- Breadcrumb NavXT(バージョン6.0.0以降)
使用可能なWordPressのバージョン
- WordPress 4.0以降
この関数のアクションでの使用可能性
アクション | 使用可能性 |
---|---|
mu_plugin_loaded | |
registered_post_type | |
plugins_loaded | |
wp_roles_init | |
setup_theme | |
after_setup_theme | |
set_current_user | |
init | |
register_sidebar | |
wp_loaded | |
send_headers | |
parse_query | |
pre_get_posts | |
wp | |
template_redirect | |
get_header | |
wp_head |
サンプルコード
サンプルコード1
add_filter('bcn_display_attributes', function($attributes, $item) {
if ($item->type === 'home') {
$attributes['class'] = 'breadcrumb-home';
}
return $attributes;
});
このコードは、パンくずリストのホーム項目に特定のCSSクラスを追加します。
サンプルコード2
add_filter('bcn_display_attributes', function($attributes, $item) {
if ($item->type === 'post') {
$attributes['data-custom'] = 'custom-value';
}
return $attributes;
});
このコードは、投稿タイプのパンくず要素にカスタムデータ属性を追加します。
サンプルコード3
add_filter('bcn_display_attributes', function($attributes, $item) {
$attributes['aria-label'] = 'breadcrumb for ' . esc_html($item->title);
return $attributes;
});
このコードは、パンくずリストの各要素に、アクセシビリティのためのaria-label
属性を追加します。
サンプルコード4
add_filter('bcn_display_attributes', function($attributes, $item) {
if ($item->type === 'category') {
$attributes['class'] = 'breadcrumb-category';
}
return $attributes;
});
このコードは、カテゴリタイプのパンくず要素に特定のCSSクラスを追加します。
サンプルコード5
add_filter('bcn_display_attributes', function($attributes, $item) {
$attributes['style'] = 'font-weight:bold;';
return $attributes;
});
このコードは、すべてのパンくず要素に太字スタイルを適用します。
これらのサンプルコードは、bcn_display_attributes
フィルタを利用して、パンくずリストの各要素に対して異なるHTML属性を追加または変更する方法を示しています。それぞれのコードを応用することで、使いやすいナビゲーションを提供できます。