WordPressの新エディタGutenbergを拡張するプラグイン2選

WordPressも5系に変わり、メジャーアップデートされ1番の変化としてやはり上げられるのがビジュアルエディタの変更でしょうね。

それまでは、エディタとしてポピュラーなWYSIWYG形式のエディタだったわけですが、これが昨今はやりのブロック形式のエディタとなりました。

まあ、WordPressのメリットとして修正などが容易で機能を拡張したり、不要必要にあわせてコードの呼び出しを停止したりすることが出来るのでGutenbergについてもそうした対応が可能ですね。

新エディタのGutenbergもなれればかなり便利なのですが、Gutenbergはこのサイトでも何度か紹介しているページビルダーと同じではあるので、昨今そうしたページビルダーがGutenbergを取り込んで拡張していく一面と、Gutenbergをオミットしてページビルダーを機能させるものと2つの方針が示されています。

ページビルダーも主流は昔からポピュラーなVisualComposerが改名したWPBakery ページビルダーはフロントエディタもついていますが、主な使い方としてはバックエンドでレイアウトを構築してブロックを挿入していく形式です。

ただ、このWPBakery ページビルダーはWordPressのライセンス規約として無料版を提供する必要があるということで公式のリポジトリ(配信サイト)で配布されることはありません。

他方も、昨年の夏くらいからはやりだして、その前に登場していたLayerというページビルダーをあっという間に亡き者にしたElementorはWordPressの公式リポジトリで無料版が配布されており、こちらはGutenbergと同じくらいの機能を持っていて、拡張機能としてプロ版やサプライヤーによるデザインされたブロックを同梱した有料版のアドオンが提供されています。

ただ、Gutenbergもかなり使えるので、Gutenbergを拡張してより便利になるようにする拡張プラグインを掲載させていただきます。

Ultimate Addons for Gutenberg

グーテンベルクのための究極のアドオンです

Gutenbergでウェブサイトを構築するのを助ける高度で強力なブロックでグーテンベルクエディタをパワーアップすることができます。このグーテンベルクアドオンは、Webサイト構築をより便利にすることができます。

Gutenbergブロックのデモはこちらからチェックする事が出来ます。

Ultimate Addons for Gutenbergのお気に入りのブロックを選択するだけで、直感的なビジュアルスタイルの設定とカスタマイズが簡単になり、Webサイトの構築プロセスがスピードアップします。

Ultimate Addons for Gutenbergで、ウェブサイト構築プロセスから面倒を取り除く事ができます。

グーテンベルクをカスタマイズするために一行のコードを書くことなしでページや記事を構築してデザインするのを助けるユニークで創造的なブロックを与えます。

Ultimate Addonsで用意されているブロックは使いやすく、ユーザーフレンドリーなインターフェースで簡単にカスタマイズできます。

したがって、カスタムコードから離れて高度なブロックを自分で簡単に構築することができます。

グーテンベルクのための究極のアドオンのデモはこちらからです!- デモを起動する

チュートリアルから学ぶ

ブロックがどのように機能するのかわからないですか?

詳細な知識ベースの記事でUltimate Addonsですべてのクリエイティブブロックについて、すべてのステップでわからない事を調べて知ることを助ける記事が日々追加されているので確認をいただければと思います。

