WordPress アイキャッチ画像を使う上での注意点いろいろ(キャプション、RSS 関係)

Self: Taped
photo credit: moriza via photopin cc

このブログでは WordPress のアイキャッチ画像の機能を使って、記事の一覧ページや個別ページに写真を表示させています。すごく便利な機能である一方、いろいろと使う上での注意点も見えてきました。今回は自分自身が実際に困ったことと、その解決策をまとめてみます。

目次

  1. 困ったこと
  2. キャプションを表示させる
  3. RSS にアイキャッチ画像を反映させる
  4. RSS にキャプションも流す

1. 困ったこと

アイキャッチ画像の機能は、ページや端末ごとに表示サイズを切り替えたり、テーマファイルを修正するだけで後から一括して表示サイズを変更できたりと、すごく便利で重宝しています。

関連記事:

ですが、アイキャッチ画像を使い始めてからいくつかの問題にも直面しました。具体的には以下のようなことです。

  1. キャプションが表示されない
  2. RSS にアイキャッチ画像が反映されない
  3. RSS にキャプションが流れない

時間はかかりましたが1つ1つ解決してくることができたので、対処法を順次紹介します!

2. キャプションを表示させる

アイキャッチ画像に使う写真はほとんど Photo Pin から探してきているので、クレジットを表記しなければいけません。記事の中に直接クレジットの HTML コードを挿入するより、キャプションに張り付けておいて写真と一緒に表示させたいと考えたのですが、なかなか設定が大変でした。

アイキャッチ画像そのものは、Twenty Twelve であれば content.php の中で、画像を入れたい位置に次のコードを書けば表示されます。

<?php the_post_thumbnail(); ?>

ただ、これだけではキャプションまでは表示されません。こちらのサイトを参考に、以下のようにコードを書き換えると表示されるようになりました。

<?php the_post_thumbnail();
echo '<div class="post-thumbnail-caption">' . get_post( get_post_thumbnail_id() )->post_excerpt . '</div>'; ?>

キャプションは画像の下に表示され、Photo Pin などのリンクもきちんと機能します。

<div> でくくらずに次のように記述する方法も他のサイトで紹介されていましたが、私の環境ではキャプションがうまく画像の下に表示されませんでした。

<?php the_post_thumbnail();
echo get_post( get_post_thumbnail_id() )->post_excerpt; ?>

3. RSS にアイキャッチ画像を反映させる

せっかく記事にアイキャッチ画像を付けても、そのままでは RSS に画像まで配信されないので、この設定はぜひやっておいた方がいいと思います。*you さん (@ateitexe) の記事を参考にさせていただきました。

もう *you さんの記事のまんまなのですが、functions.php に次のコードを書いたらすぐに RSS にも表示されるようになりました。

function rss_post_thumbnail( $content ) {
	global $post;
	if ( has_post_thumbnail( $post->ID ) ) {
		$content = '<p>' . get_the_post_thumbnail( $post->ID ) . '</p>' . get_the_content();
	}
	return $content;
}
add_filter( 'the_excerpt_rss', 'rss_post_thumbnail' );
add_filter( 'the_content_feed', 'rss_post_thumbnail' );

4. RSS にキャプションも流す

最後に、RSS にアイキャッチ画像のキャプションも流すための設定です。自分の探し方が悪いのか、この方法が載っているサイトが全く見つからず、先ほどのコードをもとに見よう見まねで修正しました。その点だけご了承ください。

function rss_post_thumbnail( $content ) {
	global $post;
	if ( has_post_thumbnail( $post->ID ) ) {
		$content = '<p>' . get_the_post_thumbnail( $post->ID ) . '</p>' . get_post( get_post_thumbnail_id() )->post_excerpt . get_the_content();
	}
	return $content;
}
add_filter( 'the_excerpt_rss', 'rss_post_thumbnail' );
add_filter( 'the_content_feed', 'rss_post_thumbnail' );

