★WordPressのオリジナルテーマで管理画面からヘッダー画像を変更可能にする★ - Web

前回のWordPressカスタマイズに関する記事の続きを記録します。

管理画面からヘッダー画像を変更可能にする方法

この工程で必要になるWordPressのテンプレートタグは

・add_custom_image_header()
  カスタムヘッダーを有効にする

・<?php header_image();?>   
  カスタムヘッダー画像を出力する

・ <?php if(get_header_image());)?>~<?php endif;?>
  ヘッダー画像がある場合は中身を出力する

です。

まずfunctions.phpに以下の内容を付け加えます。

<?php 
//カスタムヘッダー
add_custom_image_header(''.'admin_header_style');
function admin_header_style() {
?>
<style type="text/css">
#heading {width: 760px!important}
</style>
<?php
}
define('NO_HEADER_TEXT',true);
define('HEADER_IMAGE','%s/default_header.jpg');
define('HEADER_IMAGE_WIDTH','760');
define('HEADER_IMAGE_HEIGHT','200');
?>

この付け足した記述の中のWIDTHとHEIGHTが、header画像の大きさを指定している記述です。

次にheader.phpの中の記述も付け加えます。変化の必要のない部分上下の記述は略してあります。
付け加えるのはdiv id="header"の中の、headerの画像をしている部分です。
header.php

<!DOCTYPE HTML>
<html>
<head>
…(略)…
<?php if(!(is_page('ビジネスサイト風のページ'))):?>
<?php if(get_header_image()):?>
<p id="image">
<img src="<?php header_image();?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH;?>" height="<?php echo HEADER_IMAGE_HEIGHT;?>" /></p>
<?php endif;?>
<?php endif;?>
…(略)…
</body>
</html>

このように記述したら、WordPress管理画面にアクセスし、図のようにすすめます。

プレビューしてheader画像が管理画面で設定した画像に代わっていれば設定完了です。