グーテンベルクと新しいディビビルダー体験

公開: 2018-12-12

変化の季節がやってきました。最近のWordPress5.0の登場により、まったく新しいブロックエディター（別名グーテンベルク）が導入されました。また、新しいDivi Builder Experienceのリリースにより、グーテンベルクとのスムーズな統合が実現しただけでなく、Diviを使用したWebサイトのデザインエクスペリエンス全体がアップグレードされました。

これらの新しい変更は、間違いなく、DiviとGutenbergがどのように連携するか、およびこれらすべての変更でDiviを最適に使用する方法についていくつかの懸念と混乱をもたらします。このチュートリアルは、WordPress 5.0で新しいDiviBuilderエクスペリエンスを正常に起動して実行するために必要なオプションと手順を説明することで、変化の打撃を和らげることを目的としています。

グーテンベルクや新しいDiviBuilder Experienceの準備ができていない方は、心配しないでください。いつものように機能し続けるために利用できるオプションについて説明します。そして、エキサイティングな未知の世界に冒険する準備ができている人のために、このガイドはあなたが道を見つけるのを助けます。

このチュートリアルで取り上げる内容は次のとおりです。

WordPress5.0にアップグレードする際のDiviの最新バージョンをインストールすることの重要性
新しいDiviBuilderがデフォルトでグーテンベルクとどのように連携するか
WordPress5.0を使用してバックエンドで新しいDiviBuilderをアクティブ化する方法（推奨される方法）
新しいDiviBackend BuilderUIを使用した新しいページの編集
新しいDiviでClassicDiviBuilderを使用する

WordPress5.0にアップグレードする際のDiviの最新バージョンをインストールすることの重要性

Diviの最新バージョンはWordPress5.0と互換性があります。したがって、WordPress 5.0にアップグレードする場合は、Diviも3.18+に更新するようにしてください。この新しいバージョンは、新しいGutenbergブロックエディターとの互換性の問題の多くに対処します。古いバージョンのDiviを保持している場合は、アップグレードするまでDiviBuilderやその他のページ設定にアクセスできません。

Extra、Bloom、Monarch、DiviBuilderプラグインの最新バージョンもWordPress5.0と互換性があるため、アップグレード時にこれらも更新することをお勧めします。

新しいDiviBuilderがデフォルトでグーテンベルクとどのように連携するか

WordPress5.0にアップデートしてDivi3.18（最新バージョン）をインストールすると、Webサイトの構築を開始する準備が整います。新しいページを追加すると、Divi BuilderまたはデフォルトのWordPressエディター（現在はGutenberg）を使用できるポップアップが表示されます。「DiviBuilderを使用」をクリックするだけです。

フロントエンドのVisualBuilderに直接起動することに気付くでしょう。

Visual Builderを終了してバックエンドのページを編集すると、使用可能なClassic DiviBuilderがないことがわかります。フロントエンドでDiviBuilderを起動するオプションのみがあります。

これは、WordPress 5.0が従来のエディターを削除し、ブロックエディター（グーテンベルク）に置き換えたためです。したがって、Classic Divi Builderを含む、接続されているすべてのアプリケーションが削除されました。つまり、Classic WordPressEditorなしでClassicDiviBuilderはありません。

WordPress5.0を使用してバックエンドで新しいDiviBuilderをアクティブ化する方法（推奨される方法）

バックエンドで新しいDiviBuilderにアクセスするには、数回クリックするだけです。 WordPressダッシュボードから、[Divi]> [テーマオプション]に移動します。そこで、[ビルダー]タブをクリックします。 [ビルダー]オプションで、[詳細設定]タブをクリックします。そこには、最新のDivi Builderエクスペリエンスを有効にし、Classic（WordPress）エディターを有効にするオプションがあります。 バックエンドで新しいDiviBuilderを楽しむには、これらのオプションの両方を有効にする必要があります。次に、[変更を保存]をクリックします。

注：Diviのテーマオプションでクラシックエディターを有効にするオプションは、Gutenbergを使用する準備ができていない人にWordPressコントリビューターが提供するクラシックエディタープラグインを使用する必要性を置き換えます。

