WordPress網站與相關設定

暫存環境的網站 staging environment

安裝外掛與外掛主題更新，一率先在這個環境執行，執行後，再檢查有沒有出現任何問題，若沒有，那就執行更新，若有，那當然就是先暫緩或者將問題排除後再更新。(必須常更新，以防駭客入侵。)

域名mail/網域mail

若網址是 tw的，可將網域申請移轉到 Gandi.net，Gandi有域名 mail(2個，每個3GB，此為免費額度，若要付費加容量或加信箱也可)，我的作法是將所有信件轉寄到某個 GMAIL，並在 GMAIL"新增帳戶"，這樣就可以在 GMAIL裡面寄信收信域名MAIL(文章)。【若網址是 .com的，可將網域申請移轉到 GoogleDomain，GoogleDomain可以設定域名信箱，方式是轉寄，數量無限，容量就看GMAIL，詳細設定(請看)。】【若以公司形象來看待，網域 MAIL是基本條件。】

文章的H1H2H3設定

AWOO這篇文章非常棒(連結)，H4H5H6不要用，標題是H1，若文章內有分章節，章節標題就是H2，若還有再細分小段落那就H3，若因為H2字體太大，若佈景主題沒有可以設定的地方，那就用CSS直接做修改就可，先2才能3，不能直接用3，因為邏輯上的順序就是123。

子主題設定

(外掛)名稱: Child Theme Configurator，(介紹說明)，設定網站時，有時候會需要更改網站的部分內容與結構，手動設定更改微調，這類做法，若沒有先設定子主題的情況下，若遇到主題要更新，那這些設定就會歸零，就必須重新修改，若有設定並使用子主題，那就沒問題。(2020/03/27 更新主題後出了問題，暫時改回原主題)

網站翻譯

(推薦使用程式: Poedit)主題或外掛安裝後，有些翻譯跟自己使用習慣不同，或者本來就英文版，這時候就可以安裝 Poedit，安裝在電腦後，佈景主題或外掛在所屬的language資料夾內都會有一個 POT檔案，這是翻譯模板，用 Poedit打開 POT檔案時會問要建立何種語言的翻譯，選擇台灣，然後用 Ctrl+F的功能找到要翻譯的文字後，填入中文，修改好之後，會有兩個檔案，再將這兩個檔案上傳到所屬資料夾，這樣就能出現中文翻譯。( POT檔案位置，若佈景主題：wp-content→themes→所屬主題→lanuage)

網站右下角放上電話/LINE/FB訊息/MAIL

用的是 keyreply，非常簡單，先到 https://keyreply.com/chat/?ref=getwidget，將自己要的社群設定好，然後再依據指示將程式碼貼到 body前就可以。
不會貼也沒關係，請安裝 Insert Headers and Footers，然後再將程式碼貼到第三格就可，第三格就是 body前在用的語法。(若 ICON顏色不滿意，那就找一個自己喜歡的顏色換上去 data-color就可。)

回到頂端 ICON

(外掛)使用的是 ToTOP，原先網站主題提供的按鈕必須到了頁面最下方，才會在右下角看到，所以我多找了一個，簡單設定的，放在左下角，並且用紅色，這樣手機瀏覽時，任何時候都可以回到網站頂端。

局部更改網站的內容大小與顏色

使用 chrome瀏覽器→在網站的某處按下右鍵→選擇"檢查"→右方窗格會出現網頁語法，並且標示該處的 CSS名稱→直接在此處更改顏色及大小或者消失→確認後沒問題→複製語法→再貼上網站設定就可。(示範影片)(後台→外觀→自訂→附加的 CSS，這邊可貼上。)

隱藏Google reCAPTCHA 驗證標記

此標記會永遠出現在網站右下角，只要在 CSS貼上" .grecaptcha-badge { visibility: hidden; } "這樣就會消失，但必須符合(規範)。

社群分享設定

網路最推薦的是 Sassy Social Share與 AddToAny，我之前用 AddToAny，當時網站主機本身很不穩，所以乾脆先拿掉社群分享功能。
單就畫面比較起來，我覺得 Sassy Social Share比較不佔視覺畫面，所以現在選擇 Sassy Social Share。(雖然很少人在分享，但因為幾乎全世界網站都有這個功能，所以還是裝上去，但只使用放在文章內的，不使用左右側浮動分享按鈕。)

Contact7 聯絡表單的 [_remote_ip] [_user_agent]

基本設定略過，重新審閱功能介紹後，我將 [_remote_ip] [_user_agent]加進去，這樣客戶留言後，網站也可以知道客戶當時使用的 IP與使用設備瀏覽器。(連結)

客戶傳大檔案時

使用 dropbox的檔案請求功能，可讓任一個客戶上傳大檔案 (官方介紹與說明)，設定好後就是一個連結，然後將連結放到線上詢價頁面再加上個文字說明，這樣就蠻妥當的。【 Google也可以，2017年之前非常麻煩，2017年有出現一個工具，就簡單多了<網友文章>。)

文章的留言功能

