記事とカテゴリーのナビゲーションを作成する

2017年2月11日

小説サイトの決め手は適切なナビゲーションです。

章立て(カテゴリー)、各章に属する記事、サイト案内など、一目で分かるように設置するのがポイントです。

一つの方法として、TABを使ったやり方があります。

必要な情報を一括してTABに収めれば、場所もとらず、ワンクリックで内容を確認することができます。

ナビゲーション タブ

ナビゲーション・タブを作成する

必要なプラグインを用意する

ナビゲーションを出力するには、いくつかのプラグインを組み合わせます。

Tab Responsive Shortcode
タブを作成するプラグイン。同様のプラグインはたくさんありますが、これが一番きれいに描出できます。
ただし、デザインの細部は、お使いのテーマ・テンプレートに依ります。
ある程度はスタイルシートで編集できますが、上手く反映されない場合もあるので、満足度は90パーセントぐらいと考えて下さい。

Display Posts Shortcode
様々な記事リストをショートコードで呼び出す便利なプラグインです。
カテゴリー、タグ、ポストタイプなど、様々な種類の記事リストを日付やタクソノミー、昇順・降順、サムネイルの有無など、細かにカスタマイズできます。
利用しているユーザーも多いので、有益な情報がたくさん見つかります。

Code Snippets Extended
PHP、Java Script、CSS、HTMLなど、テキストエリアに直接書き込めないコードをショートコードに置き換えるプラグインです。
同様のものが幾つか出ていますが、こちらは事前にテストができるので及第点。
ただし、インポート&エクスポート機能がないので、万一の時は対処が大変です。

出力したい項目を決める

各タブに表示する項目を整理します。
この場合、「各カテゴリーに属する記事」「章立て 前半」「章立て 後半」「サイト案内」にしています。

ナビゲーション タブ

各カテゴリーに属する記事は、Display Posts Shortcodeで呼び出します。

各記事に該当するカテゴリー名を指定し、表示したい記事数、昇順(ASC)を指定します。

この場合、 display-posts order=”asc” orderby=”date” posts_per_page=”30″ category=”カテゴリーネーム” 

記事の日付がちゃんと時系列になっておれば、自動的に、記事番号1→30に並びます。

章立てに該当するカテゴリー・リストは、テンプレート・タグを用います。
そのままではテキストエリアで動作しないので、Code Snippets Extendedを使います。

該当のカテゴリーIDは、include もしくは exclude で指定します。

<?php wp_list_categories('title_li=&hide_empty=0&depth=2&exclude=1,11,7,8,9,10'); ?>

コードスニペット

コードスニペット

Code Snippets Extendedで作成されるショートコードを、Tab Responsive Shortcode に挿入すれば、図のように該当のカテゴリー一覧が出力されます。

ブレッドクラムを添える

BreadCrumbを用いて、訪問者の現在位置を明確にします。
的確に誘導し、SEO効果もあるので、ぜひ取り入れて下さい。

ブレッドクラム

これもCode Snippets Extendedを利用しています。

前述のタブのショートコードと合わせると、こんな感じになります。

ブレッドクラムのタグはYoast SEOプラグイン独自のものです。
お使いのプラグインや、テーマ・テンプレートによって記述は変わります。

ブレッドクラム

投稿内に挿入するショートコード。この二行で、ナビゲーションとタブが出力されます。

 
[TABS_R id=2203]

その他のナビゲーション

タブ以外にも、アコーディオン、ドロップダウンなどを用いても面白いかもしれません。
BootStrapに対応しているテーマ・テンプレートなら、プラグインを使わなくても、タブやアコーディオンなどが簡単に導入できるので、興味のある方はぜひ。(有料テンプレートなら、BootStrap標準装備が多いです)

いろんな応用が利く、タブ型ナビゲーション。

http://getbootstrap.com/javascript/#tabs

タブ ナビゲーション

すっきりまとめやすいプルダウン。訪問者にワンアクション要求するので、使い方を誤ると、誰にも見てもらえなかったりするので要注意。

http://getbootstrap.com/javascript/#collapse

ナビゲーション プルダウン

スクロールボックス。最初のボックスに作品の概要を明記し、次の項目にカテゴリーやインフォメーションを掲載するといいかも。

http://getbootstrap.com/javascript/#scrollspy

スクロールボックス ナビゲーション

You are here

WEB小説 > 小説サイトの構築 > 記事とカテゴリーのナビゲーションを作成する