トップページの表示順序

このサイトではトップページに4種類のカテゴリーを置いています。それぞれ自分が業務として関わっていきたい分野です。

他のページでカテゴリーごとの表示順序を変更する、固定する方法について書いてきました。ところがトップページに表示されるカテゴリーの表示順序は、これまでの方法では変更することができませんでした。

ここではトップページに表示されるカテゴリー内の表示を固定する方法について書いていきます。試行錯誤を経て、現在たどり着いた結果です。

カテゴリー内の表示順序が変わらない

以前書いたように、このサイトは静的なページにすることをねらいとしています。自分が業務とする内容を皆さんに知っていただくことがねらいだからです。

そのためにカテゴリーの順番が入れ替わらないように、カテゴリーごとのページに移動したときに表示される順番が変更されないように、プラグインを用いて表示順序を固定しています。使用しているプラグインや設定方法についてはこちらを参考にしてください。

ところがこのプラグインを用いても、トップページに表示しているカテゴリーの記事の順序が入れ替わらないのです。

新着順に表示するショートコード

なぜなら、このサイトのトップページのカテゴリー内の表示は、ショートコードで作成しているからです。具体的には次のようなコードになります。

border_square というのは、記事のカードごとに枠線を表示する形です。このサイトはこのタイプを採用しています。

というショートコードにオプションをつけて表示しているということです。

というショートコードは新着記事を表示するショートコードです。そうですこのショートコードを変更すれば、カテゴリー内の表示順序を変えることができるわけです。

人気記事の順番に表示するショートコード

[popular_list] というショートコードがあります。人気記事の順番に表示してくれるショートコードです。これが使えそうだと思いました。皆さんが、このサイトのどこに興味をもってくれているか、その順番に並ぶというわけです。

実際に使用してみました。

ところが現状のこのサイトでは使い物になりませんでした。理由は、他の方はこのサイトをほとんど見ていないからです。このサイトが定着し、皆さんがこのサイトを利用してくれるようになれば、このシュートコードが活躍するときが来るのだと思います。皆さんが知りたい順番に並んでくれるわけですから。今はそうなることを期待して、別の方法を探ることにしました。

ブログカードのショートコード

次に目をつけたのがブログカードのショートコードです。

簡単です。カテゴリーごとに表示したい記事のURLを調べて、書き込めば良いのです。

実際に表示してみると、デザインがブログになってしまいます。このサイトのイメージする表示とは異なります。ブログカードですからあたりまえのことでした。

このショートコードにはオプションがありませんでした。したがって私では、表示されたカードの形を変更することができませんでした。

意図した順に記事を表示するショートコード

今のところ落ち着いたのが ショートコードです。

というように使います。ショートコードをみても、最初は何のことかさっぱりわかりませんでした。

このショートコードは単独で使用するものではありませんでした。事前にメニューを準備しておき、そのメニューをショートコードで呼び出すものでした。

このサイトではカテゴリーを4つ表示しています。それぞれのカテゴリーで5つの記事を表示しています。表示する記事の量がバラバラになってしまうとレイアウトが崩れてしまいます。

や のショートコードでは要約の分量がバラバラになることはありませんでした。Cocoon が要約の文字数を管理してくれていたからです。(WORD PRESS の管理画面から「Cocoon設定」に進み、「インデックス」タブの「自動生成抜粋文字数」で文字数を確認することができます。)行数が変わってしまわないように、この文字数を調整しておけば良かったのです。

ところが の場合は、作成したメニューを表示するだけなので、本文から要約文を作成してくれません。そのために「説明」の項目で、自分で要約文を作成しておく必要があるわけです。その要約文の量を同じくらいの分量に調整して、レイアウトが崩れないようにします。

もう一つ「CSS class」という項目を設定しておくと、たすき掛けリボンを表示してくれます。たすき掛けリボンは、1.おすすめ、2.新着、3.注目、4.必見、5.お得 となっています。今のところ、このサイトでは利用していません。

「遺言書作成・相続手続き」のカテゴリーに「遺言相続」というメニュー名をつけています。それを というショートコードで読み込んでいます。「snippet」は要約の有無です。「type」は表示するデザインです。「bold」はタイトルを太字にするということです。

これで何とかトップページに表示されるカテゴリー内の記事を固定することができました。