ご要望をいただきました―サイトトップページに新着記事一覧20件へのリンクを追加

3日くらい前、Yozi様より当サイトに以下のようなお問い合わせをいただきました。

というわけで、Yozi様、お問い合わせいただきありがとうございました。

そう、当サイトの最新記事はトップページの「最新の記事一覧」にある3件だけで、後は各カテゴリの一覧から進んでもらう設計になっていました。

まず、ご質問の見当たらない記事は、「EC化率をどれだけ上げられるか」というタイトルの記事だと思うのですが、これは「サイト/ショップ作成のお話」カテゴリにあります。

しかし、トップページに表示している「フリートーク」や「AIのお話」、「画像・動画に関するお話」などであれば、ヘッダーメニューやトップページ本文内からカテゴリ一覧へとアクセスできたのですが、「サイト/ショップ作成のお話」カテゴリは、トップページからカテゴリ一覧へと移動できるようにしていませんでした。

Yozi様のおっしゃる通り、「最新の記事一覧」にある状態であればトップページからこのページへ移動できるのですが「最新の記事一覧」から外れてしまうと、トップページから移動する場合、以下のような手順が必要でした。

任意の記事ページにアクセスして記事詳細ページを開いたところ

下の方に行くとサイドバーにすべてのカテゴリ一覧がある

つまり、Yozi様が読みたかった「EC化率をどれだけ上げられるか」は、「最新の記事一覧」からいなくなったら、上の手順のように任意の記事詳細ページを開き、サイドバーの「カテゴリ一覧」の「サイト/ショップ作成のお話」にアクセスしてもらう必要があったわけです。

しかも、「最新の記事一覧」は記事タイトルだけでカテゴリ名も分からなかったですよね。

だいぶ不親切な作りになっていました。

トップページもあまりごちゃごちゃカテゴリ一覧ばかりにしたくなかったという意図もあり(言い訳)、「サイト/ショップ作成のお話」カテゴリは元々記事数が少ないという理由もあり(い、言い訳)、このようなサイト設計にしていましたが、大いに反省し、次のように変更してみました。

改善点1：最新の記事一覧を見られるようにする

「最新の記事一覧」は、トップページに3件だけの表示を変えずに、その下に一覧に進めるためのリンクボタンを設置しました。

このリンクをクリックした先のページで、最新20件ほどの記事一覧を表示しようと思っています。

先のページは、以下のように作成しています。

なお、当サイトはWordpressでサイトを作成していて、テーマに「Affinger6」を使っています。

affinger6には、「Affinger管理」の「トップページ」の設定内で、「新着記事」をトップページに表示できる設定があります。

これを使えば新着記事を順番に並べられるのですが、当サイトでは、それを「フリートーク(カテゴリID：10)の一覧表示」で既に利用しているので、全記事の新着記事を表示する設定では利用できないのです。

その代替策が「固定ページの利用」になります。

カテゴリ一覧を表示する「st-catgroup」のショートコードを使って、cat="0"とした全記事対象の記事一覧を固定ページに表示するようにしています。

「order="desc"」で降順、「orderby="id"」で並べ替えるキーに「記事ID」を指定しているので、「記事IDの数字が大きい順」、つまり「新しい記事の順番に並べる」という設定ができました。

これで、「最新の記事一覧」に表示する記事数は3件だけ、と変更はありませんが、最新記事の20件分はリンクボタンから簡単に見られるようになりました。

このショートコードは、新しく記事が追加されれば、自動的にページを表示する際にその時点で最新の20件分を表示してくれます。

改善点2：トップページに表示していないカテゴリをフッターで

これはあまりいい改善ではないかもしれませんが、フッターのスペースを使おうと思いました。

先述の通り、トップページにこれ以上記事一覧を増やしたくないので、「さて、どうするか」と思ったのですが、トップページに記事一覧として表示されないカテゴリー2つと、ヘッダーメニューのリンクと最新5件の記事一覧しかない1つの計3つのカテゴリへのリンクをフッターに置こうと思いました。

そうすると、トップページでもフッターまで見てもらえれば、記事本数が少ないこれら3つのカテゴリーの記事にアクセスできるようになります。

トップページに記事一覧として表示されないカテゴリー2つ

トップページにヘッダーメニューのリンクと5件までの最新記事一覧しかないカテゴリ

フッター中央部分には、以前は何もなかったのですが、上のように3つのカテゴリー(トップページからアクセスしにくいカテゴリー)をリスト形式で配置しました。

フッターのウィジェットを使っています。

「フッター右用ウィジェット(2列目)」に、「00_AFFINGERカスタムHTML」を配置し、その中に以下を記述します。

「ulタグ」に使っているCSSの「mylist1」と「myhaku」は自作なので、皆さんのAFFINGERの環境にはないと思いますが、それ以外は「AFFINGER」が元々持っている機能です。

案内用のボタンとその下に、各カテゴリーへとリンクするリンク文字をリストにしています。

(まとめ)サイトの改善報告は今後も

今回、Yozi様からサイトに関する問い合わせをいただいたので、回答としてサイトの修正箇所をそのまま記事にしてみました。

途中、「AFFINGER6」のカスタマイズ部分も簡単に説明していますが、「AFFINGER6」の解説をするサイトではないので、詳しくは書いていません。

もし「AFFINGER6」について詳細を調べたいかたは、検索すると解説サイトはたくさんありますのでそちらを参考にしてみてください。

今回のようにサイトの改善を行いましたら、その都度報告していこうと思います。

今回は、Yozi様にご指摘をいただきました。ありがとうございました。