WordPress テーマカスタマイザーでヘッダー画像を指定出来るようにする
WordPress の機能にテーマカスタマイザーというものがあり、最新版のWordpressではリアルタイムにテーマのカスタマイズが確認出来る様になっています、そこで利用できる標準機能としてヘッダー画像を設定できるようになっています。
そのヘッダー画像を設定出来る機能を有効にして、テーマカスタマイザーでヘッダー画像を自由に変更出来るようにする方法。
カスタムヘッダーを有効にする
//カスタムヘッダーを有効化 add_theme_support( 'custom-header' );
カスタムヘッダーを有効にするには、テーマのfunctions.php で有効にしておく必要がある。単純に有効にするだけだと上の1行を加えるだけでいい、設定できる画像の大きさを指定してテーマカスタマイザーでトリミング作業が出来るようにするにはもう少し付け加える必要がある。
※ add_theme_support( ‘custom-header’ ) が使えるのは 3.4以上のバージョンとなる。
トリミングが出来るようにする
$defaults = array( 'width' => 300, 'height' => 300, 'flex-height' => false, 'flex-width' => false, ); add_theme_support( 'custom-header', $defaults );
トリミングが出来るようにするには、推奨の高さと幅を指定してやる必要があり、指定していないと切り抜きのボタンが表示されるが範囲が指定出来ないためエラーで使えない。なので、何かしら数値を設定してやる必要がある。
設定した数値以外のサイズを許可する倍は flex をそれぞれ有効にしてやるとよく、flase を true にすると良い。flaseのままだと、指定した推奨サイズ以外にはトリミングできなくなってしまう。
他にも設定できる項目
$defaults = array( 'default-image' => '', 'random-default' => false, 'width' => 0, 'height' => 0, 'flex-height' => false, 'flex-width' => false, 'default-text-color' => '', 'header-text' => true, 'uploads' => true, 'wp-head-callback' => '', 'admin-head-callback' => '', 'admin-preview-callback' => '', ); add_theme_support( 'custom-header', $defaults );
カスタムヘッダーで設定できる項目とデフォルト値になります、デフォルトの画像の指定や画像をランダム表示を有効にするなど出来ます。
カスタムヘッダーを表示する
カスタムヘッダーを有効にしたら、それを表示させる必要がある。好きな場所に設置し、CSS等でいろいろな画像サイズを想定してデザインが崩れないようにしてやったり、固定サイズならカッチリきまった表示にすることも出来る。
カスタムヘッダーを出力する
header_image();
単純に画像のURLを出力するだけなら、これだけになります imgのscrのところで実行すれば画像を表示できる。他に画像のサイズの取得や、ヘッダー画像が設定されているかどうかの判断をする方法などは以下のようになる。
カスタムヘッダーのサイズや有効かをチェックして出力する例
<?php if(get_header_image()): ?>
<div id="custom-header">
<a href="<?php bloginfo("url") ?>">
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
</a>
</div><!-- /#custom-header -->
<?php endif; ?>
get_custom_header() を使って、画像のサイズを取得することが出来る。また get_header_image() を使って条件分岐の条件にすることも可能で、カスタムヘッダーが設定されていない時は周りのHTMLもろもろ出力しないような使い方が出来る。
ちなみに header_image() を使っての条件分岐は出来ない。
まとめ
header_image() // 画像のURLを出力 get_header_image() // 画像のURLを取得 get_custom_header()->width // 画像の横幅 get_custom_header()->height // 画像の高さ
header_image() は get_header_image() で代用可能です、get_header_image() の中には画像のURLが入っており、echoで出力することで header_image() と同様に扱うことが出来る。
header_image() が条件に使えないのは echo で文字列を出力してしまうため、if分が壊れてしまうためです。
COMMENT