読了時間: 817(約4,972文字)

オシャレなグリッド表示で注目!「Post Grid」「Wp Post Grid」2つのプラグインの組み合わせ

komikan0108

WordPressで運営していて、気になるのがサイトの顔ですよね。
例えば「こみかん総合情報サイト」であればこんな感じ。
こみかん総合情報サイトTOPサイトのTOPページというのは、そのサイトがどういうサイトなのかを表します。よくIT系情報サイトなら、

グリッド表示

こういう感じのオシャレな表示で記事を紹介していますよね。こういった表示のことをグリッド表示といい、Wordpressのプラグインによってはアニメーションを付けることも簡単にできます。

グリッド表示

いわゆる「グリッド表示」というものをしてみたいものの、やり方がわからないという方のためにおすすめのプラグインと設定方法をご紹介いたします。

パズル系グリッド表示「WP Post Grid」

Google検索で「wordpress grid」などと検索すれば、たいがいこの「WP Post Grid」と下で紹介する「Post Grid」の2つが出てくるでしょう。
どちらか一方について紹介している記事はありますが、今回は両方使います。「Post Grid」については検索してもあまり記事はありません。ぜひ下の紹介まで見ていってください。

「WP Post Grid」とは

「WP Post Grid」は定番のグリッド表示系プラグインで、記事を3つから単体でクールにご紹介したい方に向いています。設定方法は以下に記していきますが、完成図から見るとこんな感じです。
グリッド表示

当サイトの左側にあるグリッド表示ですね。これが「WP Post Grid」を用いた表示で、もっとスペースの広いところに設置すれば画像自体も比例して大きく表示されます。

パズルというのは、この3つが隙間なくつながっているからです。「WP Post Grid」ではコードを直接編集しないかぎり、このパズル型を変更できません。オブジェクト系プラグインで、サイトをこういうパズル様式にしたい方にはぴったりですね。

IT系の情報サイトでたまに見ます。

では設定の説明に入りましょう。

「WP Post Grid」の設定手順

まずはプラグインのインストール画面で検索をし、インストールをしてください。Wordpressを運用し、カスタマイズをしたいという意欲のある方はもういくつかのプラグインを経験していると思います。
「インストール」→「有効化」してください。

WP Post Grid

他にもグリッド表示系のプラグインがたくさんありますよね。これら一つ一つを試してみてもよいと思います。インストール後、気に入らなかったらアンインストールすればいいだけなので、色々お試しください。

今回は「WP Post Grid」と「Post Grid」の組み合わせですが、好みによって組み合わせを変えるのも手です。ただ、それぞれのプラグインの日本語の参考記事が少ないのが難点です。

 

さて、インストールが終了したら次は設定をします。「WP Post Grid」の設定は簡単です。

WP Post Grid設定
この画像には写っていませんが、パズル表示の形式を選ぶ欄があります。そこでパズルの形を選んでください。

その下にちょうどこの画像と同じ項目があります。

それぞれについて説明するとこんな感じです。

 

Default(Most Recent Post)

パズル形式の部分に、それぞれ1〜3番目の新着記事が表示されます。

Published Post

任意のページをすぐに検索でき、表示します。検索はキーワードを用いて行います。

Custom Image

選択した任意のイメージを表示します。

Image Align

画像の位置です。左(left)、中央(center)、右(right)がありますが、けっこう適当で構いません。

 

以上の設定が終わったら、

ショートコード

設定画面の真ん中辺りに左のような「ショートコード」の画面がありますので、投稿記事や固定ページに貼り付けるか、当サイトのように記事ではない部分に挿入したい場合は、

<?php echo do_shortcode(‘ショートコード’); ?>

これの「ショートコード」の部分にコピペして、「テーマの編集」→「個別投稿」、「メインインデックス」、「サイドバー」など表示したいページの好きな位置に貼り付けてください。サイトを更新すると、すぐにこの「WP Post Grid」が表示されます。
私はサイドバーに貼り付けました。
こういうグリッド表示があるだけで、文章で表示しておくより見栄えがいいですよね。

「Post Grid」というプラグイン

では次に「Post Grid」というグリッド表示系プラグインについて紹介します。
「WP Post Grid」に比べて設定はやや多めですが、そのぶん様々なカスタマイズができて、どこの記事でも紹介されているようにデザインが綺麗です。
ただし「ロリポップサーバー」の方に最初に注意喚起しておくと、エラーが出る可能性が高いのでしっかりお読みください(他のサーバーは試していませんのでわかりません)。

まずはインストールしてみましょう

Post Grid

2番目に表示されるので、すぐに見つかると思います。「Post Grid」はけっこう使われているプラグインですが、日本語で説明した記事はGoogle検索してもあまり出てきません。

特にロリポップサーバーでしたので、「403Error」が出たときは正直悩みました。が、簡単に解決できたのでご安心ください。

 

「インストール」→「有効化」が済んだら、「Post Grid」の設定画面を見れるようになりますので、移動します。設定画面を開き、「New Post Grid」を選択してください。

Post Grid設定

