固定ﾍﾟｰｼﾞ前後へのﾘﾝｸ
固定ページ前後ページへのリンク
私は、本の様に章立てをして、関連があるものをその順番に並べていくようなホームページを作りたい人なので、前後ページへの分かりやすいリンクを付けられるのが、テーマを選ぶ時のかなり重要な条件でした。
KANSOは、プラグインを入れなくても、最初から固定ページに前後ページへのリンクが挿入されるので、その他の使いにくい点を色々どうにか工夫してでも、使う価値があると考えていました。
でも、Next Pageというプラグインを導入すれば、固定ページでの前後ページへのリンク機能がないテーマでも、それを実現することが出来ることが分かったので、テーマの選択の幅も広がりました。
このページで、上と下の中央に出ているのが、そのリンクです。Next Pageを使えば、前後ページに何があるかなど何も考えないでも、ページの順序さえ思い通りに並べておけば、後はプラグインが、勝手にリンクを作ってくれます。
ページ順の設定
ページ順の設定の仕方に、よくは分からないところがありますが、私はとりあえず、Nested Pagesというプラグインを入れています。テーマによっては、これをインストールする必要がないものもあるのかもしれません。
settingsの所で、Manually sync menu. と Manually sync page order. にチェックを入れておかないと、ページ順やメニュー順が勝手に入れ替わってしまうので、ここにチェックを入れて、順番を自分で管理できるようにします。
プラグインを有効化すると、固定ページ一覧から、ページをドラッグ & ドロップで並べ替えるだけです。親子関係を設定することもできます。
移動後に必ず保存をします。
移動したときに、字下げが変な表示になることがありますが、保存して再読み込みをすると、正常な表示になります。
リンク表示の仕方
写真のように、無駄な表示をすべて取ったシンプルなプラグインの設定をしたら、cocoonなら、「外観>ｳｨｼﾞｪｯﾄ」から、固定ページ本文上と、固定ページ本文下とに、以下のように、カスタムHTMLを設定しているだけです。
<div class="center">≪ [previous] | <a href="https://www.neko01.com/pc/wp/" title="Wp Home">Wp<span class="fa fa-arrow-up" aria-hidden="true"></span></a> | [next] ≫</div>
最初、リンクが左右に分かれて、思うように真ん中に集まらないなと思っていたら、上の設定画面の一番上の項目が、 <div class=”alignright”> というように、リンクが左右に表示されるような位置指定になっていました。
表示しないページも設定できる
ちなみに、私は、真ん中の親ページへのリンクは使いませんから、設定は元のままです。元のままの設定では、左右のリンクも、真ん中の「Up one level:」の様な無駄な表示があるので、結構うっとうしいです。親ページへのリンクも使うなら、これも削除した方が、良いでしょう。
しかしそれでは、どこに行くのか分かりにくいので、の表示を代わりに挿入します。元々cocoonで用意されているクラスの中にこの表示があります。
<span class="fa fa-arrow-up" aria-hidden="true"></span>
cocoonなら、ｳｨｼﾞｪｯﾄの設定の、本文上下にタグを挿入するところの詳細設定で、表示しないページも設定できます。例えばトップページなどは、表示しないように設定して、本文に直接思うようなリンクを挿入した方が、同じ体裁で、自由なリンクを作れます。
私なら、トップページは、さらに上位のページへのリンクを、トップページには貼ります。
<div class="widget_text widget widget-page-content-top widget_custom_html"><div class="textwidget custom-html-widget"><div class="center">≪ <span><a href="https://www.neko01.com/pc/" title="Pc">Pc<span class="fa fa-arrow-up" aria-hidden="true"></span></a></span> | Wp<span class="fa fa-arrow-up" aria-hidden="true"></span> | <span><a href="https://www.neko01.com/pc/wp/?page_id=554" title="ｲﾝｽﾄｰﾙ">ｲﾝｽﾄｰﾙ</a></span> ≫</div></div></div>
こんな感じです。