こんにちは、”はふぃ”です。
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のショートコードを貼り付けます。
画面が完成したら「公開」ボタンを押して公開状態にします。
次にサイドメニューの「設定 > 表示設定」に移動します。
「ホームページの設定」という項目で「固定ページ」を選び、「ホームページ」を先ほど作成した固定ページのタイトルのものを選択します。
最後に「変更を保存」をクリックすればトップページへの反映の完了です！
まとめ
カテゴリごとやタグごとなどにも作成できるので、自分好みのサイトを作りましょう！