管理画面で設定したカスタムヘッダー画像を背景イメージとしてCSSで使用する実装方法【WordPress開発】
WordPressの管理画面で設定したカスタムヘッダー画像を、CSSで背景画像として表示したい
と思い、実装したのでシェアします。
カスタムヘッダー画像をCSSで利用する方法を紹介します。ネットで探してみたのですが、古い記事しか見当たらず非推奨の関数を使用して実現している情報ばかりでした。そこで、新しく代替された関数を使った方法で実装してみたのでシェアしたいと思います。
（※本記事はWordPressのバージョンが4.9.x の時に書いたものです。）
- 目次 -
カスタムヘッダー画像を利用する流れ
カスタムヘッダー画像を利用するには、いくつかのステップが必要です。といっても１つ１つのステップは簡単なので、直ぐに実装できます。
カスタムヘッダー画像を利用する流れ
- カスタムヘッダー画像を有効化する
- カスタムヘッダー画像（パス情報）を取得する
- 取得したカスタムヘッダー画像をimgタグもしくはCSSで利用する
- WordPress管理画面にてカスタムヘッダー画像を指定する
カスタムヘッダー画像を有効化する
ネットで調べてみると、add_custom_image_header()関数を利用して、カスタムヘッダーを利用している例が多いのですが、この関数は非推奨になったため、利用しないことをお勧めします。というより、WordPress 3.4以降では廃止になった関数です。
非推奨になった add_custom_image_header
カスタムヘッダー情報を取得する関数です。ただし今では非推奨の関数となっており、WordPress 3.4以降では廃止となっています。なお、非推奨になったことや、詳しい説明は以下の関連リファレンスより確認できます。
関数リファレンス/add custom image header
もし既に利用している場合は後述する方法に変更しましょう。
非推奨になったadd_custom_image_headerの代わりとして使えるような代替の関数が無いか探したところ、以下がありました。
代替の関数 add_theme_support( ‘custom-header’ )
add_theme_support()関数は、様々なWordPress情報を取得することができる関数です。今回は引数としてcustom-headerを指定することでカスタムヘッダーの情報を取得できるように設定（有効化）します。なおadd_theme_support()は下記にて非推奨でないことが確認できます。
カスタムヘッダー画像を有効化する方法
非推奨ではないadd_theme_support()を使用して、カスタムヘッダー画像を利用できるように設定していきましょう。
具体的にはテーマ内のfunction.phpでカスタムヘッダー画像を有効化する設定を行うようにします。以下のコードをfunction.php内に追記します。（既にfunction.php内で設定されている場合は重複してしまうため追記しないでください。）
// カスタムヘッダーの有効化 add_theme_support( 'custom-header' );
カスタムヘッダー画像のパス情報を取得する
カスタムヘッダー画像の有効化が済んだら、カスタムヘッダー画像のパス情報をするコードを挿入していきます。WordPressで用意されている以下の関数で簡単に取得できるようになっています。
WordPressの関数
- header_image();
header_image関数の説明
- 管理画面で設定したカスタムヘッダー画像のパスを取得する。
なお、実際にheader_image()を使ってヘッダー画像を利用する方法は、
- imgタグでヘッダー画像を利用する
- CSSで背景画像としてヘッダー画像を利用する
場合で方法が変わるため、以下でどちらかお好きな方法を参考にして実装してください。
imgタグでカスタムヘッダー画像を表示する方法
imgタグでカスタムヘッダー画像を表示したい場合は、phpファイルで処理できるので以下のように呼び出せばOKで簡単です。CSSで背景画像として利用したい場合はimgタグを挿入する必要はないのでスキップしてください。
imgタグでカスタムヘッダー画像を利用するサンプル
<header> <img src="<?php header_image(); ?>" alt="TOPイメージ" /> </header>
呼び出したいソース内で、上記のようにimgタグのsrc部分でheader_image()関数を利用します。なお管理画面でカスタムヘッダー画像を設定しておかなければ画像は表示されませんので、まだ画像を表示することはできません。
CSSで背景画像としてカスタムヘッダー画像を利用する方法
CSSで背景画像として利用するのは、少しだけ曲者です。なぜならCSSファイルでPHPファイルを呼び出せないからです。そのためWordPressで用意されているPHP関数header_image()を呼び出せません。
そこで、以下のような流れでカスタムヘッダー画像をCSSで設定します。imgタグを利用してヘッダー画像を表示する場合はCSSで背景画像を設定する必要はないのでスキップしてください。
カスタムヘッダー画像をCSSで利用する流れ
- function.phpで画面がレンダリングされる前に、処理を追加（フック）する
- フック時にレンダリングされるhtmlコードのheadタグに対してCSSコードを追加する
上記のとおり、一度フックしてCSSのコードをレンダリング前に挿入するわけですね。今回のようにWordPressではフックして処理を追加するという概念は非常に重要です。わかりやすく言えば、プラグインの多くはこのフックを利用して処理を追加しているのです。
流れがわかったところで、実際に以下の手順を適用していきましょう。
カスタムヘッダー画像をCSSで利用する手順
上述したとおり、カスタムヘッダー画像をCSSで利用するには、function.phpにCSSのコードを書き込みます。
function.phpで背景画像用のCSSを埋め込むサンプル
// カスタムヘッダーの有効化
add_theme_support( 'custom-header' );
// 公開サイト用に出力するヘッダーCSS
function header_image_css() {
?><style type="text/css">
.bg-topimage {
background: url(<?php header_image(); ?>);
}
</style><?php
}
add_filter('wp_head','header_image_css');
1,2行目は前の手順で既に設定したカスタムヘッダーを有効化するコードなので重複して書き込まないように注意してください。
add_filterでフックし、header_image_css()という関数を呼び出すようにしています。サンプルでは「.bg-topimage」というクラスで背景画像を使うようにしています。好きなクラスやidを適用してお使いください。
なお、ここで指定したクラス(サンプルではbg-topimage)は実際に読み込みたいphpソース内でも設定する必要があるので忘れないで設定しておいてください。
ヘッダー画像を読み込みたいphpソース側のサンプル
<header class="bg-topimage"> ヘッダー部分です。 </header>
カスタムヘッダー画像を管理画面で設定する
imgタグもしくはCSSにてカスタムヘッダー画像を表示するように実装が済んだら、最後に管理画面でカスタムヘッダー画像を設定します。
カスタムヘッダー画像の設定手順
１．WordPressの管理画面にログインし、外観 -> ヘッダーを押下します。
※もしヘッダーという項目が無い場合は、function.php内でカスタムヘッダー画像の有効化ができていない可能性があります。カスタムヘッダー画像の有効化については上述していますので有効化できているか確認してみてください。
２．「新規画像を追加」を押下し、メディアライブラリから画像を選択する
新規画像を追加するまではヘッダー画像がまだ設定されていない状態のため、プレビュー（画像内の右部分）では何もヘッダー画像が表示されていません。
３．最後に「公開」を押下する
手順２でメディアライブラリから画像を選択すると、正しく設定できていればプレビュー画面にヘッダー画像が無事設定されるので「公開」を押下してヘッダー画像を適用します。
なお、ヘッダー画像を適用したいけど直ぐには反映したくない場合は、「公開」を押下せずに「公開」ボタンの横にある歯車のマークを押下することで、一端下書き保存に登録したり、予約投稿することができます。
ヘッダー画像をイベントに合わせて更新する際などには、予約投稿を使うと便利ですね。
以上で、カスタムヘッダー画像を無事呼び出すことができました。なお念のため、実際のサイトでも表示されることを確認することを忘れないようにしましょう。
カスタムヘッダー画像は管理画面から変更できるので便利
カスタムヘッダー画像を利用せずにヘッダー画像をソース内に直書きで埋め込むことも可能ではありますが、その場合はヘッダー画像を変更する時に、どうしてもソースを変更しなければならず大変です。
サイトを運用していくことを考えるなら、是非カスタムヘッダー画像を管理画面から設定できるようにしておきましょう。
関連記事
