WordPress特集 - ブロックプラグイン Getwid

WordPress のブロックを拡張するブロックプラグインとして Getwid を紹介します。Getwid では 38種類とかなり多くのブロックが拡張され、他のブロックプラグインで拡張されるものはほぼ含まれています。

【記事執筆時の環境】
WordPress 5.8
Getwid 1.7.7

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

Getwid は38種類のブロックが追加できる公式プラグインです。このプラグインさえインストールしておけば、ページに表示するコンテンツのデザインはだいたいカバーできます。
また Template Library ブロックでは、複数のブロックから構成されているブロックテンプレートを40種類ほど挿入できます。

各ブロックには調整できる項目がたくさんあります。そのため使い方が難しいブロックもあります。また公式サイトでも使い方の説明は詳しくありません。それでもブロックプラグインをどれかひとつ使えと言われれば、Getwid を選ぶほど魅力的なプラグインです。

Getwid インストールサムネイル
Getwid で拡張されるブロック

以下 Getwid で拡張されるブロックのうち、有用だと思われるいくつかのブロックを紹介します。

Section

Section ブロックは、コンテンツとする他のブロックを中に入れて囲むブロックです。WordPress 標準のカバーブロックはじめ、似たような拡張ブロックもたくさんありますが、Getwid の Section ブロックほど機能が豊富なものは見たことがありません。

主な機能としては以下になります。

  • コンテンツエリアの Width を設定できます。
  • Section ブロックの Height をビューごとに設定できます。
  • 背景は Color/Image/Gradient/Slider/Video から選択します。
  • オーバーレイは Color/Image/Gradient から選択します。Opacity も設定できます。
  • コンテンツエリアの垂直・水平方向の Alignment を設定できます。
  • Padding/Margin はビューごとに設定できます。単位は px/em/%/vh/vw です。
  • Animation 効果を加えることができます。
  • ブロックのトップとボトムに、Shape Divider を設置できます。

Sectionブロックのサンプル画像
Sectionブロックの設定パネル

Advanced Heading

見出しブロックの機能を拡張したものです。Google Fonts から Font Family の選択ができます。
margin/padding/Line Height の設定ができるのは、プラグイン UAG の Advanced Heading と同じですが、Getwid では Letter Spacing の設定もできます。

Advanced Headingブロックのサンプル画像
Advanced Headingブロックの設定パネル

Accordion

項目をクリックするとコンテンツ部分を開閉できるアコーディオンブロックです。
開閉は排他的になり、同時には1つの項目だけが開きます。同じような機能で Toggle ブロックがありますが、そちらはそれぞれの項目が独立して開閉します。

プラグイン CoBlocks にも同じブロックがありますが、そちらは各項目の独立開閉式です。
また Getwid の Accordion ブロックでは見出しにつくアイコンを選択できますし、見出しタグは pタグもしくは h1–h6タグを選択できます。

Accordionブロックの編集画面

Table

Table ブロックは、表を作成するブロックです。
WordPress 標準でもテーブルブロックがありますが、Getwid の Table ブロックではセルの結合ができるのが大きな特徴です。これができるブロックはあまりないので重宝します。
また、セルごとに境界線を引くことができ、太さや色も指定できます。

Tableブロックのサンプル画像

Post Slider

投稿をスライダー表示するブロックです。自動的に切り替わるスライドショーにすることができます。また、固定ページやカスタム投稿も選択できます。
アイキャッチ画像が黒のカラーオーバーレイがかかった暗めの背景画像になり、タイトルと抜粋文が画像の上に表示されます。テキストのスタイルは変更できません。
スライダーのコントロール要素としては、Arrow ナビと Dot ナビが表示できます。

同じようなブロックに、Post Carousel ブロックがありますが、そちらはアイキャッチ画像が背景画像とならず、タイトルと抜粋文の上に表示されます。
また、Image Slider ブロックではメディアライブラリから画像を選択して同じくスライダーを構成できます。
さらに、メディアライブラリの画像を背景画像にして、その上に任意のテキストを表示したスライダーは、Media & Text Slider ブロックで構成できます。
目的に応じてそれらのブロックを使い分ければいいでしょう。

Post Sliderブロックのサンプル画像

Image Hotspot

このブロックは非常に面白く、クリッカブルマップのようなコンテンツを作成できます。
画像の上にホットスポットとして、アイコンを設置します。アイコンは複数設置できます。アイコンをクリックもしくはマウスオーバーすると、ツールチップとしてホットスポットのタイトルが表示され、タイトルをクリックすると設定したページに移動します。

アイコンの種類や色、背景色はホットスポットごとに設定できますし、アニメーションも設定できます。

Image Hotspotブロックのサンプル画像

Icon / Icon Box

Icon ブロックでは、多くのアイコンの中から好きなものを表示できます。アイコンは Font Awesome のものを使っていますので、何千種類とあるようです。
アイコンには背景やアウトラインを付加できます。またリンクを設定できます。

Icon Box ブロックは、Icon ブロックの下に WordPress 標準の見出しブロックと段落ブロックを加えセットになったものです。

Icon Boxブロックのサンプル画像

Advanced Spacer

WordPress 標準のスペーサーブロックに、ビューごとに非表示にできる機能がついただけです。しかしこの機能は間隔調整に何気に便利です。

Advanced Spacerブロックの設定パネル

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

スポンサーリンク

WordPress 特集記事

WordPressの概要

WordPressの仕組み

WordPressのカスタマイズ性

制作環境とインストール

基本設定項目

追加設定項目

Gutenbergエディター

具体的な制作作業

応用・高度機能

実践的なTips

よく使われるテーマ紹介

有用なプラグイン紹介

独自テーマによる制作

オンライン講座

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


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

提供しているサービス

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

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

サービス詳細ページ >>

申し込みフォーム >>


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

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

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