今天要來聊聊怎麼在 WordPress 網站上使用 Javascript 和 CSS,雖然 WordPress 網站主打不會寫程式也能建立一個網站,但是如果我們想要添加個性化或是加上 Google 廣告或是行銷代碼的話,學會如果在 WordPress 網站上添加 JS 和 CSS ,還是十分有用的。
例如,在網站上放置 Google Adsnese 並賺取廣告的被動收入。又或是使用 Google Analytics 代碼或 Facebook Pixel 代碼在我們的 WordPress 網站來追蹤使用者行為和再行銷活動。
又或是你是經營聯盟行銷網站,在網站中放置快速轉址的 Javascript 程式碼,以獲得更高的轉換機會。
總之,經營網站一定要學會怎麼在網站上放置 Javascript 和 CSS 並管理它們,當中方法很多,如果你和大叔一樣是使用 Elementor Pro 的話,那 Elementor Custom Code 是 Elementor 專業版中的一個功能,讓我們最簡單快速的方法放置程式碼並管理它們。
延伸閱讀:
Elementor 簡介
如果你正在打造自己的 WordPress 網站,但不想花費大量時間和金錢聘請開發人員,那麼你絕對需要了解 Elementor 這個 WordPress 插件。
Elementor 可以讓你快速而簡單地創建專業而美觀的網站,它的三大特點:
此外,在最新的統計中,Elementor 是最受歡迎的 WordPress 網頁編輯工具,例如說:
以下是 Elementor 的一些特點:
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 都對在這條路上走得更長更遠。