カスタムロゴ

2020.04.03 2020.04.03

TOPICS

翻訳元記事はこちらです。

カスタムロゴとは？

カスタムロゴを使用すると、サイト所有者は自分のウェブサイトの画像をアップロードして、ウェブサイトのトップに配置することができます。
これは、管理画面の「外観」>「ヘッダー」からアップロードすることができます。
カスタムロゴのサポートは、まず add_theme_support() を使ってテーマに追加し、次に the_custom_logo() を使ってテーマ内で呼び出さなければなりません。カスタムロゴはオプションですが、テーマの作者はテーマにロゴを含める場合はこの関数を使うべきです。

テーマにカスタムロゴの機能を追加

テーマにカスタムロゴの機能を追加するために、functions.phpに以下のコードを追加します。

add_theme_support( 'custom-logo' );

カスタムロゴのサポートを有効にする場合は、配列を使用して add_theme_support() 関数に引数を渡すことで 5 つのパラメータを設定することができます。

function themename_custom_logo_setup() {
 $defaults = array(
 'height'      => 100,
 'width'       => 400,
 'flex-height' => true,
 'flex-width'  => true,
 'header-text' => array( 'site-title', 'site-description' ),
 );
 add_theme_support( 'custom-logo', $defaults );
}
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );

after_setup_themeフックによって、テーマが読み込まれた後にカスタムロゴのサポートが登録されます。

カスタムロゴの表示

カスタムロゴは、the_custom_logo()関数を使ってテーマ内に表示することができます。しかし、このように古いバージョンのWordPressとの下位互換性を維持するために、コードをfunctions_exists()呼び出しでラップすることをお勧めします。

if ( function_exists( 'the_custom_logo' ) ) {
 the_custom_logo();
}

一般的にロゴはテーマのheader.phpファイルに追加されますが、他の場所にも追加することができます。

デフォルトのマークアップではなく、現在のロゴのURLを取得したい場合（または独自のマークアップを使用したい場合）は、以下のコードを使用します。

$custom_logo_id = get_theme_mod( 'custom_logo' );
$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
if ( has_custom_logo() ) {
        echo '<img src="' . esc_url( $logo&#91;0&#93; ) . '" alt="' . get_bloginfo( 'name' ) . '">';
} else {
        echo '<h1>'. get_bloginfo( 'name' ) .'</h1>';
}

カスタムロゴのテンプレートタグ

フロントエンドでカスタムロゴの表示を管理するために、以下のテンプレートタグが使用できます。