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

概要

bcn_display_attribute_arrayフィルタは、WordPressのプラグイン「Breadcrumb NavXT」において、パンくずリストの属性をカスタマイズするために使用されます。このフィルタを利用することで、パンくずリストの各要素に対するHTML属性を追加・変更したり、特定の条件に応じたスタイルを適用することができます。たとえば、CSSクラスを追加したり、データ属性を設定したりするのに便利です。このフィルタは、特に以下のような機能を実装する際に活用されます。

パンくずリストのデザイン調整
SEO対策のためのデータ属性追加
特定のトピックに関連するページのカスタムスタイリング
JavaScriptによる動的操作を考慮した属性追加
ユーザーインターフェースの改善
アクセシビリティ向上のための属性設定

構文

add_filter('bcn_display_attribute_array', 'custom_bcn_display_attributes', 10, 2);

パラメータ

$att：既存の属性の配列。
$trail：現在のトレイル（パンくずリスト要素）。

戻り値

フィルタ処理後の属性の配列。

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

プラグイン名: Breadcrumb NavXT
バージョン: 6.0以上
ワードプレスのバージョン: 5.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_attribute_array', 'add_custom_css_class', 10, 2);
function add_custom_css_class($att, $trail) {
    $att['class'] = 'my-custom-class'; // カスタムCSSクラスを追加
    return $att;
}

このサンプルコードは、パンくずリストの各リンクに「my-custom-class」というカスタムCSSクラスを追加します。

サンプルコード2

add_filter('bcn_display_attribute_array', 'add_data_attribute', 10, 2);
function add_data_attribute($att, $trail) {
    $att['data-custom'] = 'value'; // カスタムデータ属性を追加
    return $att;
}

このコードは、パンくずリストのリンクに「data-custom」というカスタムデータ属性をセットします。

サンプルコード3

add_filter('bcn_display_attribute_array', 'conditionally_add_attributes', 10, 2);
function conditionally_add_attributes($att, $trail) {
    if (is_single()) {
        $att['class'] = 'single-post'; // シングル投稿のときにクラスを追加
    }
    return $att;
}

このサンプルでは、シングル投稿ページでのみ「single-post」というクラスをパンくずリストに追加します。

サンプルコード4

add_filter('bcn_display_attribute_array', 'add_arbitrary_id', 10, 2);
function add_arbitrary_id($att, $trail) {
    $att['id'] = 'breadcrumb-' . $trail->get_id(); // 各パンくず要素にユニークなIDを追加
    return $att;
}

このコードは、パンくずリストの各要素にユニークなIDを追加し、トレイルのIDを基にします。

サンプルコード5

add_filter('bcn_display_attribute_array', 'style_based_on_post_type', 10, 2);
function style_based_on_post_type($att, $trail) {
    if ($trail->get_post_type() === 'product') {
        $att['class'] = 'product-breadcrumb'; // 商品ページの際にクラス追加
    }
    return $att;
}

このサンプルコードは、製品ページに対して特別なCSSクラス「product-breadcrumb」を追加します。

概要

構文