wordpress ヘッダーの画像をアイキャッチに対応
下層ページのみヘッダー画像をページ毎に簡単に変更するという カスタマイズをしたのだが、絶対に忘れてしまうので 備忘録として記しておこう。
wordpressの新しい機能として カスタムヘッダーとアイキャッチ画像の登録というのがある。
簡単に説明すると
カスタムヘッダーはテーマの編集でヘッダー画像を変更出来る仕組み
アイキャッチ画像とはその記事を代表するサムネイル等に使用する画像を指定するもの
というわけで、通常はカスタムヘッダーで登録した画像をヘッダーに表示し、アイキャッチ画像を設定したページや記事には アイキャッチ画像がヘッダー画像として設定されるというカスタマイズをしてみました。
まずfunction.phpにカスタムヘッダーの設定をする。
詳しい説明は省きます。
[php]add_custom_image_header(‘header_style’,’admin_header_style’);
define(‘HEADER_IMAGE_WIDTH’,920);
define(‘HEADER_IMAGE_HEIGHT’,189);
define(‘HEADER_TEXTCOLOR’,”);
function header_style() {
}
function admin_header_style() {
}
[/php]
HEADER_IMAGE_WIDTHWIDTH’,920はヘッダー画像の幅です
HEADER_IMAGE_HEIGHT’,189はヘッダー画像の縦です。任意で変更して下さい。
次にアイキャッチの設定をfunction.phpに加えます。
[php]add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 920, 189, true );[/php]
これでfuncion.phpの設定は終わりです。
知らない方の為に・・・function.phpはテーマの中にだいたいあります。なければ作りましょう。記述は必ず
[php]<?php ここに関数を入れる ?＞[/php]
で閉じる事。この間に上のタグを入れればいいのです。
header.phpの画像を表示させたい場所に入れるタグ
次にヘッダーの画像を表示したい部分に下記のタグを入れます。これはTwentytenからコピーしたものです。なのでヒューストンなんたらかんたら！というコメントも消さずにおいています＾＾；
[php]<?php
// Check if this is a post or page, if it has a thumbnail, and if it’s a big one
if ( is_singular() && current_theme_supports( ‘post-thumbnails’ ) &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘post-thumbnail’ ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID );
elseif ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>
[/php]
さぁ！それではヘッダー画像を登録してみましょう。
まずはデフォルト画像をダッシュボード 外観メニュのヘッダーから登録してみましょう。
ここで登録した画像はアイキャッチを設定していないページに表示されます。
そして新規ページ作成でアイキャッチを設定してみましょう。
右下にアイキャッチ画像の設定ウィンドウが表示されているはずです。
ここで画像を指定して アイキャッチ画像に設定を押せば その画像がヘッダーに現れます。
感動します。
may the force be with you…
