WordPress 3.0でテーマにカスタムヘッダー機能を追加する方法

WordPressの3.0の新機能として、カスタムヘッダーがあります。
WordPressのテーマにカスタムヘッダー機能を追加する事で、管理画面から画像をアップロード、指定された箇所にサイトに反映させる事ができます。

管理画面＞外観＞ヘッダーのリンクが出現します。

Twenty Tenでのカスタムヘッダー管理画面

WordPress 3.0での新テーマ、Twenty Tenではその機能が既に搭載されています。

テーマにカスタムヘッダー機能を追加する方法

テーマにカスタムヘッダー機能を追加するには、function.phpに次のコードを記載します。

[php]define(‘HEADER_TEXTCOLOR’, ‘ffffff’);
define(‘HEADER_IMAGE’, ‘%s/images/default_header.jpg’);
define(‘HEADER_IMAGE_WIDTH’, 775);
define(‘HEADER_IMAGE_HEIGHT’, 200);[/php]

上記を記載した上で、下記の一行も付け足します。

[php]add_custom_image_header();[/php]

function.phpに記載するコード説明

ヘッダーテキスト機能

[php]define(‘HEADER_TEXTCOLOR’, ‘ffffff’);[/php]

上記のコードはテキストカラーをカスタムヘッダー内に追加します。
ffffffの箇所は空白でも構いません。デフォルトで指定しておきたい場合に記載しておきます。

ヘッダーテキスト機能をオフする方法

このヘッダーテキスト機能をオフにしたい場合は、次のコードを記載すると、機能自体が表示されなくなります。

[php]define( ‘NO_HEADER_TEXT’, true );[/php]

デフォルト画像を指定しておきたい場合

%s/images/default_header.jpgの部分に画像は、テーマを設定した時にデフォルトで表示される画像です。%sを記載する事で、自動的にテンプレートディレクトリーURLに変換されます。

[php]define(‘HEADER_IMAGE’, ‘%s/images/default_header.jpg’);[/php]

子テーマを作成している場合

子テーマを作成している場合は、テーマのURLは下記のように記載します。

[php]define(‘HEADER_IMAGE’, get_bloginfo(‘stylesheet_directory’) . ‘/images/banner.jpg’);[/php]

表示する画像の幅を指定する

表示する画像の横幅と縦幅を記載します。ここで設定された画像サイズが、【画像をアップロード】の部分に画像サイズが入ります。

[php]define(‘HEADER_IMAGE_WIDTH’, 775);
define(‘HEADER_IMAGE_HEIGHT’, 200);[/php]

投稿した画像をサイトに表示する方法

投稿した画像をサイトに表示する方法は、2つあります。
CSSで背景画像として表示する方法と、画像として表示する方法です。

CSSで背景画像としてサイトに表示する方法

アップロードした画像をCSSで背景画像として使用したい場合、下記のコードをfunction.phpに記載します。

[php]function header_style() {
?>

上記のコードを記載した後、更に以下の一行を加えます。

[php]add_custom_image_header(‘header_style’, ”);[/php]

上記の一行を加える事で、’wp_head’アクションを通して、間にCSSが追加されます。必ず、header_styleを同じ名前にします。

カスタムヘッダーの管理画面にCSSを追加する方法

カスタムヘッダーの管理画面で、アップロードした画像の制御をおこないたい時、下記のコードをfunction.phpに記載します。
これは、カスタムヘッダーの管理画面の【プレビュー】で、表示している画像サイズを下記のように指定する事で、画像上にサイトのタイトル名を表示させる事ができます。

[php]// gets included in the admin header
function admin_header_style() {
?>

上記のコードを記載した後、更に以下の一行を加えます。

[php]add_custom_image_header(”, ‘admin_header_style’);[/php]

必ず、admin_header_styleを同じ名前にします。

CSSで背景画像としてサイトに表示する方法と、カスタムヘッダーの管理画面にCSSを追加する方法の両方の機能を使う場合は、下記のように記載します。

[php]add_custom_image_header(‘header_style’, ‘admin_header_style’);[/php]

カスタムヘッダー機能でアップロードした画像をテーマに表示する方法

テーマに直接imgタグで表示したい場合は、下記のコードをテーマの表示させたい箇所に記載します。

[php]