ブログのつくり方

ブロックエディター拡張プラグイン「Advanced Gutenberg」の使い方

投稿日:

WordPress5.0から新しくなったエディター「Gutenberg」は、直観的な操作で見栄えの良い記事がつくれるようになっていますが、プラグインを使うとより記事の作成や編集に便利です。

プラグインでデフォルトのエディターの機能を拡張して、効率的に記事の作成ができるようになります。

そこで、ここでは「Gutenberg」を使った記事の作成に便利なプラグイン「Advanced Gutenberg」の使い方について説明します。

 

「Advanced Gutenberg」とは?

はじめに、「Advanced Gutenberg」とはどんなプラグインかを簡単に説明します。

「Advanced Gutenberg」は、Gutenbergを使った記事の作成や編集に役立つ機能が集約されたプラグインです。

たとえば、このプラグインを使ってできることには、以下のようなものがあります。

「Advanced Gutenberg」でできること

  • Gutenbergデフォルトのブロックに加えて、20種類以上の新しいブロック(「Adavanced Gutenberg blocks」)が使えるようになる
  • あらかじめ「有効にするブロック」と「無効にするブロック」を選択したプロフィールを作成し、それをユーザー毎に適用することができる
  • 「Adavanced Gutenberg blocks」それぞれのブロックには、「よく使う色やスタイル」をデフォルトの設定としてカスタマイズしておくことができる

また、上記の新たに使えるようになる「Advanced Gutenberg blocks」にはどんなものがあるかと言うと、たとえば以下のような機能があります。

Advanced Gutenberg blocks

  1. Adavanced List(リストの色やデザインなどをカスタマイズできる)
  2. Recent Posts(「最近の投稿」を挿入できる)
  3. Adavanced button(リンク付きのボタンを簡単に作成できる)
  4. Adavanced image(lightboxを実装し画像をクリックして拡大できるようになる)
  5. Contact form(簡単に問い合わせフォームを設置できる)
  6. Social link(SNSのリンク付きのアイコンを挿入できる)

上記以外にもたくさんのブロックが使うことが可能なので、見栄えの良い記事を作成したり、効率的に記事を作成したりするのに便利です。

 

「Advanced Gutenberg」の使い方

では次に、「Adavanced Gutenberg」の使い方について説明します。

 

「Adavanced Gutenberg」を使うまでの流れ

まず、「Adavanced Gutenberg」を使うために、どんな作業が必要かを説明します。

このプラグインを使うまでの大まかな流れは以下のとおりです。

「Advanced Gutenberg」を使うために必要な作業の流れ

  1. プラグインのインストール・有効化
  2. 設定をカスタマイズする
  3. 投稿の作成・編集画面でブロックを追加する

上記①~③の詳しい作業については、以下の項目で説明します。

 

①「Advanced Gutenberg 」のインストール・有効化

はじめに、①の「Advanced Gutenberg 」をインストール・有効化する方法について説明します。

ここで行う作業は以下のとおりです。

「Advanced Gutenberg 」のインストール・有効化手順

  1. WordPress管理画面「プラグインの追加」画面を表示
  2. 画面の右上にある検索ウィンドウに「Advanced Gutenberg 」と入力
  3. 検索結果に表示された「Advanced Gutenberg 」の「今すぐインストール」をクリック
  4. インストールが完了したら「有効化」をクリックする

以下に、上記①~④の流れを詳しく見ていきます。

まず、WordPress管理画面のメニューから「プラグイン」⇒「新規追加」をクリックして、「プラグインの追加」画面を表示します。

そうすると、以下のような画面になるので、右上にある検索ウィンドウに「Advanced Gutenberg」と入力します。

「Adavanced Gutenberg」のインストール画面

そして、検索結果の左上に「Advanced Gutenberg」が表示されたら、「今すぐインストール」をクリックしてください。

インストールが終わったら、以下のように「有効化」というボタンが表示されるので、「有効化」をクリックし、ここまでの作業が終了です。

「Adavanced Gutenberg」の有効化ボタン

 

②設定をカスタマイズする

次に、「Advanced Gutenberg」の設定方法について説明します。

「Advanced Gutenberg」は、事前に何も設定をしなくても、デフォルトの状態のままで「Adavanced Gutenberg blocks」を使って記事を作成することが可能です。

ただ、設定画面から、かなり細かいカスタマイズができるようになっているので、よく使うブロックの色やスタイルなどを設定してから記事の作成をすると便利です。

 

設定画面の表示手順

まず、「Advanced Gutenberg」の設定画面を表示する方法を説明します。

「Adavanced Gutenberg」の設定画面は、WordPress管理画面メインナビゲーションメニューの「Adv.Gutengerg」をクリックして開くことが可能です。

設定画面を表示すると、画面の左側に以下のようなメニュー項目があるので、これらの項目をそれぞれカスタマイズして使うことができます。「Adavanced Gutenberg」の設定項目

では設定画面でどんな設定が可能かを、以下に説明します。

 

プロフィール

まず、「プロフィール」からは、Gutenbergデフォルトのブロックと「Advanced Gutenberg blocks」の中から、有効化・無効化するブロックを選択したプロフィールを作成することができます。

 

構成

次に、「構成」ではブロックのデフォルト設定が可能です。

