まとめ一覧ページを作成する方法は、プラグインを使うと簡単に作ることができます。

今回は、WP Show Posts で、左が画像、右がタイトルや日付が表示されるように、まとめ一覧ページを作ってみます。

まずは、WP Show Posts をインストールします。

ダッシュボードのプラグインの新規追加に入ります。

キーワードに『wp show posts』を入力してエンターキーを押します。

image2

WP Show Posts の『今すぐインストール』ボタンをクリックします。

『有効化』をクリックするのを忘れないようにしましょう。

image3

現在、投稿が 3 件あって、カテゴリーに matome が設定されている投稿が 2 件あります。

image4

カテゴリに matome が設定されている投稿を一覧表示します。

ダッシュボードの『WP Show Posts』をクリックし、『新規追加』をクリックします。

image5

タイトルを付けておきます。 今回は、『まとめ一覧ページ』と付けました。

image6

投稿の『分類』をクリックして、『category』を選択します。

image7

分類項目の『matome』にチェックを入れます。

image8

画面左側の『カラム』をクリックします。

image9

カラムの『2』をクリックして、『1』に変更します。

image10

画面左側の『画像』をクリックします。

画像の『画像の配置』を『左』に、『画像の位置』を『タイトルの下』にします。

image11

画面左側の『コンテンツ』をクリックします。

コンテンツの『コンテンツの種類』を『なし』にします。

image12

画面右側、公開の『公開』をクリックします。

image13

公開の下にある使用法のショートコードをコピーします。

image14

今回は、投稿にまとめページを作ってみます。

投稿を新規追加し、文章入力欄に、先程コピーしたショートコードを貼り付けます。

image15

投稿を公開して、まとめ一覧ページを表示してみます。

image16

無事、matome カテゴリーに指定した投稿が表示されました。

これから、デザインを変えてみましょう。

ダッシュボードの外観にカーソルをあて、『カスタマイズ』をクリックます。

image17

画面左下の『追加 CSS』をクリックします。

image18

まずは、画像を小さくするには、以下のコードを入力します。

.wp-show-posts-image img {
  width: 160px;
}

image19

画像が小さくなりました。

次に、画像を左、タイトルと日付を右にするには、次のコードを追加します。

.wp-show-posts-inner {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

image20

無事、表示されました。

さらに、日付を上にしたい場合は、以下のコードを入力します。

.wp-show-posts-inner header {
  display: flex;
  flex-direction: column-reverse;
}

image21

最後に、公開ボタンを押して、更新します。

image22

まとめ一覧ページが完成しました。

image23

簡単に一覧ページを作成したい場合、ぜひ試してみてください。

ブログ一覧