ALL POST - 架站勤拿手

[外掛]301轉址-Redirection

2022-08-09 尚無留言

外掛資訊

【外掛名稱】 : Redirection
【費用】: 免費版
【官方網址】: 點此
【簡介】: 自動偵側永久連結的異動與重導向、自動偵側舊網址被修改後的自動轉址、有條件的轉址。

說明

這外掛最基本功能，就是偵測每一篇網址若被異動(包含永久連結的格式異動)，就會自動做新舊網址的對應，以減少404錯誤，有助SEO分數。

另一個功能就是可以手動指定任一頁重新導向至另一頁，這常運用在網站改版或搬移。

除了直接的 URL 匹配之外，您還可以根據其他條件進行重定向：

登錄狀態 – 僅在用戶登錄或註銷時重定向
WordPress 功能 – 如果用戶能夠執行特定功能，則重定向
瀏覽器——如果用戶正在使用某個瀏覽器，則重定向
來源導向——如果用戶從另一個頁面訪問了鏈接，則重定向
Cookies – 如果設置了特定的 cookie，則重定向
HTTP 標頭 – 基於 HTTP 標頭的重定向
自定義過濾器——根據您自己的 WordPress 過濾器重定向
IP 地址 – 如果客戶端 IP 地址匹配，則重定向
服務器 – 如果也託管在此服務器上，則重定向另一個網域

另很多人都以為它這是一支單純做轉址用的功能而已，很少想到它也可以用來做簡單的會員功能，例如不同角色登入就被導向去不同想給他看的頁面，或未登入的人會自動轉址去會員登入頁，或會員登出後自動導向至首頁等等…，可以發揮巧思就能做多重運用喔!

▼初始設置

▼基本用法

▼其它進階用法(即有條件的轉址，可參考官方說明)

總結

它對我已是每個新網站剛產生時的必裝外掛之一。

如何讓會員登出後自動轉址到首頁?(方法1)

2022-08-08 尚無留言

簡介 :

本文是要做到「讓會員登出後自動轉址到首頁」，一樣是靠這「Redirection」外掛即可，不用再安裝其它外掛，這樣可以讓外掛少裝一支，讓後台更乾淨。

運用範圍 :

只要是需要會員登入登出的網站，都完全適用。

範例 :

可試點一下會員登出的連結，如下 :

https://smallway.com.tw/wp-login.php?action=logout

它會自動偵側到登出後立即轉址到首頁。

說明 :

一般做會員登出，我們會在主選單中置入一個自訂連結名稱為「登出」，然後設置登出的連結為「 /wp-login.php?action=logout」，這樣就可以讓會員按一下登出了。

可是按了登出後，預設登出後會自動跳轉至WordPress預設的後台入口頁，

有時候為了資安考量，不想把真正後台的入口頁曝露出來，所以我們會讓一般會員登出後不要跳轉至後台的入口頁，所以一般會透過外掛或其它方式來設定這件事。

實作 :

1.外觀/選單 : 先在主選單中建立一個「登出」的選項，並加上登出網址為「 /wp-login.php?action=logout」。

2.設定路徑 : 後台/工具/Redirection

3.新增一轉址規則。

如下圖設定即可 :

圖②記得勾正規表達式，而圖①的內容貼上這段語法 :

				
					/wp-login.php\?loggedout=true.*

影片 :

無。

付費影片 :

無。

總結 :

以上的方式可以讓你在做會員功能時少裝一個外掛，而且上述的方式還可以再進階設定，「Redirection」外掛可以讓你也能根據會員角色來決定是否轉址，或轉址至哪一頁。

概說

2022-08-08 尚無留言

一般轉址，我們最常聽到的是「301轉址」或「302轉址」，301與302轉址時的效果都是一樣的，都是把網頁重新導向至另一頁，但其背後意義的話，就是用301與302來區分了。

名稱	定義
301轉址	是永久性轉址，將舊網頁流量與權重完全轉移到新網頁，搜尋引擎會視為同一頁面，例如有些頁面或文章的網址有修改但內容不變，若不做301轉址的話，若原本網址有被分享或被搜尋引擎收錄的話，有人點原網址就會失效，故必須做301轉址，讓舊網址的流量可以直接導向新的網址。
302轉址	是暫時性的轉址狀態，因而會被搜尋引擎視為兩個獨立存在的頁面，這樣就會有重複內容的問題，因此302轉址通常用於網站臨時維護的暫時性轉址，例如先轉去粉專或另一頁暫時性的公告頁面。

