【WordPress】ブログのトップページにカテゴリー別新着記事を表示させる方法

pc お洒落Blog

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

カテゴリー別に新着記事を表示させたらどうなるの?



ご紹介する作業を行えばこのような形で表示されます。

WordPressブログ




今回の記事はこのような人にお勧めです!

  • トップページを整理したい
  • 新着記事をカテゴライズしたい
  • 一瞬で新着を視認したい

特別な知識や技術なしで、デフォルトの状態から作業ができます!

リク
リク

テーマはなんでも大丈夫です!ちなみにボクは”COCOON”!

今回の主な内容
  • コードの生成
  • ウィジェットに貼り付けて表示

それではいきましょう!

カテゴリー別新着記事を表示する方法

トップページに表示させるための手順を解説していきます。

プログラミングの知識や有料テーマなどは必要ないのでお手軽に行えますよ!

手順は以下の通りです。

  1. 投稿欄でコード作り
  2. ウィジェットカスタマイズ

二段階のフェーズを通れば終了です。

今回はデフォルトのエディターで行います!

1.投稿欄でコード作り

まずは投稿欄を使ってコードを作成します。

とはいってもコードは素人には作り難いので、まずはビジュアルエディターを使って作成します。

ショートコードを貼り付ける

まず「ボックス追加>カラム>2カラム(1:1)」を選択します。

カテゴリー数に合わせて表示させてください。

ボクの場合は”4つのカテゴリー”があるので2カラム✖️2個出します。

WordPress カラム

カラムを出したらこんな感じになりました。

カラム内にショートコードを貼る

カラム ができたら以下のショートコードを貼り付けてください。

新着記事を自動的に表示してくれるコードになっています。

しかしこれだけでは不十分なので

”表示して欲しいカテゴリー”

”表示したい記事数”

を決めます。

cats=がカテゴリーのナンバー

count=が表示数

catsにはカテゴリーの数字を入れます。

まず「投稿>カテゴリー」でカテゴリー名の上にカーソルを移動させてください。

WordPress カテゴリー

”Actor”のカテゴリーの数字が知りたいのでそこまでカーソルを持ってきます。(黒枠)

そうすると画面左下に文字列が出てきます。

カテゴリー 数字

この文字列の”ID=3”と言うのがカテゴリーナンバーになります。

なので「cats=3」と入力すればOK!

この要領で全ての数字を入れていきます。

WordPress スクショ

こんな感じになればOK!

リク
リク

記事数はデフォルトの5つだと多いので3つにしました。

カラム内にボタンをいれる

カラムの中にボタンを入れてどのカテゴリーの新着なのか、分りやすくします

「ブロック追加>ボタン」を選択していきます。

リク
リク

それぞれショートコードの一つ上の段落に貼りましょう!

それができたらこんな感じになります。

WordPress カラム

ただこれだと味気がないので少しカスタマイズしていきます。

まずボタンのテキストを”各カテゴリー名”に変えていき、ボタンを真ん中に寄せましょう。

ワードプレス

赤枠で編集していきます。

  • ボタンのサイズ、形
  • 文字のサイズ
  • ボタンにURLを貼るか
  • URLのタブの開き方
  • 光らせるか
  • 色の編集

などができます!

今回は

  • サイズは小、文字サイズは大、形は丸型
  • URLはそれぞれカテゴリーのページを貼る
  • 色は枠色は淡く、文字色ははっきりと

と言う感じでカスタマイズしました。

これができれば、ほとんど終わったも同然です。

編集後がこちら

WordPress 投稿画面

2.ウィジェットのカスタマイズ

次はいよいよ表示させる時が来ました!

表示させるにはウィジェットにコードを貼り付けるだけです。

コードを貼り付ける

作った投稿ページで”コードエディター”に移動して本文中のコードを全てコピーしましょう。

WordPress

コピーしたらウィジェットに移動します。一応このページは保存しておきましょう。


ウィジェット編集は「外観>ウィジェット」から行けます。

先ほどコピーしたコードを「カスタムHTML」と言うウィジェットをお好みの場所に追加してください。

ボクはトップページの下部に表示させたいので「固定ページ本文下」と言う場所に追加します。

WordPress ウィジェット

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

スクリーンショット ワードプレス

これを保存して完了すれば

作業終了です!お疲れ様でした!

完成はこんな感じです。

WordPressブログ

これで少しすっきりした印象を与えられます。

まとめートップページでカテゴリー別新着記事の表示させるー

ここまで大きく分けて2段階。細かく分けたら4工程ありました。

  • ショートコード生成
  • カラム作成
  • ボタン作成
  • ウィジェットにコードをコピーする

特に特別な知識や技術が無くても作れますので

みなさんぜひ試してみてください。

コメント

タイトルとURLをコピーしました