登入/註冊

架站勤拿手

滑鼠移至不同選單或元素時自動變換不同圖片

2022-08-05 2 則留言

前言

在選單或任意元素上做到滑鼠移上去右邊就自動切換對應的圖片。

運用範圍

菜單菜色、作品集、房屋物件等等。 

預覽效果

請將滑鼠移至左邊每一項目上，右邊圖片會跟替變化。

Google

微軟

weebly

WordPress

https://www.microsoft.com/zh-tw

實作方法

1、建立效果用的資料區

以本例而言，建一個段切左右兩欄，左邊放四個圖示方框，右邊置入四張圖片。

示意圖

2、加上css類別的命名

2.1 左邊每個項目(圖示方框)的”進階/css類別”填入「imenu」。

2.2 右邊每張圖的”進階/css類別”填入「showimg」。

3、貼上jQuery的code

在段的下方任意處拉一個”html”工具，並貼上下列的程式，存檔預覽即可見效果。

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

$(".showimg").css({
"position":"absolute",
"opacity":"0"
});

setTimeout(function() {
$(".imenu:eq(0)").trigger("mouseover");
}, 300)

$(".imenu").hover(function () {
var index = $(".imenu").index(this);
$(".showimg:eq("+index+")").css("opacity","1").siblings().css("opacity","0");
}
);//end hover
}); //end load
})(jQuery);
</script>

<style>
.imenu {
    cursor:pointer;
}
</style>

總結

這個方式若善加運用，也可以用在「主選單」的每個選項或特定選項，做出「大型選單」的效果，就不用另安裝Max Mega Menu之類的外掛了。

▼類似這樣滑鼠移至主選單就自動出現一個區塊的選單細項。

如何讓Elementor Pro的Post文章列表可以使用不重新載入頁面的方式來切換分頁？

2022-08-05 尚無留言

簡介

Elementor Pro的Post文章元素工具雖可以列出指定類型的文章列表，但點擊在其「文章列表分頁」時會重新載入該分頁的頁面，所以有些候想要點擊分頁時讓頁面不重新載入，以讓頁面不會跳動，增加閱讀舒適感。

(本文教學是for影片中的第一個效果)

運用範圍

只要是Elementor Pro 的Post工具都可以套用此法，我自己常運用在首頁有最新公告僅列出5則公告時，若想看更多的歷史公告，就可以用此法讓人點擊分頁時，首頁可不用重新載入就能把更多則公告載入進來。

範例

下方的文章列表，請點擊下方的「分頁」，測試一下網頁是否可以不用重新載入就能切換不同的分頁了。

▼這是經處理過的Elementor Post，點擊分頁時不會重新載入頁面。

如果上面範例有異常，可以點此另看一個範例。

點擊分頁時會停個1~3秒才出新的分頁內容，主要是它在重新以ajax方式重新索取資料，而這1~3秒主要取決於主機的回應速度。

▼以下是未經處理過的Elementor Post，點擊分頁時會重新載入頁面

原理與思路

要實現這樣的效果有很多種，例如可以靠「篩選器」的插件來組合出這樣的功能(即ajax載入)，而本篇主要講述不靠其它擴充外掛的方式，僅使用jQuery的「 load()方法」來達成這樣的效果，如果不懂load()方法沒關係，程式碼照貼就會有效果了。

實作

1、建立Post文章清單

跟平常一樣拉一個Post文章，並自己設定好樣式，必須打開「分頁」功能，然後在其設定/進階中設定一下CSS的id與類別的名稱為「frompost」，如下圖 :

2、置入程式碼

拉一個html工具，拖放至想要出現出現新的文章列表的地方，然後再貼上下列程式碼即可。

付費內容，需支付 : 個學習幣
您須先登入會員以使用學習幣與發問功能。

總結

這個做法主要是不靠外掛或不需太進階的程式技術來達成目的，如果無法接受這樣的方式，請勿購買此篇教學。

如何做出固定頁首後但且滾動頁面時logo圖移至左邊？

2022-08-03 尚無留言

簡介

當頁面往下滾動時，LOGO會自動移至左邊的效果，一般是少數佈景主題才會內建的效果，但在Elementor中我們也可以自行設計出來。

運用範圍

任何頁首(header)是用Elementor製作的網站都適用。

範例

如下圖，頁面一捲動則LOGO與選單的位置就產生變化。

如何做出固定頁首後但且滾動頁面時logo圖移至左邊？-1
範例網址

原理與思路

作法有多種，本篇的作法是預先製作2組header模版，然後再透過一點jQuery的捲動事件來控制切換。

實作

簡單分為幾個步驟:

