WordPress4.5の新機能!カスタムロゴを使ってみる!

WordPress4.5が昨日2016年4月12日に公開されました。

今回も様々なアップデートが行われたのですが、個人的には素晴らしいアップデートではないかと思われるのがカスタムロゴの追加です。

折角なので使い方をご紹介したいと思います。

目次

テーマサポートにcustom-logoを追加する

まずはカスタムロゴを使用できるようにします。

add_theme_support( 'custom-logo', array(
	'height'      => 240,
	'width'       => 240,
	'flex-height' => true,
) );

これだけでOK
これを行うことで、[外観]→[カスタマイズ]→[サイト基本情報]に[ロゴ]という項目が追加されます。
heightとwidthの値はデザインに必要な大きさを指定してください。

追加された[ロゴ]項目で選択を行うとこのサイズで切り出しが行われます。

デザインテーマに設定したロゴを表示する

the_custom_logo();

このタグを必要な部分に記述します。
出力されるhtmlは以下のとおりです。

<a href="(サイトホームのurl)" class="custom-logo-link" rel="home" itemprop="url"><img src="(画像URL)" class="custom-logo"/></a>

get_custom_logoというフィルターが用意されているので必要に応じて書き換えることが出来ます。
また、その際にロゴに指定されている画像IDを取得するには

get_theme_mod( 'custom_logo' )

を使用します。

以上が今回のWordPressアップデートで追加された、カスタムロゴの使い方です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

熊本在住のWebプログラマ。熊本WordPressMeetupのオーガナイザー。WordPressを使い始めたのは2012年頃から。

目次