メディア運営においてアイキャッチ画像はとても大事。アイキャッチ画像があるとないのとではクリック率が大きく変わってくる。
理想はその記事ごとに作り込んだアイキャッチ画像を用意することだが、難しい場合もあるだろう。
そんな時の代替案として
- デフォルトのアイキャッチ画像を用意する
- 記事内の画像をアイキャッチ画像として使う
- 諦める
の3パターンが考えられる。諦めない心を持ちながらデフォルトアイキャッチの設定方法は割愛し、今回は記事内の画像を利用する方法を紹介する。
正規表現でイメージタグを抜く
記事本文内から正規表現を用いてイメージタグを抜いてくる手法が真っ先に思いつく。
|
1 2 3 4 |
$content = get_the_content(); $pattern = '/<img.*?src\s*=\s*[\"|\'](.*?)[\"|\'].*?>/i'; preg_match_all($pattern, $content, $images); echo '<img src="' . $images[1][0] . '">'; |
みたいな感じ。しかしこの方法だとサイズの指定をすることができない。cssで対処しちゃおうってのもありだが、私は任意のカスタムサイズにクロップされた画像が欲しかった。
となると必要なのは画像のURLではなく画像のIDだ。IDさえわかればあとは”wp_get_attachment_image”などで出力可能なはずだ。
get_childrenで画像のIDを抜く
WordPress投稿内の画像には”wp-image-xxxx”というクラスが付与されていて、このxxxxが画像のIDだ。これを正規表現で抜けばよい。
よいのだが「記事内の画像を検索→画像に付与されているクラス名を検索→クラス名からIDを抜き取る→IDから画像を出力」
というのはイマイチ賢くない気がした。もっと簡単な方法があるのでは？と考えたところ、投稿に紐づく添付ファイルや子ページなどを取得する”get_children”という関数を発見した。
これを使えばスマートに解決できそうだ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function my_get_first_image_ID() { $attachment_image = get_children( array( 'post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'numberposts' => 1, ) ); return $attachment_image->ID; } |
こんな感じの関数を作っておいてループ内にて
|
1 |
<?php echo wp_get_attachment_image(my_get_first_image_ID(), 'custom_size', false, array('class'=>''));?> |
ってすればOK。
余談だが、WordPressのfunctions.phpに独自関数を書く場合命名に注意した方がいい。WordPressの組み込み関数と名前がかぶる恐れがあるからだ。”my_”でもなんでもいいのでオリジナルな接頭辞をつければ回避できるだろう。
ただし、この方法だとある投稿に紐付いた画像しか取得できないことには留意されたい。全く別のサイトに配置されている画像を引っ張ってきて埋め込んでいる場合などには対応できない。
もちろんアイキャッチ画像を作る余力があった場合はそちらを使うべきなので
- アイキャッチ画像がある場合はアイキャッチ画像
- アイキャッチ画像がなくて記事内に画像がある場合は記事内の画像
- アイキャッチ画像もないし記事内にも画像はない場合はデフォルトアイキャッチ
と条件分岐させるのがベター。
記事内の画像にもこだわっていれば、この方法でそれらしいアイキャッチが生成できるのでぜひお試しあれ。
