• HOME
  • 記事一覧
  • WEB , WordPress
  • WordPressのカスタムポストでのサムネイル付きページャー(WP カスタム投稿のアイキャッチ付き NEXT PREVボタン)

WordPressのカスタムポストでのサムネイル付きページャー(WP カスタム投稿のアイキャッチ付き NEXT PREVボタン)

WEB

WordPressのカスタムポスト記事ページにて、サムネイル付きページャーを実装しようとして躓いたのでメモ。

多くのサイトでは、カスタムポスト(カスタム投稿)ではなく、通常の投稿でのサムネイル付きページャーの説明があります。
しかし、この場合のページャーコードではページャーが機能しないことがほとんどです。
原因は、以前「WP カスタムポスト(カスタム投稿)で「次の記事」「前の記事」が効かない?」の記事でも書きましたとおり

「’true’」を外す。

です。

通常のポスト投稿では以下のように書かれることがほとんどだと思います。(注意;下記サムネイル画像はbackgroundに表示させていています。)

<?php
$prev_post = get_previous_post('true');
$next_post = get_next_post('true');
if($prev_post){ ?>
<a href="<?php echo get_permalink($prev_post->ID); ?>">
<figure style="background: url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($prev_post->ID)); ?>') center center / cover;" class="post-pager-thumb"></figure>
<p><?php echo $prev_post->post_title; ?></p>
</a>
<?php } ?>

<?php if($next_post){ ?>
<a href="<?php echo get_permalink($next_post->ID); ?>">
<figure style="background: url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($next_post->ID)); ?>') center center / cover;" class="post-pager-thumb"></figure>
<p><?php echo $next_post->post_title; ?></p>
</a>
<?php } ?>

しかしこのままだと全く反応しません。
そこで2行目と3行目の ‘true’ を外します。

<?php
$prev_post = get_previous_post();
$next_post = get_next_post();
if($prev_post){ ?>
<a href="<?php echo get_permalink($prev_post->ID); ?>">
<figure style="background: url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($prev_post->ID)); ?>') center center / cover;" class="post-pager-thumb"></figure>
<p><?php echo $prev_post->post_title; ?></p>
</a>
<?php } ?>

<?php if($next_post){ ?>
<a href="<?php echo get_permalink($next_post->ID); ?>">
<figure style="background: url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($next_post->ID)); ?>') center center / cover;" class="post-pager-thumb"></figure>
<p><?php echo $next_post->post_title; ?></p>
</a>
<?php } ?>

これで問題なく表示されるかと思います。
あとはお好きにカスタマイズして表示させてくださいませ。

ピックアップ記事

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。