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;?>"
Mac・PC・ガジェット