「構成」「デフォルトのブロック構成」という2つのタブから、以下の設定ができるようになっています。

「構成」タブの設定

「Adavanced Gutenberg」の構成画面

ギャラリーをLightboxで開く 画像をLightboxで開けるようにする
画像キャプション 画像のキャプションを表示できるようにする
Remove Autop wpautopを無効にする
Google APIキー Mapブロックをエラーなしで追加するためにGoogle APIキーを設定する
ブロック余白を有効化 ブロック間の余白をつくることができる
ブロックの余白 余白のサイズを設定する
ブロックアイコンの色 「Advanced Gutenberg blocks」のアイコンの色を設定する
Editor width エディターの幅を設定する
Default thumbnail デフォルトのサムネイル画像を設定する
Enable columns visual guide カラムブロックで線を表示する

「デフォルトのブロック構成」タブ

「Adavanced Gutenberg」のデフォルトのブロック構成画面

「デフォルトのブロック構成」タブでは、「Advanced Gutenberg blocks」それぞれのブロックがデフォルトで使う「色」や「スタイル」などの設定をすることができます。

 

Email&Form

次に、「Email&Form」は、お問合せフォームの設置が可能な「Contact Form」や「Newsletter」ブロックに関する設定が可能です。

「Email Settings」「Forms ReCaptcha」「Forms Data」という3つのタブに分かれていて、ぞれぞれのタブで以下の設定ができるようになっています。

「Email Settings」タブ

「Adavanced Gutenberg」のEmail Settings画面

Sender Name 問い合わせがあった時の通知メールの送信者の名前を設定する
Sender Email 問い合わせがあった時の通知メールの送信元のメールアドレスを設定する
Email tiltle 問い合わせがあった時の通知メールのタイトルを設定する
Email reciever 問い合わせがあった時の通知メールを受け取るメールアドレスを設定する

「Forms ReCaptcha」タブの設定

「Adavanced Gutenberg」のForms ReCaptcha画面

Enable reCAPTCHA reCAPTCHAの設置を有効にする
reCAPTCHA Site Key reCAPTCHAのサイトキーを入力する
reCAPTCHA Secret Key reCAPTCHAのシークレットキーを入力する
reCAPTCHA Language reCAPTCHAの言語を選択する
reCAPTCHA Theme reCAPTCHAのテーマを選択する

「Forms Data」タブの設定

「Adavanced Gutenberg」のForms Data画面

Download Contacts Form data 問い合わせメールのデータをCSV・JSON形式のファイルでダウンロードすることができます
Download Newsletter Form data メールマガジンのデータをCSV・JSON形式のファイルでダウンロードすることができる

 

カスタムスタイル

次に、「カスタムスタイル」では、「段落」ブロックに適用することができるスタイルの編集が可能です。

「Adavanced Gutenberg」のカスタムスタイル画面

 

翻訳

次に、「翻訳」では翻訳ツールのインストールが可能です。

「Adavanced Gutenberg」の翻訳画面

 

③ブロックを追加する

次に、③のエディターで「Advanced Gutenberg blocks」を追加する方法について見てきます。

「新規投稿の作成」「投稿の編集」画面のエディターに「Advanced Gutenberg blocks」を追加する手順は以下のとおりです。

「Advanced Gutenberg blocks」をエディターに追加する手順

  1. 投稿の作成・編集画面でブロックを追加したい場所で「ブロックを追加」をクリック
  2. 「Advanced Gutenberg blocks」をクリック
  3. 使いたいブロックを選択してエディターに挿入する

次に、上記①~④について詳しく説明します。

まずは、投稿の作成・編集画面で、エディターのブロックを追加したい位置で「ブロックを追加」(⊕マークをしたアイコン)をクリックします。

表示されたウィンドウを下までスクロールすると、以下のように「Advanced Gutenberg」と書かれた項目があるので、その部分をクリックします。

Advanced Gutenberg blocksの追加画面

そうすると、「Advanced Gutenberg blocks」が選択できるようになるので、使いたいブロックをクリックしてエディターに挿入します。

そして、デフォルトのブロックと同じように画面右側のからブロックのスタイルなどを設定することが可能です。

 

まとめ

以上、「Advanced Gutenberg」の使い方について説明しました。

「Advanced Gutenberg」は、WordPress5系のエディター「Gutenberg」の機能を拡張できるプラグインです。

デフォルトのブロックに追加して20種類以上の新しいブロックを追加して使うことができ、さまざまなパーツを使って見栄えの良い記事を作成できます。

またContact Formブロックを使うと問い合わせフォームを簡単に作成することができ、データをCSVでダウンロードすることもできるので、問い合わせフォームを設置したい場合に使ってみても良いかと思います。

スポンサーリンク

  • この記事を書いた人

ミヤノ カナコ

ブログ運営歴5年目のブロガー・フリーランスライター。OL時代には、多くのカスタマーセンターやヘルプデスクでメール・電話での問い合わせ対応に従事。現在は、ブログでの情報提供のほか、エッセイの発信を中心に活動中。このブログでは、ブログのつくり方や文章の書き方など、ネットビジネスに役立つ情報をお届けします。

Copyright© ミヤノカナコ.com , 2019 All Rights Reserved.