header-logo
了解如何以 Wix 建立網站和商家。
了解如何建立、管理並維護 Wix 網站。
管理訂閱、方案與請款單。
處理業務，與會員連繫。
學習如何購買、連結或轉移網站網域。
以進階功能提升效率。
尋求解決方法，了解已知問題，或聯絡我們。
placeholder-preview-image
以課程和教學加強技能。
學習網頁設計、行銷等範疇的秘訣。
學習如何提升來自搜尋引擎的自然網站流量。
以全端平台建立自訂網站。
與專家配對，幫助實現目標。
placeholder-preview-image
  1. 首頁
  2. 建立網站
  3. 使用 Wix 編輯器
  4. 新增進階元件
  5. Wix 編輯器：為網站新增自訂元件

Wix 編輯器：為網站新增自訂元件

3 分鐘
使用自訂元件為網站新增可見內容，並利用額外的 CSS 功能設計元件。
重要：
我們無法為非 Wix 建立或測試的外部程式碼提供支援。若程式碼片段發生問題，請直接聯絡提供商。

什麼是自訂元件？

自訂元件可讓您建立自訂 HTML 標籤，並在 Wix 網站上使用。自訂元件適用於所有 Wix 支援的瀏覽器，且可與任何支援 HTML 5 的 JavaScript ES6 程式庫或框架搭配使用。
您可能需要使用自訂元件來：
  • 設計 Wix 編輯器「新增」面板或應用程式中尚未提供的專屬元件。
  • 設計具有額外 CSS 功能的元件，例如 CSS 動畫、倒數動畫、階層連結、工具提示、標籤、圖表、引言、游標變更和捲動互動。
  • 變更發佈網站上的元件高度，例如為了避免頁面上的版面配置衝突。
  • 提升表現（與基於 iframe 的組件相比）。這在很大程度上取決於自訂元件的實作方式。
請注意：
您可以使用來自第三方來源的自訂元件，只需在將自訂元件新增至頁面時，確保更新屬性中的標籤名稱即可。

新增自訂元件

  1. 點擊 Wix 編輯器左側的新增元件。
  2. 點擊內嵌程式碼。
  3. 點擊「自訂元件」即可將其新增至頁面。
  4. 點擊選擇來源。
  5. 選擇伺服器網址並輸入包含檔案名稱的網址。
    請留意：若使用 Velo，可點擊Velo 檔案。
  6. 輸入標籤名稱。
Wix 編輯器「新增元件」面板中的內嵌索引標籤。游標正浮動在自訂元件選項上。
請注意：
所有元件都必須在頁面的自訂元件註冊表中界定。標籤名稱是註冊元件時使用的名稱。您可以在 JavaScript 檔案中的 customElements.define() 行找到標籤名稱。

設定自訂元件屬性

重要：
屬性目前尚未開放給所有使用者使用。
界定自訂元件 DOM 節點上的 HTML 屬性。請務必在自訂元件的程式碼中加入程式碼，以辨識並處理這些界定的屬性。
  1. 點擊自訂元件上的設定屬性。
  2. 點擊新增屬性。
  3. 為屬性命名，例如「rotation」或「width」。
  4. 指派屬性的金額，例如 45。
請注意：
您也可以編輯和移除自訂元件的 HTML 屬性。

指南與限制

  • 基於安全性考量，若要使用自訂元件，必須將網站升級至進階方案、連結網域並移除廣告。
  • 請確保程式碼包含 HTTPS 而非 HTTP，否則將無法在已上線網站中顯示。
  • JavaScript 程式碼包含頁面的核心元件，但設計設定和其他複雜功能可能會分開儲存。因此，若主 JS 檔案中未包含相關元件（例如 CSS 和其他 JS 檔案），部分元件的功能或外觀可能會有所不同。
  • 請務必確保程式碼為最新版本且符合 HTML5 標準。若使用舊版 JS 或 HTML 編寫，多數瀏覽器將無法正常顯示頁面和指令碼。
  • SEO 可使用 Velo API 另行界定。
  • 表現取決於自訂元件本身的實作方式。
  • 若未使用 Velo，則必須由您自行託管自訂元件程式碼。
重要：
基於安全性考量，自訂元件在編輯器和預覽模式下會於 iFrame 內轉譯。這可能會影響組件的版面配置。請前往已發佈的網站，查看其在已上線網站上的實際外觀。您也可以將測試網站作為已上線網站進行預覽。

自訂元件範例

以下是為網站新增基本自訂元件的範例。指示說明如何將「Hello World」文字新增至網站。
首先，您需要在 JavaScript 檔案中建立元件並編寫其行為程式碼。
請注意：
升級網站至進階方案，即可連結網域並移除 Wix 廣告。

建立並新增自訂元件：

  1. 為自訂元件設定或取得伺服器存取權。若在自己的伺服器上進行外部寄存，在 Wix 編輯器中新增自訂元件時，需要將自訂元件連結至伺服器網址。
  2. 使用任何 IDE，透過標準 ECMAScript 2015 類別語法在 Javascript 檔案中建立自訂元件。如需完整指示和範例，請參閱 MDN 文件。
  1. Define the custom element class:
    • The HelloWorld class is the class of the custom element, which we'll use when registering the custom element.
    • connectedCallback() is a lifecycle callback function that is triggered automatically when the element is attached to DOM.
1class HelloWorld extends HTMLElement {
2  connectedCallback() {
3    this.innerHTML = '<br/><br/><br/>Hello World!';
4  }
5}
6customElements.define('hello-world', HelloWorld);

  1. Register the custom element class with the customElements.define(name, class) method. In the Editor, enter the registered name as the tag name when adding the custom element to the site. Once registered, the custom element can be used on your site.

    • The first parameter, hello-world, maps to the tag name, which will be defined in the Editor (step 8).
    • The second parameter, HelloWorld, is the class name of the custom element.
1CustomElementRegistry.define('hello-world', HelloWorld);
  1. Add the custom element in your Editor (see above).
  2. Click Settings.
  3. Choose Server URL and enter the server URL for your custom element script file.
  4. Enter the tag name. The tag name corresponds to the element name we registered using the define() function in the previous step. The tag name in this example is hello-world.
  5. Save and publish your site.
正在尋找進階資訊？
提示：
  • 在所有頁面顯示自訂元件。
  • 即使在捲動時也能透過釘選至畫面顯示自訂元件。或者，也可在自訂元件程式碼中使用 CSS 固定位置元件。

這有幫助嗎？

|
在此文章中
  • 什麼是自訂元件？
  • 新增自訂元件
  • 設定自訂元件屬性
  • 指南與限制
  • 自訂元件範例

這有幫助嗎？

|