WordPressで管理画面からロゴを変更できる機能の実装方法（カスタムロゴ）

自作テーマ開発時に、管理画面からロゴを設定できる機能をサクッと実装したいな〜って時ありますよね。

実はWordPressには、テーマカスタマイザーからロゴ画像を設定できる「カスタムロゴ」機能が備わっています。当記事では、このカスタムロゴ機能の使い方についてご紹介していきます。

WordPressのカスタムロゴとは？

管理画面からロゴ画像を設定できるようにする機能です。WordPressにもともと備わっていますが、テーマ側で有効化しなければ使うことができません。

こちらを有効化すると、管理画面の外観 > カスタマイズ > 「サイト基本情報」にロゴ画像を設定できるフィールドが表示されるようになります。

カスタマイザーのロゴ設定

有料テーマを利用する方には必要ありませんが、ちょっとした自作テーマを開発する方にとっては非常に便利な機能になります。

カスタムロゴを実装する方法

カスタムロゴを利用するためには、テーマのPHPファイルに設定と表示に関する記述を追加する必要があります。以下の2ステップで簡単に実装できるので、ぜひお試しください。

カスタムロゴ機能の有効化
設定したロゴを表示する
設定したロゴの画像IDを取得する

カスタムロゴ機能の有効化

最初にカスタムロゴ機能を有効化して、テーマカスタマイザーに設定エリアを追加します。以下の記述をfunctions.phpに記入してください。

add_action( 'after_setup_theme', function(){
  add_theme_support( 'custom-logo' );
} );

追記後に外観 > カスタマイズ > サイト基本情報を確認すると、ロゴ設定が表示されるようになります。フォームや保存処理を自分で定義しなくていいので非常に楽ですね。

なお、カスタムロゴを有効化する関数の第二引数には、いくつかオプションを指定できます。使う機会は少ないですが、気になる方は以下をご覧ください。

Custom Logo – Theme Handbook | Developer.WordPress.org

設定したロゴを表示する

あとは設定したロゴを表示するだけです。ロゴを表示したいファイル（header.phpやfooter.php）に以下の関数を追記してください。

the_custom_logo();

the_custom_logo() – Function | Developer.WordPress.org

こちらは設定した画像をimgタグで出力する関数になります。リンクも自動で付与されるため、この1行だけで完結できるんですね。また、画像が設定されているかどうかで処理を分けたい場合は「has_custom_logo()」を使いましょう。

if( has_custom_logo() ){
  /* ロゴが設定されていたら画像を表示 */
  the_custom_logo();
}else{
  /* ロゴが設定されていなければサイトタイトルを表示 */
  echo '<h1>' . get_bloginfo( 'name' ) . '</h1>';
}

has_custom_logo() – Function | Developer.WordPress.org

設定したロゴの画像IDを取得する

「the_custom_logo()」だと、強制的にimgタグで出力されてしまいます。自由にマークアップしたい方は、以下の記述でロゴ画像のIDを取得するのがオススメです。

// ロゴ画像のIDを取得$custom_logo_id = get_theme_mod( 'custom_logo' );

IDがあれば、以下のようにロゴ画像のURLだけを取得することもできるので、あらゆる場面で使いやすくなりますので、ぜひ試してみてください。

/* ID取得 */
$custom_logo_id = get_theme_mod( 'custom_logo' );
/* IDからURL取得 */
$custom_logo_url = wp_get_attachment_image_src( $custom_logo_id , 'full' );