作業効率化プラグイン『Advanced Gutenberg』の使い方

インストール数は1万を超え、評価も4.5のGutenbergをもっと快適にするプラグイン『Advanced Gutenberg』の使い方です。

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

日本語にも対応しているので使いやすさもなかなか

出来ること

Advanced Gutenbergは基本的にはGutenbergで出来ることを増やすプラグインといった感じです。

以下20個の機能がGutenbergに追加されます。

  1. 最新記事一覧
  2. アニメ付きボタン
  3. カウントアップアニメ
  4. アコーディオン(クリックでの開閉ブロック)
  5. 画像表示
  6. リスト表示
  7. テーブル表示
  8. 動画埋め込み
  9. カラム表示
  10. 問い合わせフォーム表示
  11. 画像スライダー
  12. ログインフォーム(ログイン機能は別途作成の必要有)
  13. 地図表示
  14. メルマガ登録フォーム(メルマガ機能は別途作成の必要有)
  15. 検索窓表示
  16. シャアボタン表示
  17. 要約表示
  18. タブ表示
  19. 記事執筆者
  20. 商品表示(ECサイト用)

リストやテーブル表示、動画埋め込みなどなど、Gutenbergで元から出来ることと被っている機能もチラホラありますね。

ただ、Advanced Gutenbergで表示する方がコード(html)を書く必要なく、それでいて表現の幅が広がるといったところでしょうか。

インストールから有効化まで

プラグイン > 新規追加

検索窓にAdvanced Gutenbergと打ち込み、出てきたものを今すぐインストールボタンをクリックし、続いて有効化ボタンを押します。

セットアップ

セットアップといっても難しいことはなく、

  1. 余白の設定
  2. デザインの変更
  3. メルマガの設定

の3つです。

メルマガの設定に関してはメルマガを運用していない人に関しては必要ありません。

余白の設定

通常のブロックでも一応の余白は入りますが、ブロックごとに大きく余白を取っている場合は設定からセットアップできます。

Adv. Gutenberg > 構成

上画像の ブロックの余白を有効化 部分をオンにし、 ブロックの余白 部分に任意の余白を差し込みます。

余白をとった場合ととっていない場合の比較は下画像の通り。

デザインの変更

例えば機能の一つであるアコーディオン(開閉ブロック)はデフォルトだと下画像の左のような感じですが、デザイン変更をすると右のように変えたりもできます。

デフォルトのデザイン
カスタマイズ後

デザインの変更も上と同じ箇所から行えます。

Adv. Gutenberg > 構成 > デフォルトの構成ブロック

歯車の箇所をクリックすればポップアップが開き、そこからデザインの変更ができます。

基本的にはアイコンの変更や背景色・文字色の変更がメインになるかと思いますので詳しい説明は割愛します。

編集が終わったら最下部か最上部の 保存 ボタンをクリックすれば変更が反映されます。

大抵の場合、スーパーリロードをすれば治ります。

Winの場合: Ctrl or Shift + F5
Macの場合: Command + Shift + R

詳しくは下記記事参照。

メルマガの設定

Advanced Gutenbergでは、お問い合わせやメルマガ登録フォームを置けますが、その登録者へのメールが英文のままになっています。

Adv. Gutenberg > EMAIL & FORM

送信メールのタイトルだけ変更すればOKです。

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

他の項目にも一応翻訳を載せていますがそちらは自動的にセットアップされているのでノータッチでOK

ちなみに上のタブ箇所からReCaptcha(スパム判断できる機能)や登録者のメールアドレスのデータがJSON形式やCSV形式でダウンロードできたりもします。

Advanced Gutenbergの使い方

基本的な使用法

Advanced GutenbergについてもGutenbergの基本的な使い方とおなじです。エディターのブロック横にある + ボタンから表示ができます。

デフォルトだと、+ ボタンを押すと『よく使うもの』リストが表示されるので、それをクリックすると『よく使うもの』が閉じ、他のリストの表示ができます。

その中からAdvanced Gutenbergを選べばAdvanced Gutenberg側で使えるようになるブロックが表示される形です。

あまりに機能が多いので、ここではとりわけ使えそうな機能をピックアップしてご紹介します。

ちなみにAdvanced Gutenbergのラインナップはこんな感じ。

英語わからずともアイコンで何となく分かりそうですね。

アコーディオン(開閉式)の使い方とか用途とか

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

必要な人にとっては必要な部分だけど長いから必要としない人にとっては邪魔だろうなぁ

なんて時に使えます。僕はよくコードとかを格納していたり。

Advanced Gutenberg の中から Advanced Accordion を選択し、 Header Text の部分にアコーディオンブロックのタイトルを、その下に隠したい文章を入力します。文章だけでなく画像なども格納できます。

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

一点注意点。バグか仕様かはわかりませんがアコーディオンブロックを出すと、2つ出力されるので、一つしか必要でない場合は一つ余分なものを削除する必要があります

ボタンの使い方とか用途とか

コンテンツのダウンロードとかCTA的なノリでのリンクとかに使えますね。

使い方は Advanced Gutenberg の中から Advanced Button を選択して文字を入力するだけ。

デザイン変更などはエディターの右部分から行えます。リンク先の設定なども右側から行えます。

カウントアップの使い方とか用途とか

長いLP風の固定ページやアフィリエイトのページなどで使えそう。ちょっと過激な表現な気もしますが。

使い方は Advanced Gutenberg の中から Advanced CountUp を選択して文字を入力するだけ。

タブの使い方とか用途とか

これもアフィリエイト記事での用途ですけど、A社B社C社の比較みたいな時に使えそうですね。

使い方は Advanced Gutenberg の中から Tabs を選択して文字を入力するだけ。

まとめ

やったねタエちゃん!友達が増えるよ!

他にも色々機能ありますが力尽きたのでここらでおしまい。

その他Gutenbergに関する便利技や裏技をまとめました。

【WordPress】Gutenbergを3つの裏技で使いやすく&効率化する

コメントを残す

メールアドレスが公開されることはありません。