1、使用Elementor Pro預先製作2組不一樣的header，並也調好響應式的版面。

2、套用全站每一頁。

3、加上片段jQuery與CSS偵側頁面滾動時就切換不同的header。

教學影片&程式碼

付費內容，需支付 : 700 個學習幣
您須先登入會員以使用學習幣與發問功能。

總結

這算是比較進階的作法，因須碰到jQuery片段程式碼，但上方教學已將個人經驗所筆記下來的程式碼整理出來，只要照做與貼上即可完成這樣的效果。

概說jQuery

2022-08-03 尚無留言

jQuery是一門前端程式語言，可以控制網頁上的元素節點的狀態、修改、變化等等，它是一門很深很廣的程式語言，但在WordPress中我們如果想結合jQuery來讓我們的頁面更加靈活有彈性，可以學一點點jQuery的「事件」來輔助，我想對想更客製化網頁而言有滿大的幫助!

就算不是工程師出身，但對jQuery只要先學習一些「事件」的控制，在Elementor中就滿可以應付多種情境了，不一定要學很深的jQuery。

CSS選擇器也要先熟一下，因為jQuery在控制網頁元素時，都必須先透過CSS的選擇器先去選中那個元素，然後再賦予它jQuery的程式碼來控制它。

賦予元素jQuery的程式碼可控制哪方面？例如

  • 有條件的隱藏或出現;
  • 更改裡面的字詞，如英文字改成中文詞，有局部翻譯的效果;
  • 控制點擊後的瀏覽動線或轉址;
  • 判斷是否登入來有條件切換元素或改變內容;
  • 還很多可能性….

我這裡會把之前用過「很常用」的jQuery筆記慢慢整理出來，若因此引發你jQuery的興趣，可以再去閱讀更多jQuery的相關資料。

補充一下，使用jQeury，不會對整個WordPress的主題、外掛的原始碼產生破壞或修改，所以以後在更新主題或外掛後，jQuery所寫出來的效果幾乎是不會更主題外掛更新就失效。

 

其它進階網路參考資料

滑鼠點擊小圖時自動變換不同大圖(2)

2022-08-03 尚無留言

簡介 :

點擊小圖時，就自動切換一張對應的大圖。(大小圖可以同一張或不同張)

運用範圍 :

主要是一些物件、商品有不同的規格時，例如顏色，一般可用在汽車展示、衣服展示等等。

範例 :

請將滑鼠點擊每一小圖，上方圖片會跟替變化。

示範圖片出處:豐田汽車

原理與思路 :

主要是一段jQuery來判斷目前是點到下方第n個小圖，同時就自動觸發上面大圖下方的切換黑點的第n個黑點，就達到了以小圖切換大圖的效果了。

 

實作 :

1、建立大圖資料區 : 「媒體輪播」

上方放拉一個「媒體輪播」，再把圖先上傳幾張，做基本高度調整(此例為450px高度)。

關閉自動輪播，並且打開分頁(切換黑點)。

播放效果可自行設定成幻燈片或淡化。

2、建立小圖資料區 : 「藝廊」

下方拉一個「藝廊」，並也先上傳幾張對應的小圖，數量應與上方大圖的數量一致且有相關性。

記得把「藝廊」的超連結拿掉，不然點擊後會把該張點擊的小圖放大檢視。

3、貼上語法

在小圖正下方或任意處拉一個「html」工具，貼上下列代碼，然後預覽網頁則立即達成效果了。

(使用click點擊事件)

				
					<!--小圖點擊同步上面大圖-->
<script>
( function($) {
$(window).load(function() {
$(".e-gallery-item").click(function(){
var n =   $(this).index(); 
$(".swiper-pagination span:eq("+n+")").click();   
})
}); //end load
})(jQuery);
</script>

如果要做對滑鼠移上去小圖就立即產生切換效果(不須點擊)，就改用下面這一個語法。

(使用hover事件)

				
					<!--媒體輪播小圖hover同步上面大圖-->
<script>
( function($) {
$(window).load(function() {
$(".e-gallery-item").hover(function () {
var n =   $(this).index(); 
$(".swiper-pagination span:eq("+n+")").click();   
})
}); //end load
})(jQuery);
</script>
如果不會在Elementor中插入自訂程式碼，請參考此篇

總結 :

Elementor 如果懂得用jQuery去活用的，它可以千變萬化的。

而jQuery只要先學習一些「點擊事件」的控制，在Elementor中就滿可以應付多種情境了，不一定要學很深的jQuery。

滑鼠點擊小圖時自動變換不同大圖(1)

2022-08-03 尚無留言

前言

點擊小圖時，就自動切換一張對應的大圖。(大小圖可以同一張)

