【WordPress】最新記事をアイキャッチリンクで表示する

公開日：2014/03/06

更新日：2014/03/06

カテゴリー: WordPress

通常、最新記事の出力はタイトルリンクで行いますが、記事にアイキャッチを付けている場合、折角ならアイキャッチリンクにしたいものです。

ここではアイキャッチリンクで最新記事を出力する方法を説明します。

get_post_thumbnail_id関数

最新記事はお決まりのループで出力していきますが、その際get_post_thumbnail_id関数を用いると、ループさせている記事のアイキャッチ画像のIDを取得できます。

get_post_thumbnail_id();

記事のアイキャッチ画像のIDを返す
アイキャッチ画像がセットされていない場合nullを返す

wp_get_attachment_image_src関数

get_post_thumbnail_id関数で取得したアイキャッチ画像のIDをwp_get_attachment_image_src関数に渡すことで、そのアイキャッチ画像の各種情報を配列で取得できます。

wp_get_attachment_image_src(アイキャッチ画像のID, 画像サイズ, アイコンの使用);

アイキャッチ画像ID
アイキャッチ画像のIDを指定
画像サイズ
「thumbnail」「medium」「large」「full」（これらのサイズはダッシュボード→設定→メディアで設定されているサイズを元に処理された画像のサイズ）と配列「array( ○○, ○○ )」で指定。省略時は「thumbnail」
アイコンの使用
アイコンを使用する場合はtrue、使用しない場合はfalseを指定。省略時はfalse
基本的に画像ファイルの場合はfalseで、画像ファイル以外の場合にtrue
trueにすると、WordPressが準備（/wp-includes/images/crystal）しているアイコン（アーカイブ、音楽、動画、文書、テキストなど）の情報を取得

配列の情報

wp_get_attachment_image_src関数で返ってくる配列にどんな情報が含まれているか掲載します。

Array
(
    [0] => http://○○○.com/wp-content/uploads/1-0-231x300.jpg
    [1] => 231
    [2] => 300
    [3] => 1
)

このように、アイキャッチ画像のURLと幅と高さの情報が格納されています（4つ目の要素は情報の取得が成功すれば1、失敗すれば0）。

サンプルプログラム

以上を踏まえて最新記事をアイキャッチリンクで表示させるサンプルプログラムを紹介したいと思います。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
<?php
//アイキャッチ画像のID取得
$image_id = get_post_thumbnail_id();
//IDがnullじゃない場合処理する
if (!empty($image_id)){
	//アイキャッチ画像の情報取得
	$image_url = wp_get_attachment_image_src($image_id,"medium", true);
	//アイキャッチ画像のURL取得
	$thumbnailurl = $image_url[0];
	//アイキャッチ画像のサイズ取得
	$thumbnailsize_width = $image_url[1];
	$thumbnailsize_height = $image_url[2];
}
//アイキャッチリンクを出力
echo '<a href="' . clean_url(get_permalink()) . '"><img src="' . clean_url($thumbnailurl) . '" width="' . $thumbnailsize_width . '" height="' . $thumbnailsize_height . '" /></a>';
?>
<?php endwhile;	endif; wp_reset_query(); ?>

あわせて読んでほしい！

Follow @ysklog_net 　