BLOG

2014年6月8日/

[WordPress] 記事の最初の画像をサムネイルとして表示する

こんにちわ、ここ最近Wordpress開発に集中している宮本です。

今回はwordpressの記事一覧ページでサムネイル画像を表示するのにアイキャッチ画像を使うのではなく、記事の中に最初に出てくる画像を表示させる方法を紹介します。

いちいちアイキャッチ画像を作って設定するのも面倒、記事の中の画像を出したいという方にオススメです。

the_post_thumbnailを使ってアイキャッチ画像をサムネイルとして使う

始めに、通常の投稿時にアイキャッチ画像を指定してそれをサムネイル表示するには下記のようにします。

wp_getatattachment_imageを使い記事の最初の画像をサムネイルとして使う

続いて、アイキャッチ画像を設定していないときに記事の中の最初に挿入した画像をサムネイル画像として表示する方法です。

上記ソース中の

で、記事の中に挿入された画像を探し$thumb配列に入れております。これは記事の中に入れた画像にはWordpressが自動的に「wp-image-0000」(0000はその記事のポストID)をつけるということを利用しております。

その後、

で画像を表示しております。wp_getattachment_imageについては下記URL先に詳しく書かれておりますのでご覧ください。

テンプレートタグ/wp get attachment image – WordPress Codex 日本語版

引数の$thumb[1]で先ほど検索した画像(最初の画像の配列番号は0ではなく1)を指定し、次にサイズ(今回はthumbnail)を指定します。

これで記事の中の最初に挿入した画像をサムネイル画像として表示することが可能です。

ただし、「wp-image-0000」(0000はその記事のポストID)というクラスが自動的につけられる特性を使ったものであり、画像にこのクラスがつかないように設定している場合は使用できません。

Resent Posts

Category