運用範圍

作品集、房屋物件、家具展覽等等。

預覽效果

請將滑鼠點擊每一小圖，上方圖片會跟替變化。

https://adptt.com/
https://adptt.com/
https://0800happy.com/
滑鼠點擊小圖時自動變換不同大圖(1)-1
https://0800happy.com

實作方法

1.建立資料區

(1)假設有5張圖要呈現，假設是圖a、圖b、圖c、圖d、圖e。

(2)先拉上下兩個段，上面的段只放一張大圖(圖a), 在圖片的樣式中把寬度調大成適當的尺寸。

(3)另下面的段切成任意欄數(這邊是5個欄)，裡面每個欄各放1張圖片(圖a、圖b、圖c、圖d、圖e)

所以圖a一開始會出現2次。

2.賦予CSS類別

第1個段的” 進階/css類別”填入「bigimg」。

第2個段的” 進階/css類別”填入「smallimg」。

3.貼上語法

在第二個段的下方拉一個html工具，貼上下列程式碼即可。

				
					

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

$(".smallimg img").on("click", function() {
    // 取得圖片的完整 HTML
    var b = jQuery(this).prop("outerHTML");
     
    // 或更新目標元素的內容
    $(".bigimg img").replaceWith(b); // 用新圖片替換
});

$('.smallimg img').css("cursor","pointer");
}); //end load
})(jQuery);
</script>

總結

兩個段也可以調成左右並排的，善用Elementor左邊工具區的”Inner Section”就可以做出比較多格並排的切版。

[藝廊]如何讓Elementor Pro的Gallery藝廊每張圖片有自己想對應的連結？

2022-08-03 尚無留言

簡介

Elementor Pro的Gallery畫廊它預設無法替每張圖片都加上一個自己的單獨連結網址，

 

▼只能對所有圖片加上「1個連結」而已。

運用範圍

一般可能會運用在一個圖對應一個商品或一家廠商時，運用上很廣 。

範例

▼預設每張圖無法各別設定對應的網址

▼經過一段語法處理後 ，每張圖可以個別對應一個連結(可點擊試試)

原理與思路

利用圖片的「替代文字」欄位來輸入網址，再透過jQuery把網址轉至每張圖上變成連結。

實作

付費內容，需支付 : 300 個學習幣
您須先登入會員以使用學習幣與發問功能。

總結

沒什麼要特別叮寧的。

在Elementor中加入jQuery與CSS的統一作法!

2022-08-03 尚無留言

要在Elementor中加入自訂的jQuery與CSS的話，Elementor本身有提供幾個位置可插入，例如可以在每頁的設定/進階中插入，或是每個元工具裡面的進階來插入，或是Elementor Pro版有提供「全局插入」的方式，但為了方便管理與複製， 我會統一使用「html」這個元素工具來存放自訂語法。

作法 :

1、拉入一個html工具

從左邊Elementor工具區找到「html」，拖拉至右側的內容編輯區即可。

至於要拖至右側的什麼地方，我一般都是要控制那個元素工具時，就拖至哪個元素的下方，例如我要控制「收合容器」在網頁載入時先自動關閉，我就會把「html」工具拖拉至收合容器的下方，這樣以後就方便一眼識別出哪個元素工具你有幫它加了自訂語法。

2、貼上程式碼語法

後面其它章節文章有提供相關的程式碼語法時，不管是CSS或jQuery就貼在「html」工具中即可。

例如 :

 

後面的每一篇文章，只要有提到要插入語法的，都請使用此方式來插入語法即可唷!

[外掛]自訂片段程式碼-Code Snippets

2022-08-03 尚無留言

外掛資訊

  • 【外掛名稱】 : Code Snippets
  • 【費用】: 免費版
  • 【官方網址】: 點此
  • 【簡介】: 埋設各種行銷代碼、自訂function PHP、自訂全站式javascript、自訂全站式CSS。
 

此最外掛最最最常用來執行『自訂PHP function』!

很多的客製化WordPress需求都會用這支外掛，它是我很好的一個幫手!

用法1 : 自訂PHP function

在WordPress中，因安全性考量，所有PHP語法不可以直接在單篇編輯內容時寫入PHP語法，所以必須透過自訂function的方式來增加自己的PHP程式碼。

拿到人家寫好的自訂function語法時，直接「新增程式碼片段」，取一個看得懂的標題命名(可用中文命名)，再並貼上Code，選定執行位置(前端或後端)，儲存並啟用即可。

上圖③會勾僅執行於前端，主要是98%的自訂程式碼都是要在前端運作出效果的，除非你寫的程式碼是專對後台運作的，才需要勾僅執行於管理後台區域。

