【2021年最新】Post Gridの使い方、ワードプレスのプラグイン

好きなことはとことん突き詰めるタイプの人しろっ子です。

私は趣味でブログを運営しています。
特別な知識も元々は全くありませんでした。
ワードプレスでサイトを作成することもゼロからスタートし、たくさんの方のブログに助けられていつの間にかブログ運営歴は丸５年になりました。

これから新たにサイトを作成する人に向けて、自分の忘備録としてブログ運営の記事も書いていこうと思います。

今回はワードプレスでブログを作成している人向けに、『Post Grid』といプラグインの使い方についてまとめてみました。

Post Gridというプラグインについて

『Post Grid』とはPost（投稿）Grid（グリッド表示）という意味の通り、書いたブログの記事一覧を見た目よく表示させるプラグインです。
設定によって新着記事一覧であったり、サイドバーでの記事一覧であったりと表示させる場所を変えたり、表示させる記事を選んで（種類に分けたり）表示させたり様々な使い方ができます。

アイキャッチ画像とともに記事を一覧にして並べることができるので、ブログの見た目がおしゃれに仕上がりとても気に入っています。

注意点としては、類似のプラグインが複数あるので間違えないこと。（The Post Gridというプラグインもありますがこちらは別のものです）
英語での表記のみで日本語に対応していないこと。

以前は知識のない私でも感覚で設定できる仕組みになっていましたが、現在は設定に少しコツが必要です。

とはいえ、設定のやり方さえ理解できれば初心者でも簡単に見た目の良い記事一覧をつくることができるのでおすすめです。

Post Gridの詳細ページはこちら

その辺をこちらで解説していこうと思います！

Post Gridプラグインの実際の設定方法

まずはプラグインの新規追加のところからインストールしていきます。

『ダッシュボード』→『プラグイン』→『新規追加』を開きます。

右上のキーワードのところに『Post Grid』と入力し、こちらをインストール、有効化します。
※プラグインを使うときは最終更新やWPバージョンとの互換性のところは必ず確認するようにしています。更新が数年前で止まっているようなものはトラブルを回避するためにも利用しないようにしています。

有効化するとダッシュボードの一覧に『Post Grid』の項目が出てきます。ここで『Setting（設定）』を選択し『General（一般設定）』でどのページを表示させるか選択します。

※　複数選択する場合は『Ctrl』を押しながら選ぶと選択できます。

今回は記事の投稿一覧を表示させたいので、『投稿』と記事を更新した際に新たに目につくよう『投稿リビジョン』を選択しました。

次に『Post Grid』→『Add New（新規追加）』を開きます。
作成するグリッドに分かりやすい名前（タイトル）をつけておきましょう。
ここを見ると画像や表示する内容、そのサイズなどあらゆることをカスタマイズができるようになっているようです。
細かいところは私には難しかったので簡単に設定できるものを選びました。

上図のように、『layouts（レイアウト）』から『Import default layouts（デフォルトレイアウトをインポートする）』を選びます。

するとこのように一覧が出てきます。
上のバーから『Free（無料）』のものを抽出し、設定したいレイアウトを決めたら『Import（インポートする）』を押してインポートします。
インポートができたらボタンが『Saved（保存）』に変わるので保存します。

一旦ダッシュボードに戻り、『All Post Grid』から先ほど名前を付けたタイトルを選び、編集で開きます。

先ほど保存したデフォルトレイアウトが出てきているので、右上の『Edit（編集）』からレイアウトを開きます。

Mediaなどの文字部分をクリックすることで、文字や画像のサイズ、掲載文字数などを変更することができます。（下で解説してます！）
✖はそれ自体を削除、上下の矢印はドラッグして動かすことで掲載順を変えることができます。

ここで調整が済んだら右の更新ボタンを押します。

再度、『All Post Grid』をクリックすると、作成されたグリッド一覧が出てきます。

右側にショートコードが出てきているので、こちらをコピーして掲載したい場所に貼り付ければ完成です。
ショートコードは固定ページや投稿ページはもちろん、ウィジェットを使ってサイドバーなどにも表示させることができます。

私はこのブログのトップにしている固定ページに掲載しています。

とても見やすく配置でき満足です。
ひとまずこれだけの設定でも充分見た目よく記事を見せることができるようになりましたね。

もう少し、細かな設定も見ていきましょう。

ポストグリッド表示部分の背景の色を変える

デフォルトではポストグリッドの背景は白です。
ここを別の色に変えていきます。

任意の名前を付けたPostGridの編集を開きます。

左側の編集一覧から『item style（アイテムスタイル）』を開きます。
スクロールしていくと真ん中あたりに『Grid item background color（グリッド内の背景色）』という項目が出てきます。

ここで色を指定する、もしくは選ぶことでグリッド内の背景色を変更することができます。

PostGrid内のタイトルの文字数を変える、文字の大きさを変える

ダッシュボードのPostGrid（ポストグリッド）からAll Layouts(オールレイアウト）を開きます。

Post title（投稿タイトル）の文字部分をクリックします。

クリックするとさらに細かな設定画面が表示されます。

タイトルの文字数はデフォルトで20文字になっています。
文字色は黒（でもリンクになるので設定しているリンクの文字色になっているはずです）。
フォントサイズは18pxです。
フォントはOpen Sans。

今回はタイトル文字数を35に変更し、フォントサイズは一つ小さく16pxにしてみました。
変更の後には右上の更新を忘れずに押してくださいね。

PostGrid内に日付を表示させる

上のタイトル編集と同じで『All Layouts』から編集します。

『General（一般）』の文字をクリックするとデフォルト設定以外で追加できる項目一覧が表示されます。
その中の『Post date（投稿日）』をクリックすると設定一覧に項目が追加されます。

更に項目が追加されたPost date（投稿日）をクリックすることでこちらも文字色やサイズ、日付の表示形式などが設定できます。

PostGrid内の記事の掲載順序を変える

こちらは『All Post Grid（すべてのポストグリッド）』から『Query Post（クエリ投稿）』を開きます。

『Post query order』で昇順か降順を選ぶことができ、その下の『Post query orderby』でどれを基準にするのかを選択できるようになっています。

デフォルトでは、投稿日が降順になっており投稿の新しいものから順に表示されるようになっています。

記事一覧をすっきり見やすくグリッド表示させる『Post Grid』

ぱっと見た感じ設定が難しそうに見えますが、デフォルトレイアウトを使うことで詳しい知識がなくてもきれいにレイアウトすることが可能でした。

レイアウトの編集ボタンが分かりにくかったので注意が必要です。
たまに、グリッド表示の不具合が出るのが難点ですね。
時々PCとスマホと両方の見え方をチェックした方がよさそうです。
PostGridを設定して1ヶ月ほどしか経っていませんが、2回ほど不具合がありました。

とはいえブログの見た目が格段に良くなるのでおすすめです。
よかったら参考にしてみてくださいね。

最後までお読みいただきありがとうございました。