Build for Gutenberg:プラグインとテーマの作成者がGutenbergへの移行に対処する方法

Gutenbergのために構築する:プラグインとテーマの作成者が移行にどのように対処しているか


WordCamp Europe 2018でMatt Mullenwegは、今後数か月にわたってグーテンベルクの大まかなロードマップを提示しました。 7月には、グーテンベルクの採用を増やすための大きなプッシュがあり、5.0のベータ版が8月(またはそれ以降、実際には、おそらくそれ以上)に登場します。差し迫った統合は、WordPress開発者がGutenberg向けにどのように構築することを計画しているのか疑問に思うかもしれません.

つまり、開発者がGutenberg向けの製品を準備するさまざまな方法は何ですか?そして人々はグーテンベルクのために何か新しくて面白いことをしていますか?

この投稿では、プラグインとテーマの開発者がGutenberg向けに構築できる実際の具体的な例をいくつか紹介します。.

開発者がブロックとスタイルを使用してより統合された編集エクスペリエンスを作成する方法の実際の例を見て、次のことを期待します。

  • Gutenbergがエンドユーザーとしてどのように役立つかを理解する.
  • 独自のWordPressプロジェクト用にGutenbergのために構築するいくつかのアイデアを入手してください.

それでもグーテンベルクエディターがわからない場合は、まずグーテンベルクエディターの完全なチュートリアルを確認してください。.

既存のプラグインがGutenbergへの切り替えに対処する方法の6つの例

プラグイン作成者がGutenberg用に構築する方法は、主にプラグインの機能に依存します.

一方で、フロントエンドコンテンツの追加に重点を置いたプラグインがあります。これは主に、以前はショートコードを追加することで実行されていたものです.

良い例はフォームプラグインです。ほとんどすべてのフォームプラグインは、フォームを作成するための個別のインターフェイスを提供し、その後、それらのフォームをフロントエンドに実際に埋め込むためのショートコードを提供します.

これらのタイプのプラグインは、通常、 カスタムブロック コンテンツの挿入を容易にするため。このセクションには、以下の例がいくつか表示されます。

  • 忍者フォーム
  • 与える
  • WooCommerce

次に、舞台裏の詳細を制御するのに役立つ他のプラグインがあります。通常、これらのプラグインはメタボックスを使用します.

最もよく知られている例は、Yoast SEOのようなものです。コンテンツを追加するわけではありませんが、メタボックス情報はすべて不可欠です.

メタボックスはGutenbergで動作するようになりましたが、これらのプラグインがGutenbergを利用するように機能を変更する可能性はまだあります。 Yoast SEOが問題に対処するいくつかの方法と、いくつかの独自のプラグインを使用して選択する方法を紹介します.

1. Ninja Formsは新しいGutenbergブロックを追加します

忍者フォーム WordPress.orgリポジトリで最も人気のあるフォームプラグインの1つです。これまでのところ、これはグーテンベルクに対処するために簡単な 忍者フォーム ブロック.

他のGutenbergブロックと同じようにブロックを挿入します。

忍者フォーム開発者がグーテンベルクのために構築する方法

次に、ドロップダウンからフォームを選択できます。

忍者フォームブロック

フォームを選択すると、エディターにライブプレビューが表示されます。

フォームのライブプレビュー

今、それだけです。ただし、次の理由により、これはしっかりとしたベースラインアプローチです。

  • ショートコードを直接操作する必要がなくなります
  • ページの編集中でも、デザインのライブプレビューを確認できます

次の2つのプラグインは、いくつかのより深いスタイリング/制御オプションを使用してこれに基づいて構築されます.

2. Giveは、レイアウトオプションを備えた2つのGutenbergブロックを追加します

