トップページの表示順序

ブログ

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

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

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

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

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

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

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

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

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

新着順にカテゴリー内の記事を表示するショートコード

記事は見つかりませんでした。

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

身上保護と財産管理
任意後見人と任意後見監督人
任意後見制度
茨城県の車庫証明申請代行ご依頼ください
法定後見制度
というショートコードにオプションをつけて表示しているということです。

身上保護と財産管理
任意後見人と任意後見監督人
任意後見制度
茨城県の車庫証明申請代行ご依頼ください
法定後見制度
というショートコードは新着記事を表示するショートコードです。そうですこのショートコードを変更すれば、カテゴリー内の表示順序を変えることができるわけです。

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

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

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

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

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

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

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

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

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

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

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

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

意図した順にカテゴリー内の記事を表示するショートコード

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

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

メニューを作成する
  1. WORD PRESS の管理画面から「外観」を選択し、「メニュー」をクリックします。
  2. メニューを編集」のタブで「新しいメニューを作成しましょう」を選択します。
  3. メニュー名を入れて「メニューを作成」をクリックします。メニュー名は任意で設定して構いません。
  4. メニュー項目を追加」からリンクを作成したい投稿を選択していきます。
  5. メニューの順序はドラッグ&ドロップで変更することができます。
  6. それぞれのメニュー項目右にある▽をクリックして「説明」を加えていきます。この説明が、それぞれのカードが表示された際に、要約として示される部分になります。
  7. 変更をまとめて保存」ボタンをクリックします。

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

身上保護と財産管理
任意後見人と任意後見監督人
任意後見制度
茨城県の車庫証明申請代行ご依頼ください
法定後見制度
届出・許可・認可
古物営業許可申請
遺言書作成
宅地建物取引業免許申請
飲食店営業許可申請
のショートコードでは要約の分量がバラバラになることはありませんでした。Cocoon が要約の文字数を管理してくれていたからです。(WORD PRESS の管理画面から「Cocoon設定」に進み、「インデックス」タブの「自動生成抜粋文字数」で文字数を確認することができます。)行数が変わってしまわないように、この文字数を調整しておけば良かったのです。

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

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

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

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