こんにちは、”はふぃ”です。

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：すべてのアイテム
• 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のショートコードを貼り付けます。

画面が完成したら「公開」ボタンを押して公開状態にします。

次にサイドメニューの「設定 > 表示設定」に移動します。

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

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

まとめ

カテゴリごとやタグごとなどにも作成できるので、自分好みのサイトを作りましょう！