「ブロックエディタをもっと使いこなしたい」
「HTMLやCSSの知識がないのでプラグインでWordPressサイトをもっと見栄え良くしたい」
WordPressのエディタとは投稿や固定ページを書く画面のことです。少し前までテキストエディタとビジュアルエディタしかありませんでしたが、バージョンアップを続け、現在はブロックエディタ（Gutenberg）と呼ばれるタイプへ変わりました。
このブロックエディタは記事を早く便利に書くことができる機能があるエディタですが、プラグインを入れることでより多機能になります。これまでデザイナーさんがCSSでデザインしてくれていたようなパーツも、ブロックエディタを拡張させるプラグインでかなり幅広くできるようになりました。
特にプラグイン「Advanced Gutenberg」は多機能で、1つのプラグインでブロックの種類を全部で27個増やすことができます。WordPressのカンファレンス「WordCamp Haneda 2019」でも紹介された安心できるプラグインです。もう少しデザインや見え方の幅を広げたいという方にオススメです。
WordPressのカンファレンス「WordCamp Haneda 2019」で紹介された様子はYouTube「ブログをスタートする人にオススメのプラグインとエディタの紹介 WordPress introduction Plugin and Editer」で視聴できます。
今回は「Advanced Gutenberg」を追加することで増やせる22個のブロックを一つずつ実際の表示例を提示しながら解説していきます。
※22個は現状（2020年9月現在）での追加機能数なので、今後のアップデートによって増減する可能性があります、ご了承ください。
はじめに：デフォルトの設定を行う
余白広さやアイコンの色などをセットアップしておけます。初期設定は「左サイドメニュー＞Gutenberg拡張」から進みます。
初期設定では以下の項目の設定が可能です。
・Lightboxでギャラリーを開く
・画像の説明
・Remove Autop
・ブロック間隔を有効にする
・ブロック間隔
・ブロックアイコンの色
・Editor width
・Default thumbnail
・Enable columns visual guide
使い方：ブロックの追加
ブロックスタイルを選んで使うには、エディタのブロック追加画面から使用するものを選択します。
ブロックエディタの追加の中から、「Advanced Gutenberg」メニューを探します。
展開すると、ブロックの種類が表示されますので、使いたいものを探して選択します。使用頻度が高いブロックから並びます。
１．Advanced Accordion（アコーディオン表示）
段落をアコーディオンのように隠しておき、クリックで表示させることができます。
タイトル部分＋隠れる部分の2箇所を入力します。
少し動きが出て、クオリティが上がります。また、長いページでもコンパクトにスッキリと見せることができます。Q&Aや、アクセスページにオススメのブロックです。
２．Advanced Button（ボタン表示）
さまざまなスタイルやリンク付きのボタンを挿入できます。
ボタンの中にテキストを挿入。サイドメニューからスタイルやリンクの変更をします。
デフォルトで入るボタンの背景色は設定メニューで初期設定可能です。全体のデザインに合わせたカラーを入れておくと手間が省けます。
３．Advanced Icon（アイコン表示）
アイコンを追加する機能です。設定の「Number of Icons」の数を1にすると1つ、2にすると2つのアイコンが入ります。
英語で大きく文字が表示されますが、ページを表示するとアイコン画像に変わります。色やスタイルはサイドバーの設定で変えられます。
リンクを付けたり、左寄せしたりと自在に変更が可能です。
４．Advanced Image（画像表示）
選んだ画像を挿入するブロックです。
画像にリンクを付ける（Open custom URL）や、lighthouseで画像を大きく表示させる（Open image in Lightbox）かなど選択できます。
画像には文字が載せられます。初期設定で画像の上に載っている英文字を書き換えることで画像に文字が載ります。Imagetitle＝タイトル、Your subtitle here＝サブタイトルです。
また、文字の位置はサブメニューの下部のメニューVertical Alignment（垂直方向の位置）、Horizontal Alignment（水平方向の位置）で文字を右寄せにしたり、下配置にしたり調整できます。
５．Advanced List（リスト表示）
さまざまなアイコンを使って、リストを作れます。
アイコンの画像サイズ、テキストサイズの調整はスライダーで。目でサイズを確認しながら細かく動かすことができます。
いろいろな画像を使ったリストがあると、WEBサイトの見栄えが全然変わりますね。
６．Advanced Table（テーブルー表ー表示）
Column Count＝列数、Row Count＝行数を入力し、好きな大きさの表を挿入できます。まず列数、行数を入力して、Create＝作成をクリック。すると表が作成されてセル内に書き込める形になります。
表の幅やヘッダー・フッターを付けるかどうか、セルに罫線を入れるかなどはサイドバーの設定から調整できます。Fixed width table cellsを選択すると、文字を入力してもセルの幅が動かず均等な幅で固定されます。
罫線あり（Border collapsed）、列数3、行数3、セルの幅固定（Fixed width table cells）の設定でつくりました。とてもスマートな表が挿入できました。
７．Advanced Tabs（タブ表示）
タブを活かしたページにしたいときはAdvanced Tabsブロックを活用します。タブ表示を活用すると省スペースでたくさんの情報を見せることができます。
タブの背景色、フォントの色やタブで開く文字を書くスペースの背景色も設定できます。
ブロック追加でタブ表示も簡単に使えるようになるとは、すごく便利です。ネットショッピングサイトで注意事項を見せたり、スペックを見せたりするときに使えますね。
８．Advanced Video（動画表示）
新型コロナウイルス感染症拡大が懸念され始めて以降、多くのWEBサイトで動画の活用が始まりました。YouTubeチャンネルを開設してアップロードし、WEBサイトにはYouTubeリンクを埋め込む方法が一般的です。
ただ、YouTubeは通信環境に合わせて自動的に画質が変更されてしまうので常に高画質で見せたいなら自前のサーバーに動画ファイルをアップロードして埋め込みます。動画の埋め込みは画像を記事に追加するのと同じ要領です。今回はYouTubeの埋め込みを例に挙げます。
リンクを枠内に入れ、「Fetch video content（ビデオの読み込み）」をクリックすると管理画面内にYouTube動画が読み込まれます。動画の表示サイズや、動画の上に載せるアイコンの種類や大きさも設定画面から変更できます。
９．Columns Manager（段組みレイアウト）
段を組むようなレイアウトが可能になります。
パターンはたくさん用意されていて、必要なレイアウトを選択します。
width（幅）や背景色、border（罫線）などは設定から。
表とレイアウトの違うところは、表はセルを好きにつくれますが、レイアウトは配置を決めるだけなのでセルのようなスペースをつなげてつくることはできません。
１０．ContactForm（フォーム挿入）
送信用のフォームを挿入できます。メールフォームのようにつかってもよいですし、アンケート回収や資料請求の窓口として。
メールフォームの初期設定（どのメールアドレスで受け取るか、そのときのメールのタイトルや送信者名など）は、「Gutenberg拡張」から編集できます。
問い合わせ用のメールフォームはContactForm7などプラグインを入れることが多いので使用頻度は低いかもしれませんがプラグインを極力少なくしたいときは便利ですね。
１１．CountUP（カウントアップ）
カウントアップとは、カウントダウンの逆で、だんだん数字が増えていく数え方です。
このブロックのカウントアップ機能はカウンターとは違い、設定した数値まで数字が進むアニメーションです。プレビューで確認すると動きがわかります。「商品の申込みが100万を突破！」のように数字を強調したいときに利用する表示方法です。
１２．Image Slider（画像のスライド）
画像をスライドで追加（スライドショー）できます。
画像は何枚でもOK、文字載せもできます。
管理画面では画像の下に載せる文字の入力スペースと、写真を追加するバーが表示されます。スライドショーを追加する際に別途プラグインを準備する必要がなくなります。
１３．Info Box（お知らせ欄）
お知らせや告知などインフォメーション用の欄を作成します。
ダミーの英文が入った欄が作成されるので必要な文章に書き換えます。タイトルに付ける見出しタグを変えられるので適切なSEO設定もできます。
“Beenhere”はアイコンの種類です。欄内のPadding（余白）なども細かく設定可能です。
記事の中に文章をそのまま打つより、見栄えが断然良くなります。↑この表示の文字サイズやアイコンはデフォルトのままですが、とても美しいバランスです。
１４．Login Register form（ログインボックス）
WordPressへのログイン画面を追加できます。メンバー／会員のログインフォームや、管理用として利用できます。
ブロックを1つ追加するだけで、メンバー用ログインフォームが生成されるのは本当に便利です。アイコン画像や表記の文字などは適宜変更できます。
１５．Map（地図表示）
GoogleMAPを表示できます。表示にはGoogleのAPIキーが必要です。
取得方法はGoogleから公式に出ていますので、API キーの使用ページをご確認ください。
GoogleAPIキーの登録は「Gutenberg拡張」の”GoogleAPIキー”欄に入力、保存します。
APIキーが登録されるとブロック内に地図が表示されます。ピン位置や名称は右メニューの設定から変更できます。
初期設定ではエッフェル塔が表示されますので、適宜変更します。
１６．Newsletter（ニュースレター／メルマガ登録）
ニュースレター（メルマガ、メールマガジン）への登録フォームを設置できます。
シンプルな登録窓ができます。
ここから登録されたデータ（メールアドレス）はCSVファイルに集められます。「Gutenberg拡張」から確認、ダウンロードできます。
メルマガ以外にも使い道はいろいろあります。資料の請求登録に使ったり、チームメンバーのメールアドレス収集に使ったり。自動集計で一覧になるのが楽です。
１７．Recent Post（最近の記事表示）
最新の記事を一覧で表示できます。日付を入れたり、画像を入れたり、特定のカテゴリだけを抽出したり、様々なカスタマイズが可能です。
記事の見せ方もボックス、リスト、スライダーの3つの中から選べます。
１８．Seach Bar（検索窓の表示）
検索窓／検索バーを表示できます。
検索窓の幅、スタイル、虫眼鏡の画像変更などは設定から変更できます。
ページの間に検索窓を入れるとユーザー側が情報を探しやすくなっていいですね。
１９．Social Links（SNSへのリンク表示）
各SNSへのリンクをアイコン入りで表示できます。
アイコンの種類、サイズ、カラーは変更できます。それぞれのアイコンには各SNSへのリンクを付けられます。
２０．Summary（目次の表示）
Summaryは概要という意味ですが、このブロックでは見出しタイトルの一覧が表示されます。h2、h3などHタグが拾われて一覧になります。
ページの冒頭にこのリストを入れておくと、「このページにはこんなことが書いてある」とユーザーに伝えられます。
２１．testimonial（プロフィール表示）
testimonialは直訳すると”証言者”の意味です。
プロフィール表示に使います。
それぞれのパーツをクリックすると編集できます。画像も入れられます。
ページの最後部に書いた人を載せておくと、責任の所在がはっきりしますね。メディア運営でライターさんごとに記事が作成される場合も利用するとわかりやすいです。
２２．Woo Products（ネットショップ商品表示）
プラグイン「WooCommerce」に登録された商品を表示させます。
リストかスライドか、表示形式を選ぶことができます。
（↑上記画像は公式サイトより引用）
見せ方もいろいろありますので、ネットショップ＋ブログ（メディア）で運営されているWEBサイトは利用する価値が高いと思われます。
まとめ
「Advanced Gutenberg」をはじめとするブロックエディタ拡張プラグインを使うと、個別ページやブログの記事の見せ方が多様化し、WEBサイト全体としてのクオリティが上がります。ユーザーのわかりやすさ、読みやすさにも直結しますので、ブロックエディタの活用はスピード感を持って進めることをオススメします。