WordPressで記事詳細時のページャーをサムネイル付きのぺージャーにする方法。
どうも、WordPress大好きっ子afiruことN.Sです。
今回は、クライアントの実績紹介に関する詳細ページにサムネイル付きのページャーが欲しいということで
どうにかできないかと思ったところ「get_adjacent_post」という便利な関数があったので、作ってみました。
こちらがそのコードになります。
<?php
$now_cats = get_the_category(get_the_ID());
$now_cat = $now_cats[0]->cat_ID;
$prev = get_adjacent_post( true, $excluded_terms, true, 'category' );
$next = get_adjacent_post( true, $excluded_terms, false, 'category' );
if($prev or $next):
?><div class="pager_cnt"><?php
?><div class="prev_pager_cnt"><?php
if($prev):
$prev_thumbs = get_the_post_thumbnail( $prev->ID, 'full');
?><a class="button_pager_cnt" href="<?php echo get_permalink($prev->ID); ?>"><?php
?>
<figure class="photo_page_post">
<img loading="lazy" src="<?php echo $prev_thumbs[0]; ?>" alt="<?php echo get_the_title($prev->ID) ; ?>のサムネイル画像" width="<?php echo $prev_thumbs[1]; ?>" height="<?php echo $prev_thumbs[2]; ?>">
</figure>
<h2 class="title_page_post"><?php echo get_the_title($prev->ID) ; ?></h2>
<?php
?></a><?php
endif;
?></div><?php
?>
<div class="archive_page_cnt">
<a href="<?php echo get_category_link($now_cat); ?>"><?php echo $now_cats[0]->cat_name; ?>(<?php echo $now_cats[0]->category_count; ?>)一覧へ戻る</a>
</div>
<?php
?><div class="next_pager_cnt"><?php
if($next):
$next_thumbs = get_the_post_thumbnail( $next->ID, 'full');
?><a class="button_pager_cnt" href="<?php echo get_permalink($next->ID); ?>"><?php
?>
<figure class="photo_page_post">
<img loading="lazy" src="<?php echo $next_thumbs[0]; ?>" alt="<?php echo get_the_title($next->ID) ; ?>のサムネイル画像" width="<?php echo $next_thumbs[1]; ?>" height="<?php echo $next_thumbs[2]; ?>">
</figure>
<h2 class="title_page_post"><?php echo get_the_title($next->ID) ; ?></h2>
<?php
?></a><?php
endif;
?></div><?php
?></div><?php
endif;
?>
このコードを入れると・・・普段使っているページャーの
が
こうなります。サムネイルがあると次にどんな記事があるのかわかるのでいいですよね。
この記事を書いたライター
この記事と同じカテゴリの記事
DTPデザイナーがWEBサイトを制作する上で、知っておきたい 画像とテキストの重要性
DTPデザイナーがWEBサイトのデザインをする際、よく見かけるのがデザインと実際に仕上がったWEBサイトやWEBページとの違う!という現象。その違いとして一番...
Internet ExplorerでWebサイトが崩れる?大手サイトも切り離したIEとどう付き合うか
PCでWEBサイトを閲覧していると、洗練されたおしゃれなサイトに出会うことがあります。 けれどそのサイト、実はInternet Explorerでは見ることができないサイ...