WordPress:ブロックを組み合わせた様々な見栄えをコピペで配置できる「Gutenberg Template Library」

WordPress:ブロックを組み合わせた様々な見栄えをコピペで配置できる「Gutenberg Template Library」

「Gutenberg Template Library」は、Gutenbergの各ブロックを組み合わせることで作成できる様々な見栄えをまとめたコレクションサイトです。
別途CSSを追記したりプラグインを併用するものもありますが、サイトでよくある見栄えをコピペで簡単に配置できます。

テンプレート一覧画面

サイトではイメージのように様々なテンプレートがキャプチャ付きで並んでおり、現時点で172パターン用意されています。
また、各テンプレートは「ヒーロー」「プライス」「特徴」など下記の14カテゴリーに分かれており、ページ上部にあるナビゲーションで絞り込んで閲覧することができます。

  • Hero
  • Testimonial
  • Team
  • Stats
  • Pricing
  • Logos
  • Gallery
  • Features
  • FAQ
  • Content
  • Contact
  • Card
  • Slider
  • CTA
「Hero 3」詳細ページ

※イメージは「Hero 3」選択時

一覧から配置したいテンプレート選ぶとイメージのようなページに遷移するので、あとはページ右上にある「Copy Code」をクリックしてコピーした内容をそのままエディタにペーストするだけで、テンプレートの見栄えが配置されます。
テンプレートの多くには追加CSSも用意(「Copy CSS」クリックでコピー)されており、テンプレートのほとんどはデフォルトのブロックスタイルを読み込んでいればコードを貼るだけでもそれなりの見栄えになりますが、CSSを適用させることでより完成した見栄えになります。

「Custom CSS」項目が追加される

コピーしたCSSは、そのテンプレートを他ページでも多用するなら共通のCSSに記述しておくなどした方が良いと思いますが、ページユニークなテンプレート向けや手っ取り早くやりたい場合は、サイト内で紹介している「Blocks CSS: CSS Editor for Gutenberg Blocks」というプラグインの利用がおすすめです。
プラグインをインストール・有効化すれば上のイメージのように「Custom CSS」という項目でCSSの入力領域が表示されるので、必要なCSSを容易に追記することができるようになります。

また、テンプレートによってはCSSだけでなく別途プラグインを併用する必要もあります。

「Slider 3」詳細ページ

例えばイメージは「Slider 3」の詳細ページですが「Hero 3」にはなかった「Required Plugin(s)」という項目があり、このテンプレートを使用したい場合はコード以外に「Block Slider」というプラグインを併用する必要があるということになります。

すべてのテンプレートをチェックしたわけではないですが、ほぼほぼ下記プラグインを有効化しておくことで全テンプレートを自由に配置可能になり、ざっくりいうとスライダー系なら「Block Slider」、フォーム系なら「Gutenberg Forms」、ギャラリーやタイムラインコンテンツといった複数要素を繰り返して配置するようなテンプレートを使うなら「ACF Blocks Pro」と「ACF Pro」をインストールしておく必要がありそうです。(ACF関連が必要なものは、テンプレート名の頭に「Acf」と記載があります。)

  • Block Slider
  • Gutenberg Forms
  • ACF Blocks Pro(or ACF Blocks)
  • ACF Pro

上にあったキャプチャはいずれもサイト上でテンプレートを選んだり必要なコードをコピーするものでしたが、メインブラウザがChromeなら「Gutenberghub」の拡張機能を利用することでより簡単にテンプレートを配置できます。

有効化後に追加されるアイコンをクリックすると「カテゴリー → テンプレート」の順で一覧表示され、使用したいテンプレートにマウスオンで表示される「Copy Code」と「Copy CSS」で必要なコードがコピーされるので、わざわざ使う度にサイトを見に行く手間を省くことができます。
ただ、注意点として「Block Slider」などの別途必要なプラグインについてはこの拡張機能では確認できないので、それらのプラグインを基本的に有効化しないで利用しようと思っている場合は、予め使いたいテンプレートがプラグイン不要なのか確認しておいた方が良いと思います。


併用するプラグインの中には一部有料のものも含まれていますし、それらを普段から利用していない人にとっては少しネックになるとは思いますが、プラグインを使わないテンプレートも沢山用意されているし、様々な見栄えをコピペで簡単に配置できるのは非常に便利だと思います。

Close the search window,
please press close button or esc key.