こんにちは、”はふぃ”です。
WordPressでサイトを作る時、皆さんはどのテーマを使っていますか?
有料のものや無料のものなど様々なテーマがあると思いますが、多くの人はデフォルトで使用可能な年号のもの(Twenty NineteenやTwenty Seventeenなど)を利用していると思います。
このサイトもTwenty Nineteenを利用して作っていたのですが、これらのテーマのトップページはシンプルで見やすいのですが、一つの記事が大きすぎて一覧性に欠けます。
↓ 2019/04/14のHAFILOGのファーストビュー

そこで今回はプラグインを使って、自動で記事を一覧表示する方法について紹介したいと思います。
使用するプラグイン
使用するのはPost Gridというプラグインです。
このプラグインの特徴は…
- レイアウトごとにショートコードを生成
- 作成したショートコードを設定することで記事や固定ページの任意の箇所に一覧が表示可能
- 様々なコンテンツから単独&複数選択でリスト作成が可能
です。
ここを読んでもよくわからないと思うので、百聞は一見にしかずということで早速使ってみましょう!
Post Gridの使い方
プラグインをインストールして有効化したら、サイドメニューに「Post Grid」の項目が追加されていると思うので、「New Post Grid」を選択します。

最初に今回作成するレイアウトのタイトルを入力しましょう。

ここから設定に移っていきます。
一覧表示する情報の設定
まず、「Query Post」タブを選択し、一覧表示する内容や表示順などを設定していきます。

- Post Types:一覧表示する内容
- Taxonomy & Terms (Categories):分類と項目(?)
- Post Status:どんな状態のアイテムを表示するか
- Publish:公開済み
- Pending:承認待ち
- Draft:下書き
- Auto Draft:自動保存
- Posts per page:1ページごとに表示するアイテム数
- -1:すべてのアイテム
- Offset:ずらすアイテム数
- Posts per pageで -1 を設定すると機能しない
- Exclude by post ID:除外するID
- Post query order:昇順か降順か
- Ascending:昇順
- Descending:降順
- Post query orderby:ソート条件
- ID:ID順
- Date:日付順
- Random:ランダム
- Comment Count:コメント数順
- Search keyword:検索キーワード
レイアウトの設定
続いて、「layout」タブを選択して一覧表示するデザインをカスタムします。

- Grid Layout:格子状のレイアウト ※ 他に選択肢なし
- Content Layout:文字の表示位置 ※ 「Edit」で説明書きの表示有無の設定など詳細な設定が可能
- flat-center:中央寄せ
- flat-right:右寄せ
- flat-left:左寄せ
- Skins:表示位置やアニメーション
ここまでで基本的な設定はOKです!
ここから下はお好みで設定してみてください。
レイアウトの詳細設定
「Layout settings」タブではローディングの表示やデバイスに応じた表示(PC、タブレット、スマホなど)など詳細なレイアウトの設定が行えます。

- Masonry enable:masonry(石積み)表示の有無
- Lazy Load Enable:遅延読み込みの有無
- Grid Items Width:デバイスごとの横幅
- Grid Items Background color:アイテムごとの背景色
- Grid Items Height:アイテムごとの高さ
- Grid Items Margin:横のアイテムとの間の幅
- Media Height:アイテム内の画像の高さ
- Featured Image size:アイキャッチ画像のサイズ
- Featured Image linked to post:アイキャッチ画像をアイテムへのリンクにするかどうか
- Media source:アイテムの画像をどこから参照するか
- Grid Container options:アイテム内部のオプション
- Padding:内部の余白
- Background color:背景色
- Background image:背景画像
ページネーションなどの設定
「Navigations」タブではページネーションの設定などが行えます。

- Grid Type:グリッドタイプ
- Navigation:ナビゲーション
- Pagination:ページネーションの有無
- Search:検索の有無
- Pagination:ページネーション
- Max number of pagination, keep 0 (zero) for auto:ページネーションの最大値(”0″だと自動で設定)
- Pagination Previous text:ページネーションで「前に戻る」リンクのテキスト
- Pagination Next text:ページネーションで「次へ進む」リンクのテキスト
- Pagination themes:ページネーションのテーマ
トップページに反映
設定が完了したら「公開」ボタンを押して公開状態にします。
※ この時以下のようなエラー画面が表示されて更新できない場合があります。
このような場合はレンタルサーバー(例:ロリポップ)のWAFを無効にすると更新できるようになるそうなので、一時的に無効にして更新しましょう。
(更新した後にWAFを再度有効化することを忘れずに!)

公開に成功したらトップページに反映させる設定に移りましょう。
まず、固定ページを作成するためにサイドメニューの「固定ページ > 新規追加」をクリックします。

固定ページで「ヴィジェット > ショートコード」で先ほど作成したPost Gridのショートコードを貼り付けます。

画面が完成したら「公開」ボタンを押して公開状態にします。
次にサイドメニューの「設定 > 表示設定」に移動します。

「ホームページの設定」という項目で「固定ページ」を選び、「ホームページ」を先ほど作成した固定ページのタイトルのものを選択します。

最後に「変更を保存」をクリックすればトップページへの反映の完了です!

まとめ
カテゴリごとやタグごとなどにも作成できるので、自分好みのサイトを作りましょう!
↓ これからWordPressを始めようと思っている方はこちらもチェック!