WordPress個別サポート

好きな固定ページの一覧をグリッドレイアウトで表示したり、いくつかの画像や文章を2列、3列で表示したい場合、「WP Canvas - Shortcodes」プラグインが役立ちます。手作業で作ると面倒なグリッドレイアウトをショートコードで制御できるので、非常に便利です。

WP Canvasプラグインで作成できるグリッドレイアウト

WP Canvasプラグインで作成できるグリッドレイアウト

以下、「WP Canvas - Shortcodes」プラグインを使って固定ページをグリッドにレイアウトする方法を紹介します。

スポンサーリンク

固定ページ一覧をグリッドレイアウトで表示

固定ページの一覧をグリッドレイアウトで表示すれば、サービス関連のページなどをスッキリと効率的に見せることができます。

固定ページをグリッド形式でレイアウトする

固定ページの一覧をグリッド形式でレイアウトする

グリッド表示には「Posts」メニューを使います。

固定ページや投稿のグリッド表示

固定ページや投稿のグリッド表示

「Posts」メニューでは、グリッドのレイアウトスタイルを選択できます。Grid(2)は同じサイズのボックスに適したレイアウトです。Masonry(1)はサイズが異なるボックスの隙間を埋めるようにレイアウトしてくれます。

Grid Boxの例

Grid Box(同じサイズのボックスに)

Masonry Boxの例

Masonry Box(隙間を埋める)

「Posts」メニューを選択すると、固定ページの一覧をグリッド表示するためのショートコードが挿入されます。

ページをグリッド表示するためのショートコード

ページをグリッド表示するためのショートコード

表示するページ、件数、表示順など、次のような項目を設定できるので、アイデアに応じてカスタマイズしてみましょう。

▼「Posts」メニューのショートコードで指定できる項目の例

  • 表示する固定ページ(または投稿)の番号
  • 表示する投稿タイプ(post/pageなど)
  • 表示する分類
  • 表示順(並べ替える基準)
  • 1ページの表示件数
  • タイトルの表示/非表示
  • 抜粋の表示/非表示
  • 抜粋の文字数
  • レイアウト(masonry/grid)
  • メタ情報(投稿日時など)の表示/非表示
  • 投稿日時のフォーマット
  • ヘッダーのタグ(例:h2)

詳しくは、「wc-shortcodes/includes/shortcode-functions.php」の1100行目あたりから始まる「function wc_shortcodes_posts」のパラメータ定義も参考にしてください。

たとえば、任意の3ページをグリッド表示するには、次の項目を修正します。

  1. 表示するページの番号を指定 --- (例:post__in="44,46,85")
  2. ページの表示順を「post__in」の順に --- 「order="" orderby="post__in"」
  3. 投稿タイプを「page」に --- 「post_type="page"」
  4. タイトルを任意のタグに --- (例:heading_type="h3")
  5. 投稿日時などを非表示に --- 「meta_all="no"」
  6. ※抜粋を非表示にするなら --- 「content="no"」

ショートコードを修正したイメージは次のようになります。

修正したショートコード

修正したショートコード(任意の3ページを表示する例)

これで、指定した固定ページが指定順で表示されます。テーマによってはCSSの修正も必要です。必要に応じてカスタマイズしてください。

表示された固定ページ

表示された固定ページ

ページの表示順を変えたければ、「post__in="44,46,85"」に指定する順番を変えれば大丈夫です。たとえば、「post__in="85,44,46,"」のように変更するだけで表示順が変わります。

固定ページの表示順は自由に変更できる

固定ページの表示順は自由に変更できる

ショートコードなので、いろいろと試行錯誤してみてください。

ページの番号とは、固定ページに割り当てられた固有の番号です。固定ページの編集画面を開いてブラウザのURL「post=9999」で確認できます。次の例では、「お客様の声」のページ番号が「85」だということです。これを「post__in」で指定します。

ページの番号を確認する

ページの番号を確認する

BizVektorで「6PR」を作りたい方に

BizVektorで特徴的なパーツである「3PRエリア」を2つ作りたいという要望は多いです。実際に「テーマオプション」メニューと連動する6PRを作るのは非常に面倒ですが、WP Canvasを使って3列×2で6ページをまとめれば「6PR風」のグリッドレイアウトも作成できます。

3列×2行にまとめて6PR風グリッドに

3列×2行にまとめて6PR風グリッドに

あとは、みなさんのアイデアを形にしてみてください。

新着情報のグリッド表示

固定ページだけでなくブログ記事をグリッド表示することもできます。トップページ下で新着情報を一覧表示したい場合などに役立ちます。カテゴリーや表示件数の指定も可能なので、特定の固定ページで特定のカテゴリーのみを一覧表示することもできるでしょう。

新着情報やカテゴリー記事のグリッド表示も可能

新着情報やカテゴリー記事のグリッド表示も可能

マルチカラムコンテンツの作成

固定ページや投稿と連動したグリッドだけでなく、自由なマルチカラムコンテンツも作成できます。2列、3列、4列のマルチカラムのレイアウトを手作業で作るのは意外と面倒ですが、WP Canvasプラグインなら簡単に作成できます。

特にレスポンシブ対応なので安心です。手作業だと本当に大変ですね。

WP Canvasプラグインによるマルチカラムコンテンツの作成

WP Canvasプラグインによるマルチカラムコンテンツの作成

マルチカラムコンテンツの作成には「Colmns」メニューを使います。「Colmns」メニューでは2列、3列、4列から選ぶことができます。「1/3 + 1/3 + 1/3」は1/3の列を3つ作成(つまり等幅の3列)するという意味です。

マルチカラムメニュー

マルチカラムメニュー

作りたいコンテンツに合わせてパターンを選びましょう。

まとめ

「WP Canvas - Shortcodes」プラグインを使うと、投稿、固定ページ、自由なコンテンツをマルチカラムに整理してグリッドレイアウトで表示できるので便利です。気になる方はお試しください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先
脱・初心者を目指すWordPress 189のヒント

関連記事

BizVektorのカスタマイズ

Lightningのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート