Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. Wix エディタ
  3. その他
    4. Wix エディタ：サイトにカスタム要素を追加する

Wix エディタ：サイトにカスタム要素を追加する

読了時間：6分
カスタム要素を使用して、可視コンテンツをサイトに追加し、追加の CSS 機能を持つ要素をデザインしましょう。
この記事では、下記の項目について説明します：
重要：
Wix で作成またはテストされていない外部コードに関するサポートは提供しておりません。コードスニペットに問題が発生している場合は、プロバイダに直接お問い合わせください。

カスタム要素とは？

カスタム要素を使用すると、Wix サイトで使用できるカスタム HTML タグを作成できます。カスタム要素は、Wix でサポートされているすべてのブラウザで動作し、HTML 5 で動作する任意の JavaScript ES6 ライブラリまたはフレームワークで使用できます。
下記を実行する場合はカスタム要素を使用してください：
  • Wix エディタの「追加」パネルまたはアプリからまだ利用できない独自の要素をデザインする。
  • CSS アニメーション、カウントダウンアニメーション、パンくず、ツールチップ、タグ、グラフ、引用符、カーソルの変更、スクロールの操作など、追加の CSS 機能を持つ要素をデザインする。
  • ページ上の衝突を避けるなど、要素の高さを動的に変更する。
  • パフォーマンスを改善する。（iframe ベースのコンポーネントと比較して）これは、カスタム要素の実装に大きく依存します。
注意：
サードパーティのソースからのカスタム要素を使用できます。カスタム要素をページに追加する際は、「プロパティ」の「タグ名」を更新してください。

カスタム要素を追加する

  1. エディタ左側で「パーツを追加」 をクリックします。
  2. 「埋め込みコード」をクリックします。
  3. カスタム要素をクリックして、ページに追加します。
  4. 「ソースを選択」をクリックします。
  5. 「サーバーの URL」を選択し、ファイル名を含む URL を入力します。
    注意：Velo を使用している場合、「Velo ファイル」をクリックしてください。
  6. 「タグ名」を入力します。
注意：
すべての要素は、ページの custom elements レジストリ（カスタム要素レジストリ）で定義する必要があります。タグ名は、要素の登録時に使用した名前です。タグ名は、JavaScript ファイルの customeLements.define () 行にあります。

カスタム要素の属性を設定する

重要：
属性はまだ一部のユーザーしかご利用いただけません。
カスタム要素の DOM node で HTML 属性を定義します。カスタム要素のコードで、これらの定義済み属性を確認して処理するコードを追加してください。
  1. カスタム要素上で「属性を設定」をクリックします。
  2. 「新しい属性」をクリックします。 
  3. 「rotation」や「width」など、属性に名前を付けます。
  4. 属性の値（45 など）を割り当てます。
注意：
カスタム要素の HTML 属性を編集および削除することもできます。

ガイドラインと制限事項

  • セキュリティ上の理由から、カスタム要素を使用するには、サイトをプレミアムプランにアップグレードし、ドメインを接続し、広告を非表示にする必要があります。
  • コードには HTTP ではなく、HTTPS が含まれていることを確認してください。コードに HTTP が含まれている場合、ライブサイトでは表示されません。
  • JavaScript コードにはページのコア要素が含まれていますが、デザイン設定やその他の複雑な機能は別々に保存される場合があります。そのため、関連する要素がメインの JS コード（CSS や他の JS ファイルなど）に含まれていない場合、一部の要素は機能しないか、同じように見えます。
  • 常にコードが最新であり、HTML5 と互換性があることを確認してください。ほとんどのブラウザは、古いバージョンの JS または HTML を使用して記述されている場合、ページとスクリプトを正しく表示しません。 
  • SEO は Velo API を使用して個別に定義できます。
  • パフォーマンスは、カスタム要素自体の実装によって異なります。
  • Velo を使用していない場合は、カスタム要素コードをご自身でホストしている必要があります。（英語のみ）
重要：
セキュリティ上の理由から、カスタム要素は、エディタ内およびプレビューモードの iFrame 内でレンダリングされます。これは、コンポーネントのレイアウトに影響を与える可能性があります。ライブサイトにアクセスして、実際のライブサイトでどのように表示されているかを確認しましょう。また、テストサイトをライブサイトプレビューとして使用することもできます。

カスタム要素の例

下記は、サイトに基本的なカスタム要素を追加する例です。この手順では、サイトに「Hello World」というテキストを追加する方法を説明しています。
まず、要素とその動作を JavaScript ファイルに作成し、コード化する必要があります。
注意：
サイトをプレミアムプランにアップグレードし、ドメインを接続し、Wix ブランド広告を削除する必要があります。

カスタム要素を追加・作成する方法：

  1. カスタム要素のサーバーを設定するか、サーバーへのアクセスを取得します。独自のサーバーを使い外部でホストする場合は、カスタム要素を Wix エディタに追加するときに、カスタム要素をサーバー URL に接続する必要があります。
  2. 任意の IDE を使用し、標準 ECMAScript 2015 クラス構文を使用して Javascript ファイルにカスタム要素を作成します。詳細な手順と例については、MDN ドキュメンテーションをご覧ください。
  1. カスタム要素のクラスを定義する
    • HelloWorld クラスは、カスタム要素を登録するときに使用するカスタム要素のクラスです。
    • connectedCallback()は、要素が DOM にアタッチされた時に、自動的にトリガーされるライフサイクルコールバック関数です。
1class HelloWorld extends HTMLElement {
2  connectedCallback() {
3    this.innerHTML = '<br/><br/><br/>Hello World!';
4  }
5}
6customElements.define('hello-world', HelloWorld);

  1. カスタム要素クラスを customElements.define(name, class) メソッドに登録します。エディタで、カスタム要素をサイトに追加する際に、タグ名として登録名を入力します。一度登録すると、カスタム要素をサイトで使用することができます。

    • 最初のパラメータ hello-world は、エディタで定義されるタグ名にマップされます。（手順 8）
    • 2 番目のパラメータ HelloWorld は、カスタム要素のクラス名です。
1CustomElementRegistry.define('hello-world', HelloWorld);
  1. エディタにカスタム要素を追加します。（上記参照）
  2. 「設定」をクリックします。
  3. 「サーバーの URL」を選択し、カスタム要素スクリプトファイルのサーバー URL を入力します。
  4. タグ名を入力します。タグ名は、前の手順で define() 関数を使用して登録した要素名に対応します。この例のタグ名は hello-world です。
  5. サイトを保存して公開します。
詳細情報：
ヒント：
  • すべてのページにカスタム要素を表示します。
  • 画面に固定を使用して、スクロールしてもカスタム要素が表示されるようにします。または、カスタム要素コードで CSS fixed（固定）配置要素を使用することもできます。

お役に立ちましたか？

|

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

  • カスタム要素とは？
  • カスタム要素を追加する
  • カスタム要素の属性を設定する
  • ガイドラインと制限事項
  • カスタム要素の例