「WordPressでアイキャッチを登録をするのが面倒くさい」
「OGP用にアイキャッチがなかったときの処理をしたい」
そんなときに、記事内の画像を利用できると便利ですよね。
この記事では、記事内にある最初の画像のURLを取得する方法を解説します。
ソースコード
記事内の最初の画像を取得するソースコード。
<?php
$first_image = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
preg_match($first_image, $post->post_content, $image_url);
echo '<img src="'. $image_url
.'">';
コピペして挙動を確認するだけでもいいんですが、なぜそういう記述をするのかも知っておくと、学習の理解も深まると思います。
$postには情報がいっぱい
まずは、どうやってアイキャッチの情報を取得するのかですが、WordPressの記事情報は『$post』に詰まっています。
『print_r()』で$postに入っている情報を表示してみます。
print_r()は指定した変数の中に入っている情報を表示させることができる変数です。
この関数を知らないころは、なんでそういうソースコードになるのか理解できないこともありました。
print_r()を使って、変数の戻り値を確認するようにしたら、やりたいことを実現するソースコードを自分で書けることがグンと増えた気がします。
single.phpで以下のコードを記述し、どんな値が表示されるか見てみます。
<?php print_r($post) ?>
右クリックから『ページのソースを表示』させてみると、ズラッと投稿に関するいろんな情報が表示されているのが分かります。
あらかじめ記事に画像も入れておきました。
記事内の情報が入っているのは、『post_content』の部分です。
そこに記事内の画像もあります。
つまり、記事内の画像に関する情報は『$post->post_content』で取得できることになります。
preg_matchでimgタグの中の画像URLを取得する
続いて、imgタグの中の画像URLを取得します。
preg_matchという関数を使って、『<img〜>』が記事の中にあるかどうか検索させます。
そして、imgタグはHTMLで指定するのではなく、正規表現という特殊文字（メタ文字）で構成された文字列で指定しなければなりません。
imgタグを検索するための正規表現は『/<img.?src=([“\’])(.+?)\1.?>/i』。
preg_matchで指定するパラメータはこんな感じ。
preg_match('①何を探す？', '②どこを探す？', '③検索結果を入れておく変数');
ここでは、
①imgタグを探す→『/<img.?src=([“\’])(.+?)\1.?>/i』
②記事内の情報を探す→$post->post_content（$postにあるpost_contentsの部分）
③$image_url（任意の文字列でOK）
まとめると、以下のようになります。
preg_match('/<img.*?src=(["\'])(.+?)\1.*?>/i', $post->post_content, $image_url);
print_r()でどんな結果が表示されるか見てみましょう。
<?php print_r($image_url) ?>
preg_matchでマッチングされた結果が$image_urlに入ります。
取得するデータを選ぶ
取得するデータを選びます。
最終的に『<img src=””>』のsrcの部分に入れるURLが欲しいので、必要なのは『』です。
よって、変数$image_urlの中のというデータを指定すれば、投稿の中の画像URLが取得できます。
echoで画像を表示させてみましょう。
echo '<img src="'. $image_url .'">';
投稿した画像が表示されていればOKです。
ソースコード完成版
最後に、『もしアイキャッチ画像がなかったら、投稿記事の最初の画像を取得する』というソースコードを書いてみました。
<?php
if(!has_post_thumbnail()) {
$first_image = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
preg_match($first_image, $post->post_content, $image_url);
echo '<img src="'. $image_url .'">';
}
以上です。
