【WordPress関数】custom-logoに関するページがWordPress Codexになかったのでまとめてみた。|ためになるWordPressブログ

WordPressのテーマ作りをするうえでロゴの表示をしたいと思い、調べてみましたが万能なWordPress Codexに載っていない。。。

ということでWordPressの公式サイト(英語)を見ながら使い方をまとめてみました。

使用する関数は次の２つです。

add_theme_support(‘custom-logo’)
the_custom_logo()

add_theme_support(‘custom-logo’)でロゴを設定できるようにしてthe_custom_logo()で表示させるという流れです。

カスタムロゴ機能を使えるようにする
ロゴ画像を設定する
ロゴを表示する
出力されたHTMLを確認してみよう
まとめ

カスタムロゴ機能を使えるようにする

まずはカスタムロゴ機能を使えるようにします。

function.phpに記述していきます。

function custom_logo_setup() {
 $defaults = array(
 'height'      => 80,
 'width'       => 80,
 'flex-height' => true,
 'flex-width'  => true,
 );
 add_theme_support( 'custom-logo', $defaults );
}
add_action( 'after_setup_theme', 'custom_logo_setup' );

少し長いコードになりましたが、add_theme_support(‘custom-logo’)に続けてロゴの細かい設定となるパラメーターを$defaultsという配列を作って入れています。
この処理をcustom_logo_setup()という関数にしてadd_action()で実行させているような流れです。

カスタムロゴで設定できるパラメーターは以下のとおりです。

・height
px単位のロゴの高さ。

・width
px単位のロゴの幅。

・flex-height
高さを変更できるようにするかどうか。
これをtrueにするとWordPress管理画面でロゴを設定するときに高さを変更できます。

・flex-width
幅を変更できるようにするかどうか。
flex-heightと同様の使い方です。
作成しているテーマの都合上縦横比が変わるとレイアウトが崩れてしまう場合などはfalseにしておきましょう。
個人的にはテーマ使用者がWordPressテーマを編集する知識がないならfalseがいいと思います。

ロゴ画像を設定する

ここからはWordPressの管理画面からの操作です。

管理画面から[外観]→[カスタマイズ]→[サイト基本情報]を開くとさきほどfunction.phpにコードを記述したことでロゴ画像が選択できるようになっています。

この左側の「ロゴを選択」から画像をアップしてみましょう。

ロゴを表示する

さてロゴの選択までやりましたが、Webページにはまだロゴは表示されません。

ここまではやってきたのは
・ロゴを設定できるようにした。
・ロゴ画像を選択した。
ですので、WordPress側としてはまだロゴをどこに表示するかの指示を受けてません。

ここからはロゴを表示するためのコードを書いていきます。

ロゴなので通常header.phpに記述することが多いですが、front-page.phpやindex.phpなどでも使用できます。
自分がロゴを表示させたいファイルの表示したい場所にこのように書きましょう。

<? the_custom_logo() ?>

このように書くだけでロゴが表示されます。

<div class="header__logo">
  <? the_custom_logo() ?>
</div>

必要に応じてこのようにタグで囲って使用しましょう。

出力されたHTMLを確認してみよう

では出力されたものを見てみましょう。

上段中央の赤と水色の四角のものが表示されたロゴ、赤枠で囲った部分がそのロゴの出力されたコードです。

見にくいので少しいじって拡大してみました。

“header__logo”のクラス名がついたdivタグは先程手動でマークアップしたもの。
aタグとその中身のimgタグがthe_custom_logo()により出力されたものです。

このようにトップページへのリンクが設定されます。
classも自動で設定され、alt属性についてはサイトのタイトルが挿入されます。

まとめ

いかがでしたでしょうか。

imgタグで直接ロゴ画像を書き込んでしまうという方法もありますが、メンテナンス性を考えるとWordPressやコーディングの知識がない人がカスタマイズできなくなってしまいます。

Web製作の知識がなくてもカスタマイズできるのがWordPressの魅力なのでこういうものはどんどんと使用していきましょう。