WordPressで投稿した記事の本文から一番最初にある画像のパスを取得する方法

4053 Views
2017年04月11日 WordPress

デフォルトの投稿や、自分で増やしたカスタム投稿などを使ってすでに作られているサイトで、
本文にある画像を一覧の時にサムネイルに使用したいとなった時、
記事の件数が少なければカスタムフィールドを追加して、それをサムネイルにすればいいですが、
すでに100件を超える記事などがある場合はカスタムフィールドで対応するのは難しいでしょう。。。

そんな時に使える関数です！

SNSでシェア♪

必要な情報は「$post_id」だけ！

おそらくこの関数を使用するのは一覧ページなどのアーカイブを作る時だと思います。
だいたいは以下のようなコードになると思います。

<?php
//アーカイブの表示
if (have_posts()) {
	while (have_posts()) {
		the_post();
		
		$title   = get_the_title();		//タイトル
		$content = get_the_content();	//本文
		
		echo "
			<article>
				<h1>{$title}</h1>
				<div class=\"clearFix\">
					{$content}
				</div>
			</article>
		";
	}
}
?>

<?php

//アーカイブの表示

if (have_posts()) {

while (have_posts()) {

the_post();

$title = get_the_title(); //タイトル

$content = get_the_content(); //本文

echo "

<h1>{$title}</h1>

{$content}

</div>

</article>

}

そこでこのように増やしてあげてください。【7行目に追加あり】

<?php
//アーカイブの表示
if (have_posts()) {
	while (have_posts()) {
		the_post();
		
		$post_id = get_the_ID();		//記事ID
		$title   = get_the_title();		//タイトル
		$content = get_the_content();	//本文
		
		echo "
			<article>
				<h1>{$title}</h1>
				<div class=\"clearFix\">
					{$content}
				</div>
			</article>
		";
	}
}
?>

<?php

//アーカイブの表示

if (have_posts()) {

while (have_posts()) {

the_post();

$post_id = get_the_ID(); //記事ID

$title = get_the_title(); //タイトル

$content = get_the_content(); //本文

echo "

<h1>{$title}</h1>

{$content}

</div>

</article>

}

これで「$post_id」の準備は完了です。

functions.phpに以下のコードを追加

//投稿IDから本文の画像を取得する
function getContentImage($post_id) {
	$getPost = get_post($post_id);
	$content = $getPost->post_content;

	//文章から画像を取得
	preg_match_all('/<img.*src\s*=\s*[\"|\'](.*?)[\"|\'].*>/i', $content, $imgPathList);

	//画像の表示だし分け
	return (isset($imgPathList[1][0])) ? $imgPathList[1][0] : false;
}

//投稿IDから本文の画像を取得する

function getContentImage($post_id) {

$getPost = get_post($post_id);

$content = $getPost->post_content;

//文章から画像を取得

preg_match_all('/<img.*src\s*=\s*[\"|\'](.*?)[\"|\'].*>/i', $content, $imgPathList);

//画像の表示だし分け

return (isset($imgPathList[1][0])) ? $imgPathList[1][0] : false;

}

簡単ですね。
あとは使い方です。

関数の使い方

先ほどのループの続きです。【11行目から追加あり】

<?php
//アーカイブの表示
if (have_posts()) {
	while (have_posts()) {
		the_post();
		
		$post_id = get_the_ID();		//記事ID
		$title   = get_the_title();		//タイトル
		$content = get_the_content();	//本文
		
		$src = getContentImage($post_id);
		if (!$src) $src = '/images/no_image.jpg';	//No Imageの画像パスを指定
		
		echo "
			<article>
				<h1>{$title}</h1>
				<div class=\"clearFix\">
					<img src=\"{$src}\" alt=\"\" style=\"float: left; margin-right: 10px;\">
					{$content}
				</div>
			</article>
		";
	}
}
?>

<?php

//アーカイブの表示

if (have_posts()) {

while (have_posts()) {

the_post();

$post_id = get_the_ID(); //記事ID

$title = get_the_title(); //タイトル

$content = get_the_content(); //本文

$src = getContentImage($post_id);

if (!$src) $src = '/images/no_image.jpg'; //No Imageの画像パスを指定

echo "

<h1>{$title}</h1>

{$content}

</div>

</article>

}

これだけです♪
※画像のサイズはCSSで調整を行ってください。

あとがき

この方法であれば投稿・カスタム投稿問わず画像の有無を判定してとってこれます。
これで既存サイトのリニューアル時に記事一つ一つに手を加える必要はないですね。

SNSでシェア♪

WordPressで投稿した記事の本文から一番最初にある画像のパスを取得する方法

必要な情報は「$post_id」だけ！

functions.phpに以下のコードを追加

関数の使い方

あとがき

関連記事