3のコードとの違いは、変数 $content の値です。先ほどは get_the_post_thumbnail( $post->ID ) でアイキャッチ画像を、続いて get_the_content() で記事の本文(※私は RSS に全文配信しています)を取得していました。

そこで、この間に get_post( get_post_thumbnail_id() )->post_excerpt を入れて、アイキャッチ画像のキャプションを取得しています(これで合ってるのかな…?)。

こうすることで、アイキャッチ画像の下にキャプションが入る形で RSS が配信されるようになりました。

11 thoughts on “WordPress アイキャッチ画像を使う上での注意点いろいろ(キャプション、RSS 関係)

  1. Pingback: 私を食べて! | Whimsical Blog

  2. Pingback: WordPressをゴリゴリとなんとかしてみる | 好き勝手気まま

  3. にゃ

    画像一枚だけを記事にアップする場合、、アイキャッチでアップするのと、普通にアップするのはどう違いますか? どちらのほうがいいとかありますか?

    Reply
    1. hirose Post author

      にゃさん、コメントありがとうございます。画像を1枚だけ使う際にアイキャッチにするか、普通に貼り付けるか、それぞれのメリット・デメリットを自分なりに考えてみました。

      # アイキャッチ画像

      ## メリット

      ・どの記事でも同じサイズで表示される
      ・テーマファイルを自分で編集すれば、後からでも一括して表示サイズを変更できる
      ・記事と画像の結びつきが明確(プラグインを使ってサムネイル付きの記事一覧などを表示させる時、私の環境ではアイキャッチなしで複数の画像を貼り付けていると最後の方の画像がサムネイルに使われたりします)

      ## デメリット

      ・自分の思うような表示にするためには、テーマファイルを編集する必要が出てくる可能性がある
      ・テーマを変えた時に、新しいテーマによっては表示ががらっと変わる可能性がある(私は今のところずっと同じテーマなので、これは推測です)
      ・キャプションやRSS配信の設定がちょっと面倒(この記事の内容です)

      # 普通に貼り付け

      ## メリット

      ・貼り付ける時に表示サイズを指定するため、記事ごとにサイズを変えることができる
      ・テーマファイルを編集しなくてもいい
      ・RSSでもきちんと表示される

      ## デメリット

      ・後から表示サイズを変えたくなったら、1つ1つ記事を編集することが必要になる
      ・表示サイズを統一して、かつ後からでも変更可能にするためには、画像を挿入した時に img タグを編集して、CSS で設定する必要がある

      もし分かりづらかったらすみません。テーマファイルを編集することに抵抗がなければ、アイキャッチにする方が柔軟性があるように思います。それに対して、とりあえず画像を表示させられればオッケーということであれば、直接貼り付ける方がお手軽だと思います。

      個人的には、デザイン的にもこれからいろいろと変えていきたいということもあり、メンテナンスが簡単なアイキャッチ方式を取っています。

      Reply
  4. にゃ

    詳しい解説ありがとうございます! とても分かりやすいです。
    後々のことを考えなければ普通に貼るほうが便利だけど、後々のデザイン変更などを考えたら、アイキャッチ画像の方がいいということですね。
    ブログの一つの記事並みの詳しい解説ありがとうございました!

    Reply
    1. hirose Post author

      そう言っていただけると、すごく嬉しいです。ありがとうございます!

      どちらもメリット・デメリットがありますので、目的や労力に照らして、やりやすい方法をお選びになっていただければ、と思います。何かありましたら、私に答えられる範囲でお答えしますので、ぜひまた遊びに来てください!

      Reply
  5. Pingback: [WordPress]テーマを自作する〜その③〜アイキャッチ画像に関するあれこれの2回目。 | Sorairo

    1. hirose Post author

      nanashi さん、初めまして。コメントありがとうございます。テーマ作り、自分も挑戦中なのですが、難しくてすっごく悩みますよね。お互いに頑張りましょう!

      Reply

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です