Divi 5 はショートコードに別れを告げます。なぜそれが重要なのか

Divi は長い間、最も強力で多用途な WordPress テーマの 1 つと考えられてきました。 Divi 5 の導入により、私たちは状況を大きく変えています。 Divi の以前のバージョンでは、ショートコード (コードの小さなスニペット) が Divi のデザイン モジュールのプレースホルダーとして機能し、Visual Builder がバックエンド コマンドを通じて複雑なレイアウトやスタイルを生成できるようにしていました。

Divi 5 のリリースにより、ショートコードはなくなり、フレームワークを根本から完全に書き直しました。この投稿では、Gutenberg ブロックと同様に構築された Divi の新しいフレームワークがどのようにしてこれまでよりも効率的かつ強力になっているのかを探っていきます。

Divi 5 パブリック アルファとそのダウンロード方法について詳しくは、こちらをご覧ください。

Divi 5 パブリック アルファをダウンロード

ショートコードとは何ですか?

ショートコードは、ユーザーが長い形式のコードを必要とせずに、複雑なコンテンツや機能を Web サイトに簡単に追加できるように設計されました。たとえば、フォーム全体や画像ギャラリーを HTML や CSS で手動でコーディングする代わりに、ユーザーは[ gallery ]のようなショートコードを挿入できます。そうすれば、ページがレンダリングされるときに WordPress が必要な要素を自動的に生成します。

ショートコードの背後にある考え方は、WordPress をよりユーザーフレンドリーにすることでした。これらの短いスニペットはカスタム関数を実行し、カスタム要素をレンダリングすることができ、Web サイト全体で簡単に再利用できます。

Divi が過去にショートコードをどのように使用したか

Divi は、WordPress のネイティブ ショートコード システムを使用してビルダー要素を整理し、各ショートコードがより大きなデザインの単一の構成要素のように機能しました。

たとえば、ユーザーがビジュアル ビルダーにボタンを追加すると、舞台裏で Divi がそのボタンのすべてのプロパティ (色、サイズ、境界線の半径など) を定義するショートコードを挿入します。これにより、ユーザーは次のことが可能になります。素晴らしいレイアウトを構築しますが、Divi は舞台裏でショートコードをスタックして各要素を定義し、レンダリングします。

Divi を無効にし、Divi Builder で作成したページにアクセスしたことがある場合は、以下のショートコードを目にしたことがあるでしょう。

Divi 5 でショートコードから離れた理由

WordPress はショートコードを廃止し、ブロックを採用しています。それだけの理由で、Divi は必然的に非推奨となるショートコードへの依存を放棄する必要があります。 Divi 4 は過去に生きていますが、Divi 5 は未来のために作られています。しかし、移行する理由は他にもあり、それは Divi ユーザーに大きな利益をもたらすでしょう。

パフォーマンスの向上

1 つ目の理由はパフォーマンスです。ショートコードで構築されたページの解析は、適切な階層がないため効率が低くなります。 Divi が大量のショートコード コンテンツの文字列を取得してそれを理解するのに時間がかかるだけです。さらに、WordPress がショートコード コンテンツをレンダリングする速度には、まだ不十分な点があります。 Divi 4 はこのシステムを限界まで押し上げています。

汎用性の向上

2 番目の理由は多用途性です。ショートコードは、複雑な入れ子になったデザイン システムの一部として想定されていませんでした。 Divi 4 は、セクション内の行内の列内にモジュールをネストするときに問題を回避するためにフープを飛び越える必要があり、列内に列などのネスト可能性をさらに追加すると、まったく新しいワームの缶が開かれます。 Divi 5 は、要素を無限にネストできる新しいストレージ形式でこの問題を解決しました。

安定性の向上

3 番目の理由は安定性です。 API としてのショートコードには制限があります。複雑なデータを保存するために中括弧と属性が使用されるということは、1 つのルージュ文字がシステム全体をクラッシュさせる可能性があることを意味します。 Divi 5 では、問題が発生する可能性が少なくなるため、バグも少なくなります。

相互互換性の向上

4 番目の理由は、相互互換性です。 Divi 5 の新しいストレージ形式は WordPress のネイティブ ブロックを模倣しており、Divi と Gutenberg の相互通信が容易になります。

これは大きな変化でした。最初からやり直さなければなりませんでした！しかし、それはDiviの長期的な存続にとって非常に重要です。

ブロックベースのビジュアルビルダーシステムへの移行

より現代的なアプローチの必要性を認識し、Divi 5 はショートコードから離れ、WordPress の将来に合わせたブロックベースのアプローチを採用しました。 Divi 5 はショートコードに依存するのではなく、WordPress のブロックベースのアーキテクチャを模倣しています。 Divi 5 でのショートコードの削除は、Divi をより速く、より柔軟に、より使いやすくするための大きな取り組みの一環です。古いフレームワークを排除することで、Divi 5 は大幅なパフォーマンスの向上を実現します。

柔軟性の点で、Divi 5 はよりダイナミックでスケーラブルなサイト構築機能を可能にします。この最新の新しいフレームワークは簡単に拡張でき、より複雑な機能と統合できますが、Divi 4 のショートコードベースのフレームワークでは不可能です。

既存の Divi ウェブサイトへの影響は何ですか?

多くの長年の Divi ユーザーにとって最も差し迫った疑問は、Divi 4 で構築された既存の Web サイトはどうなるのかということです。幸いなことに、私たちはこれを計画していました。 Divi 5 は新しいサイト構築でショートコードを排除しますが、既存の Web サイトは影響を受けません。

Divi 5 には、すべての Divi 5 ショートコードを Divi 5 ブロックに変換する移行ツールが付属しています。ボタンをクリックするだけで簡単です。

Divi 5 は下位互換性も考慮して設計されており、移行前でも Web サイトが正常に機能し続けることが保証されます。 Divi 5 がレガシーショートコードを検出した場合、そのコンテンツが適切に移行されるか、サードパーティモジュールが Divi 5 をサポートするように更新されるまで、下位互換性モードで実行されます。

Divi 5: より高速、よりクリーン、より柔軟に

Divi 4 のショートコードベースのフレームワークを削除することは、大きな前進です。

違いを自分で体験してみませんか?今が Divi 5 Alpha をテストし、その最大の変更点を理解するのに最適な時期です。バグを見つけて Divi 5 の最終バージョンをさらに改善するためにご協力ください。

Divi 5 Alpha はローカルまたはステージング サイトでのみテストしてください。この段階では、特に移行中に多くのバグに遭遇する可能性があります。バグテストフェーズに参加したくない場合は、後で参加してください。