R-style mid 2022に次の記事ボタンをつける

ブログによくある「前の記事、次の記事」ボタンをつけたい

<?php previous_post_link(); ?>

<?php next_post_link(); ?>

を付ければとりあえずはOKっぽい。

使い方

文言変更

<?php previous_post_link('%link', '前の記事へ'); ?>

同一カテゴリーの前後の記事にする

<?php previous_post_link('%link','%title', TURE); ?>

前後の記事がない場合に非表示にするには？

code:php

<?php if (get_previous_post()): ?>

<p><?php previous_post_link(); ?></p>

<?php endif; ?>

<?php if (get_next_post()): ?>

<p><?php next_post_link(); ?></p>

<?php endif; ?>

とりあえず素で書いてみる。

https://gyazo.com/bb8f478042c9254d73d375ae11b2fd52

無事表示された。

が、ミラクルダサい。

ボタン風にしよう

https://gyazo.com/8dd0cb4f230da31e00a9e57a230e7377

こういうの。

「前の記事」のように統一的な表記にするか、単純に記事タイトルを示すか？

以下のような書き方もできるらしい

code:.php

<?php previous_post_link('%link', '<img src="'. get_template_directory_uri().'/img/icon-prev.svg" alt="前のニュースへ" width="7"/>前の記事へ'); ?>

<?php next_post_link('%link', '<img src="'. get_template_directory_uri().'/img/icon-next.svg" alt="次のニュースへ" width="7"/>次の記事へ'); ?>

とりあえず、設置してCSSを弄る

code:index.html

<div post-navigation style="margin:1em 1em;min-height:30px;">

<span id="postnavigationpre"><?php previous_post_link('%link', '前の記事'); ?></span>

<span id="postnavigationnext"><?php next_post_link('%link', '次の記事'); ?></span>

</div>

code:style.css

border:1px solid grey;

background:white;

cursor: pointer;

padding: 0.375rem 0.75rem;

text-decoration: none !important;

box-sizing: border-box;

font-size: 1rem;

line-height: 1.5;

border-radius: 0.25rem;

float:left;

display:block;

}

とりあえずOKとする。

https://gyazo.com/0a763a9bf23c3fdfb2ac5a32b8a903f9