since 2003

blog ブログ

WordPressでサムネイルから画像へリンクを貼る

2013.05.30

大体はサムネイルから詳細ページへリンクするパターンが殆どだと思うが、画像へリンクを貼ってほしいとのリンクエストがあったので、今回やったことを書き留めておく。

ギャラリーにして上げてしまえば楽なのでが、今回は2ヶ所で違うサイズの「サムネイルを同時に表示してほしい」「サムネイルのトリミングを手動で行いたい」「1ページに画像カテゴリーで分けて表示してほしい」等々、リクエストが多かったのでギャラリーはやめた。

では、サムネイル(アイキャッチ画像)から画像(大)へのリンクの貼り方を…全体像は以下になる

<?php if(have_posts()):while(have_posts()):the_post();?>
<li><?php $thumbnail_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src($thumbnail_id, 'large_img'); ?>
<a href="<?php echo $image[0]; ?>"rel="lightbox[led]" title="<?php echo get_post( get_post_thumbnail_id() )->post_excerpt;?>"><?php the_post_thumbnail('thumbnail');?></a></li>
<?php endwhile; endif;?>

今回はlightboxで、且つグループ(カテゴリー毎に)スライドショー、キャプションを入れた…等々のリクエストがあったので、プラグインのlightboxを使わずに、JSファイルを手動でアップしてテンプレートに記述した。

画像リンクの部分は

<?php $thumbnail_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src($thumbnail_id, 'large_img'); ?>
<a href="<?php echo $image[0]; ?>"><?php the_post_thumbnail('TOP');?></a>

ついでにLightboxにキャプションを表示させる時の取得方法は

"rel="lightbox[led]" title="<?php echo get_post( get_post_thumbnail_id() )->post_excerpt;?>"

関連記事

Archive

Category

Recent Entry