与える は、GiveenbergエディターとGiveの統合に非常に積極的に取り組んでいる開発チームに人気の寄付プラグインです(この投稿のトピックが気に入った場合は、#PlayingWithBlocksシリーズを ブログを与える, ここで、GiveチームはGutenberg向けに構築する計画を詳しく説明します).

Giveは、私が試した中で最も合理化されたGutenbergエクスペリエンスの1つです。 Giveの2つのブロックを介してGive寄付フォームを取り込むだけでなく、Gutenbergインターフェイスを使用してそれらのスタイルを設定することもできます.

Giveの2つのブロックを埋め込むことができます:

  • 単一の寄付フォーム
  • 寄付フォームのグリッド

givewp gutenbergブロック

Ninja Formsと同様に、フォームのライブプレビューが表示されます。しかし、あなたも得る ブロック 以下を可能にする編集オプション:

  • フォーマットを選択
  • 寄付の目標を有効/無効にする
  • コンテンツを配置する場所を選択してください

ブロックレイアウトオプション

フォームにカーソルを合わせると、そのフォームを編集するための直接リンクが表示されます。

ブロック編集

したがって、Ninja Formsの現在の実装よりもブロックがどの程度深くなるかを見てみましょう。しかし、WooCommerceはさらに一歩進んでいます…

3. WooCommerceは列制御を備えた製品ブロックを追加します

WordPress 5.0が近づくにつれて、WooCommerceはおそらくGutenberg統合をさらに追加するでしょう(一部 ここに製品を追加する方法のアイデア)、チームはすでに公式と一緒にグーテンベルクに彼らのつま先を浸しました WooCommerce Gutenberg Products Blockプラグイン.

はい。現在、これは別のプラグインです。ただし、インストールすると、Gutenbergコンテンツの既存のWooCommerce製品をブロックとして挿入できます.

追加するとき 製品 ブロックする場合、表示する製品を選択できます。

グーテンベルクウーコマースブロック

次に、ブロック編集オプションを使用してレイアウトを変更できます。

グーテンベルクのwoocommerceレイアウトの変更

これは、Gutenbergが非標準コンテンツのスタイル/設定をより簡単にする方法の良い例であるため、私をかなり興奮させます.

4. Beaver Builderは、 "ビーバービルダーに変換" オプション

ページビルダーがGutenbergにどのように取り組むかについて多くの話がありました。まだ具体的なものはありませんが、Beaver Builderには、GutenbergレイアウトをBeaver Builderに変換できる機能がBeaver Builder 2.1に追加されています。

ビーバービルダーグーテンベルク

現在、変換プロセスは完全ではありません。しかし、グーテンベルクとページビルダーの間を移動できるというアイデアは、変換がシームレスであるかどうかに興味をそそります.

5.メタボックスは引き続き機能するはずです– Yoast SEOは良い例です

Yoast SEOがグーテンベルクに対処するための変更をまだリリースしていないと思うので、これは現在、既存のメタボックスがグーテンベルクでどのように機能するかを示す例です(グーテンベルクを密接にフォローしていない場合、メタボックスをサポートしています)。それは 長期的なソリューションよりも下位互換性のため).

ご覧のように、メインのYoast SEOメタボックスは、グーテンベルクに無傷で届きます。

グーテンベルクヨーストソメタボックス

しかし、サイドバーに表示されていたSEOとコンテンツ分析のスコアがありません。.

それで、Yoastはどのようにグーテンベルクのために構築し、それに対処することができますか? ここにいくつかのモックアップがあります Yoastがその分析を実際のGutenbergインターフェースに統合できる可能な方法について:

モックアップBヨーストseo警告
モックアップCヨーストソインコンテンツ分析

6. WP Product Reviewでのメタボックスへの対応方法

私たちの WP Product Reviewプラグイン メタボックスを使用してフロントエンド(この場合はレビューボックス)の出力を制御するプラグインの1つ.

WP Product ReviewとGutenbergエディターの統合に取り組んでいる方法は次のとおりです。

WP製品レビューグーテンベルク

ユーザーが投稿がサイドバー切り替え付きのレビューであることを示すと、上記のオプションからレビューボックスに関するすべてを設定できます。

wp review pro gutenbergトグル

開発者–グーテンベルクに向けてプラグインを準備するための優れたリソースです

実際のプラグイン開発者であれば、特定のプラグイン用にGutenberg用にどのようにビルドすべきか疑問に思われるかもしれません。ええと…私には言えません。しかし、私はあなた自身のHardeep Asraniによるこの素晴らしい投稿をあなたに指摘することができます。 Hardeepは、グーテンベルク用のプラグインを準備するためのいくつかの実用的なヒントを提示します.

開発者は、新しいプラグインを使用してGutenberg用にビルドすることもできます

開発者は、既存のプラグインをGutenbergと互換性を持つことに焦点を合わせているだけでなく、新しいプラグインを使用してGutenberg向けにビルドすることも計画しています.

新しいグーテンベルクは豊富なブロック

一方では、新しいタイプのコンテンツブロックを追加するだけの一般的なプラグインがたくさんあります。これらはグーテンベルクにページビルダーの雰囲気を与えます。次のブロックを見つけることができます。

  • 価格表
  • お客様の声
  • チームメンバー
  • 等.

たとえば、以下は、 積み重ね可能– Ultimate Gutenberg Blocksプラグイン. ブロック編集オプションの詳細を見てください。

新しいグーテンベルクブロック

WordPress.orgにはすでにこれらのプラグインがたくさんあります。しかし、前述のStackableプラグインを超えて、他の一般的な製品は次のように見えます。

