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

blog

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

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

下の例は、リストの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タグ」と「←」の部分は、お好みで。

 

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

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

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

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

固定・投稿ページに、.phpファイルをショートコードで呼び出す-wordpress
トップページを固定ページで新たに作成しようと思い、試行錯誤していましたが、固定・投稿ページにショートコードで.phpファイルを呼び出せたら便利だなと思って今回の投稿になりました。 一例として、今回の投稿ページの一番下に、当ブログのカテ...

 

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

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を使用した例があります。
実行結果

 

wordpressの管理画面から、function.phpなどの.phpファイルを編集した場合、うまく動作しない時があります。

その際は、ftpソフトなどでいったん該当ファイルをローカルに保存して、そこで編集を行います。

編集した.phpを、ftpソフトなどで再度アップロードする事で正常動作する場合があります。

.phpを編集する際は、サクラエディタ が、エラーが少ないのではないかと思います。

上のエディタで保存する場合は、文字コード「UTF-8」、BOM「チェック無し」がエラーが少ないのでは無いかと思います。

sakuraediter

タイトルとURLをコピーしました