在WordPress其實不會刻意把這兩種分太細，一般最常用的就是301轉址為主。基本上你大概知道定義的區別就可以了，

本專題講的轉址，大都靠這支免費版的「Redirection」外掛，部分需求會靠jQuery來做轉址。

[Wordfence]如何開啟登入後台時配合手機動態密碼二階段2FA驗證？

2022-08-08 尚無留言

簡介 :

讓管理員或特定人員登入後台時，可以有第二階段的動態密碼驗證，減少被駭的機會。

運用範圍 :

所有WordPress網站均適用，建議最好打開。

範例 :

輸入帳密碼，會再要求輸入第二組動態驗證碼。

原理與思路 :

這個也有單獨的外掛可以做，但若有安裝Wordfence防火牆的話，就不用再另裝外掛了。

實作 :

用想要打開二階段登入驗證的帳號登入網站後台，一般是管理員帳號或最高權限帳號。

1、下載【Google Anthenticator 】APP

2、打開Wordfence的二階段登入驗證

編輯個人資料，再點擊「Actibe 2FA」如下圖，

▼準備做掃瞄

3、第一次掃瞄

打開【Google Anthenticator 】APP按下「+」來掃瞄該上圖的QRcode③後會得到一個動態驗證碼，把該六碼驗證填入第2點的④處即可。

若出現下圖這個，這是你以後手機不在身邊時，可以用這個緊急備用驗證碼登入，可以先下載回來存在本機電腦中。(其實若沒有這個備用驗證碼，也可以從FTP登入網站外掛資料夾把Wordfence停用亦可，就能登入後台了，登入後再取消二階段驗證與重新再激活一次二階段驗證)

4、未來的登入方式

一樣照一般的方式登入後台，輸入帳密成功後會轉至二階段驗證，然後直接打開【Google Anthenticator 】APP查看最新的驗證碼即可，不用再掃QRcode了。

▼最新的驗證碼會一直在變化，要以下當下的為主

總結 :

除了demo用的網站，我每個網站都有打開，只要被駭一次你就會知道這有多重要!

常見的資安插件有哪些？我該如何選擇？

2022-08-08 尚無留言

簡介 :

每個網站，我強烈建議真的要安裝一套資安插件來擋掉一些常見的攻擊或入侵，不過也僅安裝一套就夠了，安裝超過二套以上反而會對網站效能產生負面影響。

運用範圍 :

凡是惡意攻擊、暴力登入、有害插件、植入有害代碼、全站掃描、事件通知等等，均可以讓資安外掛來負責處理。

實作 :

只要安裝一套就可以了，多裝無益。

整理幾套常見的，裝好後就做完基本設定後，就可以讓它常駐了!

名稱	評論	備註
*【Wordfence】	老牌，最多人使用，Wordfence常能掃出他牌不見得掃的到資安問題，但就是肥大了點，但我喜歡!	有二階段登入。須用Email註冊免費序號，這邊提供一組 : 點擊複製
【Pareto Security】	較輕盈。
【NinjaFirewall】	也是多人的選擇性之一。	有二階段登入。
【Jetpack – WP 安全性、備份、速度和成長工具】	很多人用，且它也內建其它功能。	有二階段登入。
*【iThemes Security】	也是滿多人推薦的，介面簡單。	有二階段登入。文件更改檢測。每日自動掃瞄兩次。
【MalCare WordPress Security Plugin – Malware Scanner, Cleaner, Security Firewall】	不愛用，每次安裝要填很多註冊資料。
【BBQ Firewall 】	輕量、安裝後完全不需要設定，就可以擁有非常好的防護效果。

總結 :

目前Wordfence雖是稍嫌肥大的一套，不過由於已經使用它好幾年，而且防範效果真的很不錯，就一直幫客戶還有自己的網站都用這套，暫時沒有再去安裝別套做防範效果測試!

▼Wordfence可以掃出有感染毒的檔案並一鍵清除

概說資安

2022-08-08 尚無留言

主機端，有主機商的資安防護，這是主機商該做的事，而我們網站端的資安防護，除了個人要有良好的使用習慣之外，也須安裝一套資安插件來協助保護網站。