タイトルを適当に記入し、設定を進めていきます。設定はいくつかありますが、説明がわかりやすいので迷うことはないでしょう。一応以下にまとめておきます。

Query Post

表示するものを「投稿記事(Post)」「固定ページ(page)」などから選べます。たいがいは「投稿記事」でしょう。新着記事か人気記事、もしくは私のように「過去の投稿記事」を「ランダム表示」したいという方もいるかと思います。
「ランダム表示」の場合は、「Post query orderby」の項目で「Random」を選択してください。これで利用者がページを変えるごとに、表示される記事がランダムに切り替わります。

Layout

どのように表示するかを選びます。サムネイル画像の下に説明文等を表示するのか、アニメーションで画像を引いてから、その後に説明文等を表示するのか。具体的な例は当サイトのサイドバーにある「ランダム記事」の上にカーソルを持っていき、ご覧ください。
スマホなら0.5秒ほど指を乗せます。

Layout Settings

上の「Layout」の細かい設定です。デフォルトでも構いません。細かく変更したい方は、文字の色や背景まで全てカスタマイズすることが可能です。

Navigations

当サイトの左のサイドバーをご覧いただければ分かりますが、ランダム記事の最下部に薄っすらと「Next」「Previous」という項目があります。「次に進む」、「前に戻る」ですね。この辺りの設定です。後は検索とかですね。

Custom Scripts

自前のCSSを入れることができます。よほどのコアユーザーでない限り使うことはないでしょう。

おおまかには以上です。これでだいたいの設定は完了できるはずです。有料版を購入すると、レイアウトや設定の種類を増やすことができます。
設定が終わったら「公開」をクリックしてください。それで設定は完了するのですが。。。。

なんとここで「403Error」が出た方には朗報がありますっ(笑)

403Error

嫌な画面ですね(苦笑) サーバーについて何も知識がなかったらここでつまづく人もさぞ多かったと思います。私もこれに遭遇して、おっととのけぞりました。URLに表示されてある「post.php」の権限を編集してみたりもしましたが、まったく変わらない。
そこで思い出したのが「ロリポップサーバー」ではデフォルトで有効化設定してある「WAF(Web Application Firewall)機能」。

「WAF(Web Application Firewall)機能とは

ご存じない方のために一応ご説明(もとい引用)します。

“WAF”(Web Application Firewall)とは、文字通りWebサイト上のアプリケーションに特化したファイアウォールです。主に、ユーザーからの入力を受け付けたり、リクエストに応じて動的なページを生成したりするタイプのWebサイトを不正な攻撃から守る役割を果たします。一般的なファイアウォールとは異なり、データの中身をアプリケーションレベルで解析できるのが特徴です。
WAFは、Webサイト上のアプリケーション自体にセキュリティ上の問題があってもそれを無害化できるという利便性の高さと、ISMSの実現やPCIDSSへの準拠といった企業の情報戦略面のニーズから、以前よりその導入意義が注目されてきました。
ISMSとは、企業などの組織が情報を適切に管理し、機密を守るための包括的な枠組み。コンピュータシステムのセキュリティ対策だけでなく、情報を扱う際の基本的な方針(セキュリティポリシー)や、それに基づいた具体的な計画、計画の実施・運用、一定期間ごとの方針・計画の見直しまで含めた、トータルなリスクマネジメント体系のことを指します。
初期のWAFは、導入作業の難しさや導入コストの高さ、運用にセキュリティの専門知識が必要なことなどから、限られた企業だけが利用できるソリューションという面が強かったのですが、その後、従来のアプライアンス/ソフトウェア型WAFに加え、運用不要で安価なクラウド型WAFが登場したことで、現在ではWebサイト防御の最も現実的な選択肢の一つとなっています。

セキュリティ上素晴らしいサービスではありますが、phpなどをカスタマイズすることも制限してしまうことがあります。「ロリポップサーバー」の場合、この「WAF機能」を簡単に「一時無効化」することができます。

ロリポップのHPで説明されていますのでご覧ください。「ログ機能」を見ると、この「Post Grid」がアクセスしようとしていた「post.php」を「WAF」が「制限」していたのが一目瞭然です。
この「WAF機能」を一時無効化した後、もう一度「公開」をクリックしてください。すると今度は通ります。

ショートコードを好きな位置に挿入して完了

後は「WP Post Grid」と同じです。
公開したPost Gridを選択し、「Shortcodes」にある「PHP Code」を「テーマの編集」→好きなページに貼り付けてください。

まとめ

グリッド系表示プラグインはウェブサイトの顔を飾るのにとても大事になります。Wordpressで運営している方で、インストールしたテーマをそのまま使い続けたいと思う方は少ないでしょう。私は「Xeory Base」をインストールしているのですが、デフォルトでも完璧過ぎるんですが、カスタマイズしたいとも思いました。

グリッド系表示プラグインを1つずつ使わないといけないルールはありません。「WP Post Grid」と「Post Grid」の組み合わせのように、自分にあったプラグインの組み合わせを試行錯誤してみてください。

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

一応完成図がこれです↓ サイドバーにありますが(笑)

WP Post Grid,Post Grid

関連記事