Wordpress3.0のカスタムヘッダーを使う

管理画面にヘッダーメニューを追加する。

デフォルトではカスタムヘッダーの機能は無効になっています。
この機能を有効にするには、現在使用しているテーマフォルダにあるfunctions.phpを編集します。まずは下記のコードを追加してみましょう。

1
define('HEADER_TEXTCOLOR', 'ffffff');
2
define('HEADER_IMAGE', '%s/img/header/default_header.png');
3
define('HEADER_IMAGE_WIDTH', 500);
4
define('HEADER_IMAGE_HEIGHT', 130);

ここでは初期設定をしています。
上から順に、テキストカラー、ヘッダーの画像のパス、画像の横サイズ、縦のサイズです。
「HEADER_IMAGE」の「&s」はテンプレートフォルダのパスになっているっぽいので、そこからヘッダー画像までのパスを記述しておこう。

次にメニューにヘッダーの項目を追加するコードを記述する。

1
function header_style() {
2
  ?><style type="text/css">
3
    #header {
4
      background: url(<?php header_image(); ?>);
5
    }
6
  </style><?php
7
}
8
function admin_header_style() {
9
  ?><style type="text/css">
10
    #headimg {
11
      width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
12
      height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
13
    }
14
  </style><?php
15
}
16
add_custom_image_header('header_style', 'admin_header_style');

上の「header_style」が実際のhtmlに出力されるスタイルなので、テーマによっては修正する必要があります。
またCSSのバックグラウンドではなくてimgタグで画像を表示させる場合はこの関数の中身は削除しても大丈夫です。
「admin_header_style」は管理画面の表示設定なので特に変更する必要はないでしょう。

これで管理画面の「外観」のサブメニューに「ヘッダー」が追加されているはずです。

ヘッダー画面

カスタムヘッダーを表示する。

カスタムヘッダーに入力した値をそのまま表示してみます。
headerだからheader.phpですかね。

1
<?php
2
  echo "[ヘッダーパス]";
3
  header_image();
4
  echo "<br />";
5
  echo "[テキストカラー]#";
6
  header_textcolor();
7
  echo "<br />";
8
  echo "[横]";
9
  echo HEADER_IMAGE_WIDTH;
10
  echo "<br />";
11
  echo "[縦]";
12
  echo HEADER_IMAGE_HEIGHT;
13
?>

これをimgタグに組み込めば画像が表示できるんですね。

1
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" />

それにしても「TEXTCOLOR」は使わなさそうだなーっと思ったらこの項目は削除してみましょう。
functions.phpに書いた「define(‘HEADER_TEXTCOLOR’, ‘ffffff’);」の部分を下記に置き換えてください。

1
define('HEADER_TEXTCOLOR', '');
2
define('NO_HEADER_TEXT', true);

あらかじめ設定した画像からヘッダーを選択する。

ヘッダーの画像を自由にアップロードして変更できるようになったわけですが、デザインをほとんどしないお客さんが運営しているといったこともあるかと思います。
そんな場合は、あらかじめ画像を作成しておいて、そこから選択させるようにした方がよさそうです。
カスタムヘッダーではそんなこともできたりするようです。

ここでは「header01.png」～「03」という名前の画像と、サムネイル用に「header01s」～「03s」という名前で画像を作成し、「default_header.png」と同じフォルダに保存します。
下記コードをfunctions.phpに追加ます。

1
register_default_headers( array(
2
  'header01' => array(
3
    'url' => '%s/img/header/header01.png',
4
    'thumbnail_url' => '%s/img/header/header01s.png'
5
  ),
6
  'header02' => array(
7
    'url' => '%s/img/header/header02.png',
8
    'thumbnail_url' => '%s/img/header/header02s.png'
9
  ),
10
  'header03' => array(
11
    'url' => '%s/img/header/header03.png',
12
    'thumbnail_url' => '%s/img/header/header03s.png'
13
  )
14
));