掌握自由創作：透過Elementor Custom Code在 WordPress 網站上自由添加個性化的JS和CSS

今天要來聊聊怎麼在 WordPress 網站上使用 Javascript 和 CSS，雖然 WordPress 網站主打不會寫程式也能建立一個網站，但是如果我們想要添加個性化或是加上 Google 廣告或是行銷代碼的話，學會如果在 WordPress 網站上添加 JS 和 CSS ，還是十分有用的。

例如，在網站上放置 Google Adsnese 並賺取廣告的被動收入。又或是使用 Google Analytics 代碼或 Facebook Pixel 代碼在我們的 WordPress 網站來追蹤使用者行為和再行銷活動。

又或是你是經營聯盟行銷網站，在網站中放置快速轉址的 Javascript 程式碼，以獲得更高的轉換機會。

總之，經營網站一定要學會怎麼在網站上放置 Javascript 和 CSS 並管理它們，當中方法很多，如果你和大叔一樣是使用 Elementor Pro 的話，那 Elementor Custom Code 是 Elementor 專業版中的一個功能，讓我們最簡單快速的方法放置程式碼並管理它們。

延伸閱讀：

• #6 不要害怕廣告：新手必學的 Google AdSense 操作指南
• #7 聯盟行銷計劃：3 步驟成為網路賺錢達人！
• #17 Elementor Pro 教學：2023 最完整實戰指南

Elementor 簡介

如果你正在打造自己的 WordPress 網站，但不想花費大量時間和金錢聘請開發人員，那麼你絕對需要了解 Elementor 。

Elementor 可以讓你快速而簡單地創建專業而美觀的網站，它的三大特點：

• 「拖放式 (Drag and Drop)」編輯介面 ：簡單易操作，讓任何人都能夠輕鬆設計和編輯網頁。
• 不需要具備程式設計能力：Elementor 將想得到的功能都設計成元素，直接「拖放」就能使用。
• 網上最多模板和教學資源支援 ：使用 Elementor 模板和範本讓我們站在巨人的肩膀上。你可以在網路上找到任何關於 Elementor 的問題和教學，省下大量解決問題的時間。

此外，在最新的統計中，Elementor 是最受歡迎的 WordPress 網頁編輯工具，例如說：

• 平均每 10 秒創建一個網站
• Elementor 是一個開源的平台
• 自 2016 年推出，至今已擴展到 180 多個國家/地區
• 超過 5,000,000 次活躍安裝
• WordPress 網站 超過 5000 條五星級評論
• Elementor 在 2022 年超過了 1200 萬的使用者，佔全球球網路的近 8%。

以下是 Elementor 的一些特點：

• 優秀的性能：Elementor 能夠快速載入，不會讓你的網站變得緩慢。
• 大量模板可用：Elementor 提供了豐富的模板庫，涵蓋各種類型的網站，你可以根據自己的需求進行選擇，而且每個模板都可以進行自定義。
• 無需程式背景：Elementor 的編輯界面簡單易用，讓你可以輕鬆設計和修改網站的外觀和功能，而且不需要任何程式設計知識。
• 免費和付費版本：Elementor 提供了免費和付費兩個版本，免費版本已經足夠使用，但付費版本可以提供更多功能和模板。
• 網上大量免費學習資源：Elementor 是最受歡迎的 WordPress 編輯工具，超過 800 萬網站使用，可以在網路上找到大量的學習文章。例如：
• Elementor頁面編輯器愛好者討論區：https://www.facebook.com/groups/tw.elementor/?locale=zh_TW
• WordPress 社群生態普查與研習 – 網站迷谷：https://www.facebook.com/groups/wp.valley/

Elementor 是基於 WordPress 開放系統下的網頁編輯工具軟體，可以從 Loading Page 到電子商務網站等幾乎所有網頁應用中使用，是大叔最喜歡且常使用的編輯器之一。

Elementor 的強大功能和簡單易用的編輯界面，讓它成為了最受歡迎的 WordPress 編輯工具之一，無論你是新手還是有經驗的網站開發者，都可以輕鬆使用它來打造出美觀而實用的網站。

▼ Elementor 網頁編輯器影片 – 由 Elementor 提供

Elementor Custom Code 是什麼?

Elementor Custom Code 是 Elementor Pro 中的一個功能，它允許用戶將自定義的 CSS 和 JS 程式添加到他們的 WordPress 網站中，從而實現更多的自由創作。

使用 Custom Code，用戶可以輕鬆地添加 Google Analytics 代碼、Facebook Pixel 代碼、廣告代碼等，並將其分配到他們想要的位置。

Custom Code 為用戶提供了更多的靈活性和創造力，使他們可以打造出更具個性化的網站。

在本文中，我們將介紹如何使用 Elementor Custom Code，並提供最佳實踐和技巧，幫助讀者提升網站設計能力和創意表現。

Elementor Custom Code 功能允許用戶在 WordPress 網站中添加自定義的 CSS 和 JS 代碼，從而實現更多的自由創作和個性化設計。Custom Code 為用戶提供了一個編輯器，用戶可以在其中添加任意的代碼片段。

如何使用 Custom Code 編輯器設定 JS 程式

進入 Custom Code 編輯器非常簡單。在 WordPress 的後台管理界面中，選擇 Elementor > Custom Code，即可進入 Custom Code 編輯器。在編輯器中，用戶可以添加 CSS 和 JS 代碼，並將其分配到他們想要的位置。

Step.1 新增自定義的 JS

從後台找到 Elementor 的下拉選擇點擊「Custom Code」，然後點擊上方「ADD NEW」。

Step2. 添加自定義的 JS ( 以 Google Adsense 為例)

以 Google Adsense 的廣告 JS 程式為例，將程式置於網頁中就會出現廣告，並獲得廣告分潤。

將程式複製貼上到中間的框框裡，然後選擇放置的位置。好了後，點擊發佈。

Step3. 設定顯示位置

點擊發佈後，會出現 Publish Settings 的跳窗，問我們程式要出現在網站什麼地方。我們可以選擇「整個網站」，也可以調整成只出現在某些文章或是頁面中。

最後不要忘記回到網站看看有沒有出現設定好的 JS 程式。

如何使用 Custom Code 編輯器設定 CSS

使用方法和 JS 相似，只是我們在中間的編輯框中加入

，在 Custom Code 編輯器中，就可以添加 CSS 片段。

▼ 由 Elementor 提供

一樣完成 Custom Code 編輯器的設定後，可以在 Publish Settings 選擇出現的位置。

其實，如果你是 WordPress 的老手，應該會知道在網站中，設定 CSS 的方式不只有一種，我們也透過「外觀 → 自訂」的附加的 CSS 的功能，添加 CSS 代碼。

而 Custom Code 編輯器可以將不同的程式分開，細微地調整位置和出現在網站的任何地方。

大叔總結 & 心得

最近學習使用 JS 並運用在 WordPress 網站上，並發現 Elementor Custom Code 好用之處。總之

它允許用戶將自定義的 CSS 和 JS 代碼添加到他們的 WordPress 網站中，從而實現更多的自由創作。

而且十分方便的管理幫助我們更好地運用它來打造出更具個性化的網站。

在本文中，我們介紹了如何使用 Elementor Custom Code，並提供了最佳實踐和技巧，幫助讀者更好地運用它來打造出更具個性化的網站。學習 JS 可以開發出更多創意的網站設計方式，也可以讓整個網站的體驗更好。

希望大家在學習網站設計，同時也多認識 CSS 和 JS 都對在這條路上走得更長更遠。