Editor X：サイトにカスタム要素を追加する | サポートセンター

少々お待ちください...

Editor X：サイトにカスタム要素を追加する

読了時間：5分

Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について

カスタム要素を使用して、独自のデザイン機能と CSS 機能でサイトを強化しましょう。カスタム要素をサーバー URL または Velo ファイルにリンクすることで、任意の JavaScript コンポーネントを追加できます。必要に応じて、Editor X からさらに多くの属性を直接設定できます。

始める前に：

サイトに Editor X 広告が表示されないプレミアムプランと接続済みドメインがあることを確認してください。詳細はこちらをご覧ください。

カスタム要素を使用すると、Editor X サイトで独自の HTML タグを使用できます。これらの要素は、サポートされているすべてのブラウザで動作し、HTML 5 で動作する任意の JavaScript ES6 ライブラリまたはフレームワークで使用できます。

便利なカスタム要素の例

コード要件

ヒント：

サイトに必要な数だけカスタム要素を追加します。カスタム要素をページにドラッグした後、ソース（サーバー URL または Veloファイル）を定義して、ページレジストリに表示するタグ名を付けます。（英語のみ）

こちらをクリックして手順を確認しましょう

要素設定パネル

を使用すると、サイズ、ドッキング、配置などを調整できるので、すべてのブレイクポイントでカスタム要素を綺麗に見せることができます。

注意：

デフォルトでは、カスタム要素はページの customElements レジストリに表示されます。カスタム要素に入力するタグ名は、このレジストリでの名前を定義します。

HTML 属性を設定して、要素のプロパティと動作をさらに調整します。パーツの属性パネルでは、Editor X から直接属性を追加、編集、削除できるため、実際のコードにアクセスする必要はありません。

こちらをクリックして手順を確認しましょう

重要：

カスタム要素のコードは、定義された属性を認識し、処理する必要があります。そうでない場合、正しく機能しません。

下記は、サイトに基本的なカスタム要素を追加する例です。この手順では、サイトに " Hello World " というテキストを追加する方法を説明しています。

まず、要素とその動作を JavaScript ファイルに作成し、コード化する必要があります。

こちらをクリックして手順を確認しましょう

次に、カスタム要素のクラスを定義します。

この例では、HelloWorld として定義し、カスタム要素を登録するときにも同じ名前を使用します。以下の connectedCallback() 関数は、要素が DOM に貼り付けられたときに自動的にトリガーされるライフサイクルコールバック関数です。

1class HelloWorld extends HTMLElement { connectedCallback() { this.innerHTML = 'Hello World!'; } } customElements.define('hello-world', HelloWorld);

カスタム要素クラスを定義したら、customElements.define(name, class) メソッドに登録します。

サイトにカスタム要素を追加する際、登録した名前をタグ名として入力します。登録すると、サイトでカスタム要素を使用できます。

1CustomElementRegistry.define('hello-world', HelloWorld);

詳細情報：

Velo by Wix でこの要素を使用する方法はこちらをご覧ください。（英語のみ）

この記事では下記を説明します：