Twenty Tenテーマでページごとにヘッダーの画像を変える

Twenty Tenテーマは「アイキャッチ画像」というのに対応しているので、管理画面から簡単にそのページごとにヘッダーの画像を変える事が出来ます。

今回は、ページで作ったABOUTのページに違う画像を適用してみようと思います。

アイキャッチ画像のアップロード

アイキャッチ画像を使いたいページの編集画面を開きます。右下に「アイキャッチ画像」というメニューがあります。そこの「アイキャッチ画像を設定」というリンクをクリックします。

そうすると、画像のアップロードの画面が開きますので、使いたい画像を選んで普通にアップロードします。

アイキャッチ画像として設定する

アップロードしたら、一番下の方に、「投稿に挿入」ボタンの隣に、「アイキャッチ画像として使用」という項目があります。そこを選ぶと...

このように管理画面にアイキャッチ画像として選んだ画像が表示されます。

実際にABOUTのページを見にいってみましょう。

このように表示されました。ページや投稿ごとに、細かくアイキャッチ画像を設定できますので、デザインにも幅が広がりますね。今回は、カスタマイズ、というより標準の使い方の解説になってしまったので、ひとつヒント、というか参考に書いておきます。

テーマファイルの中でのアイキャッチ画像の設定

Twenty tenでは、「header.phpの中で、『もし「アイキャッチ画像が設定」されていればそちらを、設定されていなければ「外観>ヘッダー」で選んでいるイメージを表示するように』という命令文が書かれている訳です。68行目当たりからのこの部分ですね。
この辺にこんな風に設定されているんだな〜〜と何となく覚えておくとよいのではないかと思います。

<?php
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() &&
							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, 'post-thumbnail' );
					else : ?>
						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
					<?php endif; ?>

Twenty Tenテーマでページごとにヘッダーの画像を変える」への5件のフィードバック

  1. ピンバック: P-mtg アーカイブ » Blog Archive » WordPress3.0でアイキャッチ画像を活用する

  2. 服部

    ご無沙汰しています。
    質問です。子テーマの中にfunctions.phpをアップロードすると、サイトが見れなくなってしまいます。従って、アイキャッチ画像やカスタムヘッダーに画像がアップロードできません・・・どうしたらよいのでしょうか??ご教示下さい。よろしくお願いします。
    補足ですが、子テーマのフォルダーの中には、comments.phpとindex.phpとpage.phpとsingle.phpとstyle.phpの入っています。

    返信
    1. webourgeon 投稿作成者

      こんにちは。
      もしかしたら、functions.phpをアップすると画面が真っ白になってしまう感じですか?

      これは多分functions.phpの書き方に問題があるのかもしれません。

      少し長くなりそうなので、あとで記事にしてみますね。

      返信
  3. KAT

    最近Wordpressを導入して始めたばかりの初心者です。このサイトで勉強中というところです。たくさん読んでいるうちになんとな〜くどんなもんかわかってきた気がします。ありがとうございます。
    ところで、わからないことは山ほどあるのですがとりあえず。ここで紹介されているアイキャッチ画像の変更がうまくいきません。管理画面に表示まではされるのですが、サイトでは変わっていないんです。何故でしょう??
    教えていただけるととても助かります。
    よろしくお願いします。

    返信
    1. webourgeon 投稿作成者

      KATさん
      はじめまして。アイキャッチ画像の変更がうまくいかないのですね。
      お使いのテーマとWordPressのバージョンは分かりますか?
      また、何かテーマに変更をしているようでしたら、それも教えていただけますか。

      念のため、ブラウザのキャッシュを空にして再読込も試してみて下さい。

      返信

webourgeon にコメントする コメントをキャンセル