【第14章】The Post Gridの設定

The Post Gridは、TOPページに投稿を表示させることができるプラグインです。自分で投稿表示のレイアウトやデザインを設定できます。有料版でしかできない設定やデザインもありますが、無料版でも十分な機能が使用できます。

The Post Gridの設定

・ダッシュボードの左サイドバーから『The Post Grid』をクリックしてPostGrid一覧ページに入ります。ページ左上の『Add New Post Grid』ボタンをクリックして新しいPost Gridを作成しましょう。

・新しいPost Gridの設定画面に入ったら、『タイトルを追加』に『お知らせ』と入力します。

・『Short Code Generator』と書いてある下に５つ設定メニューのタブがあります。
まずは一番左にある『Query Build』の設定から行います。

・『Advanced Filters 』という項目の設定をします。『Taxonomy』と『Order』にチェックを入れます。『Order』の右側にさらに太字で『Order』という設定項目があるので『Descending』を選択しましょう。

・下の方にスクロールすると、デザインのプレビューがあり、TOPページでどのように表示されるか確認できます。ｄデザインを確認しながら設定していきましょう。

・次は、上の設定項目タブから『Layout Setting』を選択します。一番上の『Layout Type』とその下の『Layout』の設定は以下の通りです。

・Layout Type：Grid Hover
・Layout：Grid Hover1

・『Column』を設定します。３つセレクトボックスが並んでいて、左から『デスクトップ』『タブレット』『スマートフォン』と表示するデバイスによって変えることができます。一番左を『Column 2』に設定します。

・『Display per page』には、直接数字が打ち込めるので『4』と入力しましょう。

・次は、上の設定項目タブから『Field Selection』を選択します。タブの下の『Field Selection』の設定項目にチェックボックスが並んでいます。デフォルトですべての項目にチェックが入っているので、この３つ以外はチェックを外します。

・Title
・Read More
・Post Date

・上の設定項目タブから『Style』を選択します。『Style』は、主に色の設定で各項目の『色を選択』から色を設定していきます。それぞれの項目に下記の色コードを入れましょう。

【Primary Color】

#cdbea9

【Button Color】
Text：#747474

【ShortCode Heading】
Text Color：#747474

【Title】
Color：#ffffff

・『Meta Data』は、『Font size』を『18px』に設定します。

・ページ右上にある『公開』ボタンをクリックして設定を保存しましょう。

The Post Gridの設置

The Post Gridの設定ができたら、次はTOPページに設置して投稿が表示されるようにしていきます。

・まず、今開いているページのタブをタブバーから複製します。複製できたらさっき開いていたページのタブ(左側のタブ)をクリックし、左サイドバーからダッシュボードに戻ります。

・固定ページ一覧を開いて『TOPページ』のElementorの編集画面に入ります。

・バナーボタンのコンテンツエリアまでスクロールしてください。バナーボタンのコンテンツエリアの上に、お知らせの投稿を表示できるよう設定していきます。

・バナーボタンのコンテンツエリアまでスクロールしたら、バナーボタンの上のスペーサーが入ったセクションを複製します。

・複製できたら、バナーボタンの上のセクションのピンクタブにある『＋』をクリックして新しいセクションを追加します。ウィジェット一覧から『一般』項目にある『ショートコード』のウィジェットを入れます。

・先ほど複製した、タブバーの右側のタブ(The Post Gridの設定画面を開いているタブ)を開きます。『お知らせ』のタイトルの下に青いハイライトの入ったコードが縦に2つ並んでいると思います。上のコードがショートコードなのでそちらをコピーしてください。コピーできたらTOPページの編集画面の方に戻ります。

・戻ったら、『ショートコード』ウィジェットのコンテンツを開いてショートコードを貼り付けましょう。