Gutenbergエディターの登場で、WordPressで行うWebデザインカスタマイズは飛躍的に扱いやすくなりました。
HTMLやCSSにそれほど詳しくない人でも、直感的にブロックを追加していくことで、レイアウトを簡単に変更することが可能になっています。
デフォルトのGutenbergブロックを組み合わせていくだけでもある程度のページを作ることは出来ますが、いくつかのプラグインを追加することで、より動的なコンテンツを作成できます。
今回はGutenbergデザインをパワーアップさせるおすすめプラグインを紹介します。
Contents
Gutenbergブロック拡張系プラグイン
Gutenbergに対応したブロックを追加することが出来るプラグインです。
タブメニューやアコーディオン、タイムラインや投稿など様々なブロックが追加できるため、作りたいと思ったページをとても簡単に作れるようになります。
拡張系プラグインはいくつかありますが、様々なテンプレートと相性の良いプラグインを紹介します。
Getwid
タブメニューやアコーディオンを始め、30を超えるブロックを追加できるプラグイン。
とりあえずこれを入れておけば、幅広いレイアウトデザインが可能になります。
- Recent Posts：最近の投稿。カテゴリー毎のコンテンツを出力
- Custom Post Type：固定ページまたは投稿からコンテンツを出力
- Tabs：タブメニューを追加
- Accordion：アコーディオンを追加（常時表示は1つ）
- Image Stack Gallery：画像を重ねたようなギャラリーを追加
- Person：スタッフ紹介カードを追加
- Content Timeline：沿革などに使うタイムライン追加
- Section：様々なカスタマイズが出来るセクションを追加
- Media & Text Slider：文字を含む様々なカスタマイズが出来るスライダーを追加
- Image Slider：文字を含まない画像スライダーを追加
- Icon：リンク設定などが出来るアイコンを追加
- IconBox：アイコンと一緒に見出しや文章を追加できるボックス
- Banner：リンクを含む様々な設定ができるバナーボックス
- Toggle：常時表示が複数設定できるトグル（アコーディオン）
- Google Maps：Googlemapを追加
- Advanced Heading：Googlefontが指定できる見出しブロック
- Image Box：画像を一つだけ表示できる画像ブロック
- Advanced Spacer：ブロック間の余白を設定するブロック
- Social Links：SNSなどのソーシャルリンクをアイコンで追加
- Button Group：簡単にボタンを追加可能
- Testimonial：引用を追加
- Instagram：インスタグラムを表示できるブロックを追加
- Progres Bar：読み込み時などに使用する進捗ゲージを追加
- Circular Progress Bar：円形の進捗ゲージを追加
- Counter：カウントアップのカウンターを追加
- Price Box：料金表示に使えるブロックを追加
- Contact Form：シンプルなコンタクトフォームを設置
- Post Carousel：投稿や固定ページをカルーセル形式で追加
- Post Slider：投稿や固定ページをスライダー形式で追加
- Price List：リスト形式の料金表を追加
- Mailchimp：メール配信システム（メールチンプ）を追加
- Video Popup：ポップアップウィンドウを使った動画コンテンツ表示ブロック
- Image Hotspot：画像に設定したスポットをクリックすると、コメントが表示されるイメージホットスポットを追加
- Countdown：設定した日時へのカウントダウンタイマーを追加
- Template Library：レイアウトが出来ているテンプレートを読み込んで、内容をカスタマイズしていくコンテンツブロックを追加
Ultimate Addons for Gutenberg
アイコンつきメニューやMasonryを始め、20を超えるブロックを追加できるプラグイン。
Getwidと重複するブロックもありますが、設定内容やレイアウトの違いなどでバリエーションを増やすことが出来るので、入れておいても良いと思います。
Googlemapの設定
Masonryの設定
Blocks Animation: CSS Animations for Gutenberg Blocks
Gutenbergのブロック毎にアニメーションを付与するプラグイン。
スクロールして表示された時にアニメーションが発動します。タイミングなど細かな設定も可能です。