オリジナルテーマの作成から深掘りするWordPress その5 〜カスタムヘッダー 〜

今回はヘッダー画像を変更する場合について、クライアント目線で考えてみました。いろいろ調べてみたことを整理するため記事にします。

miku-nosuke

この記事を読むことでカスタムヘッダーについて理解することが出来ます。

ヘッダー画像を変更するにはコードを書かないとダメなの?

いいえ。WordPressの機能を使うことで簡単に変更できます!

htmlを使える人なら画像を変更するのは簡単ですよね。imgタグのsrcを変更すれば良いのですから。しかし、クライアント目線で考えると不親切な話です。また、制作者側としてもせっかくWordPressを使っているのですからわざわざエディタを開くのも煩わしいと思いませんか?

functions.phpを使ってカスタマイズ

様々な機能をカスタマイズするにはfunctions.phpファイルを用意します。ここにコードを書くことでWordPressの機能が拡張できます。

エディタソフトからfunctions.phpを作成

fig1 functions.php

まずは、functions.phpファイルを作ってしまいましょう。名前はfunctions.phpです。スペルをfunction.phpとsを付けるのを忘れたため変更がきかず少し悩みました。

add_theme_support( ‘custom-header’ );

先ほど作ったfunctions.phpに次のようにコードを書きます。

<?php
// カスタムヘッダー
add_theme_support( 'custom-header' );
?>

add_theme_support
 これは、テーマ機能を設定する関数。引数にcustom-headerを指定することでWordPressに備えられているヘッダー機能を追加する。

つづいて、header.phpに次のコードを追加します。

    <?php $header_image = get_header_image();
    if (!empty($header_image)) : ?>
      <div id="header_img">
        <a href="<?php echo home_url(); ?>"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>" /></a>
      </div>

get_header_image
 これは、ヘッダー用イメージのurlを取得する。設定されていない場合はfalseを返す。

 何が書いてあるかというと、ヘッダーイメージが設定されている場合は、そのurlをimg srcのところに表示してちょんまげ。ということです。上記のコードをどこに追加するかというと下図を見て下さい。

fig2 追加したコードの場所

もともとヘッダーイメージが書いてあった場所の直下に追加しました。まあ、上でも良いのですが。その理由はヘッダーイメージは一つでよいので、もともとあったイメージは消してしまうからです。どういうことか見てみましょう。

カスタム後の確認

functions.phpとheader.phpにそれぞれコードを書き足したので、それがどのように影響したのか見てみます。

fig3 カスタム前
fig4 カスタム後

このように管理画面にヘッダーが表示されるようになりました。さらに、追加されたヘッダーをクリックしてみます。

カスタムヘッダーを説明するイメージ写真その1
fig5 ヘッダーのカスタマイズ画面

どうでしょう。このようにカスタム画面が表示されました。さらには、カスタマイズ前にはなかった“ヘッダー画像”と“色”の2項目が増えています。

つづいて、ヘッダー画像をクリックしてみましょう。
下図のようにヘッダー画像を選択できる画面に変わります。

カスタムヘッダーのカスタマイズ中の画像で新規画像追加を表示
fig6 ヘッダー画像追加画面

新たにチョコレートケーキの画像を追加してこれを選択しました。
ちょっぴり大人感が出てきましたね。

カスタムヘッダーから新規画像を追加したところの画像
fig7 新規に追加した

で、プレビューしてみるとなんとヘッダーイメージが2つ並んでしまいました。
それもそのはず、もともとあったイメージの部分が表示されていたからです。

カスタムヘッダー設定でヘッダー画像が2枚表示されているところ

それでは、修正しましょう。
修正とはいっても、もともとあったイメージ部分を消すだけです。

カスタムヘッダーのもともとのヘッダーイメージコードを削除したところ
fig8 もともとあったイメージ部分のコードを削除

まとめ

最終的にはこのようになりました。

まとめ

  • カスタムヘッダーを使うにはfunctions.phpファイルが必要
  • functions.phpにadd_theme_support( ‘custom-header’ );を記述
  • header.phpにもともとあったイメージコードは削除
  • header.phpにヘッダーイメージ用のコードを追加する

次回はもう少しadd_theme_support( ‘custom-header’ );を深掘りします。

Follow me!

  • X

みくのすけ

スターウォーズ日本人CGデザイナーである成田さんの「人生に失敗していたんだ。この年になってはじめて自分のやりたいことに気付き、やり直したい」という言葉に心を動かされる。 独学でpythonを始めるも、そもそもhtmlが分からないと話にならないと気づく。そこからhtml、scss、javascript とコーディング、デザインを始める。 アプリ開発が目標。

コメントを残す

メールアドレスが公開されることはありません。

PAGE TOP