Gutenberg Blocks – Ultimate Addons for Gutenbergの要素一覧

  • セクション:これはあなたがその中に他のブロックを追加することを可能にする外側のラップセクションです。このセクションのレイアウトを管理し、間隔、背景、境界線、詳細設定などのオプションを使用してカスタマイズできます。
  • マルチボタン:このグーテンベルクブロックでは、単一ブロック内に複数のボタンを追加できます。Multi-Buttonブロックには、1〜5個のボタンを追加できます。さらに、それはあなたにすべてのボタンのためのあなたに追加の設定を与えて、あなたも間隔と敏感な設定を管理することができます。
  • 高度な見出し:Advanced Headingブロックを使用すると、見出しと小見出しの組み合わせに区切り記号を追加できます。見出しの見出しタグを選択したり、他の設定やカスタマイズを管理したりできます。
  • 投稿グリッド:Post Gridブロックは、あなたがあなたのウェブサイトで持っているかもしれないブログ投稿を取得し、それらをグリッドレイアウトで表示します。投稿の順番をカスタマイズしたり、おすすめの画像、コンテンツなどの設定を管理したりできます。
  • 投稿カルーセル:カルーセル内にブログの投稿を表示するポストスライダーを作成したいですか。Post Carouselブロックを使用すると、カルーセル内に投稿を表示したり、投稿の設定や表示したいコンテンツを管理したりできます。
  • 投稿メーソンリ:Post Masonryブロックはあなたのウェブサイト上のブログ投稿を取得し、それらを石積みレイアウトで表示します。投稿の表示方法をカスタマイズしたり、おすすめの画像、表示したいコンテンツなどの設定を管理したりできます。
  • 情報ボックス:Infoboxでは、見出しや説明とともに画像やアイコンを1つのブロック内に配置できます。画像またはアイコンを選択して、ブロック内のコンテンツをカスタマイズできます。
  • グーグルマップ:グーグルマップブロックはあなたが試すのが好きなズームオプションであなたが場所を表示することを可能にします。
  • チーム:チームブロックではチームを表示できます。彼らの写真、名前、彼らがしていることと彼らの社会的プロフィールへのリンクを追加してください。
  • コンテンツタイムライン:タイムラインブロックを使用すると、Webサイトに美しいタイムラインを作成できます。これは会社の歴史や進捗状況の表示、あなたの個人的な業績のリスト、製品のロードマップやリリースサイクルなどに役立ちます。
  • ソーシャル共有:Social Shareブロックを使用すると、さまざまなソーシャルネットワーキングサイトでユーザーがコンテンツを共有できるようになります。
  • お客様の声:お客様の声ブロックを使用すると、Webサイト内の素晴らしいクライアントからのフィードバックをカルーセルレイアウトで表示できます。
  • アイコンリスト:アイコンリストブロックでは、画像やアイコンをリスト形式で配置できます。各リストアイテムの箇条書きとして機能するように、リストに合ったお気に入りのアイコンまたは画像を選択できます。
  • レストランメニュー:レストランメニューを使用すると、見栄えがよく、管理しやすいWebサイト用の飲食メニューをデザインできます。
  • 投稿タイムライン:Post Timelineブロックは、公開された日付に従って、あなたのウェブサイト上のブログ投稿を順番に並べて表示するのに役立ちます。各ブログ投稿に表示されるコンテンツをカスタマイズし、日付、おすすめの画像などを管理できます。
  • Call To Action:Call To Action(CTA)ブロックはあなたがあなたのウェブサイトのコンバージョンを後押しする流行のタイトル、説明とキャッチーなボタンで魅力的な行動を促す行動を作成するのを助けます。

パフォーマンスとスピードに合わせて最適化

最速かつ軽量のWordPressテーマAstraの背後にあるチームによって構築された、Ultimate Addonsもパフォーマンスとスピードを念頭に置いて構築されていることは間違いなく保証できます。サーバーリクエストの数を減らすためのすべての規定により、Ultimate Addonsは軽量かつ高速に保たれています。

ちなみに上記のテーマに対して最適化されていると記載されていますがそれ以外でももちろん使用することができます。

自分でコードを書いてブロック要素を追加したい!

もちろん、自分でコードを書きたいという人もいるので、GutenbergのBlocksをACFでカスタムフィールドを作るイメージで要素を追加することの出来るプラグインは以下を推奨します。

使い方は以下の記事を参考にしていただけると

Gutenbergはかなり若い機能なので、これから逐次修正されていくだろうし、機能も追加されたり変更されていくので今から知見をためておく事でこれから活かして行く事は出来ると思います。