WordPress特集 - Ultimate Addons for Gutenberg

WordPress にブロックエディターが導入されてから、追加できるブロックを拡張するブロックプラグインもたくさん開発されています。ここでは公式のブロックプラグインとして人気がある Ultimate Addons for Gutenberg について解説します。

【記事執筆時の環境】
WordPress 5.8
Ultimate Addons for Gutenberg 1.25.2

【参考ページ】
WordPress.org プラグインページ
プラグイン公式サイト

Ultimate Addons for Gutenberg(略して UAG)は、人気テーマ Astra の開発元が出しているプラグインです。ただし Astra に依存していませんので、どのテーマでも使用できます。

ブロックプラグインの中でもトップレベルの人気があり、30種類のブロックが追加できます。私が使ってみたところ、おすすめ No.1 ではないかと感じました。この記事では有用だと思われるいくつかのブロックを紹介します。

Ultimate Addons for Gutenberg インストールサムネイル
Ultimate Addons for Gutenberg で拡張されるブロック

Section

Section ブロックは、他のブロックを中に入れて囲むブロックです。要素の HTML タグとして section/div/article/aside などが選択できます。

背景には単色/グラデーション/画像/動画が選択でき、画像にはカラーオーバーレイをかけることができます。トップページのメインビジュアルやページヘッダーなどのブロックとして便利です。

類似の WordPress 標準ブロックにカバーブロックがありますが、この Section ブロックが便利な点は、上下左右の margin と padding が、デスクトップ/タブレット/モバイルそれぞれのビューで設定できることです。Webページで、ウィンドウ端からの距離や要素同士の間隔を細かく調整したい場合は、コンテンツのかたまりごとに Section ブロックで囲めばよいと思います。

Sectionブロックで作成したサンプル
Sectionの設定サイドバー

Advanced Columns

WordPress 標準にカラムブロックがありますが、その機能を拡張したブロックです。
主な機能としては以下になります。

  • ブロック全体の幅が指定できます。
  • カラム間の間隔が指定できます。
  • カラムごとに数値(%)で幅の指定ができます。
  • HTML タグが指定できます。
  • ブロック全体およびカラム単体の margin と padding が設定できます。
  • ブロック全体の背景として、単色/グラデーション/画像/動画が選択できます。カラム単体では単色/グラデーション/画像が選択できます。
  • ブロックのトップとボトムに、Shape Divider を設置できます。
  • ブロック全体およびカラム単体に、線種を指定して境界線を引くことができます。
  • ブロック全体に Box Shadow を設定することができます。

Advanced Columnsブロックで作成したサンプル
Advanced Columnsの設定サイドバー

Post Grid

投稿を一覧表示するブロックです。投稿だけでなく固定ページやカスタム投稿も一覧表示できます。

投稿を一覧表示する WordPress 標準ブロックとしては、以前は最新の投稿ブロックしかありませんでしたが、WordPress 5.8 でクエリ―ループブロックが追加され、機能アップしました。クエリ―ループブロックではグリッド表示できますし、カスタム投稿にも対応します。
ただ、それでもまだこの Post Grid ブロックのようなサードパーティ製ブロックのほうが機能は豊富です。

Post Grid ブロックでは、クエリ―ループブロックの機能に加え、カラーや間隔の設定が細かくできます。また個別ページへ移動するボタンのデザインも詳細に設定できます。

Post Gridブロックで作成したサンプル
Post Gridの設定サイドバー

Tabs

タブを実装するには、CSS だけでやる方法や JavaScript を使う方法がありますが、結構ややこしいコードが必要です。このブロックを利用すれば、本当に簡単に実装できます。

タブのスタイルは水平・垂直がそれぞれ5つずつあり選択できます。
文字色・背景色もアクティブタブとインアクティブタブそれぞれで設定できます。

Tabsブロックで作成したサンプル

Contact Form 7 Styler

フォーム作成プラグインで有名な Contact Form 7 をインストールしていると、UAG のブロックとして Contact Form 7 Styler ブロックが追加されます。
このブロックでは、Contact Form 7 で作成したフォームを読み込み、スタイリングの変更ができます。

Contact Form 7 Stylerブロックの編集画面

«次の特集記事»
«前の特集記事»

スポンサーリンク

WordPress 特集記事

WordPressの概要

WordPressの仕組み

WordPressのカスタマイズ性

制作環境とインストール

基本設定項目

追加設定項目

Gutenbergエディター

具体的な制作作業

応用・高度機能

実践的なTips

よく使われるテーマ紹介

有用なプラグイン紹介

独自テーマによる制作

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