はてなブックマーク - トップページにアイキャッチ画像(サムネイル)を自動的に表示させる方法
Pocket

トップページの更新記事一覧にアイキャッチ画像(サムネイル)を自動表示させたかったので、その方法を調べてみた。

functions.phpにアイキャッチを使う宣言をする

functions.php内に以下の記述を加える。

function mysetup() {
  add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'mysetup' );

そして以下をアイキャッチを表示させたい場所に設置すればオーケーという方法。

<?php the_post_thumbnail(); ?>

画像をアップした際に「アイキャッチ画像として使用」というリンクが現れるので、それをクリックすれば完了。

しかし、これだとアイキャッチを設定後、それとは別に個別記事のページで通常サイズの画像の設置を指定しないといけない。そしてFlickrなどの外部の画像を使いたい時には、アイキャッチに指定する事が出来ない。

結局プラグインを探すことに。

プラグイン「Thumbnail for Excerpts」

抜粋記事にサムネイル画像を表示する方法 – WordPressのプラグイン | Thumbnail for Excerptsの使い方 | SEOテンプレート比較

Thumbnail for Excerptsは、トップページやカテゴリページを抜粋表示にした上で、さらに記事の中で使われている最初の画像を自動的に拾い出して、サムネイル表示してくれるプラグインです。

こちらを参考にした。導入後は

<?php the_content(); ?>

これを

<?php the_excerpt(); ?>

に書き換えれば完了。後はCSSで見た目を整えれば完成。

プラグインとほぼ同様の機能をfunctions.phpへの記述で実現

サムリのブログはプラグイン導入で落ち着いたが、facebookでうかさんがいい方法を教えてくれたので、参考までに紹介。

やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 | gerenuk.crazyphoto.org/

記事中の最初の画像を自動検出して、表示する方法

例えばトップページなどで、サムネイル画像から個別記事にリンクしているギャラリーサイトがありますが、これらのサイトのほとんどは各記事のカスタムフィールドにサムネイル画像の URL を登録しておいて、get_post_meta を使ってテーマで呼び出しています。
しかし以下のコードを使えばその手間を省いて、記事中で使われている最初の画像を自動検出し、表示させることが出来ます。

プラグインを導入しなくても、functions.phpに記述するだけで簡単に設定できてしまう。この方法でも良かったかも知れない。

今回3種類の方法を紹介したが、初心者はプラグインが一番簡単かもしれない。

まとめ

  • アイキャッチが導入できて、思った通りのデザインになってうれしい。
  • facebookで教えてくれた、うかさんに感謝。
  • 改めてプラグインって凄いと実感。
2011年8月29日

ブログの更新情報はこちらからどうぞ

RSSリーダーへ登録していただく他に、facebookページや、twitterからもブログの更新情報をお知らせしています。是非ご登録下さい。



自己紹介

サムリ。1974年4月生まれ。東京都出身、埼玉在住。アメコミ映画に、仮面ライダー、ロボットアニメが好きな二児の父でフリーランスやっています。詳しいプロフィールはこちら

  • サムリブログのはてなブックマーク数

WordPressのプラグイン の最新記事