WordPressの投稿記事内の画像の最初の1枚をサムネイルとして表示する方法

アイキャッチではなく、投稿記事内の画像を使用してサムネイルとしてトップページやサイドバー等に表示する方法です。調べていたら色々方法がありましたので、書き出してみました。

get_postsタグを使用してサムネイルを表示する

get_postsを使用して投稿記事の添付画像を取得し表示する方法です。
下記のコード表示したい箇所に記入します。このコードでサムネイルサイズ(150px × 150px)のサイズの画像を表示します。

<?php
$args = array(
	'post_type' => 'attachment',
	'posts_per_page' => 1,
	'post_status' => null,
	'post_parent' => $post->ID
	); 
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		echo the_attachment_link($attachment->ID, false);
	}
}
?>

”the_attachment_link($attachment->ID, false”の箇所のthe_attachment_linkの第二引数にサムネイルのサイズを指定できるはずなのですが、’medium’を設定すると’full’のサイズが表示されてしまいうまくサイズの指定ができませんでした。

get_childrenタグを使用してサムネイルを表示する

get_childrenタグを使用して投稿記事の添付画像を取得し表示する方法です。
下記のコード表示したい箇所に記入します。

<?php
$files = get_children("post_parent=$id&post_type=attachment&post_mime_type=image");
if (!empty($files)){
$keys = array_keys($files);
$num=$keys[0];
$thumb=wp_get_attachment_thumb_url($num);
print '<a href="' . clean_url(get_permalink()) . '" title="' .
the_title_attribute('echo=0') . '"><img src="' . clean_url($thumb) .
'" width="100" height="100" alt="' . the_title_attribute('echo=0') . '" /></a>' . "\n";
}
?>

   

img srcの記述を拾って画像を取得し表示する

投稿記事内のimgタグを探して画像を取得し表示する方法です。投稿記事内の画像を取得するので、添付ファイルがない場合でもサムネイルとして表示してくれるので、このブログのサイドに表示している最近の投稿記事一覧のサムネイルはこちらの方法で表示しました。

function.phpで下記の関数を記入します。

function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];

	if(empty($first_img)){ //Defines a default image
    	$first_img = "/images/default.jpg";
	}
return $first_img;
}

  
表示したい箇所に下記を記入します。

<img src="<?php echo catch_that_image(); ?>" alt="" width="" height="" />; ?>

このままだと記事内の画像が強制的にサイズが指定されるので横に伸びてしまったりします。私は画像サイズの横幅のみ指定し、CSS側でサムネイルを表示する親ボックスに縦サイズを指定して、overflow:hiddenにしました。

プラグインでサムネイルを表示する

WordPress › QF-GetThumb « WordPress Plugins というプラグインでサムネイルを生成できるようです。

Related Article

10 Comments & Tracbacks

  • のこ 2015-05-15 6:32 PM

    こんにちわ!とても参考になる記事でした。
    表示する添付ファイルを画像ではなく
    MP3などの音のみにすることも可能でしょうか?

    Reply

    • saori 2015-05-15 9:57 PM

      のこ さま

      ご参考ありがとうございます。音楽ファイルを添付した経験がないのであまり自信がありませんが…。
      3つ目の「img srcの記述を拾って画像を取得し表示する」という方法ならば、6行目の preg_match_all 関数の第一引数を、その音楽ファイルがマッチするようなパターンにすることで、音楽ファイルへのパスは拾えるのではないかな?と思います。

      Reply

      • Kaylan 2016-07-20 7:20 PM

        That’s a knowing answer to a diulfcift question

        Reply

Leave a Comment

saori にコメントする コメントをキャンセル

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS