プラグインAdvanced custom fields(ACF)のacf/fields/flexible_content/layout_titleフィルタの使用方法・解説

概要

acf/fields/flexible_content/layout_titleフィルタは、各フレキシブルコンテンツレイアウトのタイトルHTMLをフィルターします。このフィルタを利用することで、表示されるタイトルをカスタマイズし、ユーザーインターフェースを向上させることができます。

このフィルタは、以下のような機能を実装する際によく使われます：

フィールドグループのセクション名を変更する
コードに基づいた条件付きのタイトル表示
タイトルにアイコンやスタイルを追加する
特定の設定に基づく動的なタイトル生成
タイトルの多言語対応
読みやすさ向上のためのテキストフォーマット

構文

add_filter('acf/fields/flexible_content/layout_title', 'my_custom_flexible_content_title', 10, 4);

パラメータ

$title (string): フィルター対象の元のタイトル
$field (array): 関連するフィールドデータ
$layout (array): 現在のレイアウトデータ
$i (int): レイアウトのインデックス

戻り値

(string): フィルター後のタイトル

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

Advanced Custom Fields (ACF) : 5.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('acf/fields/flexible_content/layout_title', function($title, $field, $layout, $i) {
    return 'カスタムタイトル: ' . $title;
}, 10, 4);

このコードは、各フレキシブルコンテンツレイアウトのタイトルに「カスタムタイトル: 」という接頭語を追加します。

サンプルコード2: 条件に応じた動的タイトルの作成

add_filter('acf/fields/flexible_content/layout_title', function($title, $field, $layout, $i) {
    if ($layout['name'] === 'example_layout') {
        return '特別なタイトル';
    }
    return $title;
}, 10, 4);

このコードは、特定のレイアウト名が一致する場合にのみ、特別なタイトルを設定します。

サンプルコード3: アイコンの追加

add_filter('acf/fields/flexible_content/layout_title', function($title, $field, $layout, $i) {
    return '<i class="icon-class"></i> ' . $title;
}, 10, 4);

ここでは、タイトルの前にアイコンのHTMLを追加して、視覚的なインパクトを持たせています。

サンプルコード4: 多言語対応

add_filter('acf/fields/flexible_content/layout_title', function($title, $field, $layout, $i) {
    return __('タイトルの変換', 'text-domain'); // テキストドメインを指定
}, 10, 4);

このサンプルでは、タイトルを多言語対応にするため、__()関数を使用しています。

サンプルコード5: 特定条件でスタイルを適用

add_filter('acf/fields/flexible_content/layout_title', function($title, $field, $layout, $i) {
    if ($layout['name'] === 'styled_layout') {
        return '<span style="color: red;">' . $title . '</span>';
    }
    return $title;
}, 10, 4);

このコードでは、特定のレイアウト名に対してタイトルに赤色のスタイルを適用しています。

引用元:
– https://www.advancedcustomfields.com/resources/flexible-content-field/#layout-title-filter
– https://www.advancedcustomfields.com/resources/acf-field-name/
– https://www.advancedcustomfields.com/resources/acf-filters/#acf-filters
– https://wordpress.org/support/article/functions.php/#custom-functions
– https://developer.wordpress.org/reference/hooks/add_filter/

概要

構文