WordPressのサイトトップページに”カテゴリー毎の新着記事”を表示させる方法を解説します！
カテゴリー別に新着記事を表示させたらどうなるの？
ご紹介する作業を行えばこのような形で表示されます。
今回の記事はこのような人にお勧めです！
- トップページを整理したい
- 新着記事をカテゴライズしたい
- 一瞬で新着を視認したい
特別な知識や技術なしで、デフォルトの状態から作業ができます！
テーマはなんでも大丈夫です！ちなみにボクは”COCOON”！
- コードの生成
- ウィジェットに貼り付けて表示
それではいきましょう！
カテゴリー別新着記事を表示する方法
トップページに表示させるための手順を解説していきます。
プログラミングの知識や有料テーマなどは必要ないのでお手軽に行えますよ！
手順は以下の通りです。
- 投稿欄でコード作り
- ウィジェットカスタマイズ
二段階のフェーズを通れば終了です。
今回はデフォルトのエディターで行います！
1.投稿欄でコード作り
まずは投稿欄を使ってコードを作成します。
とはいってもコードは素人には作り難いので、まずはビジュアルエディターを使って作成します。
ショートコードを貼り付ける
まず「ボックス追加＞カラム＞2カラム（1:1）」を選択します。
カテゴリー数に合わせて表示させてください。
ボクの場合は”４つのカテゴリー”があるので2カラム✖️２個出します。
カラムを出したらこんな感じになりました。
カラム内にショートコードを貼る
カラム ができたら以下のショートコードを貼り付けてください。
新着記事を自動的に表示してくれるコードになっています。
しかしこれだけでは不十分なので
”表示して欲しいカテゴリー”
”表示したい記事数”
を決めます。
cats＝がカテゴリーのナンバー
count＝が表示数
catsにはカテゴリーの数字を入れます。
まず「投稿＞カテゴリー」でカテゴリー名の上にカーソルを移動させてください。
”Actor”のカテゴリーの数字が知りたいのでそこまでカーソルを持ってきます。（黒枠）
そうすると画面左下に文字列が出てきます。
この文字列の”ID＝３”と言うのがカテゴリーナンバーになります。
なので「cats＝３」と入力すればOK！
この要領で全ての数字を入れていきます。
こんな感じになればOK！
記事数はデフォルトの５つだと多いので３つにしました。
カラム内にボタンをいれる
カラムの中にボタンを入れてどのカテゴリーの新着なのか、分りやすくします
「ブロック追加＞ボタン」を選択していきます。
それぞれショートコードの一つ上の段落に貼りましょう！
それができたらこんな感じになります。
ただこれだと味気がないので少しカスタマイズしていきます。
まずボタンのテキストを”各カテゴリー名”に変えていき、ボタンを真ん中に寄せましょう。
赤枠で編集していきます。
- ボタンのサイズ、形
- 文字のサイズ
- ボタンにURLを貼るか
- URLのタブの開き方
- 光らせるか
- 色の編集
などができます！
今回は
- サイズは小、文字サイズは大、形は丸型
- URLはそれぞれカテゴリーのページを貼る
- 色は枠色は淡く、文字色ははっきりと
と言う感じでカスタマイズしました。
これができれば、ほとんど終わったも同然です。
編集後がこちら
2.ウィジェットのカスタマイズ
次はいよいよ表示させる時が来ました！
表示させるにはウィジェットにコードを貼り付けるだけです。
コードを貼り付ける
作った投稿ページで”コードエディター”に移動して本文中のコードを全てコピーしましょう。
コピーしたらウィジェットに移動します。一応このページは保存しておきましょう。
ウィジェット編集は「外観＞ウィジェット」から行けます。
先ほどコピーしたコードを「カスタムHTML」と言うウィジェットをお好みの場所に追加してください。
ボクはトップページの下部に表示させたいので「固定ページ本文下」と言う場所に追加します。
ウィジェットを追加したらそのウィジェット内にコピーしたコードを貼り付けます。
これを保存して完了すれば
作業終了です！お疲れ様でした！
完成はこんな感じです。
これで少しすっきりした印象を与えられます。
まとめートップページでカテゴリー別新着記事の表示させるー
ここまで大きく分けて２段階。細かく分けたら４工程ありました。
- ショートコード生成
- カラム作成
- ボタン作成
- ウィジェットにコードをコピーする
特に特別な知識や技術が無くても作れますので
みなさんぜひ試してみてください。
コメント