あらゆるコンテンツの一覧をグリッド表示できるプラグイン「Post Grid」

グリッド表示とは、通販サイトなどにあるコンテンツのリスト表示をタイル状に並べるデザイン手法。

通常ではCSSなどで設定するのですが、ある程度知識がないと難しい表現方法でもあります。

「Post Grid」は、簡単な設定をしていくだけで投稿、固定ページのみならず、カスタム投稿タイプも含めてグリッド表示のリストをいくつでも作ることができるプラグインです。

※プラグインのバージョンが上がり、より設定しやすい画面になりました。

【Post Grid】プラグインの基本的な機能・できること

1. ショートコードで記事や固定ページの任意の場所に一覧をグリッド表示
2. ショートコードと同時に生成されるPHPコードを貼りつければテンプレート内で利用可能
3. 様々なコンテンツから単独＆複数選択でリスト作成が可能
4. 抽出されたコンテンツの並び替えができる
5. キーワードによるリストの作成が可能
6. レイアウトの調整と様々な視覚効果が使える
7. パソコン・タブレット・携帯などデバイスに応じたグリッド幅の設定ができる
8. 画像の大きさを変更したり、グリッドの装飾したりすることができる
9. １ページの表示件数の設定とページ送り機能
10. カスタムJsやカスタムCSSを追加できる
11. グリッドの中に含める項目の選択やレイアウトが指定できる

他にもグリッド表示系のプラグインがありますが、カスタム投稿タイプの対応が有料だったり、細かなレイアウトができなかったりと無料で使うにはなかなか不都合の多いものが多いです。「Post Grid」は無料で「グリッド表示する際にやりたいことが全部できる」と言っても過言ではないプラグインです。

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

• テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
  ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
  ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
• プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
• このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
• プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）

【Post Grid】プラグインの設定画面や表示の日本語化と翻訳

当サイトで私が翻訳した【Post Grid】プラグインの日本語化ファイルを提供しています。

翻訳ファイルは

【Post Grid by PickPlugins】プラグインの日本語翻訳ファイル

からダウンロードできます（ダウンロードの方法や日本語の適用方法なども解説しています）

翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。

【Post Grid】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。

WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。

日本語化してしまえば設定の内容は簡単に理解できると思います。一覧の管理も通常の「投稿」のようにグリッド表示設定した内容の一覧が表示されるので便利です。もちろん無制限に一覧を作ることができます。

【Post Grid】プラグインの基本的な使い方

日本語化すれば簡単に使えるプラグインです。基本的には記事の抽出設定をして、デザイン（レイアウト）を選択するだけで簡単にグリッド表示の一覧が作成できます（以下公式ページの画像です）

出来上がるとこんな感じの一覧が表示できます

使用する上で３つ注意点というか見落としがちな点があります。それは

1. オフセットの値を「－１」にしないとすべての投稿からの抽出がされない（デフォルトは「３」）
2. いろいろな選択肢は「ctrl」キーを押しながら選択することで複数条件になる
3. 日付順の場合は「公開日」でのソートとなる

ことです。それから並び順は「acsending」は過去記事から順に、「Decsending」は最新の記事から順にとなるところも気を付ける必要があるかと思われます。

標準レイアウトでもある程度のクオリティはあると思うのですが、デザインや表示項目を変更したい場合は以下のように行います。

1. POST GRIDタブの中の「Layout Editor」を開き、標準で「FLAT」になっているところをクリックして「New Create」をクリックする
2. 名前を指定する（半角英数字）
3. グリッド表示する要素を全て選択する

このとき同時にデザイン要素が変更できます（例：タイトルのデザイン変更）

1. 「title」をクリック
2. レイアウト設定の下に×付の「title」というのができるのでクリック（標準でレイアウトはFLATになっていますので必要であれば変える）
3. CSSを編集して保存

• 同じレイアウトタイプすべてに同様のデザイン要素が割り当てられます
• 一度変更すると記録されるようで、次に同じものを表示してもデフォルトのCSSが表示されます
• 他のパーツに関してもこれでいけるようです
• グリッド表示設定ごとにカスタムコードを設定できるようになっているのですが、うまく動作しませんでした（見落としかもしれませんが、ソースを見ても上記方法での変更のみ適用されるような記述になっていました）

【Post Grid】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

カスタム投稿タイプの記事を表示するとエラーが出るときは

このプラグインを使ってカスタム投稿タイプの記事一覧を表示しようとしたら、
Warning: Invalid argument supplied for foreach() in・・・というエラーメッセージが表示された後で一覧が表示されることがあります。

原因は、カスタム投稿タイプがどのタクソノミー（タグやカテゴリー）にも属していないためで、ここが空白になっているためエラーメッセージが出るようです。カスタム投稿タイプを作ったらカスタムタクソノミーなり通常のタクソノミーに関連付けるであろうという前提なんですね。
このエラーを回避する方法は

【WordPress】「Warning: Invalid argument supplied for foreach() in・・・」エラーが出たときの対処

で解説しています。

ページ送りのボタン動作がおかしいときは

このプラグインを使って設置したリストでは自動でページ送りが一覧下へ追加されるようになっています。これについて不具合が発生することがあるようです。

症状としては、１ページ目から２ページ目には移動できるものの、前のページに移動できないことです、具体的には

1. ２ページ目以降を見たときに「前へ」ボタンが表示されない
2. １ページ目の数字ボタンがフォーカスされており、クリックしても移動しない

という症状です。プラグインのバージョンやテーマとの相性によって発生していることもありますので、実際のサイトでこのような現象が起こった場合には以下のように対処します。

1. プラグインの編集から「PostGrid」を選択します
2. 「grid-items」→「nav-bottom-new.php」を開きます
3. ４３行目あたりにある「global $paged;」という記述の前に「//」をつけて「//global $paged;」とします（コメントアウトします）
4. 保存します

※これで私の場合は解消できましたが、前述した通り環境によるところがあるのかも知れません。また、次回のプラグインアップデートでこの点について改善が行われるのかどうかが不明なため、アップデート後コードが元に戻って不具合が再発することも考えられますので、アップデート後は再確認が必要かと思います。

この情報は公式フォーラムに掲載されていました。

プラグインのテスト環境＆個人的評価

最後に【Post Grid】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

テストした環境

• テストサーバー：ドメインキング
• WordPressのバージョン：4.9.5
• PHPのバージョン：7.0
• テーマ：Simplicity2 バージョン2.3.0g
• プラグインのバージョン：本記事で紹介しているバージョン 2.0.26／最新バージョン 2.2.96
• 公式サイト（wordpress.org上）：https://wordpress.org/plugins/post-grid/
• 公式サイト（作者サイト）：

個人的な評価・感想ほか

1. 設定のしやすさ：★★★★★
2. 使いやすさ：★★★★★
3. おすすめ度：★★★★★

バージョンが上がり、大幅にGUIの変更があったようですが機能自体はほとんど変わりがありませんでした。より使いやすくなっていますので、グリッド表示で記事一覧を簡単に作成したいときにはおすすめのプラグインです。