因客戶都是學生居多，捨棄 Disqus Comment System，恢復成基本的留言板，並安裝 Lightweight Subscribe To Comments (link)，客戶留言時可選擇"若有人回覆此留言，系統是否要通知客戶" ( FB留言板-安裝三個FB外掛使用心得，只要有人留言後，都無法100%正常通知網站，還亂通知其他留言網友，目前無法解決，暫先放棄。)

Error.log紀錄

若網站有任何衝突或錯誤，就會產生紀錄，最簡單的方式是安裝外掛去監測(link)，這篇工程師寫的文章有介紹與說明(link)。

轉址設定(301/302/404)

WordPress 猜測網址的功能請關閉。
若主機端可以設定301/302轉址，請在主機端設定，若無，就用外掛設定(Redirection/功能介紹)。
404監測請安裝外掛，並且觀察數據。
404在KINSTA主機如何設定(LINK)
製作404 not found專屬頁面展示。
404若是偶爾才出現的少量數據，非常正常。若該數據是大量的數據，請設定301。

外部網站設定

Google我的商家/Bing MAPS/LINE SPOT、Facebook粉絲團、Flickr、Instagram、Youtube、LINE官方帳號/主頁要設定、Telegram頻道、Behance、About.me、Linkedin與 Pinterest。(Google我的商家很好用，但若公司型態不是讓客戶直接到達的，就建議先不要申請，但也有人是申請後，在名稱上註明預約制，也是一個可行的方式。)

圖片格式webp

Google強力推薦的圖片格式，目前跨平台瀏覽器尚未100%支援，暫時先不動。

外掛清單

更新日期：2020/04/06，第一大段為(必備)
Akismet Anti-Spam：防止垃圾留言。
reCAPTCHA V3：3.0版本是不用手動"勾選不是機器人"。
Post SMTP：寄信外掛，且掌握所有信件的發信紀錄 (但若程式衝突導致無法寄信，那就沒紀錄，這邊紀錄的是發信後失敗&發信後成功)。
Advanced Database Cleaner：清除 revision/drafts使用。
WooCommerce：
Yoast SEO：付費版甚至提供410轉址，410是告訴google這個網址真的不存在了，請從索引中移除。
傳統編輯器：個人習慣用最基本的HTML寫文章。
CAOS：Completely optimize Google Analytics 輕量化的 GA追蹤。
Code Snippets：貼上程式語法且可隨時關閉。
刪除不必要的縮圖：WP上傳1張圖，實際會產生很多張縮圖，使用 Stop Generating Unnecessary Thumbnails (之前叫 Stop Generating Image Sizes，列出清楚寬高)或Regenerate Thumbnails Advanced(沒列出寬高，ShortPixel的)，安裝好，會秀出目前有哪些種類縮圖，選擇"留下的"→重新產生縮圖→就會將"不要的"刪除。(上傳圖片到文章後，會提供小中大的選擇，這就是縮圖。)
Error Log Monitor：紀錄網站的 error。
Redirection：轉址用(網路教學)。
Insert Headers and Footers：可在頁首頁尾貼上程式碼(Keyreply安裝用這個最方便)。
圖片優化：先在 PhotoShop調整要顯示的寬度存檔時再注意JPG/PNG/GIF那個比較小，然後再上傳，然後再使用外掛優化，可大幅度減少圖片大小。外掛網路上推薦 Shortpixel Image Optimizer(每月免費額度200張，包含各式縮圖)或 Imagify (免費制每月 25MB)(免版權可商用的圖庫網站介紹-link。)

其他網站測試都至少會有90%的優化，這應該是我先在PS調整成我要的寬度才上傳有關
備份外掛：最簡單的方式是主機選擇 Siteground，SG有備份機制(介紹)，也有暫存網站 staging可使用，外掛推薦首選為 UpdraftPlus，免費版很夠用，付費後可指定時間與同時備份到多個雲端空間。

Breadcrumb NavXT：麵包屑 (個人認為這有助於sitelink)。
Contact Form 7：基本款的表單外掛。
Lightweight Subscribe To Comments：留言後，讓客人選擇是否有留言通知。
Mobile Menu：可固定/可貼上圖片+語法連結 (原本布景較弱，裝這個來加強)。
Sassy Social Share：社群分享外掛 (付費的話，網路推薦Easy Social Share Buttons-link)。
To Top：隨時都可回到頂端，提高瀏覽體驗。
Autoptimize：可以合併CSS與JS，有效減少 Requests(介紹)。
Table of Contents Plus：文章目錄外掛，經測試，免費版這個好用；付費的話，推薦Fixed TOC - table of contents for WordPress plugin(link)
add the code below to the bottom of the file fixed-toc/fixed-toc.php
/**

* Filter to add plugins to the Rank Math SEO TOC list.

*

* @param array TOC plugins.

*/

add_filter( 'rank_math/researches/toc_plugins', function( $toc_plugins ) {

$toc_plugins['fixed-toc/fixed-toc.php'] = 'Fixed TOC';

return $toc_plugins;

});

FB Messenger Chat&LINE&PHONE&MAIL(通訊方式)：原本只有設定 keyreply，還算堪用，付費的話，推薦 All in One Support Button(link)，結合各類通訊 APP、FB、即時對話、可顯示自訂 HTML與短碼、指定連結還有提醒訊息，也可以設定單獨手機或單獨網站。