テーマオプションから最新のDiviBuilderとクラシックエディターを有効にすると、新しいDiviBuilderエクスペリエンスを使用してページの作成を開始できます。

新しいDiviBackend BuilderUIを使用した新しいページの編集

WordPress ClassicEditorで新しいDiviBuilderを有効にすると、おなじみの「Use theDiviBuilder」ボタンが表示されます。通常のようにこのボタンをクリックして、DiviBuilderをデプロイします。

次に、ポップアップする3つのオプションから、ページのデザインを開始する方法を選択します。

これで、新しいDiviBuilderエクスペリエンスが完全に機能するようになりました。新しいDiviBackendBuilderはClassicBackend Divi Builderに似ており、いくつかの強力な新機能をすぐに利用できます。

新しいエクスペリエンスを少しよく理解するのに役立つ、いくつかの注目すべきページエディタUI機能を次に示します。

「フロントエンドで構築」ボタン

「フロントエンドでビルド」ボタンは、従来の「ビジュアルビルダーを使用」ボタンに取って代わりましたが、機能は同じです。これは、以前のように完全な視覚的構築体験のために、フロントエンドにDiviBuilderをデプロイします。このボタンの文言の主な理由は、技術的には独立したビジュアルビルダーがないためです。現在、バックエンドとフロントエンドでアクセスできるDiviBuilderは1つだけです。

バックエンドで利用できるようになった表示モード

新しいDiviBuilderは、VisualBuilderとそのすべての機能をバックエンドにもたらしました。これで、ページの編集を行ったり来たりする必要がなくなります。バックエンドでビジュアルビルダーエクスペリエンスをアクティブにするには、ビルダーの上部でさまざまな表示モードを切り替えることができます。デフォルトでは、ワイヤーフレームビューモードがアクティブになっています。これは、私たちが見慣れている従来のバックエンドビルダーのルックアンドフィールと厳密に一致しているため、理にかなっています。ただし、ページを離れることなくバックエンドでページを視覚的に編集するために（デスクトップ、タブレット、スマートフォン）、さまざまな表示モード（デスクトップ、タブレット、スマートフォン）を切り替えることができます。

新しいDiviBuilderUI

バックエンドでさまざまな表示モードを切り替える機能に加えて、Divi Builder UIは、ページを編集するときにバックエンドでシームレスに機能します。たとえば、バックエンドで要素の設定を編集する場合、設定モーダルをブラウザウィンドウ全体の任意の場所に移動できるため、変更をリアルタイムで確認しながらバックエンドで編集を行うために必要な間隔を確保できます。

Classic DiviBuilderに切り替えます

新しいDiviBuilderエクスペリエンスの準備が整っていない場合でも、以前と同じようにClassic DiviBuilderを使用できます。最新バージョンのDiviには、ページを編集するときにバックエンドのDivi BuilderUIの下部にあるClassicDiviBuilderをデプロイするための非常に簡単な方法が組み込まれています。そこに、ワンクリックでクラシックDiviビルダーに戻ることができるリンクが表示されます。

注：[テーマオプション]から[クラシックDiviビルダー]に切り替えることもできます。 [ビルダー]タブをクリックしてから、[詳細オプション]タブをクリックします。 そこで、最新のDivi BuilderExperienceを有効または無効にするオプションを見つけることができます。 以前と同じようにClassicDivi Builderを維持するには、このオプションを無効にするだけです。 ただし、バックエンドでClassic Divi Builderを表示するには、ClassicEditorオプションも確認して有効にする必要があることを忘れないでください。

新しいDiviBuilderの機能

新しいDiviBackend Builderには、以前はVisualBuilderでしか利用できなかったすべての強力な新機能も含まれています。それでも不十分な場合は、この新しいDivi Builderを使用して、まったく新しいパフォーマンスと使いやすさのアップグレードを行うこともできます。これらのアップグレードには次のものが含まれます。

