[WordPress]トップページの記事一覧をカテゴリー2列表示させるやり方

自分のブログデザインを大きく変える際に行った、「トップページの記事一覧をカテゴリー別で表示させ、2列の横並びにする」というやり方をこちらに記載しています。

最近このブログのようにカテゴリーをトップページに表示させているブログをよく見かけますね。

CSSをイジったり結構難しいイメージを持たれそうですが、実際やってみるとそんなことはなく、メチャクチャ簡単です。

ただ、注意点としては、WordPressのテーマにWING（STINGER PRO2版やAFFINGER5）などを使っている方が簡単にできるというところなので、このテーマではない方は当てはまりません。

参考：▶WordPressテーマ 「WING（AFFINGER5）」

参考にできる部分もあるとも思うので、是非読んでみていただきたい。

カテゴリーを横並び2列にするやり方

【完成イメージ】

PC表示で「横並びのカテゴリー別の記事一覧」を作成するためには、記事を書く際の編集画面で行うので、新規追加などから編集画面を表示します。

それではやり方の方を紹介していきます！

1. 横2列表示の領域を作る

上の用に記事編集画面の［タグ］→［レイアウト］→［PCとTab左右50％］で2列横並びの左右対称の領域を作ることができます。

【画像】

このような左右対称サイズの領域が作れるので、そこへカテゴリー別の記事一覧をそれぞれ詰め込んでいく形です。

2. カテゴリー別の記事一覧を作成

カテゴリーのバナーを作る

まず先に上のようなカテゴリー記事の名称バナー的なものを作っておきます。
(左右の領域へそれぞれ直接作っても問題ないありません。)

【画像】

編集画面から［ボックスデザイン］→［バナー風ボックス］→［基本］で下のようなコードが出てきます。

【画像】

それぞれ自分で簡単に編集できるので下の項目を参考に編集してみてください。
(※項目は省いている部分もあります。)

上の設定だけである程度簡単なバナーの作成はできると思います。

作成したそれぞれの名称バナーを左右の領域へ入れておきます。

 記事一覧の作成

カテゴリー記事一覧は［タグ］→［記事一覧］→［カテゴリー一覧］から作成していきます。

作成すると上のようなコードができます。

記事一覧に置きたいカテゴリーを選ぶには、上のコードにある「st-catgroup cat=""」の""部分に数字を入れて指定します。

ダッシュボードの［投稿］にある［カテゴリー］のページ開き、自分が置きたいカテゴリー一覧のIDの数字を見つけて入れます。

「page=""」部分には一覧に表示したい数の数字を入力することで表示させる数を設定できます。

デフォルトであれば“0”を入れることで新着記事を表示させることも出来ます。

4. カテゴリー別の横並び2列完成コード

今回は噛み砕いて説明していますが、実際は表示領域へ直入れしながら編集できるため、わざわざ別々で作成して行く必要はありません。

作成したコードは下のような形です。

【画像】

上のコードで下のような2列横並びのカテゴリー別の記事一覧が表示されます。
(スマホでは縦にカテゴリ記事が表示されます)

「もっとみる」というリンクがあってもいいですね。

トップページへの表示の仕方

トップページに表示するためにはいくつか方法がありますが、一番簡単な［STINGER PRO管理］から入れる方法を説明しておきます。

トップページには新着記事一覧がすでにあると思います。

そちらの記事一覧を消す事もできますが、自分のブログでは消していません。
（新着記事一覧の2ページ以降を見れるようにしたいので）

すでにある新着記事一覧を削除すると、2ページ目以降の記事一覧が見れなくなるようので、自身の判断でお願いします。

［STINGER PRO管理］を開き［トップページ］を開きます。

［トップページ］画面の下の方へ「トップページのコンテンツ内の新着記事一覧を非表示にする」というのがあるので、そちらにチェックを付けて保存します。

これで非表示にすることが出来るので、同じく［トップページ］の挿入コンテンツという部分へ、先程自身が作ったコードをコピペして保存。

これで上手く反映していればOKです。

以上がカテゴリーを2列横並び表示にするやり方になります。

このやり方以外ではCSSをイジってやる方法もありますが、CSSをあまり触らない方にとっては時間もかかるしむしろ無謀とも言える作業かもしれません。

僕が使っているテーマとマッチする方であればめちゃくちゃ簡単に作れるので、もしこういったデザインにしたい方は試してみてください。

これらは記事の編集画面で出来るため、作成時にデザインが崩れる心配もない状態で作業できるので超便利です。

WINGを使っている人に限るのでそこには依存してしまいますが、同じような機能がついているテーマであれば応用して作ることも出来るのではないかなと思っています。
▶WordPressテーマ 「WING（AFFINGER5）」

以上です！