WordPressのサイトトップページに”カテゴリー毎の新着記事”を表示させる方法を解説します!

カテゴリー別に新着記事を表示させたらどうなるの?
ご紹介する作業を行えばこのような形で表示されます。

今回の記事はこのような人にお勧めです!
- トップページを整理したい
- 新着記事をカテゴライズしたい
- 一瞬で新着を視認したい
特別な知識や技術なしで、デフォルトの状態から作業ができます!

テーマはなんでも大丈夫です!ちなみにボクは”COCOON”!
- コードの生成
- ウィジェットに貼り付けて表示
それではいきましょう!
カテゴリー別新着記事を表示する方法
トップページに表示させるための手順を解説していきます。
プログラミングの知識や有料テーマなどは必要ないのでお手軽に行えますよ!
手順は以下の通りです。
- 投稿欄でコード作り
- ウィジェットカスタマイズ
二段階のフェーズを通れば終了です。

今回はデフォルトのエディターで行います!
1.投稿欄でコード作り
まずは投稿欄を使ってコードを作成します。
とはいってもコードは素人には作り難いので、まずはビジュアルエディターを使って作成します。
ショートコードを貼り付ける
まず「ボックス追加>カラム>2カラム(1:1)」を選択します。
カテゴリー数に合わせて表示させてください。
ボクの場合は”4つのカテゴリー”があるので2カラム✖️2個出します。

カラムを出したらこんな感じになりました。
カラム内にショートコードを貼る
カラム ができたら以下のショートコードを貼り付けてください。
新着記事を自動的に表示してくれるコードになっています。
しかしこれだけでは不十分なので
”表示して欲しいカテゴリー”
”表示したい記事数”
を決めます。
cats=がカテゴリーのナンバー
count=が表示数
catsにはカテゴリーの数字を入れます。
まず「投稿>カテゴリー」でカテゴリー名の上にカーソルを移動させてください。

”Actor”のカテゴリーの数字が知りたいのでそこまでカーソルを持ってきます。(黒枠)
そうすると画面左下に文字列が出てきます。

この文字列の”ID=3”と言うのがカテゴリーナンバーになります。
なので「cats=3」と入力すればOK!
この要領で全ての数字を入れていきます。

こんな感じになればOK!

記事数はデフォルトの5つだと多いので3つにしました。
カラム内にボタンをいれる
カラムの中にボタンを入れてどのカテゴリーの新着なのか、分りやすくします
「ブロック追加>ボタン」を選択していきます。

それぞれショートコードの一つ上の段落に貼りましょう!
それができたらこんな感じになります。

ただこれだと味気がないので少しカスタマイズしていきます。
まずボタンのテキストを”各カテゴリー名”に変えていき、ボタンを真ん中に寄せましょう。

赤枠で編集していきます。
- ボタンのサイズ、形
- 文字のサイズ
- ボタンにURLを貼るか
- URLのタブの開き方
- 光らせるか
- 色の編集
などができます!
今回は
- サイズは小、文字サイズは大、形は丸型
- URLはそれぞれカテゴリーのページを貼る
- 色は枠色は淡く、文字色ははっきりと
と言う感じでカスタマイズしました。
これができれば、ほとんど終わったも同然です。
編集後がこちら

2.ウィジェットのカスタマイズ
次はいよいよ表示させる時が来ました!
表示させるにはウィジェットにコードを貼り付けるだけです。
コードを貼り付ける
作った投稿ページで”コードエディター”に移動して本文中のコードを全てコピーしましょう。

コピーしたらウィジェットに移動します。一応このページは保存しておきましょう。
ウィジェット編集は「外観>ウィジェット」から行けます。
先ほどコピーしたコードを「カスタムHTML」と言うウィジェットをお好みの場所に追加してください。
ボクはトップページの下部に表示させたいので「固定ページ本文下」と言う場所に追加します。

ウィジェットを追加したらそのウィジェット内にコピーしたコードを貼り付けます。

これを保存して完了すれば
作業終了です!お疲れ様でした!
完成はこんな感じです。

これで少しすっきりした印象を与えられます。
まとめートップページでカテゴリー別新着記事の表示させるー
ここまで大きく分けて2段階。細かく分けたら4工程ありました。
- ショートコード生成
- カラム作成
- ボタン作成
- ウィジェットにコードをコピーする
特に特別な知識や技術が無くても作れますので
みなさんぜひ試してみてください。
コメント