SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

【WordPress】記事中で使用している画像を1つ取得する

問題

WordPressで、記事中で使用している画像を1つ取得して、OGP(Open Graph Protocol)のmetaタグ(property=”og:image”)に利用したり、サムネイル表示などに使いたい。

答え

投稿記事中に使っている画像の中からひとつ、代表で取り出したいことがある。

「一番大きい画像」などの判断は難しいが、「最初に使っている画像」でよかったらさほど難しくない。

ヘッダー(header.php)で、以下のように書いて、代表とする画像を取得して、OGP設定に使ったりできる。

<?php

//デフォルトの画像もあっていいでしょう
$og_image = 'https://www.softel.co.jp/img/favicon.png';
//単独の記事のとき
if (is_singular()) {
	//単独の記事なのでwhileは1周しかしないはずですが
	if (have_posts()) : while (have_posts()) : the_post();
		//投稿記事のHTMLから正規表現で1つ目のimgタグのsrc属性を取得
		if (preg_match('|<img.*?src="(.*?)"|', $post->post_content, $matches)) {
			//もし記事中に画像があればここで代入される
			$og_image = $matches[1];
		}
	break; endwhile; endif;

	//念のため巻き戻しておいた方がよいでしょう
	rewind_posts();
}

?>
<!DOCTYPE html>
<html>
<!-- 以下HTML出力へ。$og_imageに画像のURLが入っているはず。 -->
<meta property="og:image" content="<?php echo $og_image; ?>">

関連するメモ

コメント