カスタムロゴとは何ですか？

カスタムロゴを使用すると、サイトの所有者は自分のウェブサイトのために画像をアップロードでき、ウェブサイトの上部に配置できます。これは、管理パネルの **外観

ヘッダー からアップロードできます。カスタムロゴのサポートは、add_theme_support() を使用して最初にテーマに追加し、その後 the_custom_logo() を使用してテーマ内で呼び出す必要があります。カスタムロゴは オプション** ですが、テーマの作者はテーマにロゴを含める場合、この機能を使用するべきです。

テーマにカスタムロゴサポートを追加する

テーマでカスタムロゴを使用できるようにするには、functions.php ファイルに次の内容を追加します： 

  1. add_theme_support( 'custom-logo' );

カスタムロゴサポートを有効にする際、add_theme_support() 関数に引数を渡すことで、5つのパラメータを設定できます： 

  1. function themename_custom_logo_setup() {
  2.     $defaults = array(
  3.         'height'               => 100,
  4.         'width'                => 400,
  5.         'flex-height'          => true,
  6.         'flex-width'           => true,
  7.         'header-text'          => array( 'site-title', 'site-description' ),
  8.         'unlink-homepage-logo' => true,
  9.     );
  10.     add_theme_support( 'custom-logo', $defaults );
  11. }
  12. add_action( 'after_setup_theme', 'themename_custom_logo_setup' );

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

  • height
    期待されるロゴの高さ（ピクセル単位）。カスタムロゴは、thumbnail のような組み込みの画像サイズを使用することも、add_image_size() を使用してカスタムサイズを登録することもできます。
  • width期待されるロゴの幅（ピクセル単位）。カスタムロゴは、thumbnail のような組み込みの画像サイズを使用することも、add_image_size() を使用してカスタムサイズを登録することもできます。
  • flex-height
    柔軟な高さを許可するかどうか。
  • flex-width柔軟な幅を許可するかどうか。
  • header-text非表示にする要素のクラス。ここでは、ロゴに置き換えられる可能性のあるヘッダーテキストを構成するすべての要素のクラス名の配列を渡すことができます。
  • unlink-homepage-logo
    unlink-homepage-logo パラメータが true に設定されている場合、get_custom_logo() または the_custom_logo() を使用して挿入されたロゴ画像は、訪問者がそのページにいるときにホームページへのリンクがなくなります。リンクされた画像に与えられたスタイリングを維持するために、リンクされていないロゴ画像は同じ「custom-logo-link」クラスを持つ span タグ内にあります。

テーマにカスタムロゴを表示する

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

  1. if ( function_exists( 'the_custom_logo' ) ) {
  2.     the_custom_logo();
  3. }

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

現在のロゴの URL を取得したい場合（または独自のマークアップを使用したい場合）、次のコードを使用できます： 

  1. $custom_logo_id = get_theme_mod( 'custom_logo' );
  2. $logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
  3. if ( has_custom_logo() ) {
  4.     echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . get_bloginfo( 'name' ) . '">';
  5. } else {
  6.     echo '<h1>' . get_bloginfo('name') . '</h1>';
  7. }

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

フロントエンドでカスタムロゴを表示するために、次の3つのテンプレートタグを使用できます：

  • get_custom_logo() -カスタムロゴのマークアップを返します。
  • the_custom_logo() -カスタムロゴのマークアップを表示します。
  • has_custom_logo() -カスタムロゴが設定されているかどうかを示す真偽値（true/false）を返します。