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

Sponsored Link

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

Sponsored Link

カスタムヘッダーへのリンク箇所

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

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

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

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

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

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

define('HEADER_TEXTCOLOR', 'ffffff');
define('HEADER_IMAGE', '%s/images/default_header.jpg');
define('HEADER_IMAGE_WIDTH', 775);
define('HEADER_IMAGE_HEIGHT', 200);

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

add_custom_image_header();

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

ヘッダーテキスト機能

ヘッダーテキストを追加する

define('HEADER_TEXTCOLOR', 'ffffff');

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

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

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

define( 'NO_HEADER_TEXT', true );

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

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

define('HEADER_IMAGE', '%s/images/default_header.jpg');

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

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

define('HEADER_IMAGE', get_bloginfo('stylesheet_directory') . '/images/banner.jpg');

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

設定した画像サイズが表示される

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

define('HEADER_IMAGE_WIDTH', 775);
define('HEADER_IMAGE_HEIGHT', 200);

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

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

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

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

function header_style() {
?><style type="text/css">
#header {
background: url(<?php header_image(); ?>);
}
   </style><?php
}&#91;/php&#93;
<p>上記のコードを記載した後、更に以下の一行を加えます。</p>
add_custom_image_header('header_style', '');

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

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

カスタムヘッダー画面にCSSの画像幅を指定した場合

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

// gets included in the admin header
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
}&#91;/php&#93;
<p>上記のコードを記載した後、更に以下の一行を加えます。</p>
add_custom_image_header('', 'admin_header_style');

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

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

add_custom_image_header('header_style', 'admin_header_style');

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

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

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

これで、テーマ自身にカスタムヘッダー機能を追加する事ができます。

Sponsored Link