在 WordPress 接案領域,我們平常都做形象網站比較多,這也是我們最擅長的項目,其次則是型錄網站和購物網站。以下是針對以 WordPress 架構在開發形象網站的時候,我們必裝與常裝的外掛們,供各位參考。
開發前期必裝(尚未驗收時)
由於我們是 WPBakery 派的,通常 Gutenberg Block Editor(區塊編輯器)都不支援使用,為了避免實際做頁面的時候礙手礙腳,都會透過這個外掛直接把 Block Editor 關掉,後續也可避免客戶在自行操作網站的時候,對 Block Editor 一頭霧水,反而產生需要客服的問題。
2. Disable "BIG Image" Threshold
目前我們是拿 MacBook Pro 13 吋筆電的螢幕來當作開發標準,因此關於常見的滿版大圖設計需求,我們習慣將尺寸設定在寬度 2880px,這樣剛好符合 MacBook Pro 13 吋的預設解析度,不會有糊圖的問題,此外,我們在縮圖後,也會另外透過 ImageOptim 將圖片品質設定在 85% 進行壓縮處理,如此一來可以得出一個兼顧解析度與檔案大小的圖片。但是,WordPress 預設有圖片強制縮圖的機制,這個縮圖功能會強制把過大的圖片縮小為長邊 2560px,而且無論你原始圖片壓得多小,它都會重新存一次,過去經驗都是 WordPress 重新壓的都比我們透過 ImageOptim 壓的還來得肥,而且解析度又更差,因此,我們現在都會透過這支外掛來進行關閉自動縮圖的功能。
開發的時候常需要複製已經做好的頁面,再進行修改,或者是備份其中一個版本的頁面,以因應客戶未來回心轉意「覺得第一版比較好」的時候可以快速把頁面叫出來給客戶看。這個外掛可以一鍵複製,非常方便。
4. Head, Footer and Post Injections
我們會透過這個外掛來把 Google Fonts 程式碼或各種類型的流量追蹤碼埋在它應該在的位置,例如 Google Analytics、Google Tag Manager、Facebook Pixel 等。
5. Simple CSS
我們習慣在每個不同的網站,使用相同的自訂 CSS 編輯器,如此一來在重複使用程式碼的時候,可以確保外觀整齊與保有一致性。這個外掛是極少數採黑底介面又支援 Tab 縮排的,以前曾經試過其他很多自訂 CSS 的外掛,最後還是覺得這套最輕量化且順手。
6. SVG Support
考慮到跨裝置的圖像銳利度最佳化,因此我們在網站 Logo 與頁面會用到的小 icon,都是採用 SVG 格式的圖檔進行上傳。WordPress 預設沒有辦法上傳 SVG 的圖檔,因此我們會用這支外掛解禁。
開發中期必裝(開始驗收時)
1. Maintenance
開發中期,我們提供給客戶測試站確認實際頁面,在取得客戶 Feedback 之後,就會透過這個外掛把頁面關閉,以避免客戶想到又上去看一下,今天看的想法又跟昨天不一樣,導致修改需求反覆變更的情形。
2. UpdraftPlus WordPress Backup Plugin
在測試站開發完成,或是需要更換測試站網址的時候,我們會透過這個外掛進行全站備份,並且下載到本機存檔留一個底,後續再上傳到正式站使用(這個外掛需要與下一個介紹的外掛 WP Migrate DB 搭配使用,才能修改全站的網址)。
3. WP Migrate DB – WordPress Migration Made Easy
這個外掛的用途是修改全站網址,需要搭配上一個介紹的備份外掛 UpdraftPlus 一起使用。基本上我們習慣把「修改網址前」和「修改網址後」的兩種資料庫備份檔都各自留存。
開發後期必裝(正式上線後)
這個外掛提供的垃圾留言阻擋功能,要等到正式上線後具有正式網址了才有用。
2. Wordfence Security – Firewall & Malware Scan
透過這個外掛可以阻擋一定程度的惡意攻擊,降低未來需要另外花時間成本救火的機率。
3. Yoast SEO
目前這個外掛的主要用途是拿來產生 Sitemap,並提交到 Google Search Console,除此之外,偶爾也會透過這個外掛修改網頁的名稱結構,加入需要的關鍵字。
整理以上,有任何問題都歡迎討論喔!
Photo by Webaroo.com.au on Unsplash
探索更多來自 那些在我身上的底片效應 的內容
Subscribe to get the latest posts sent to your email.