今回はヘッダー画像の設定方法です。
こういうWebサイトの上部にある大きい画像のことですね。
使用するのはタイトルタグの出力のときにも使用した
add_theme_support()
です。
今回はこれに「custom-header」というパラメータを入力して使用していきましょう。
やり方
カスタムヘッダーを有効にする
まずはカスタムヘッダーを有効にします。
functions.phpadd_theme_support( ‘custom-header’ )
基本的にfunction.phpにこれを書けばいいのですがカスタムヘッダーでは各種オプションが使用できます。
関数リファレンス/add theme supportで確認できますのでこれを使用してみましょう。
functions.php$custom_header_defaults = array(
‘default-image’ => get_bloginfo(‘template_url’).’/images/hero-default.jpg’,
‘width’ => 220,
‘height’ => 50,
);
add_theme_support( ‘custom-header’, $custom_header_defaults );
ブルーの部分がオプションです。
オプションのdefault-imageでデフォルト画像を設定。(これはテーマファイルの画像フォルダに入れておきます)。
そしてデフォルトのwidthとheightも指定しておきます。
ヘッダー画像を表示したい場所にコードを書く
ではfunction.phpに上記コードを記入したことでカスタムヘッダーが有効となりましたので、次はヘッダー画像を表示させたい場所にコードを書いていきます。
header.phpやfront-page.phpなど必要な場所に書きましょう。
header.phpなど<img src=”<?php header_image(); ?>” height=”<?php echo get_custom_header()->height ?>” width=”<?php echo get_custom_header()->width ?>” alt=”header-img”>
htmlのimgタグ内にカスタムヘッダーで登録したものを呼び出していきます。
<?php header_image(); ?>でカスタムヘッダーに登録した画像を設定、そしてimgタグのheight=””に<?php echo get_custom_header()->height ?>、width=””に<?php echo get_custom_header()->width ?>を入れ込むことでカスタムヘッダーに登録したheightとweightが設定されます。
管理画面からヘッダー画像を変更してみよう
ではヘッダー画像が表示されたはずですので、次はこのヘッダー画像を変更してみましょう。
実はfunctions.phpにコードを書いた時点でWordPress管理画面の［外観］→［カスタマイズ］を見てみるとヘッダー画像というものが追加されています。
作りかけのテーマのスクショなので右側のレイアウトが見苦しくて申し訳ないのですが、左側にヘッダー画像という項目があるのがわかるかと思います。
設定を変更するまではfunction.phpで設定したデフォルト画像が表示されているはずですが、テーマを使用するユーザーがここから自由に画像を変更できるようになります。
まとめ
いかがでしたでしょうか。
カスタマイズ性が高くなってくるとテーマを作るのも楽しくなってきますね。
テーマ作成のための他の記事もぜひ参考にしてみてください。
コメント