「單頁內」有大量資料或段需要做切換隱藏時的功能

2022-08-03 尚無留言

前言

透過按鈕或某元素的點擊，來對不同的段或元素做隱藏與展開(可指定多數量)。

雖Elementor中就有內建”收合容器”，只是收合容器中無法再做切版或置入多個段，或是只能把想置入的內容製成版型並使用簡碼方式置入收合容器中，所以有大量資料或段需要做切換隱藏時就非常適用。

運用範圍

當頁面過長時就非常適用，也可以運用在一般的區塊編輯器中。

亦可用在手機版選單中。

 

預覽效果

以下是一次對「多個段」做套用，點擊下面按鈕可見效果。

本次員工旅遊分三個梯次出發，詳情如下…

點開閱讀詳細介紹
https://adptt.com/

第一梯:

出發時間:5/8~5/13

地點:日本

費用:每人6萬

https://0800happy.com/

第二梯:

出發時間:5/20~5/26

地點:日本

費用:每人6.5萬

https://smallway.tw/

第三梯:

出發時間:6/1~6/6

地點:日本

費用:每人7萬

實作方法

1、觸發按鈕或元素

可以拉一個按鈕或標題或圖示，在它的”進階/css類別”中填入「open_it」。

若拉的是一個按鈕，按鈕中的超連結預設是「#」，請刪掉這個「#」。

2、建立要切換隱藏的段

可以一次建立多個段，段裡面當然可以隨意切版或置入任意元素。

對每個段的”進階/css類別”中填入「show_content」。

3、貼上jQuery的code

可以在任意處或觸發按鈕的下方拉一個html工具，並貼上下列程式碼。

				
					
<script>
( function($) {
$(window).load(function() {
$('.open_it').click(function(){ 
  $('.show_content').slideToggle();
})

$('.open_it').css("cursor","pointer") 
$('.show_content').hide();
}); //end load
})(jQuery);
</script>

總結

上面的Code也可以直接埋入head中來全域執行(不一定要在Elementor中)，這樣在用區塊編輯器寫文章時，只要對點擊元素與想切換隱藏的區域套上css類別即可生效。

全域性埋Code : 使用code snippets來埋入

Mobile Menu
登入
個人專區
電腦版選單

每日登入可以累積學習幣!

Line的不良影響

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

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

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

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

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

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

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

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

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

以上。

我能體諒，改用Email
已了解，加 Line

目前線上有 15 個使用者: 0 個成員、8 個訪客及 7 個檢索機器人。

線上同時最多使用者人數為 121 個使用者，發生於 2024-05-1419:40。

8 個訪客 正在線上

#1 – 訪客 於 2025-10-3105:12
架站勤拿手Page Not Found – 架站勤拿手 [網址]

#2 – 訪客 於 2025-10-3105:12
post-tree – 架站勤拿手 [網址] [參照連結網址]

#3 – 訪客 於 2025-10-3105:11
架站勤拿手 » [點對點搬家]從別家WordPress主機搬家到Cloudways WordPress主機 – 架站勤拿手 [網址]

#4 – 訪客 於 2025-10-3105:10
post-tree – 架站勤拿手 [網址] [參照連結網址]

#5 – 訪客 於 2025-10-3105:10
架站勤拿手 » ALL POST – 架站勤拿手 [網址]

#6 – 訪客 於 2025-10-3105:10
post-tree – 架站勤拿手 [網址] [參照連結網址]

#7 – 訪客 於 2025-10-3105:09
架站勤拿手 » ALL POST – 架站勤拿手 [網址]

#8 – 訪客 於 2025-10-3105:09
架站勤拿手Page Not Found – 架站勤拿手 [網址]

7 個檢索機器人 正在線上

#1 – ClaudeBot 於 2025-10-3105:12
架站勤拿手 » ALL POST – 架站勤拿手 [網址]

#2 – GPTBot 於 2025-10-3105:12
架站勤拿手 » ALL POST – 架站勤拿手 [網址]

#3 – Crawl 於 2025-10-3105:11
架站勤拿手Page Not Found – 架站勤拿手 [網址]

#4 – PetalBot 於 2025-10-3105:11
架站勤拿手blog – 架站勤拿手 [網址] [參照連結網址]

#5 – Google 於 2025-10-3105:10
架站勤拿手 » [選單][細論]Elementor選單的設定細項 – 架站勤拿手 [網址]

#6 – DotBot 於 2025-10-3105:09
架站勤拿手blog – 架站勤拿手 [網址]

#7 – Google 於 2025-10-3105:07
架站勤拿手 » ALL POST – 架站勤拿手 [網址]