BizVektorのカスタマイズ

BizVektorの初期設定では投稿やお知らせはタイトル・抜粋・アイキャッチ画像という構成で上から下に一覧表示されますが、Grid Unitプラグイン(有料)を使うとグリッド表示(タイルを並べたようなレイアウト)することができます。

BizVektorでも投稿のグリッド表示が可能です

BizVektorでも投稿のグリッド表示が可能です

Grid Unitはテーマではなくプラグインなので「プラグイン」‐「新規追加」メニューからインストール、有効化します。
スポンサーリンク

投稿・お知らせの一覧ページでグリッド表示に

投稿・お知らせを一覧表示するページやアーカイブでグリッド表示するには、対象の投稿タイプ(投稿・お知らせなど)を「外観」-「Grid Unit」メニューでチェックします。

グリッド表示する投稿タイプを選択

グリッド表示する投稿タイプを選択

これにより、投稿・お知らせの一覧ページがグリッド表示になります。日付の表示/非表示も選択することができます。

ブログページにグリッド表示された投稿

ブログページにグリッド表示された投稿

トップページ(コンテンツエリア)でグリッド表示

トップページに投稿やお知らせをグリッド表示する場合は「外観」-「ウィジェット」メニューから「BizVektor Grid Unit」ウィジェットを「コンテンツエリア(トップページ)」に追加します。

「BizVektor Grid Unit」ウィジェットを「コンテンツエリア(トップページ)」に追加

「BizVektor Grid Unit」ウィジェットを「コンテンツエリア(トップページ)」に追加

トップページに投稿がグリッド表示されるようになります。

トップページに投稿をグリッド表示する

トップページに投稿をグリッド表示する

複数のグリッドを表示可能

複数の「BizVektor Grid Unit」ウィジェットを配置できるので、「新着情報」と「お知らせ」を別々に表示したり、表示件数やタイトルの設定も自由にできます。

トップページに複数のグリッドを設置できる

トップページに複数のグリッドを設置できる

サイドバーを消して「6PR風」にも活用可能

トップページのサイドバーを非表示にすれば、グリッド表示の記事を前面に押し出すことができます。BizVektor標準の「3PRエリア」を拡張した「6PR」「9PR」のような使い方もイメージできます。

トップページのサイドバーを非表示にしてグリッド表示を前面に押し出す

トップページのサイドバーを非表示にしてグリッド表示を前面に押し出す

好きなカスタム投稿をグリッド表示可能

Grid Unitプラグインで表示できるのは投稿やお知らせだけではありません。オリジナルで追加したカスタム投稿もウィジェットでチェックするだけでトップページに一覧表示できます。

カスタム投稿も簡単にトップページにグリッド表示できる

カスタム投稿も簡単にトップページにグリッド表示できる

「新着物件」「おすすめショップ」「近日開催のイベント」など、好きなカスタム投稿をトップページにグリッド表示できます。

あとは、あなたのアイデアでGrid Unitをフル活用してサイトを充実させましょう。

まとめ

以上、簡単にGrid Unitプラグインの活用例を紹介しました。作品集(ポートフォリオ)・制作実績などをお客様に紹介したり、開催されたイベントのレポートなどもグリッド表示によって躍動感のあるレイアウトで見せられるようになるでしょう。

強いて課題をあげれば、グリッド表示までに若干タイムラグが生じる場合があることでしょうが、サーバーなどの環境によるでしょうし、レンタルサーバーもドンドン高速化されているので、それほど気にする必要もないと思います。

画像付の投稿を効果的に見せる方法を模索している方や、物件紹介や作品・実績紹介サイトの見せ方を試行錯誤中の方は、ぜひ、ご利用ください。

WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • サイトのデザインをカスタマイズしたい
  • CSS・PHPのカスタマイズがうまくいかない
  • 引っ越し(サーバー移転)したい
  • サイトをSSL対応(https://)したい
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク