Cat Speak

札幌在住のWebデザイナー・コモモのブログ

ホーム > ウェブ制作Tips > jQuery > アイキャッチ画像に複数のサイズを指定し、ThickBoxのような写真ギャラリー

アイキャッチ画像に複数のサイズを指定し、ThickBoxのような写真ギャラリー

アイキャッチ画像を利用して、WordPressでThickBoxのような写真ギャラリーを作ることになったので、手順をメモしておきます。
ThickBoxの使い方については、特に触れていません。

関連記事:アイキャッチ画像を表示する


アイキャッチ画像のサイズを複数指定する場合はIDを指定します。

functions.php

add_theme_support( 'post-thumbnails'); //アイキャッチ画像を追加
set_post_thumbnail_size( 150, 150 ,true); //通常のサムネイル
add_image_size('large_img', 300, 300 ); //2つ目からはIDを指定

通常のサムネイルを出力するには

if (has_post_thumbnail()) the_post_thumbnail();

2つ目のサイズの画像からはIDを指定します。

if (has_post_thumbnail()) the_post_thumbnail('large_img');

参考サイト:WordPressのアイキャッチ画像を複数サイズ表示させる – Simple Colors

今回は、アイキャッチ画像を利用した写真ギャラリーなので、大きい画像にリンクしたサムネイルのリストで表示するようにしました。

ループ内

<ul>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
if (!has_post_thumbnail()) continue; 
$thumbnail_id = get_post_thumbnail_id($post->ID); 
$image = wp_get_attachment_image_src( $thumbnail_id, 'large_img' );
?>
<li>
<a href="<?php echo ($image[0]); ?>" rel="gallery" class="thickbox"  title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
</li>
<?php endwhile; endif; ?>
</ul>

通常のアイキャッチ画像の出力ではimgタグが出力されてしまいますが、今回はThickBoxを考えていたので、画像のURLのみが必要でした。

$thumbnail_id = get_post_thumbnail_id($post->ID); 
$image = wp_get_attachment_image_src( $thumbnail_id, 'large_img' );

get_post_thumbnail_idで、現在の投稿のアイキャッチ画像IDを取得し、wp_get_attachment_image_srcで、画像のURLを取得します。

また、continueでアイキャッチ画像を持たない投稿は処理を飛ばしています。

if (!has_post_thumbnail()) continue;

最近あまりブログを更新できていなくて、久しぶりにWordPress関連の記事を書いた気がします。ずっとワプーがかわいいとずっと思っていたのですが、ブログにわぷー画像をアップしたのが初めてでした。やっぱめんこいです^^

コメントを残す

人気の記事