キャッシュを活用してこれまでになく迅速にエクスペリエンスを構築
React Portalを使用したすべての表示モードでのページの100％正確な描写
Classic Builderの場合と同じように、VisualBuilderのページ間でコピーして貼り付ける機能。

利用可能な強力な新機能の詳細については、新しいDivi BuilderExperienceの記事を確認してください。

新しいDiviでClassicDiviBuilderを使用する

上記のように、新しいDiviバックエンドビルダーページエディターで提供されるリンクを使用するか、テーマオプション内で最新のDivi Builderを無効にすることにより、Classic DiviBuilderの使用に切り替えることができます。切り替えると、バックエンドページエディタは以前とほぼ同じように見えますが、いくつかの小さな変更が加えられています。古い「ビジュアルビルダーを使用する」ボタンに「フロントエンドでビルド」と表示されるようになりましたが、機能は以前と同じです。バックエンドのDiviBuilderの下部にあるリンクをクリックして、新しいDiviBuilderに切り替えるオプションもあります。

Classic Divi Builderには、New DiviBuilderのバックエンドで利用できるようになったすべての新機能がまだ不足していることに注意してください。

要約とFAQ

Diviを更新する必要がありますか、それともWordPress 5.0にアップグレードする必要がありますか？

グーテンベルクや新しいDiviBuilder Experienceの準備ができていない方は、心配しないでください。

WordPress 5.0に更新する必要はありませんが、更新する場合は、WP5サポートに含まれているすべての互換性修正のためにDiviも更新する必要があります。
したがって、Diviを今すぐ更新する必要がない場合は、WordPressも今すぐ更新する必要はありません。

更新はどのような順序で実行する必要がありますか？

特定の順序で行う必要はありませんが、WordPress 5.0を更新する場合は、Diviを確認して更新する必要があります。

新しいDiviエクスペリエンスは古いバージョンのWordPressでどのように機能しますか？

ただし、以前と同じように、最新のDiviには、バックエンドにNew Divi Builderが含まれており、かつてはVisualBuilderでしか利用できなかったすべての新機能が含まれています。

バグはどうですか？

グーテンベルクがもたらす重要な変更の性質により発生したバグを積極的に監視しており、可能な限り安定するようにバグ修正リリースを（基本的には毎日）リリースしています。

Gutebergがここにあるので、Visual Builderを使用する必要がありますか？

いいえ、これで、以前はVisualBuilderでしか利用できなかったすべての新機能が付属する新しいDiviBuilderをバックエンドで使用できます。
（上記を参照：WordPress5.0を使用してバックエンドで新しいDiviBuilderをアクティブ化する方法（推奨される方法））

古い（おなじみの）古典的なDiviバックエンドビルダーはどこにありますか？

バックエンドの新しいDiviBuilderには、Classic Divi Builderの使い慣れた機能と感触に加えて、すべての「VisualBuilder」タイプの機能などがあります。ただし、新しいDivi Builderを使用すると、バックエンドページエディタからいつでもClassic DiviBuilderに戻すことができます。

（上記を参照：Classic Divi Builderに戻す）

グーテンベルクとディビビルダーを同時に使用できますか？

どちらも「ページビルダー」であるため、どちらかを選択する必要があります。ただし、Gutenberg内でお気に入りのDiviモジュールを使用したり、Divi Builder内で登録済みのGutenbergブロックを使用したりできる、エキサイティングな統合（近日公開）に取り組んでいます。

最終的な考え

グーテンベルクの発売だけでも、ほとんどの人にとって少し圧倒されます。私たちがよく知っているWordPressページエディターは完全に異なります！しかし、ありがたいことに、新しいDivi Builderエクスペリエンスのリリースは、グーテンベルクとスムーズに統合され、使い慣れたUIを維持することができます。また、バックエンドで利用できるすべての強力な機能により、DiviBuilderはこれまでになく高速で信頼性が高くなっています。

以下のコメントで、グーテンベルクとの新しいDiviBuilderエクスペリエンスについてのご意見をお待ちしております。

乾杯！