概說(PopUp彈跳視窗)
Elementor Pro的「PopUp」是一種彈跳視窗功能,這在一般網頁中很常見,常用的是在網頁中點一個按鈕就跳出一個小視窗裡面有對應的圖文內容,或是網頁載入後在特定時機(例如滑到網頁底部)就跳出 小視窗…諸如此類的。
一般這樣的功能在WordPress有許多外掛可以安裝(但介面或功能不見得符合需求,須多方測試),不過既然學了Elementor Pro網頁設計,這種PopUp彈跳視窗功能就不必再仰賴其它外掛了(少裝一支外掛節省效能),在Elementor Pro中我們可以把 PopUp彈跳視窗設計得非常客製化、美觀,完全可以照自己心意、想法來設計(而不是純設定)。
Elementor Pro的 PopUp彈跳視窗功能不僅可以用來製作常見的彈跳視窗功能,也可以延伸來做為複雜型的「選單區」功能,例如本站的手機版選單,就是用 PopUp來製作,又或者是你可以把「購物車項目」也放在彈跳視窗中,並設計一個按鈕在適當處讓訪客點擊後就跳出小視窗讓他看到購物車中的項目等等,所以只要你發揮創意, PopUp可以用在很多地方喔。
▼ 本站的手機版選單
接下來我會寫幾篇有關 Elementor Pro的「PopUp」彈跳視窗的基本運作與變化運用。
[外掛]前端更換頭像
這一般是在客製化WordPress前端會員專區時才會用得到,WordPress前端會員專區會讓會員們可以自由更改個人資料,例姓名、電話,大頭貼,所以此外掛就可以發揮作用。
簡介
目前使用過WordPress之頭像外掛有三支,簡單分列如下:
1、 Basic User Avatars
前端上傳,無設定,故無法限制上傳大小、副檔名。
上傳欄位有一些多餘的說明佔版位,要用css隱藏。
短代碼 :
[basic-user-avatars]
2、 One User Avatar
讓所有人有預設頭像(例如文章留言處),也可以前端上傳。
可對頭像限定大小上限、副檔名。
缺點是整個上傳的介面有點巨大。
短代碼 :
[ avatar_upload ]
[ avatar ]
這裡的短代碼有空格,請自行消除。
3、 Frontend User Avatar
上傳介面簡單乾淨,但後台無其它設定可以對上傳頭像做一些限制。
短代碼 :
[frontend-user-avatar]
手機時Elementor的按鈕們可以左右滑動
簡介
用Elementor製作一排按鈕水平排列,在手機時可以左右滑動(不換行)。
運用範圍
製作選單效果或選單錨點時。
範例
▼請用手機觀看此範例(電腦版時也是可以左右拖動)
原理與思路
透過CSS 設定,讓包住按鈕的容器在手機上變成「橫向可滑動」的區塊,也就是所謂的 橫向捲動(horizontal scroll),這樣可以把過長的按鈕暫時隱藏且在不換行的情況下,仍然讓使用者滑動看到其他按鈕。
實作
1、建立容器與按鈕
用Elementor拉一個容器,裡面置入許多按鈕,並把容器設定「水平排列」與「不換行」。
2、貼上css語法
把該容器的「進階/css類別」加上一個命名為「btn-menu」。
然後拉一個html在下方貼上下列語法即可。
總結
以上是針對「按鈕」,對「標題」或其它元素也可以這樣做,效果一樣。
如何用Wordfence修復中毒之網站?成功率高達九成。
病毒,常見得會有二種形式存在,一種是對原本正常之檔案進行感染,故這類的要用「修復」的方式(不能亂刪除),另一種是自動產生網站無此檔的有毒檔案,這類的要用「刪除」的方式進行處理,可參考以下二種處理方式,90%的毒都可以正常消滅。
對已中毒之網站,用「Wordfence」修復成功的機率滿高的。
網站中毒後,建議:
- ①開維護模式(公告維護起訖時間)。
- ②備份當下時間點。
- ③更新WordPress主核心程式與所有外掛。
- ④掃毒。
- ⑤修復與刪除。(見本文以下作法)
- ⑥再掃。
- ⑦觀察數天 。
一、用Wordfence進行全站掃瞄

此時放著給Wordfence它去掃,不要切換瀏覽器分頁,不然它有時會停止。
二、修復
1、對中毒檔案進行修復
Wordfence的掃瞄介面有提示,見下圖,點擊DETAILS中,再點「REPAIT」(修復),可對中毒檔案做修復。



2、有些中毒檔案只能刪除不能修復
Wordfence沒有出現修復按鈕的,如下圖,就按下「DELETE FILE」。
(這類的是並不是原有檔案受感染,故須用刪除的方式處理)

3、特殊的毒(1)
有些有毒檔案它是直接在Wordfence掃毒結果介面中是刪不掉的,可能就要進檔案管理員去刪。
4、特殊的毒(2)
下圖,指的是WordPress預設的設定檔「wp-config.php」被感染,這個在Wordfence中並無出現修復按鈕,而且wp-config.php這是重要檔案也不能刪除,刪了網站就掛了,此時就得從檔案管理員去檢視這個文件裡的內容,把下圖提示的內容,找到對應的那一行刪除,或是從另一個找個乾淨的「wp-config.php」來覆蓋,當然找到的「wp-config.php」裡面的設定要先改成跟你現在網站的「wp-config.php」的設內容是一樣的後再覆蓋。

