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

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

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

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

一つの方法として、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 で指定します。

コードスニペット

コードスニペット

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

ブレッドクラムを添える

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

ブレッドクラム

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

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

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

ブレッドクラム

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

その他のナビゲーション

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

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

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

タブ ナビゲーション

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

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

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

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

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

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

Top