WordPressの3.0の新機能として、カスタムヘッダーがあります。
WordPressのテーマにカスタムヘッダー機能を追加する事で、管理画面から画像をアップロード、指定された箇所にサイトに反映させる事ができます。
管理画面>外観>ヘッダーのリンクが出現します。
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 }[/php] <p>上記のコードを記載した後、更に以下の一行を加えます。</p> add_custom_image_header('header_style', '');
上記の一行を加える事で、’wp_head’アクションを通して、
間にCSSが追加されます。必ず、header_styleを同じ名前にします。カスタムヘッダーの管理画面に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 }[/php] <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="" />
これで、テーマ自身にカスタムヘッダー機能を追加する事ができます。