WordPress 懶人包

Step 4. WordPress 優化設定, 讓網頁飛起來~!!

這個部分很容易因為一時粗心就把網站玩壞, 建議大家一定要先備份啊~!!! 我自己就是在這部分把自己的 blog 玩壞的, 還玩壞 2 次, 幸好後來有找到原因, 只能說魔鬼都是藏在細節裡的啊~!!!!!

PS1. 可以用 GTmetrix, Pingdom, WEBPAGETEST, Google PageSpeed Insights or Think with Google 這些網站測試自己優化前優化後的比較, 如果網站文章不多可能不會有太大的差異就是了 ^^” 不過也不要太心急, 有些快取是要等 24hr 後才會見效的喔~!!

PS2. 測試之後可能會發現有很多小毛病, ex: Eliminate render-blocking JavaScript and CSS in above-the-fold content, Enable GZIP Compression & Leverage browser caching… 有些可以根治, 有些就是 plugin 自己的問題, 有些我也還在研究中, 推薦 varvy & WP Cub 的好文給大家, 應該會有幫助!!

  • All in One SEO Pack, 網站 SEO 外掛, 設定參考: ORBITINGWeb! 這裡面會需要填 Google, Bing Webmaster 的註冊碼, 所以, 建議大家可以搭配WordPress 百寶箱-11, 註冊網站的時候一併設定~!! 如果你已經從 Google Analytics 驗證你的身分, 找不到你 Google Search Console 的 Verification Code, 可以點 Google Webmaster Central, 在這裡就可以找到你的驗證碼嚕~!!
  • EWWW Image Optimizer, 照片優化外掛, 設定參考:  TechMarks 劃重點! 裝好之後, 你每次新上傳的照片就會自動執行優化, 但是之前的照片就需要大家自己手動設定啦~!!! 手動批次優化設定如下面左圖! (點照片可以大圖喔~!!)
    1. Media –> Bulk Optimize –> Choose how long to pause between images –> “5 這邊建議是設定 5-10s! 如果設定的時間太短可能會稍微拖慢網站的速度, 如果設定的時間太長, 則會等到天荒地老, 大家自行斟酌啦~!!
    2. Optimize Media Library –> Start Optimizing 開始後就會出現下面右圖優化中的狀態嚕~!!
    3. 接著要來檢查一下 DB 其他地方有沒有圖片需要壓縮! Optimize Everything Else –> Scan and Optimize
EWWW-widget   EWWW-widget

 

  • WP Super Cache, 快取外掛優化, 設定參考: ORZ快樂學電腦! PS. 如果之前有安裝其他快取外掛建議不要重複安裝, 否則可能發生系統大亂的問題喔~!! PS. 小桃公主覺得自己網站的重覆訪客應該不多, 所以就停掉這個 plug-in, 讓網頁跑快一點點點啦…
  • CloudFlare, 提供免費 CDN 做網路加速, 簡易設定參考: 香腸炒魷魚, 詳細介紹/設定參考: 電腦王阿達! 如果主機在美國, 但主要客戶在台灣的格主, 滿推薦大家使用的, 還可以同時作 HTML 程式碼, Javascript 語法 & CSS 程式碼等等的優化喔!! 重要!!!! 跟著專家設定的時候, 在 page rule 那邊如果你有用 Lockdown WP Admin 把自己的登入後台網址改掉, 這邊要記得跟著改啊~!!! 我就是沒注意到這個小細節, 被 DNS 不存在卡了兩次 (Error Code: twpeach.com’s server DNS address could not be found) >”< 2016/09 updates: 觀察了一下, 根據會造訪我的網站的訪客, CloudFlare 並不會幫我加快多少, 所以也暫時不用啦… 或許等之後有需求才會再考慮吧 🙂
  • Speed Booster Pack, 一開始會安裝這個網站加速的 plugin 是因為跑了網站測試後, 為了解決 Eliminate render-blocking JavaScript and CSS 這個問題才安裝的, 設定參考: WP Cub! 雖然效果還是沒有很完美, 但還是有優化一點啦! 這個 plugin 還附帶有延遲讀取照片的功能, 如果是圖片很多的網站, 推薦~!!

 

