ブログの本文から画像を持ってきて、サムネイルを一覧で表示させたい

まっちー

まっちー

WPのお話。

サイドバーやフッターなどに投稿した画像の一覧をサムネイルで表示したい、そんな時。

 €WPには公開されているプラグインがいっぱいあるので、その中にはそういう希望を叶えてくれるものもいくつかあります。ただ、管理画面のメディアライブラリに登録されている画像を取得してきてその一覧を作成してくれるプラグインはあるんですけど、過去に投稿された画像、例えば別のところでブログを書いていて、ある日WPに乗り換えたときなんかに、今までの分の画像というのは当然メディアライブラリにも登録されていないので、それらのプラグインを使っても過去の画像は持ってきてくれない。いや、中にはそういうプラグインも探せばあったのかもしれないですけど、探し方が悪かったのかちょっと見当たらなかったので、ここではそんな過去に投稿された画像を持ってくる方法を試みたいと思います。

方法論的には至ってシンプルで、投稿された記事の中に画像があるかを検索するだけです。

WPでは、get_the_content()で投稿記事の本文が取得できるので、それを使います。ここでは、各個別記事に複数画像がある場合でも、最初の一枚だけを取ってきたいと思います。

$url = str_replace('/', '/', get_bloginfo('url'));
preg_match('/src="'.$url.'(.*)(.jpg|.gif|.png)"/', get_the_content(), $image);

if(!empty($image)) {
 € € € サムネイルを新たに生成する必要がある場合は、ここで生成処理を書く

 € € € echo "<img $image[0] />";
}

preg_matchを使うと、結果は配列で返ってきます。imgタグそのものじゃなくてsrc属性のところだけ取ってきてるのは、新たにサムネイルを生成する際に画像につける名前などが必要になるから、こっちの方が使いやすい。わざわざ$urlにサイトのURLをぶっ込んでpreg_matchの中で使っているのも同様の理由です。別に$urlの部分はなくても問題はないです。ただし使うからには、上でもやっているようにスラッシュをエスケープ処理してやらないとエラーになります。

で、上記のような書き方だと、結果配列は以下のようになる。

記事の中に<img src="http://sample.net/test.jpg" />があった場合。

array([0] => src="http://sample.net/test.jpg" €
 € € € € € [1] => /test
 € € € € € [2] => .jpg
)

配列の0番を使えばsrc属性が簡単につくし、1番はサムネイルを生成する際のファイル名に使いやすい。

まあ、書いてみてから思ったことですけど、サムネイルを新たに生成するとなるとちょっと面倒な処理が必要になりますが、こうして画像を本文から取ってくるだけなら、わざわざプラグインにするまでもないですよね。そんな難しい処理でもないし。

だからそういうプラグインがないのかな……とか、今ちょっと思った。

ちなみに記事の中にある画像を一枚だけじゃなくて全部取ってきたいような場合には、preg_matchの代わりにpreg_match_allを使って、結果配列をforeachとかで回せば良いだけ。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

プログラマのまっちーです。酒が大好きです。ある一定量のお酒を飲むと壊れたレディオモードに入り、同じことを繰り返す癖があります。宜しくお願いいたします。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL