loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [Wordpress] > 【WordPress】リンク付き連載記事一覧リストを自動表示させる
この記事は約7分で読めます。

【Wordpress】リンク付き連載記事一覧リストを自動表示させる

投稿日:2016.5.10

必要に迫られて「連載記事一覧の目次」みたいなリストを自動表示させたかったんですが、
どうやってもphpの知識が必要だということがわかって諦めてたんです。

ところが先日、自由度があって設置も比較的ラクな方法を見つけたので
早速利用させていただきました。

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

まさに連載記事の一覧リスト

とあるブログで、
話の内容がその記事だけでは終わってなくて、
続きの他の記事も全部読んでいくと話が完結する…みたいな複数の記事がありましてね。

でもそれらの記事は順番にアップされてるわけではなく、
間に別のカテゴリーの記事もちょくちょくアップされているので
続き物だというのが訪問者にはわかりにくくなってるんです。

記事の最後に「次はコチラ」「前のはコチラ」なんて感じで関連記事へのリンクを貼れば
解消できないこともないですが、
それだと最後まで読んでもらって初めて続き物だということがわかります。

でも悲しいかな、訪問者の全員が毎記事最後まで読んでくれるとも限らない。

ちょっとでも興味がない記事だと途中で「サヨナラ~」なんてことはよくあることで(涙)。

それに仮に続き記事が7つあったとして、
今読んでる5番目の記事からもう一度2番目の記事を読み直したいなんていうときは、
前の記事へのリンクを3回もクリックしないとたどり着けやしません。

こんな時もしも記事冒頭に
”連載記事リスト一覧”のような目次リンクがあったらどうでしょう。

目的の記事に一瞬でたどり着けるし、
わかりやすいというもんじゃないですか?

たとえばこんな↓感じでね。

(下記は「地球の歩き方」の”連載記事インデックス”をキャプチャしたものです)

キャプチャ画像

もちろん各記事の冒頭に手動でリストを作り上げていってもいいんですよ。
でもそれだと恐ろしいほど非効率的ですよね。

修正が入った時の手間まで考えたら……絶対途中でやる気が失せるでしょうね。

ミスも確実に出るでしょう。

そこで連載記事のリストを自動で順番にリンク付きで表示してくれて、
なおかつ今見ている記事のリストにはリンクを付けないような仕組みを私なりに考えてみたんです。

………無理でした!

どうやったってプログラムの知識が必要なんですもん。

でもね、神は私を見捨てませんでした。

(無神論者ですけど…)

下記参考サイトのやり方がまさに私のやりたいことにぴったりだったんです。

早速利用させてもらいました。

(作者さんはちょいちょいっと作ったらしいです。すごいなぁ)

基本的には丸写しでいけますが、何点かアレンジを加えてます。

探せばプラグインなんかもあったりします。

ただこちらが欲しい機能が足りなかったり自由度も少なかったりで採用には至りませんでした。

完成品はこんな感じです↓。

キャプチャ画像

1枚目の画像の記事リストは”3番目の記事を開いている状態”でのキャプチャ画像で、
今見ている記事のリンクは外れてます。

さらに記事タイトル右側に「←いま見ている記事」というガイドが付いてますでしょ。

ここで4番目の記事リンクをクリックして
”4番目の記事が開かれた状態でキャプチャした画像”が2枚目のものです。

今度は4番目の記事リンクが自動で外れて
「←いま見ている記事」というガイドも4番目の記事タイトル右に移動してます。

こんな感じで各記事へのリンクをわかりやすく表示させておけば、
全部の記事を見て回ってもらえる確率も高くなるというものです。

それでは実装です。(ほとんど参考サイトのコピペですけど)

 

スポンサーリンク

連載記事リストファイルの作成

順番はどれが最初でもいいんですが、
ここでは連載記事リストファイルの作成から始めまましょう。

連載記事リスト用phpファイルの作成

連載記事リストファイルは拡張子phpで作成します。

説明上、ここでは連載記事リストが仮に”猫の生態”に関するものだったとして、
ファイル名は「series_cat.php」で。

