搜尋
Close this search box.

全站式加入jQuery語法(可含CSS)

索引
全文

Elementor單頁加入jQuery語法的方法已經介紹過了,再來另一種需求就是想要在每一頁執行同一段jQuery程式的話,應怎樣來插入jQuery程式碼?

這邊就列出4個方式,一般會以方式4為主 :

方式1 : 在Elementor中的head或footer模版插入

如果你已經有用Elementor的模版設計來製作head與footer,因為head與footer裡面的內容本就是預套用到全站,所以在head或footer裡面拉一個html工具再置入jQuery語法,這樣就會讓jQuery效果自動在每一頁出現了。

這個方式就不再多截圖說明了,如果你仍不知怎樣用Elementor設計head與footer,請先去參考Elementor模版設計的單元。

方法2 : Elementor Pro版

Elementor Pro版本身就內建可以埋設全站式javacript或jQuery的功能。如下圖路徑 :

方法3 : 使用外掛「Header Footer Code Manager」

使用外掛「Header Footer Code Manager

安裝後如下圖插入代碼 :

這個外掛還有一些選擇性功能,可以指定某些頁面或文章排除或單獨埋入程式碼。

另想埋入全站式的CSS,須將CSS用<style>…</style>包起來才行喔!

但是你若是網站新手或是代操廣告的投手,想純單埋入GA、FB廣告像素、Google廣告追蹤碼、GTM等等任何的javacript或jQuery代碼,就可以單純使用此外掛,以求簡易方便快速。

方法4 : 使用外掛「Code Snippets」(推薦)

 使用外掛「Code Snippets」來埋設全站式代碼是最彈性也是我最推薦的方式,因為還可以順便埋入全站式的CSS,這樣就不用在「佈景主題/自訂」中寫CSS,這個外掛可以讓你統一管理全站式的自加語法,非常方便!

外掛「Code Snippets」最主要用途是用來自訂function PHP,但要順便用來埋設全站式的jQuery與CSS,也不成問題。

▼如下圖新增一個片段程式碼,再貼上範例程式碼即可自行修改。

▼把下面語法複製貼上

				
					add_action( 'wp_head', function () {
 ?>
<!-------------------------------------->
 
<script>
( function($) {
$(window).load(function() {
//======================================

//在這裡寫jquery語法....
	alert("HELLO smallway.com.twP");

//======================================
}); //end load
})(jQuery);
</script>

 
<script>
( function($) {
$(window).load(function() {
//======================================

//也可以放2次以上的javacript(jQuery)標籤區域
	alert("做網站請找小訣行銷工作室!");

//======================================
}); //end load
})(jQuery);
</script>


<style>

	/* 在這裡撰寫網站專屬 CSS 程式碼 */
	div{
		font-size:28px;
	}

</style>


<style>

	/* CSS也可以用新的<style>來另產一個區,以做區隔*/
	h1{
		font-size:28px;
	}

</style>


<!-------------------------------------->
<?php
 } );
				
			

不要被我這串多行範例嚇到,我只是中間多複製了幾次,讓你知道中間是可以反覆用新的<javacript>或<style>來增加的,以便在幫不同地方寫語法時可以有一個區隔的作用,也可以適時加上註解。

你就複製下來貼上,然後在我有特別用線條包住的範圍中寫代碼即可,就絕對不會出問題!

埋好後,可以列表式管理自己加入的任何種類語法,在debug網站異常時也可以一鍵停用所選中的語法。

總結 :

以上的方式,任何一種都可以也用來埋設Adsense、GA、FB廣告像素、Google廣告追蹤碼、GTM等等任何的javacript或jQuery代碼,但習慣偏愛方法4,因可以連全站式CSS也順便埋入,而且很好管理。

有問題嗎?歡迎於下方發問

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

下一首

Line的不良影響

我個人並不很喜歡用Line,因當我一句訊息回覆後,馬上對方又一句回來,如此往返下去則半小時、一小時就過去了,我無法專心工作,除非是正式諮詢或安排會議的討論,才適合這種模式

有時候對方的問題很多很雜,一傳就是十幾封訊息,這就是訊息轟詐了,我就不知從何回起,我就會只回最後一封的訊息。

有時候對方的問題很多還加上數張截圖,因Line無法條列式呈現,我也無法增加腦力去判斷哪張圖要對應哪則訊息,所以我就會只回最後一封的訊息。

另我不喜歡私人Line被直接來電,因我常常在國道開車需要導航,有時因加班在補眠,這些都會不良干擾。

不是正式會議的討論階段,請您用Email,Email可以條列方式呈現多則問題與截圖,也可以讓我先已讀後再慢慢思考怎樣回覆,避免我自己不小心已讀不回造成對方不佳的感受。🙏 - Wiktionary, the free dictionary

哈囉,在加Line好友之前請先確認一下幾點 :

1、若您是上課的學員或讀者,請直接用Email發問或在該篇文章留言發問,盡量不要直接加Line發問,因我平常很忙,無法守在Line前與您一句一句訊息對答,若每一期 + 每個學員都加Line課後詢問,我短時間內回不完這麼多訊息也會回得很慢喔 ,請見諒。(用Email發問,我會仔細條列說明,你會得到更完整的圖文回覆,甚至還會附上小影片解說。)
Email : [email protected]

2、若是網站外包詢價相關,您再加Line,因我可能需要與您語音會議或遠端連線。

3、補充說明 : Line的不良影響

以上。

目前線上有 3 個使用者: 0 個成員0 個訪客3 個檢索機器人

線上同時最多使用者人數為 91 個使用者,發生於 2024-01-1423:41

3 個檢索機器人 正在線上

#1 – NBot 於 2024-02-2908:55
架站勤拿手 » » 全站式加入jQuery語法(可含CSS) [網址]

#2 – NBot 於 2024-02-2908:55
架站勤拿手 » » 如何讓Elementor Pro的Post文章列表可以使用不重新載入頁面的方式來切換分頁? [網址]

#3 – NBot 於 2024-02-2908:54
架站勤拿手 » » 如何讓表單的月曆上的日期,「今日與過去」的日期統統不能選呢? [網址]