ALL POST - 架站勤拿手

如何讓每篇文章結尾都自動出現簽名檔？

2023-03-24 尚無留言

作法有多種，簡易的作法是用Elementor做一個「段」的簽名檔範本，並把它的簡碼手動或自動方式插入每篇文章的末端，就會產生如下圖的效果 :

此篇僅先建立文章標題或部分文字，教學內容待補上。

佈景主題(Blocksy)的「資訊欄」或頁尾加入常用小工具

2023-03-24 尚無留言

前言

在套版狀態下的網站，「資訊欄」尤為重要，在此我有時候也會稱之為「側邊欄」，我們可以幫資訊欄加入常用的小工具以利訪客做一些互動或切換的操作，或呈現你想給訪客看的額外資訊(例如簽名檔或自我小介紹)。

實作

資訊欄小工具

1、安裝「傳統小工具」

我們需要先安裝一支它什麼都不用設定的外掛 :「傳統小工具」，用來幫我們可以直接拖拉不同小工具至資訊欄中。

(安裝後直接啟用)

2、設定小工具

再到「外觀/小工具」就可以開始拖拉想要用的小工具了，

上圖，它預設會有一些既有已拖好的小工具在右側的「主要資訊欄」中，我們可以重新整理成想要的狀態。

請練習一下，調整如下圖中有6種小工具的狀態 :

文字小工具的內容範例 :

我是Facy，歡迎來到我的網站，這裡主要記錄一些行銷、理財、讀書筆記、作品，歡迎與我交流。

Email : [email protected]

上傳一張小圖片後，可將圖片拉小，再點一下圖片並設定「向左對齊」即可做到文繞圖的功能。

3、資訊欄的個別版面設定

調整資訊欄的寬度比例、小工具字體大小、小區塊背景色等，都可以在此設定。

▼你可以運用它給你的「可設定」介面來盡情調整資訊欄的個別版面。

頁尾小工具

頁尾一般只是僅放「版權資訊」居多，如果想在「頁尾」也放置一些小工具(例:小小文字區、快速連結、頁尾選單)，

可以一樣在外觀/小工具/頁尾小工具區域中來拖拉想用的工具進去。

然後再至「外觀/自訂」中把想要用的頁尾小工具也拖至頁尾區塊中。

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

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、安裝「傳統小工具」

2、設定小工具

3、資訊欄的個別版面設定

頁尾小工具

簡介

運用範圍

範例

原理與思路

實作

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 個學習幣

總結

章節

1 個成員 正在線上

1 個訪客 正在線上

4 個檢索機器人 正在線上

1 個成員正在線上

1 個訪客正在線上

4 個檢索機器人正在線上