記事をグリッド表示できるWPプラグイン「The Post Grid」の使い方を解説

記事をグリッド表示したいけど難しそうだな~・・・
それならPost Gridを使ってみよう。簡単な設定をするだけできれいに記事をグリッド表示できるんだ
そんなプラグイン有るんだ。便利そう!

WordPressではトップページを開いたときに記事一覧が表示されますが、ほとんどのテーマでは記事が一列の縦並びで表示されます。

もし記事を複数列で表示するグリッドに対応させたいならグリッドに対応したテーマを探すというのも手の1つですが、テーマを変えずに自分の今使っているテーマでグリッド表示したいという場合は「The Post Grid」というプラグインが便利です。

ここではそのプラグインを導入して記事を好きな列数でグリッド表示する手順について解説します。

プラグインの導入

The Post Grid」をインストール・有効化して利用できるようにする手順は次の通りです。

まずメニューから「プラグイン」ー>「新規追加」を開きます。

すると新規追加画面が開くのでその画面の検索欄に「post grid」などのキーワードを入力して検索すると検索結果に次のようなプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしましょう。

このプラグインは以下のプラグインページから直接ダウンロードして使うこともできます。

https://ja.wordpress.org/plugins/the-post-grid/

インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるのでそれを押して必ず有効化してください。

これでプラグインが使用可能になります。

グリッドの作成・設定

次にこのプラグインを使ってグリッドを作成・設定する手順を紹介します。

まず新規グリッドを作るためにメニューから「The Post Grid」ー>「Add New Grid」を開いてください。

すると次のような新規追加画面が表示されるのでまず初めに「ここにタイトルを入力」と書かれた場所にグリッドを識別するための分かりやすい名前を入力しましょう。

そしてその下の設定画面でグリッドの表示について次のような設定を行っていきます。

グリッドデータの設定

グリッドにどのような種類の記事を表示するかを設定するには「Short Code Generator」の下にある「Post Source」タブを開いてください。

ここではグリッドのデータについて次のような設定が行えます。

表示する投稿タイプ

グリッドに表示したい投稿タイプは「Post Type」の横にあるドロップダウンメニューから選択可能です。

post」を選ぶと個別の投稿ページに対してのグリッド、「page」を選ぶと固定ページだけが表示されるグリッドになります。

記事フィルター

グリッドに表示する記事を詳細に絞り込みたい場合は「Advanced Filters」から絞り込みに使うフィルターを選択できます。

フィルターとして使えるのは次の5つです。

  • Taxonomy(タクソノミー)

    これにチェックを入れると次のような設定エリアが表示され、グリッドに表示する記事に対して特定のカテゴリーやタグでフィルターをかけて絞り込むことができるようになります。

  • Order

    この項目にチェックを入れると次のような記事の順番(オーダー)を設定するエリアが表示されます。

    「Order by」には並び替えに使う記事IDやタイトルや作成日などが指定できます。また「Order」で「Ascending」を選ぶと昇順で並び替え、「Descending」を選ぶと降順で記事が表示されるようになります。

  • Author

    これにチェックを入れると次のような記事の作者を選ぶエリアが表示され、グリッドにその作者が書いた記事だけが一覧表示されるようになります。

  • Status

    これにチェックを入れると記事の状態を指定するエリアが表示され、ここで指定した公開済みや下書きなどの状態に当てはまる記事だけがグリッドに表示されるようになります。

  • Search

    この項目にチェックを入れると次のような入力欄が表示され、そこに例えば「wordpress」などのキーワードを入力するとそれを含む記事だけがグリッドに表示されます。

このように記事を絞り込んで表示したい場合はこの5つの項目を使って表示したい記事にフィルターをかけることが可能です。

レイアウトの設定

グリッドのレイアウト設定を行うには「Short Code Generator」の下にある「Layout Settings」タブを開いてください。

ここではグリッドのレイアウトについて主に次のような設定が行えます。

グリッド列数の設定

グリッドの列数は次のように「Columns」の横にあるドロップダウンメニューから1~6列の範囲で指定可能です。

この設定で例えば「Column3」を選ぶと次のようにグリッドが3列になって表示されます。

2~4列だときれいに表示されますが、それ以上の列数を指定するとかなり縦長になってしまうので5列以上にはしないほうがいいかもしれません

ページネーションの設定

ページネーションとはページを分割する機能のことでこれを有効にすると1ページ当たりに表示できる最大の記事数ごとにページが分割されるようになります。

この設定を有効にするには「」にチェックを入れて、その下に表示される「D」に1ページ当たりの記事数を入力してください。

グリッドに表示する全ての記事数が「Display per page」を超える記事数の場合はグリッドの下の方に「1」や「2」などのページ番号がかかれたリンクが表示されるようになります。

メディア設定

グリッド内の記事に表示されるアイキャッチ画像の大きさは「Feature Image Size」から指定可能です。

また「Media Source」からどの種類の画像をアイキャッチに指定するかも選択できます。

この設定で「Feature image」にチェックを入れると記事内で設定したアイキャッチ画像が、「First Image from content」にチェックを入れると記事内で出てくる最初の画像がグリッド内の記事のアイキャッチとして使用されます。

フィールド設定

グリッド内の記事にどのような情報を表示するかを設定するには「Field Selection」タブを開いてください。

ここでは「Field selection」の横のチェックボックスからグリッド内で記事に対して次のような情報を表示するか選択することができます。

  • Title(記事のタイトル)
  • Excerpt(概要)
  • Read More(Read Moreボタン)
  • Post Date(記事の公開日)
  • Author(記事作者名)
  • Categories(カテゴリー)
  • Tags(タグ)
  • Comment Count(記事へのコメント回数)

これらの項目の内記事情報として表示したいものにだけチェックをつけてください。

設定が終わったら...

以上の設定が完了したら「公開」ボタンを押してグリッドを公開しましょう。

これで固定ページやトップページに作成したグリッドを設置できるようになります。

グリッドの設置

作成したグリッドを固定ページに設置する手順は次の通りです。

まずグリッドを設置したい固定ページの投稿画面を開き、ビジュアルエディタから次の画像で示したグリッド挿入ボタンをクリックします。

すると次のようなグリッド挿入ダイアログが表示されます。

そのダイアログで記事内に挿入したい「Select Short code」からグリッド名を選んで「OK」ボタンを押してください。

OKボタンを押すと次のようにエディタ上にショートコードが挿入されます。

そして記事を保存して固定ページを見るとショートコードを挿入した位置に次のようにグリッド形式で記事一覧が表示されます。

またスマホやタブレットのような画面幅の狭い端末の場合は次のように画面幅に合わせて最適な列数でレスポンシブ表示されます。

このようにショートコードを挿入するだけでグリッド表示でき、さらにレスポンシブ対応しているのでどの端末で見ても崩れないきれいなグリッドが作れるというのがこのプラグインの優れたところです。

まとめ

グリッド表示すると1ページ当たりに表示できる記事数が多くなり、デザイン的にもおしゃれになります。

ただ自力でグリッドを作ろうとするとCSSなどのスタイルシートやスクリプトの知識が必要でかなり手間がかかってしまいますが、ここで紹介したプラグインを使えば簡単操作ですぐにスマホやPCに対応したグリッドが作成可能なので是非使ってみてください。

以上ここでは「The Post Grid」プラグインを導入して記事をグリッド表示する手順について解説しました。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press