Step 5. WordPress 寫作環境設定, 文思泉湧不打結~!!

  • 修改文章字體 & 大小! 國外的版型一般不會內建中文字型, 所以文中的內容一般都是以新細明體顯示, 如果不喜歡新細明體, 可以自己去 style.css 修改成好讀的 “微軟正黑體” (尋找 “font-family”, 再把你要的字型加進去就可以了, 如下圖)~!! 如果不想改到原本的英文字型, 建議把中文字型放在第二位喔~!!! 因為中文 & 英文先天上的不同, 如果是用國外的版型字體一般都會偏小讀起來不舒服, 建議可以修改成比較舒服的大小, 修改的方式跟字型差不多, 關鍵字 “font-size”! h1~h6 的字體大小建議也一併改好, 這樣以後寫文章就快多啦, 也不用擔心版面不一致 ^^

PS. 如果字體改了之後還是沒有變化, 可以用 DevTool 確認一下是不是有其他宣告關鍵字, ex: 我的佈景裡有一大半的字型是用 font 宣告而不是用 family-font!

font-modify

  • 文章版本限定, 語法參考: 香腸炒魷魚! 基於本人龜毛的個性, 一篇文章改個 20 次也不是太稀奇的事, 為了不想要花錢放垃圾, 所以, 建議簡單加上一行語法就可以輕鬆解決啦! 要看語法有沒有放置成功, 只要進到任何一篇文章裡再存一次檔就可以發現暫存版本變成你設定的數字嚕~!! 當然也可以直接上外掛啦, 但是, 本人不喜歡太多外掛, 哈 (是說已經裝很多了啊, 啊啊啊)~!!!
  • WP Edit, 增強 WordPress 內建寫作工具的外掛, 不裝不行, 沒有字型設定的寫作工具實在太簡陋啦 (尖叫 + 不可思議)!! 據說 Windows Live Writer 離線寫文章很不錯, 我自己是沒在用, 有需要的大家歡迎參考阿榮的中文版載點!
  • 自訂美美 CSS 文字框 有些常用的文字框不想每次都慢慢的寫 CSS 語法, 就可以在 style.css 自己先設定好, 之後寫文章就可以直接拿來用啦, 個人覺得非常實用, 推薦給大家!! 提供我自己最愛的文字框!
    • Step1. 先到 apperance –> editor, 進到自己的 style.css 檔案, 在最下面貼上下面的語法! 自己可以隨意更改你想要的參數喔~!!
    • Step2. 到任何的 post/page, 寫好想要包裹的文字後, 進到 text 模式, 加入 “<div class=”pb1“>,文字結束的地方加上 “</div>“, 就可以啦, 讓文章一致又簡單的方法~!! PS. 紫色的部分 “pb1” 要跟 style.css 上宣告的名字一致喔~!!

文字外框

 

加碼好用的網路資源!! 可以有漸層背景, 文字陰影, 重點是不會語法也可以輕易上手喔, 參考網站: CSS Gradient Button!還有 Nicolas 厲害大師分享的可愛文字框也都超級讚, 網站推薦參考 MUKI Space~!! (Photo Courtesy of cssgradientbutton.comnicolasgallagher.com)

PS. 辛苦改好, 建立了自己的 CSS 後, 下次佈景 update 的時候絕對要有這些 code 會被蓋掉的警覺啊~!! 備份備份, 還要記得下載自己的備份, 不然就只好捲土重來了, 哭~!! Jetpack 裡也有 Custom CSS 這個選項, 如果厭煩了每次 update themes 就要重貼好多設定那就啟用這個功能吧, 個人滿喜歡的 ^^

css gradient button   comment-box

 

接著要推薦 WordPress 好用外掛們, 千萬不要錯過啦~!!!

現居德州, 致力於在平凡的生活中尋找不平凡, 在忙碌的生活中尋找只屬於我們的小幸福... 旅行。美食。生活。牽著手的三人行... 若無特別聲明, 本站所有文章皆為作者原創, 欲轉載請註明作者 & 文章出處, 請尊重智慧財產權, 謝謝~!!