搜尋
Close this search box.

[收合容器]隨機自動展開其中一個項目

簡介

Elementor的「收合容器」第一個項目預設是打開,透過小程式碼讓它隨機打開某一個項目

運用範圍

若用收合容器來放不同的廣告、心得見證之類,就可以讓它隨機打開某一項目,這樣就可以平均展示每個項目的內容。

範例

你可以反覆重新整理此頁,看以下的收合容器是否會隨機打開某一個項目。

這個方式,我也有用在這篇文章上,可參考一下效果 :

https://0800happy.com/2210/

這個方式,我也有用在這篇文章上,可參考一下效果 :

https://0800happy.com/2210/

這個方式,我也有用在這篇文章上,可參考一下效果 :

https://0800happy.com/2210/

這個方式,我也有用在這篇文章上,可參考一下效果 :

https://0800happy.com/2210/

原理與思路

利用jQuery算出共有幾個項目標題,然後隨機點擊第N個。

實作

1、給一個CSS類別命名

例如我幫收合容器的CSS類別給一個名稱叫「facy_close」。

2、加入片段程式碼

在收合容器下方拉一個html工具,裡面貼上下列jQ程式碼即可。

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

//先把第一個預設展開的先合起來
$(".facy_close .elementor-accordion-item").eq(0).find("a").trigger("click");

//求出共有幾個項目
var len = $(".facy_close .elementor-accordion-item").length;

//求得本次隨機數字
var index = Math.floor(Math.random()*(len));
//console.log("隨機" + index);

//執行第N個的自動點擊
setTimeout(function() {
$(".facy_close .elementor-accordion-item").eq(index).find("a").trigger("click");
}, 100);

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

總結

說完了!

[網域信箱]通過Gmail代收發您的Cloudways Rackspace網域信箱

前言

上一篇《[SMTP]啟動主機端的SMTP寄信服務-網域信箱(Rackspace Email)》中雖已創立好網域信箱也能正常運作了,而且也設定了「自動轉寄至個人gmail」,但個人gmail在收到信後若按下「回覆」,尚無法用此網域信箱的名稱直接回信,只能登入網頁版收信匣才能用此網域信箱來回寄。

為了讓個人gmail也能直接用網域信箱來當寄件人,我們也可以在gmail中直接串接網域信箱,就可以用gmail代收代發了。

實作

一、設定Gmail代發

1、在Gmail進入設定

[網域信箱]通過Gmail代收發您的Cloudways Rackspace網域信箱-1

在”帳戶和匯入”中,新增另一個電子郵件地址。

[網域信箱]通過Gmail代收發您的Cloudways Rackspace網域信箱-2

2、輸入SMTP與帳密

這裡我以「[email protected]」這個網域信箱為例。

SMTP服務器輸入secure.emailsrvr.com並選擇通訊埠 465

[網域信箱]通過Gmail代收發您的Cloudways Rackspace網域信箱-3

一樣會用到之前申請好的網域信箱帳密資訊。

  • 信箱帳號: xxx@你的網域
  • 信箱密碼: *******
  •  SMTP伺服器名稱 : secure.emailsrvr.com
  • 使用的Port : 465

3、處理驗證碼

[網域信箱]通過Gmail代收發您的Cloudways Rackspace網域信箱-4

4、即可用網域信箱當寄件人

看,我在gmail中,可以用「[email protected]」的名義來當寄件人了。

[網域信箱]通過Gmail代收發您的Cloudways Rackspace網域信箱-5

二、設定Gmial代收

如果在主機端那邊已有設定「自動轉寄到個人gmail」,Gmial代收其實也不一定要設定了,不過這邊仍然再提一下怎樣做。

1、查看其他帳戶的郵件

一樣在「帳戶和匯入」那邊,點擊「新增郵件帳戶」。

[網域信箱]通過Gmail代收發您的Cloudways Rackspace網域信箱-6
[網域信箱]通過Gmail代收發您的Cloudways Rackspace網域信箱-7
[網域信箱]通過Gmail代收發您的Cloudways Rackspace網域信箱-8

2、輸入以下資訊

  •  用戶名:你的網域信箱([email protected])
  •  密碼:您的信箱密碼
  • POP服務器:secure.emailsrvr.com
  • 端口:995
[網域信箱]通過Gmail代收發您的Cloudways Rackspace網域信箱-9

可選擇保留副本或不保留。

3、代收成功

