Nishikiは標準でアーカイブ一覧・個別ページともにページナビを実装しています。アーカイブ一覧の方は特に問題ないのですが、個別ページの方には一つ問題が。どうもサブカテゴリの設定をスルーしているような気がするのです。
どゆことどゆこと?
例えばこの記事のカテゴリは、親カテゴリ「Scrap」にはチェックを入れず、その下のサブカテゴリ「WordPress」にのみチェックを付けています。なので前後のページナビもサブカテゴリ「WordPress」が付与された記事のページリンクになるはずです。
しかしNishikiの個別記事用ページナビは、このサブカテゴリ内の記事ではなく、そのサブカテゴリが属する親カテゴリ全体の記事を時系列に沿って出力してしまっているのです。サブカテゴリがない所であればこれでも良いのですが、うちではプレイ日記を作品ごとにサブカテゴリでカテゴライズしているので、この仕様だとめちゃくちゃマズイやつなのです。例えばナムカプのプレイ日記読んでたのに、次の記事へのリンク押したらいきなりシンフォニアのプレイ日記に飛んじゃいましたー…じゃアカンでしょ。続けて読みたいのに。
あと、プレイ日記やScrapの記事にはページナビを出すけども、ギャラリーページにはページナビを出さないでカテゴリトップに戻るリンクのみを出したいと考えていたので、個別記事のみページナビを書き換えることにしました。
ページナビの実装自体は難しくない
サブカテゴリに対応したものならWP-PageNaviが要るんじゃね?と思われそうですが、カテゴリ階層が複雑化しておらず、且つ個別記事だけなんとかしたいのであればプラグインは必要ありません。ごくごく簡単なものなら、通常は以下の記述で十分問題ないはずです。
<nav class="navigation post-navigation" role="navigation">
<ul class="pagenavi">
<li class="prev"><?php previous_post_link('%link','Prev »') ?></li>
<li class="next"><?php next_post_link('%link','« Next') ?></li>
</ul>
</nav>ただ今回やりたいことを実現するには加えて条件分岐が必要なので、もう少し手を入れます。ついでにスマホで見た時にタップ範囲が極端に狭くならないように装飾してみます。
実際に実装したもの
/parts/singular/content.php 104行目付近
if( is_single() ) {
if ( get_theme_mod( 'setting_post_display_prev_next_link', true ) ) {
the_post_navigation( array(
'prev_text' => '<i class="icomoon icon-arrow-left"></i><span>' . "%title" . '</span>',
'next_text' => '<span>' . "%title" . '</span>' . '<i class="icomoon icon-arrow-right"></i>'
)
);
}
}
?>これを
<?php if ( is_single()) : ?>
<nav class="navigation post-navigation" role="navigation">
<ul class="main">
<li class="navileft six">
<?php previous_post_link('%link', '%title', TRUE, ''); ?>
</li>
<li class="naviright six">
<?php next_post_link('%link', '%title', TRUE, ''); ?>
</li>
</ul>
</nav>
<?php elseif ( is_page( array( 'pict_tos-kl', 'pict_tos-kp', 'pict_tos', 'pict_tales', 'pict_ff', 'pict_cap', 'pict_srw', 'pict_megido72', 'pict_gundam', 'pict_other' ) )) : ?>
<p class="categorytop">
<a href="/gallery/">
<i class="fa fa-angle-double-up fa-2x" aria-hidden="true"></i> INDEX
</a>
</p>
<?php endif; ?>と置き換えて、子テーマ側の/parts/singular/content.phpに保存(親テーマ側に上書き保存しないように)。条件分岐の意味は
となります。またレスポンシブに対応するためにSmart CSS GridのFlexboxをここでも適用しています。カテゴリトップ用の矢印はFontAwesomeを使っていますが、画像を用意して読み込ませるorCSSで背景画像として読み込ませるというのもアリです。
style.css
/* for Single Post */
.post-navigation {
margin: 0 !important;
padding: 0;
}
.post-navigation ul {
margin: 0;
padding: 0;
list-style: none !important;
}
.post-navigation li, .post-navigation p {
margin: 0;
padding: 0;
}
.entry nav.post-navigation ul li:before {
font-family: none !important;
content: "";
position: unset;
color: none;
}
.navileft a {
display: block;
color: #BCBCBC;
background: rgba(240, 240, 240, 1.00) url("/common/img/css/prev.png") no-repeat 16px top;
background-size: contain;
font-weight: 500;
text-align: right;
padding: 48px 24px;
}
.naviright a {
display: block;
color: #BCBCBC;
background: rgba(240, 240, 240, 1.00) url("/common/img/css/next.png") no-repeat right 16px top;
background-size: contain;
text-align: left;
font-weight: 500;
padding: 48px 24px;
border-left: 1px solid #fff;
}
.navileft a:hover, .naviright a:hover {
color: #fff !important;
background-color: #0BA5C6;
}
/* 固定ページ用 */
.categorytop {
display: inline-block;
text-decoration: none;
background: #5FBCEB;
color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
overflow: hidden;
box-shadow: 0px 0px 0px 5px #5FBCEB;
border: dashed 1px #fff;
transition: .4s;
margin: 3em 50%;
}
.categorytop a {
display: block;
color: #FFF !important;
padding: 30px;
line-height: 1.5;
}
.categorytop:hover {
color: #5FBCEB;
background: #21252B;
box-shadow: 0px 0px 0px 5px #21252B;
}.post-navigationが個別記事のページナビ用のスタイル、.categorytopが固定ページでページナビの代わりに表示するカテゴリトップへ戻るボタン用のスタイルです。
ページナビには前後それぞれ背景画像を用意して、これを<li>ではなく<a>に読み込ませます。<a>はインライン要素なので、本来ならそのままでは高さや余白を指定できないため背景画像を完全に表示出来ないのですが、CSSでdisplay: block;を与えてあげることでブロック要素として見せることが出来ます。あとはpaddingで適度に高さと余白を設定するとクリック範囲が広がります。
カテゴリトップへ戻るボタンも同様に<a>にdisplay: block;を設定して、余白や行間を調整します。
完成したもの
コレをこうしてこうして…こうじゃ! と作ったものがこちらになります(実際の挙動はこの下に出てるもの↓で確認してね)。
因みにスマホで表示した場合にはこのようになります。文字がわかりにくい…っていう場合にはfont-weight: 500;を600か700にしてあげるとfont-weight: bold;相当の太さになるので多少読みやすくなるかと思われます。