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

WordPressでサイトを作る時、皆さんはどのテーマを使っていますか?

有料のものや無料のものなど様々なテーマがあると思いますが、多くの人はデフォルトで使用可能な年号のもの(Twenty NineteenやTwenty Seventeenなど)を利用していると思います。

このサイトもTwenty Nineteenを利用して作っていたのですが、これらのテーマのトップページはシンプルで見やすいのですが、一つの記事が大きすぎて一覧性に欠けます

↓ 2019/04/14のHAFILOGのファーストビュー

そこで今回はプラグインを使って、自動で記事を一覧表示する方法について紹介したいと思います。

使用するプラグイン

出展:wordpress.org

使用するのは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のショートコードを貼り付けます。

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

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

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

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

まとめ

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

投稿者: はふぃ

若手のWEBフロントエンジニア。最近はバレーボールにハマってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA