昨日の続きです。

WordPressにはカスタムヘッダーという機能があります。

この機能を使うと以下のようにヘッダーの画像をブラウザからアップロードしてトリミングしたりすることができます。

とても便利な機能ですよね。

ですが、今回制作したサイトでは、この部分は選択した記事の投稿サムネールをスライド表示しているため使いませんでした。

でも、こんな便利な機能をオフにしておくのは、もったいない。

というわけで、このカスタムヘッダー機能を利用して、サイト上部のロゴ画像を変更できるようにするためのテクニックをご紹介します。

このテクニックを使用すると、Googeのようにイベントなどに合わせてロゴを変更できますので、とっても便利です。

完成後のイメージ

カスタムヘッダーを使用したロゴの設置結果は以下のような感じです。

管理画面は以下のような感じ。

ロゴ画像を新規にアップロードできることに加えて、あらかじめ用意した画像の中から選択することもできます。
（この例ではクリスマスシーズン用のロゴをあらかじめ用意しています。）

テーマのfunctions.phpへの記述

カスタムヘッダーを使用するための要点は以下のとおりです。

• カスタムヘッダーを有効にする。
• カスタムヘッダー用の画像の幅と高さを設定する。
• デフォルトのロゴを設定する。
• その他のデフォルト画像を設定する。
• テキストを非表示にする。

これらを実現するためのfunctions.phpに記述するべきソースは以下のような感じです。

// デフォルトのロゴまでのURL
define('HEADER_IMAGE', get_bloginfo('stylesheet_directory').'/img/logo.png');

ロゴ画像の幅と高さ
define('HEADER_IMAGE_WIDTH', 380);
define('HEADER_IMAGE_HEIGHT', 80);

// 今回は使用しないので''としておく
define('HEADER_TEXTCOLOR', '');

// カスタムヘッダーを有効にするための記述
add_custom_image_header('', 'my_admin_header_style');

// その他のロゴ画像を配列で指定する。
register_default_headers( array(
        'Merry Christmas' => array(
            'url' => get_bloginfo('stylesheet_directory').'/img/xmas.png',
            'thumbnail_url' => get_bloginfo('stylesheet_directory').'/img/xmas.png',
            'description' => 'クリスマス用ロゴ'
        ),
    )
);

// 管理画面用のスタイルの設定。多くの場合以下のままでいい。

function my_admin_header_style() {
?>
<style type="text/css">
/* Shows the same border as on front end */
#headimg {
    background-repeat: no-repeat;
}
</style>
<?php
}

ここまでの作業で管理画面側の作業は終わりです。

テーマのheader.phpにロゴを設置する。

実際のサイトのほうにロゴを設置するには、テーマファイルの中のheader.phpを編集します。

今回制作したサイトでは以下のような感じです。

header_image()関数をコールすればカスタムヘッダーで指定された画像までのURLを取得できます。

<h1>
  <a style="background-image:url(<?php header_image(); ?>);" href="<?php echo home_url('/'); ?>">
    <?php bloginfo( 'name' ); ?>
  </a>
</h1>

あと、style.cssには以下のような感じ。

これはお好みでどうぞ。

#header h1 a
{
    width: 380px;
    height: 80px;
    display: block;
    background-repeat: no-repeat;
    overflow: hidden;
    text-indent: -9999px;
}

以上でカスタムヘッダー機能を応用したロゴ画像の設置は終了です。

カスタムヘッダーもロゴ画像も両方とも使いたい！

ヘッダー画像もロゴも管理画面からアップロードしたい時は、@jim0912さんがいい方法をブログに書いてくれてます。

http://www.warna.info/archives/885/

ロゴ画像のリサイズが出来ないのですが、両方同時に使う場合にはおすすめです。