シリーズ物・連載記事のナビゲーションリストを作成する「リンク付き」－wordpress

シリーズ物や連載記事の場合、記事の一覧リストのような物があれば、他の記事も見てもらえるのではないかと思って、「ナビゲーションリスト」を設置してみました。

今読んでいるページにはリンクを設置せず、代わりに矢印のようなマーキングが付くようにしてみました。

下の例は、リストの2番目が「今読んでいるページ」になっている例です。

記事リストを、.phpファイルで作成

該当の記事ID、記事タイトル、記事URLを調べて、テキストファイルなどに、以下のコードを書いて、拡張子.phpで保存します。（ファイル名は任意で。）

条件分岐で、今いるページにはリンクを付けないで、代わりにマーキングが付くようにしています。

<div class='listflame'><h4>リストタイトル</h4>
<ul class='series_list'>
<li><?php if(!is_single(記事ID1)): ?><a href="url1"><?php endif; ?>記事タイトル1<?php if(!is_single(記事ID1)): ?></a><?php else: ?><span class='listmark'>←</span><?php endif; ?></li>
<li><?php if(!is_single(記事ID2)): ?><a href="url2"><?php endif; ?>記事タイトル2<?php if(!is_single(記事ID2)): ?></a><?php else: ?><span class='listmark'>←</span><?php endif; ?></li>
<li><?php if(!is_single(記事ID3)): ?><a href="url3"><?php endif; ?>記事タイトル3<?php if(!is_single(記事ID3)): ?></a><?php else: ?><span class='listmark'>←</span><?php endif; ?></li>
</ul>
</div>

＊上記コードは、「WordPressで連載形式記事のナビゲーションを作ってみる」　を参考にさせて頂きました。

classが3つ程付けてあります。それぞれcssで装飾できるようにしています。

・listmark：マーキングの大きさや位置
・series_list：リストや文字の装飾
・listflame：リストを枠で囲ったりとか

「h4タグ」と「←」の部分は、お好みで。

ショートコードで呼び出す

該当記事全部に上記のコードを書いてしまうと、変更したくなった時全部のページを修正しなくてはならなくなります。

そこで、それぞれのページの表示したい箇所に、ショートコードで呼び出す方法を取りたいと思います。

以下の投稿の「固定・投稿ページでショートコードを使用できるようにする」をご参照頂ければと思います。

https://ks-fdripp.tfmwish.comblog_short/

リストを表示させたい箇所に、ショートコード（[]は除いています）

myphp file='ファイル名'

を記入することで、作成したリストの.phpファイルを呼び出すことができます。（’ファイル名’は、上の方で作成した.phpファイル）

cssの一例

これは、cssの一例です。

.series_list {
font-size: 15px;
line-height: 1.2;
font-weight: bold;
}
.series_list ul{
position: relative;
}
.series_list a{
font-weight: 500; 
}
.series_list li{
padding-top:7px;
padding-bottom:7px;
border-bottom:1px dotted #a9a9a9;}
ul.series_list  a{
display:block;height:auto;
}
ul.series_list  {
list-style: disc;
padding:0;
margin-left:30px;}

.listmark{
font-size: 25px;
font-weight: bold;
float:right;	
margin-right: 0.2em;
margin-top:-0.3em;
}

.listflame{
border:2px dotted #a9a9a9;
padding-right:20px;
padding-top:10px;
padding-left:10px;
margin-top:10px;
}

その他

マーキングについては、Font Awesome（Webアイコンフォント）を使うこともできます。

例えば、

<span class="listmark">←</span>

の部分を

<i class='fa fa-angle-double-left tw'></i>

などに変更することで、使用可能です。

＊Font Awesome（Webアイコンフォント）の使い方については、「WordPress・CMSでFont Awesomeアイコンフォントを導入！最新アイコンが表示しないとき、バージョンアップ方法付き」　を参考にさせて頂きました。

下記ページの本文最後に、Font Awesomeを使用した例があります。
→実行結果