Ps: wp-config.php是重要設定檔案,裡面有很多網站連線需要的重要設定,最好先下載一份回電腦當備查。
如果wp-config.php裡面的內容你不懂怎麼刪掉有毒的部分,也可以丟給GPT協助,當GPT告知你有問題的是哪一行你就可以照指示把該行刪除,再存檔就完成了。

4、嚴重警告
如下圖,Wordfence它說有個外掛存在安全漏洞但尚未中毒,此時就是要去更新至最新版本,不然以後仍然會中毒。(這個就不是按修復或按刪除)

不要亂按「標記已修復」,不然這個沒被處理的嚴重問題以後再瞄會被Wordfece略過,被誤當做是正常檔案。
三、重掃
Wordfence所掃出來的毒處理乾淨後,請重新再用Wordfece做全站二度掃瞄,直至Wordfence掃不出病毒為止。
▼重掃後又掃出新的(一樣繼續按修復或刪除)

總結
以上處理後得再觀察一段時間,至少三日,三日後再掃一次,若無掃出新的中毒檔案,應就正常了。
目前我的經驗,在WordPress諸多的防毒外掛中,只有「Wordfence」在做網站中毒修復是最有效的。
如果以上處理仍無效的話,可能就要找有經驗的人付費協助囉!🤔
301轉址的正規表達式用法(更換主網域轉址)
情境
客戶的A 網站(https://abc.com/),更換了一個新的網域為「cahsiti.com」,更換成功後舊網域的每一個連結都會失效,須把這些舊連結導向至新網域的連結。
利用這個「 Redirection 」外掛,我想在「 A」的網站(abc.com)中安裝這個外掛,並加一條轉址規則,把 abc.com開頭的所有每一頁面、文章、商品的網址的前方網域,都用正規表達式方式轉至 cahsiti.com開頭的網域,每一條網址後面路徑不變。
步驟說明
1、再創立一個新的空白網站,此空白網站的網域須使用abc.com,並安裝 「 Redirection 」外掛。
2、啟用外掛後,前往「工具」>「Redirection」。
3、點擊「Add New」來新增一條重定向規則。
4、在「Source URL」欄位中輸入以下正規表達式:^/(.*) ,最右邊記得勾「Regex」。
5、在「Target URL」欄位中輸入:https://cahsiti.com/$1
以上存檔後就生效了,記得清除網站快取。
6、測試
打開瀏覽器,訪問 A網站的任何頁面(例如:abc.com/page1), 確認頁面是否正確轉址到 cahsiti.com/page1。
正規表達式說明
正規表達式分解
^/(.*) 是一個 正規表達式(Regular Expression, Regex),用於匹配 URL 中的路徑部分。
分解說明如下:
^ : 這是正規表達式的「起始錨點」,表示匹配的開始位置。
在這裡,^ 表示從 URL 的開頭開始匹配。
/ : 這是 URL 中的根目錄符號。
例如,在 https://abc.com/page1 中,/ 是域名後的第一個字符。
(.*)
.:匹配任意單個字符(除了換行符)。
*:表示前面的字符(.)可以出現 0 次或多次。
():這是捕獲組(capture group),用於捕獲匹配的內容,並可以在其他地方引用(例如 $1)。
整體意義
^/(.*) 的意思是:
- 從 URL 的開頭(^)開始匹配。
- 匹配根目錄符號 /。
- 捕獲 / 後面的所有內容((.*)),並將其存儲為 $1。
實際範例
假設你的網站有以下 URL:
https://abc.com/page1
https://abc.com/product/item1
https://abc.com/blog/post-title
使用 ^/(.*) 會匹配:
- /page1 → 捕獲 page1 並存為 $1。
- /product/item1 → 捕獲 product/item1 並存為 $1。
- /blog/post-title → 捕獲 blog/post-title 並存為 $1。
在 Redirection 外掛中的應用
當你在 Redirection 外掛中設定:
- Source URL: ^/(.*)
- Target URL: https://cahsiti.com/$1
它會將:
- https://abc.com/page1 重定向到 https://cahsiti.com/page1
- https://abc.com/product/item1 重定向到 https://cahsiti.com/product/item1
- https://abc.com/blog/post-title 重定向到 https://cahsiti.com/blog/post-title
[圖片轉盤]做出可左可右方向平滑不停頓輪播
簡介
免費版Elementor的「圖片轉盤」其實很好用,除了一般的一張張輪播,還可以做出很平滑式的移動效果,而且可以讓它向左或向右。
範例
原理與思路
光靠「圖片輪播」的設定還無法調製出如範例那樣的效果,尚須用一句CSS語法改變它輪播時的轉場速度與頓點。
實作
付費內容,需支付 : 300 個學習幣
您須先登入會員以使用學習幣與發問功能。總結
個人覺得這效果滿有質感的,很絲滑的輪動,特別愛用!
WordPress網站寄出信件的觀念與準備
前言
對於『從WordPress網站發出信件』,不管是各式通知信、表單信、訂單信…,很多新手都搞不懂到底是啥回事,這樣就先來建立一下基本的觀念。
先用簡單的概念來說明,以下的作法可二擇一(Cloudways主機都有提供),看看當下需求是哪一種來選擇。
【網站發信】
「寄件人信箱」的後綴(@後面那段)必須是你的網域所產生,故要先有一個 xxx@你的網域 的信箱名稱,當作是「虛擬的寄件人」信箱,來替該網域所在的網站來發信。
ps:此信箱是不存在的故可以隨意取名,例如 happy@smallway.com.tw、hello@smallway.com.tw。
正因此信箱是虛擬,只能用來發出信件,客戶若收到信後按回覆信件,則是會回覆失敗的,這種作法在電商購物通知都用此作法。
WordPress網站若使用這種純發通知信的模式,客戶收到信後若在信件上按回覆,肯定會回覆失敗的。
此方式適合不須建立網域信箱(或稱企業信箱)與客戶往來的公司或個人。
實務作法 :
【網站發信 + 該信箱可以收信】
「寄件人信箱」的後綴(@後面那段)必須是你的網域所產生,但先要有一個 xxx@你的網域 的信箱名稱,且此信箱是真實存在的,有帳密可登入,
我們用此信箱來替該網域所在的網站來發信,且此信箱還可以收到客戶的回信或用在公司其它業務往來時可收發信。
此方式適合想同時建立網域信箱(企業信箱)的公司或個人。(名片上也會印這種可收發信的企業信箱)
實務作法 :
※注意
如果客戶之前就已經有公司信箱(xxx@網域)在運作一段時間,可能就不適合申請上述二種方式,最佳作法是取得客戶現有的網域信箱的設定方式,透過『Post SMTP』外掛把它整合至WordPress網站中來發揮寄件功能。
總結
WordPress網站的各知通知信、聯絡表單信、訂單信、忘記密碼信之類的,都要有以上至少一種的設定,才能正常寄出信件喔!
型錄式購物商店概略製作流程(可詢價用、可外連賣場)
前言
『型錄式』購物商店,主要用來純做大量的商品展示與每一商品的全文介紹,在展示中與一般的正式商店沒兩樣,只差在它「無站內購物、無會員註冊登入、無付款方式無物流方式」,但可以讓每個商品連結至外部賣場或是連結至指定網址,當然可以設定#空連結來不外連。
用途
純展示詢價用(例如家具、大型機台、儀器設備)。
或
連到其它平台賣場做交易。
操作步驟
1、安裝Woocommerce
後台搜尋安裝外掛「Woocommerce」,安裝後啟動。
2、先略過設定精靈
因目的是僅做為「型錄式」商店,不必做過多設定,一切保留預設即可,故可略過。
(如果沒跳出引導精靈,則直接進行商品上架)
3、商品上架(每一商品設定外部/加盟商品)
Demo商品匯入檔 : 按右鍵下載
直接把想要「純展示不開放站內購物」的商品做商品上架。
至後台新增商品,填入商品名稱、價錢、分類、商品網址。
「商品網址」的填入是必須的,可填入外部賣場網址(或其它連結)或#字號(空連結)。
4、把商店入口頁(商品列表)置入選單中
至後台外觀/選單,把Woocommerce所產生的「商店」頁(或shop頁)置入選單中。
此頁是「商品列表」用來列出所有已上架之商品清單。
6、用Elementor美化商店頁
Woocommerce所產生的「商店」頁可以用Elementor做基本的美化,或是再進階一點可以把列表的每一格也進行模版設計以套用所有的列表格。
5、停用我的帳號頁
至後台/頁面,把Woocommerce所產生的「我的帳號」頁面暫時設成草稿,以免有人從此頁進行購買卻失敗。
總結
以上完成後,就可以讓形象官網可以展示商品做為詢價用、也可以讓每一商品的購買按鈕可以對應外部賣場的連結。
[字型]Elementor常見字型的選擇
簡介
在Elementor中,不管是標題、內容編輯器、按鈕…都可自由選擇字體,這邊把覺得不錯的字體記錄在此,以便設計網頁時可選擇。
範例
以下範例文字中有中文也有英文,但有些字體可能僅支援中文或僅支援英文,請自行觀看範例中的文字的字型是否有所變化即知。
字型 : Noto Serif TC
天行健君子以自強不息,
地勢坤君子以厚德載物。
Practice makes perfect.
字型 : Caveat
天行健君子以自強不息,
地勢坤君子以厚德載物。
Practice makes perfect.
字型 : Caudex
天行健君子以自強不息,
地勢坤君子以厚德載物。
Practice makes perfect.
字型 : Zen Loop
天行健君子以自強不息,
地勢坤君子以厚德載物。
Practice makes perfect.
先整理這些,再慢慢補上。
總結
有時候選用不同的字型,會讓網頁呈現不同的感覺,特別是在網頁文字中有「英文」時,建議可另選其它英文字型來比較看看。