hijiriworld Web

WordPress3.0から搭載された「カスタムヘッダー」と「カスタム背景」の実装について解説します。

仕組み

カスタムヘッダーやカスタム背景を設定した場合、wp_head アクションがカスタムCSSを出力します。
それによってディフォルトCSSは上書きされます。

確認

wp_head アクションがきちんと記述されていることを確認してください。
これがないと動きません。

</head> の直前に記述しておくのが良いでしょう。

> header.php

<!-- 省略 -->
	<?php wp_head(); ?>
</head>

wp head/WordPress Codex 日本語版

カスタムヘッダー

管理画面からヘッダー画像を設定できる機能です。

> functions.php

define('HEADER_TEXTCOLOR', 'ffffff');
define('HEADER_IMAGE', '%s/images/default_header.png');
define('HEADER_IMAGE_WIDTH', 900);
define('HEADER_IMAGE_HEIGHT', 360);
define('NO_HEADER_TEXT', true ); // ヘッダーにテキストを表示したくない場合は記述

カスタムヘッダーをテンプレート内で出力する

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />

functions.php内でスタイルとして出力する

// サイト用に出力するCSS
function header_style() {
	?><style type="text/css">
		#header {
			background: url(<?php header_image(); ?>);
		}
	</style><?php
}

// 管理画面用に出力するCSS
function admin_header_style() {
	?><style type="text/css">
		#headimg {
			width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
			height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
		}
	</style><?php
}

add_custom_image_header('header_style', 'admin_header_style');

add custom image header/WordPress Codex 日本語版

カスタム背景

管理画面から、背景色、背景画像を設定できる機能です。

> functions.php

add_custom_background();

add custom background/WordPress Codex 日本語版