ALL POST - 架站勤拿手

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

2023-03-10 尚無留言

簡介

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

運用範圍

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

範例

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

收合容器 #1

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

https://0800happy.com/2210/

收合容器 #2

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

https://0800happy.com/2210/

收合容器 #3

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

https://0800happy.com/2210/

收合容器 #4

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

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網域信箱

2023-03-08 尚無留言

前言

上一篇《[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)

2023-03-08 4 則留言

前言

沒有啟動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如下，等一下就複製來貼上即可。

Type	Hostname	Destination	Priority	TTL
MX	@ or 空白	mx1.emailsrvr.com	10	3600 seconds or lowest allowed
MX	@ or 空白	mx2.emailsrvr.com	20	3600 seconds or lowest allowed
TXT	@ or空白	v=spf1 include:emailsrvr.com ~all	NA	3600 seconds or lowest allowed
CNAME	autodiscover	autodiscover.emailsrvr.com	NA	3600 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商品…類推!

2023-02-23 尚無留言

前言

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

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

範例

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

運用範圍

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

實作

付費內容，需支付 : 900 個學習幣

您須先登入會員以使用學習幣與發問功能。

總結

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

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

2023-02-23 尚無留言

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

實作

1、安裝「Rollback」外掛

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

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

3、選擇想要的版本號

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

4、啟用新版本

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

總結

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

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

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

2023-02-22 尚無留言

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

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

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

Elementor幻燈片標置置底

2023-02-20 尚無留言

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

文字填在按鈕中。

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

2023-02-18 尚無留言

簡介

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

運用範圍

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

範例

點此 : https://ex1.smallway.com.tw/elementor-mouse-scroll-page-change-effect

原理與思路

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

實作

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

付費內容，需支付 : 1200 個學習幣

您須先登入會員以使用學習幣與發問功能。

總結

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

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

2023-02-18 尚無留言

簡介

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

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

運用範圍

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

範例

點此 : https://ex1.smallway.com.tw/elementor-banner-slides-up-when-the-mouse-is-scrolled

原理與思路

主要用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分數？

2023-02-17 尚無留言

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

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

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

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

簡介

運用範圍

範例

原理與思路

實作

1、給一個CSS類別命名

2、加入片段程式碼

總結

前言

實作

一、設定Gmail代發

2、輸入SMTP與帳密

3、處理驗證碼

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

二、設定Gmial代收

1、查看其他帳戶的郵件

2、輸入以下資訊

3、代收成功

總結

前言

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

實作

1、啟用Rackspace Email服務

2、增加一個網域信箱

3、設定轉寄到私人Gmail

4、須設定4筆DNS

5、設定第1筆MX記錄

6、設定第2筆MX記錄

7、設定第3筆TXT記錄

8、設定第4筆CNAME記錄

9、完成後檢視

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

11、開始設定

12、傳送測試郵件

總結

前言

範例

運用範圍

實作

付費內容，需支付 : 900 個學習幣

總結

實作

1、安裝「Rollback」外掛

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

3、選擇想要的版本號

4、啟用新版本

總結

簡介

運用範圍

範例

原理與思路

實作

付費內容，需支付 : 1200 個學習幣

總結

簡介

運用範圍

範例

原理與思路

實作

總結

章節

72 個訪客 正在線上

62 個檢索機器人 正在線上

72 個訪客正在線上

62 個檢索機器人正在線上