[網域信箱]通過Gmail代收發您的Cloudways Rackspace網域信箱-10

總結

可以不用申請G Suite(Google) 的企業信箱服務,一樣可用此方式來達到用Gmail收發網域信箱,這是一個非常方便的方式, 也是最低成本的方式!

參考資訊 : How to Configure My Email Client with Rackspace Mailbox

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)

前言

沒有啟動SMTP寄信服務,你網站的各種信件就是會發不出去或易進垃圾信匣,創一個網域信箱以解決此問題吧。

「網域信箱」,就是創一個以你網域名稱當寄件人的一種信箱,例如「xxx@你的網域」,這種網域信箱除了可寄信亦可「收信」,所以會有一個網頁版的收信匣

至少要創一個網域信箱來當成網站一些訂單、表單、密碼通知、訂閱通知、電子報等信件的寄送之使用,當然也可以建多個給公司同仁使用,當成是企業信箱。

Cloudways主機之網域信箱簡介:Rackspace Email

在Cloudways主機中,有個服務叫「Rackspace Email」,這也是一種SMTP寄信服務,即可自訂網域信箱名稱,例如「xxx@你的網域」,一個信箱一個月是1美元,發送就沒有像「Elastic Email」那樣有上限封數,我覺得非常便宜。

這種網域信箱除了可寄信亦可「收信」的,所以會有一個網頁版的收信匣( https://cloudways.mymailsrvr.com/ ),如果常常忘記登入收信,還可以將此網域信箱設定成「自動轉寄」到個人gmail,這樣就不會漏收信了。

官方說明 : 點此1點此2

實作

1、啟用Rackspace Email服務

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-1

2、增加一個網域信箱

點擊Add Mailbox後,設一組想要的網域信箱,例如我以客戶的網域是「lizpetedu.com」,那麼我就命名一個id叫「service」,再配合網域名稱,組成一個網域信箱叫「[email protected]」,後面密碼再自訂一下。

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-2
[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-3

帳密請先記下來,後面會在網站中串接這個信箱時需要用到。

3、設定轉寄到私人Gmail

既然都在這個介面了,我就同時設定一下「自動轉寄」到客戶個人的gmail,這樣就不用時常登入網頁版收信匣來收信,而且可以同時設定「保留信件副本」在網頁版收信匣中以當備查(圖中③)。

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-4

PS : 設定自動「轉寄到gmail」是很簡單,但若想要從gmail中用網域信箱直接當寄件人,則另再設定一些動作,可以後續再參考此篇,這篇就不講這個。

▼在help中也可以直接進入網頁版收信匣

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-5

4、須設定4筆DNS

接下來就是重頭戲了,必須在我們的網域DNS上加上4筆DNS,這樣這個網域信箱才能運作。

要設定DNS,首先要進入你的網域商後台 ,本站常用的例如Godaddy或Gandi網域商,而我此客戶的網域DNS是放在Cloudflare中做管理,我就先登入Cloudflare後台來設定DNS記錄。

▼目前只有2筆DNS記錄,要再加上4筆。

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-6

▼4筆DNS如下,等一下就複製來貼上即可。

TypeHostnameDestinationPriorityTTL
MX@ or 空白mx1.emailsrvr.com103600 seconds or lowest allowed
MX@ or 空白mx2.emailsrvr.com203600 seconds or lowest allowed
TXT@ or空白v=spf1 include:emailsrvr.com ~allNA3600 seconds or lowest allowed
CNAMEautodiscoverautodiscover.emailsrvr.comNA3600 seconds or lowest allowed

5、設定第1筆MX記錄

對照第4點的表格的第一行MX那行,就開始複製,並在DNS網域商那邊開始貼上,如下圖。

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-7

6、設定第2筆MX記錄

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-8

7、設定第3筆TXT記錄

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-9

8、設定第4筆CNAME記錄

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-10

9、完成後檢視

一共新增了4筆,如下圖。

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-11

10、網站端安裝「Post SMTP Mailer/Email Log」

此時網站端要安裝一個外掛 : Post SMTP Mailer/Email Log ,需要用它來串接這個網域信箱,才能用來發信。

從後台搜尋安裝後並啟用。

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-12

安裝並啟用後,就進入「設定精靈」。

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-13

11、開始設定

會有以下資料,要在設定精靈中填入

  • 信箱帳號: xxx@你的網域
  • 信箱密碼: *******
  •  SMTP伺服器名稱 : secure.emailsrvr.com
  • 使用的Port : 465

▼輸入寄信人名稱與剛剛申請好的網域信箱

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-14

▼輸入 SMTP伺服器名稱 : secure.emailsrvr.com

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-15

▼選port 465那個

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-16

▼輸入網域信箱與密碼

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-17

▼略過通知服務

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-18

▼按完成

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-19

12、傳送測試郵件

設定完成後,就來試傳看看能否順利從網站發信出去 。

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-20
[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-22

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-21

▼已順利收到信

[SMTP]啟動Cloudways主機端的SMTP寄信服務(可寄可收)-網域信箱(Rackspace Email)-23

總結

完成後,以後網站中所有大小通知信都會此外掛所串好的網域信箱進行發送了。

雖然這個網域信箱是我們花錢買來的,發送沒有封數的受限,但也不能拿來發大量密集的廣告信喔,不然也可能會被處罰,例如可能導致網站主機IP被列入國際垃圾信組織的黑名單,最後連正常的一般通知信都無法發送,那時就欲哭無淚了。

相關文章 :

[網域信箱]通過Gmail代收發您的Cloudways Rackspace網域信箱

Cloudways官方相關文件:

[強制購買順序]買過A商品才能再買B商品,買過B商品才能再買C商品…類推!

前言

這是一種「強制性的購買順序」,

買過A商品才能再買B商品,買過B商品才能再買C商品….類推…可以一直無限下去。

範例

如下圖,沒買過A與B商品,直接將C商品加入購物車,就會跳出警告而且無法加入購物車。

[強制購買順序]買過A商品才能再買B商品,買過B商品才能再買C商品…類推!-4

運用範圍

一般是在做「課程銷售」時(不分線上或實體課程),課程須先綁定Woocommerce商品來結帳,但有些課程有分入門、進階、高階之類的學習順序,故有些業主想要限制學員要先買完A課程(商品)才能再買B課程(商品)….

實作

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

總結

此外掛的設定中也可以另改成「A、B、C」三種商品要一起加入購物車才能結帳,可自行發想如何運用喔!

如何把安裝的外掛「降版本」?

此法適用於免費的外掛,也就是你的外掛是在後台「搜尋安裝」的,即可用此法來「降版」。

實作

1、安裝「Rollback」外掛

如何把安裝的外掛「降版本」?-1

2、選擇想要降版的外掛名稱

例如我想把「Elementor」降版,在「已安裝外掛」中找到Elementor,如下圖,點擊「安裝指定版本」。

如何把安裝的外掛「降版本」?-2

3、選擇想要的版本號

選好後,再按下「安裝指定版本」即可。

如何把安裝的外掛「降版本」?-3
如何把安裝的外掛「降版本」?-4

4、啟用新版本

點擊啟用外掛,如下圖,即完成。

如何把安裝的外掛「降版本」?-5

總結

此外掛不必常駐,用完後就可停用了,需要時再啟用即可。

一般會降版的原因,大都是網站發生問題或外掛衝突,如果整個網站太久沒更新,建議先更新WordPress主版本後,再來更新想要更新的外掛。

[備份周期]調整Cloudways主機的備份周期

Cloudways主機的備份周期,它預設本就會每日自動備份了,只是預設值是只保留7日的備份檔,我們可以在下列的④中改成4Week,也就是一個月的意思。

而③的話,是「每日」備份,有需要的話可以調整更短,例加每3小時備份一次,不過我覺得每日一次就夠了。

▼注意一下,須在「Server」中調整,參考下圖 :

[備份周期]調整Cloudways主機的備份周期-1

Elementor幻燈片標置置底

/*幻燈片標置置底*/
.swiper-slide-inner {
padding : 0!important;
}
.swiper-slide-contents,.elementor-slide-button{
width:100%!important;
max-width: unset!important;
}

文字填在按鈕中。

Elementor幻燈片標置置底-1

如何做出滾動滑鼠時,整個段向上滑出消失?(2)

簡介

有些網頁,只要一進滾動滑鼠,就會有一種「翻頁」滑出滑入的效果,每滑一下就是下一頁的效果。

運用範圍

上篇教的是用在是「首頁」的第一個大段落,此篇的作法比較進階,是「整頁每個段落」都可以有這樣的效果,就像是在「翻頁」一樣。

範例

原理與思路

主要用jQuery的滾動事件來判斷是否已滾動而且是滾動了第幾下,以對應「每個段」,並配合slideUp()與slideDown()來產生視覺上的滑出滑入效果。

實作

這段程式碼,我研究了一日,終於成功,免外掛,純在Elementor中貼上一段代碼即可運作 。

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

總結

在手機上,無法發揮效果,因手機沒有滑鼠滾動事件,所以此法使用時要慎重思考手機時我能接受無此效果嗎?或是手機瀏覽時使用其它效果,建議在手機時就保持一般無特效的狀態就好。

如何做出滾動滑鼠時,整個段向上滑出消失?(1)

簡介

很多網頁或首頁的第一個段落常常是個大圖+標語,然後滑鼠一滾動,這個段落就會往上滑走然後出現下一個段落的內容。

特效僅在第一個段落,下一個段落開始就是正常無特效的區域。

運用範圍

一般是「首頁」的第一個大段落。

範例

原理與思路

主要用jQuery的滾動事件來判斷是否已滾動,並配合slideUp()與slideDown()來產生視覺上的滑出滑入效果。

實作

1、加上CSS ID

把首頁第一個段加上CSS ID,如下圖。

2、拉一個html工具

並貼上下列語法即可。

				
					
<script>
( function($) {
$(window).load(function() {
//============================  
$(window).scroll(function(){
if( $(this).scrollTop() > 0){
$("#sec01").slideUp(1000); 
}
else{
  $("#sec01").slideDown(1000);   
}
});
//======================================
}); //end load
})(jQuery);
</script>
				
			

總結

特效僅在第一個段落,下一個段落開始就是正常無特效的區域,若要整頁的每一個段落都可以有此特效(一頁式網頁之翻頁),須參考下一篇的作法。

如何讓每篇文章出現「Breadcrumb(麵包屑)」→當下所在位置,以增加SEO分數?

Breadcrumb(麵包屑),又稱「導航路徑」,可以看出當頁是位在什麼分類區的什麼位置,

如何讓每篇文章出現「Breadcrumb(麵包屑)」→當下所在位置,以增加SEO分數?-1

這一般最常用的方式就是利用佈景主題的內建功能來設定就可以達成,但也有少數佈景主題並沒有提供這樣的小功能,就須另找外掛來擴充與置入。

我們所教的「Blocksy」免費主題就有內建此功能,可以在外觀/自訂中來開啟,如下圖打開即可:

如何讓每篇文章出現「Breadcrumb(麵包屑)」→當下所在位置,以增加SEO分數?-2

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

Line的不良影響

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

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

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

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

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

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

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

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

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

以上。

目前線上有 12 個使用者: 1 個成員6 個訪客5 個檢索機器人

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

1 個成員 正在線上

#1 – Facy 於 2025-05-0300:23
WordPress教學問答大全 – 架站勤拿手 [網址] [參照連結網址]

6 個訪客 正在線上

#1 – 訪客 於 2025-05-0300:23
03_安裝頁面編輯器 – 架站勤拿手 [網址] [參照連結網址]

#2 – 訪客 於 2025-05-0300:23
[localwp]電腦本機站如何建立一個WordPress練習環境? – 架站勤拿手 [網址] [參照連結網址]

#3 – 訪客 於 2025-05-0300:21
post-tree – 架站勤拿手 [網址] [參照連結網址]

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

#5 – 訪客 於 2025-05-0300:20
post-tree – 架站勤拿手 [網址] [參照連結網址]

#6 – 訪客 於 2025-05-0300:19
架站勤拿手找不到符合條件的頁面 - 架站勤拿手 [網址]

5 個檢索機器人 正在線上

#1 – ClaudeBot 於 2025-05-0300:23
架站勤拿手 » ALL POST - 架站勤拿手 [網址]

#2 – Apple 於 2025-05-0300:21
架站勤拿手找不到符合條件的頁面 - 架站勤拿手 [網址]

#3 – PetalBot 於 2025-05-0300:20
架站勤拿手找不到符合條件的頁面 - 架站勤拿手 [網址] [參照連結網址]

#4 – Ahrefs 於 2025-05-0300:19
架站勤拿手「wordpress」的搜尋結果 - 第 4 頁 - 架站勤拿手 [網址]

#5 – PetalBot 於 2025-05-0300:19
架站勤拿手找不到符合條件的頁面 - 架站勤拿手 [網址] [參照連結網址]