例如你不小心從路上下載來路不明的外掛，造成資安上有所疑慮或可能的因此外掛有問題而造成你網站被駭，此時主機端的防範並不會知情也不會發現你網站被駭，因主機端在資安上所防範的並不是這類的事件，所以你網站端上的資安防範，仍然要做，不可有那種我主機商很強，我網站一定是安啦的錯誤認知!

在WordPress網站端中最常見的資安作法，就是安裝「資安相關」的插件，但「資安相關」的插件選擇性上也很多，除了慎選一套防範功能不差、不拖緩過多網站效能之外的插件，再來就是設定或運用資安插件中所附帶的功能。

有時候我們尚須怎樣應變已經被駭或出現資安問題的網站，當網站真的被駭時，首先會運用資安外掛來掃瞄與修復，如果真的修復不了，可能要人工去檢查研究出問題的檔案可能在哪個路徑，反覆對照與測試，再不行可能就要走上「還原」的方式(所以主機商有沒有每日備份的功能超重要)。

我們都不是網路安全這方面領域工程師出身的，所以在網站被駭時我們能處理的方式有限，當覺得所有能做的都做過了，最後一途就是「還原」了，但是在我接案七年多來的心得，只要主機端、網站端的基本資安防範都有先做到，加上良好的網站使用習慣，網站很少出現被駭被入侵的情況，也正因我七年來遇上的情況並不多，所以這個專題的文章量可能比僅記錄我遇過或比較常用的方式，預計篇數不會太多。

如何做出滑鼠移至選單時會自動切換中英文呢？(子選項也適用)

2022-08-05 18 則留言

簡介

在電腦版時有效果，hover(滑鼠移上去)選單時想要讓中文的選單自動轉成英文的效果。

運用範圍

沒有什麼常見的運作情境，如果說有，那就是做給外國人看的，只是選單有英文，內容沒有英文的話，這樣外國人不就只能看得懂選單而已嗎？XD

範例

這裡我拉一個Elementor的選單當作範例效果，如下:

原理與思路

我使用jQuery的hover效果來處理這樣的需求，並且須事先準備要用的「英文字詞」，因這個並不是自動翻譯，故要在後台/外觀/選單:要先準備好對應的英文字詞，然後利用jQuery去處理滑鼠事件來做中英文的替換。

注意此法不只對「第一層」主選單有效，對第二層、第三層....的子選單也都有效果!

實作

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

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

總結

有時候業主就是要這個功能，只是我覺得沒有很實用啦!

這只有在電腦版時有效果，因手機瀏覽器本就沒有hover(滑鼠移上去)的效果，使用上要特別注意。

我使用jQuery的hover效果來處理這樣的需求，當然純CSS也有hover功能，只是純CSS不好寫，用jQuery比較簡單一點。

Elementor如何做出類似APP的固定底部快速選單?

2022-08-05 尚無留言

如何用Elementor表單做聯盟行銷推薦功能？

2022-08-05 尚無留言

這是一種簡易型的「推薦追蹤」，例如有人點你的推薦網址到一個頁面，該頁面是Elementor做的表單，只要該員有填表成功，推薦人就會記錄是你。

我們可以用「網址參數」加上jQuery來把網址參數後面的推薦人代碼自動填入表單的某隱藏欄位中，在表單被填表送出後，就會連同推薦人的ID或代碼一起存入資料庫中。

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

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

2022-08-05 2 則留言

前言

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

運用範圍

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

預覽效果

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

Google

微軟

weebly

WordPress

實作方法

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之類的外掛了。

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

外掛資訊

說明

總結

簡介 :

運用範圍 :

範例 :

說明 :

實作 :

影片 :

付費影片 :

總結 :

簡介 :

運用範圍 :

範例 :

原理與思路 :

實作 :

1、下載【Google Anthenticator 】APP

2、打開Wordfence的二階段登入驗證

3、第一次掃瞄

4、未來的登入方式

總結 :

簡介 :

運用範圍 :

實作 :

總結 :

簡介

運用範圍

範例

原理與思路

實作

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

總結

前言

運用範圍

預覽效果

實作方法

1、建立效果用的資料區

2、加上css類別的命名

3、貼上jQuery的code

總結

章節

1 個成員 正在線上

6 個訪客 正在線上

6 個檢索機器人 正在線上

1 個成員正在線上

6 個訪客正在線上

6 個檢索機器人正在線上