別途”犬の生態”に関する連載記事リストも作ったとして、
「series_dog.php」で2つ目(複数)のファイルを新規作成という体(てい)で話を進めていきます。

これらのphpファイルはサーバー上で直接作成してもいいし、
PC上のテキストエディタで作成してFTPソフトでアップロードしてもいいでしょう。

 

作成した連載記事リストファイルをどこに格納するかですが、
わかりやすいのは使用しているテーマフォルダの中ですね。

(参考サイトでもそうなってます)

ただ連載記事リストファイルを複数作った場合はファイル管理が面倒なことになります。

こんな時は何らかのフォルダを作ってその中にファイルを格納した方が
管理もしやすくなるというものでしょう。

そこで今回は例としてテーマフォルダの中に「parts」というフォルダを作成して
その中に連載記事リストファイルを格納することにします。

具体的には『…/wp-content/themes/(使用中のテーマ)/parts/(連載記事リストファイル)』となります。

 

連載記事リストファイルの中味

連載記事リストphpファイルに書き込む内容ですが、
とりあえず以下を全部コピー&ペーストしましょう。

※例として「series_cat.php」に書き込むものとします。

3行目の”(記事URL)”には記事リスト1個目のURLをコピペします。

同じく”(記事タイトル)”には記事リスト1個目の記事タイトルをコピペします。

するとこんな感じになります。

"http://lovelyieneko.com/201509/first-meal/" => "ミミ、初めての食事(2015.9.16)",

これを記事が増えるごとに追加してあげます。こんな具合に。

この辺は逐一手作業となりますが、このぐらいは我慢しましょう。

17行目の「←いま見ている記事」という部分がガイドとして表示される部分ですので、テキストを変えたい時はここを変えてください。

連番になるのが嫌な場合は12行目の
<ol class='series_list'><ul class='series_list'>に、
22行目の</ol></ul>に変えれば丸印のリスト形式になります。(テーマによってはうまくいかない場合もあるかもしれません)

ショートコード呼び出し

連載記事リストを記事内に表示させるにはショートコードを使います。

(ショートコードの説明は割愛します)

その呼び出し用のコードをfunctions.phpに書き込みます。

以下をコピペしましょう。

functions.phpの冒頭に <?php とあると思いますが、その後ろにコピペすれば大丈夫かと思います。

連載記事リストファイルを格納するフォルダ名を「parts」以外にした場合は、
6行目の'parts'を別のフォルダ名に変えてください。

またフォルダを作らずテーマフォルダ内に直接ファイルを置きたい場合は6行目を
include(get_theme_root() . '/' . get_template() . "/$file.php");に変えてください。

functions.phpへの記述を1文字でも間違えると最悪の場合サイトが開かないこともあります。
functions.phpのコピーは必ずとっていつでも元に戻せるようにしてくださいね。

記事への書き込み

最後に、作成したショートコードを含む全体コードを以下のように記事内に書き込みます。

上記コードは連載記事すべてのページに設置しておきます。

これだけで連載記事リストがリンク付きで、
また現在表示されてるページの記事リストはリンクなしで表示されるようになります。

記事リストの追加・修正も、連載記事リストphpファイルをいじってあげるだけで、
設置した記事すべてに変更が自動反映されます。

ビジュアルエディタモードではなくテキストモードで書き込みましょう。

ショートコード内の「seriesphp」というワードはfunctions.phpに書き込んだコード9行目の「'seriesphp'」と連動してます。

「seriesphp」を変更したい場合は functions.phpの方も忘れずに変更しておきましょう。

また「series_cat」というワードは連載記事リストファイル名の「series_cat.php」と連動してます。

もしも「series_dog.php」の連載記事リストを表示させたいのなら
[seriesphp file="series_dog"]となります。

連載記事リストに枠を付けたり背景色を付けたりといったカスタマイズを施したい場合は、

こんな感じでdivで囲ってあげて装飾はCSSに任せるとやりやすいです。

参考までにキャプチャした完成品画像の場合は下のようなCSS(一部だけ抜粋)を組んでます。

以上です。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「LUXE (tcd022)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