ワードプレスのthe_custom_logoフィルタの使用方法・解説

概要

the_custom_logoフィルタは、WordPressテーマ内でカスタムロゴを表示する際に使われます。このフィルタを使用すると、デフォルトのロゴ出力を変更したりカスタマイズしたりすることができます。以下はこのフィルタがよく使われる機能の例です：

1. ロゴのサイズを変更する
2. ロゴのリンクを変更する
3. ロゴのCSSクラスを追加する
4. ロゴ表示の条件をカスタマイズする
5. ロゴ出力のラッパー要素を変更する
6. ロゴの表示エリアを別の場所に移動する
7. HTML属性を追加する
8. 特定のページで異なるロゴを表示する

構文

apply_filters( 'the_custom_logo', string $html );

パラメータ

• $html: カスタムロゴのHTML出力。

戻り値

• フィルタ処理後のカスタムロゴに関するHTML。

関連する関数

the_custom_logo

使用可能なバージョン

• WordPress 4.5以降

コアファイルのパス

• wp-includes/general-template.php

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

アクション名	使用可能性
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( 'the_custom_logo', function( $html ) {
    $html = str_replace( 'width="100"', 'width="200"', $html );
    return $html;
});

• 引用元: https://example.com/1

サンプルコード2: ロゴのリンクを変更

このコードは、カスタムロゴのリンク先を変更するための例です。

add_filter( 'the_custom_logo', function( $html ) {
    return str_replace( '<a href="', '<a href="https://new-link.com/', $html );
});

• 引用元: https://example.com/2

サンプルコード3: CSSクラスの追加

このコードは、カスタムロゴにCSSクラスを追加するものです。

add_filter( 'the_custom_logo', function( $html ) {
    return str_replace( '<img', '<img class="custom-logo-class"', $html );
});

• 引用元: https://example.com/3

サンプルコード4: HTML属性の追加

このコードは、カスタムロゴの画像にデータ属性を追加する方法を示しています。

add_filter( 'the_custom_logo', function( $html ) {
    return str_replace( '<img', '<img data-custom="value"', $html );
});

• 引用元: https://example.com/4

サンプルコード5: 異なるページでのロゴ表示

このコードは、特定のページでカスタムロゴを変更する例です。

add_filter( 'the_custom_logo', function( $html ) {
    if ( is_page( 'about' ) ) {
        return '<img src="path/to/about-logo.png" alt="About Page Logo">';
    }
    return $html;
});

• 引用元: https://example.com/5