というオファリングもあります コブロック としての市場 "コンテンツマーケターのためのグーテンベルクブロック".

このニッチなアプローチは特に興味深いと思います。将来的には、次のような特別なGutenbergブロックセットが見られるでしょう。

書評ブロック プラグインは、ニッチグーテンベルクブロックがどのようになるかを示すもう1つの小さな例です.

カスタムフィールドがGutenbergと連携する方法の例

グーテンベルクカスタムフィールド いくつかの牽引力を得ているように見えるもう一つの興味深いプラグインです.

特定のカスタム投稿タイプに関連付けられたカスタムフィールドまたはフィールドグループを簡単に設定できます。

gutenbergエディターのカスタムフィールド

次に、Gutenbergエディターに移動すると、これらのカスタムフィールドはブロックとして事前に入力されています。

グーテンベルクカスタムフィールドの例

多くの人々は、カスタムフィールドがGutenbergでどのように機能するのか疑問に思っています。これは、すでに普及している有望な例の1つです。あなたはできる 詳細はこちら.

テーマ開発者がGutenbergへの移行にどのように取り組んでいるかの3つの例

プラグイン開発者がGutenberg用にビルドする方法の例をいくつか見ましたが、テーマについてはどうですか?

テーマ開発者は、移行に対処するために2つの主要な手段に従っているようです:

  • ブロックのスタイリングを追加し、Gutenbergレイアウトオプションをサポートすることで、テーマをGutenberg対応にする
  • Gutenbergブロックを使用してテーマコンテンツを構築する

ここに絵を描くいくつかの例があります…

1. Gutenbergエディターへのカスタムスタイルの追加

開発者が実際に行っていることの1つは、実際のバックエンドのGutenbergインターフェイスにテーマスタイルを追加することです。これは、BigBox WooCommerceのSpencerですが、真のWYSIWYGエクスペリエンスを作成するための扉を開きます サードパーティブロックのスタイルに関するいくつかの問題の詳細.

たとえば、ThemeShaperのOhanaテーマが、投稿タイトルを含むすべてのGutenbergコンテンツをどのように完全にスタイル変更するかを見てください。

グーテンベルクインダッシュボードスタイル

実際に見たい場合, GitHubからOhanaテーマをダウンロードする. そして、ThemeShaperは、彼らがこの効果をどのように達成したかについても説明しています このブログ投稿.

2.新しい全幅の配置オプションを追加する

あなたが見るもう一つのクールなテーマ互換性の微調整は、 ワイドアライメント サポート. 基本的に、これにより特定のブロックを全幅にすることができます。最も一般的な例は、全幅の画像を挿入することです.

繰り返しになりますが、これはOhanaテーマで有効であることがわかります。

グーテンベルクワイドレイアウト

この調整が機能するためには、テーマの作成者はサポートを明示的に宣言する必要があります.

3.ブロックを使用してテーマのデモコンテンツを作成する-例:ブロックのテーマ

最後に、Organic Themesからのこのアプローチはかなりクールです。

ブロックテーマ デモコンテンツは完全にGutenbergブロックで構築されています.

マットがグーテンベルクロードマップで7月に調査を含めると明示的に述べたように、これは間違いなく今後も成長を続けるでしょう。 "グーテンベルクを投稿を超えてサイトのカスタマイズに拡大."

Array Themesには、Blockテーマ以外にも、 原子ブロックのテーマ 上記のAtomic Blocksプラグインと統合するように特別に設計されています.

開発者–ここにあなたのテーマをグーテンベルクのために準備する方法があります

既存のテーマをGutenbergと互換性のあるものにするにはどうすればよいのか疑問に思っているテーマ開発者の場合, ビル・エリクソンは素晴らしいガイドを持っています 高いポイントに。そしてその テーマサポート グーテンベルクハンドブックのセクション 別の良いリソースです.

来てもっとクールなものが確実にあります

上記のサンプルから、プラグインとテーマの開発者がGutenberg向けのビルドをどのように計画しているのかについて理解を深めていただければ幸いです。.

個人的には、この投稿を書いたことで、グーテンベルクの可能性について私は特に興奮しました。.

プラグインの面では、ブロックを使用してこれまでショートコードで行われていたすべてのことを置き換えることは、特にカジュアルなユーザーにとって、使いやすさの大きな改善です.

また、テーマ開発者が独自のスタイルを取り入れてブロックを組み込むことができる方法も、特にGutenbergがサイトのカスタマイズにさらに拡大するので、刺激的です。.

さてあなたに–あなたはグーテンベルクのために構築する興味深い方法を見つけているプラ​​グインやテーマ作者の素晴らしい例に出くわしましたか?コメントで教えてください!

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map