Yoohoo, 我摸索了好一陣子的 WordPress 筆記終於出爐啦~!! 今天就要來跟大家分享我的 WordPress 文獻回顧啦, 全部都是超有幫助的好文啊~!!!
PS. Blogger 搬家到 WordPress step-by-step 教學文詳見: Blogger 搬家到 WordPress 不求人之搬家全紀錄~!!
初來到 WordPress 自架站, 就像小魚游進了大海一樣, 突然間發現, 原來版面可以這麼的隨心所欲, 可以這麼的有整體性, 原來大改版/批次性改標籤一點都不是夢啊~!!!
當然, 陣痛期也是有的… 被關在外面進不去後台, 版面大亂, 頁面連不上, blog 被玩壞時, 深深的無力感也讓我懷念起 blogger 的美好… 只能安慰自己發生這些事都只是小磨練, 解決了就好, 打怪增加經驗值啊~!!! 也幸好是初期被玩壞, 砍掉重練不會太憂鬱! 不過倒是認真的奉勸想要跳槽到自架站的大家, 新手上路真的要多多謹慎一些, 如果有熟悉這系統的朋友, 入門會簡單輕鬆很多~!! 我超級感謝 Peter 哥, 老是可以在我找了半天還找不到後門的時候, 瞬間幫我找到問題, 超感激!! 還有資工人 Nick, 謝謝他老是在我貪心的想要讓網站更美的時候, 適時的拉我一把, 讓我省了超多時間的啊~!!! 放個專業的背影照以表感激之情!!!!! 只能說當自己的主人也是有不少要學習的, 畢竟以前是半自助, 連線, 網站安全的問題都不需要你操心, 現在自己當主人了, 才發現其實皇后也是不好當的, 哈~!!!
要隨便開始一個 blog 很簡單, 要好好的維護安全性, 優化網站, 排版個人化則需要不少的時間慢慢經營 & 學習… 由於 WordPress 也行之有年了, 所以大家在找資訊的時候建議找這一兩年的文章可能會比較適用喔~!!
還記得最一開始玩 WordPress 時, 覺得自己好像在設定新電腦喔! 猶豫著要裝哪一個外掛就像在幫新電腦裝新軟體一樣, 一個一個慢慢的養肥系統槽… 不過, 因為我不希望連線太慢, 所以, 能少一個外掛是一個, 盡量輕量化自己的網站啦~!!!
WordPress 的外掛們還有一個很酷的地方, 就是大家都超 open 的在交流! Forum 裡有很多實用的修改/設定資訊, Customer Service 也都真的有在服務耶! 在安裝/修改一些外掛時, 有的時後會因為一些小問題而寫信去詢問, 都有得到迅速且確實的回覆, 內心其實滿感動的, 也更加喜歡 WordPress 這個環境了~!!
敗砍掉重練所賜, 這次重新安裝比較有感覺, 比較有次序了, 也很驚喜的發現幾乎所有外掛的設定都還在耶, 歡呼, 算是不幸中的大大幸啊~!!! 網站也差不多到達出不滿意的階段, 在這裡就簡單跟大家分享我的 WordPress 初體驗啦, 也謝謝各位前輩的不吝分享, 真的全部都是好文啊~!!!
PS. 如果真的是 WordPress 新新手, 建議可以先隨便玩玩, 寫個幾篇文章感覺一下, 找幾個自己有興趣的版型套套看, menu, 側欄小工具都玩玩看再來做下面這些事… 雖然香腸大說版型不用先選沒關係, 但其實有時候會動到佈景裡面的檔案, 每個佈景附加的小工具也不大一樣, 所以, 我自己是覺得先選好版型再開始也不錯 ^^
好啦, 我終於要進入正題啦~!! 為了不要太冗長, 我把本文稍微分了幾頁, 這樣看起來比較不會這麼複雜啦 ^^ 可以直接點連結跳到特定章節喔~!!
- WordPress 初步設定, 新手上路不徬徨~!!
- WordPress 備份再備份, 努力心血不白費~!!
- WordPress 加鎖中, 網站安全有保障~!!
- WordPress 優化設定, 讓網頁飛起來~!!
- WordPress 寫作環境設定, 文思泉湧不打結~!!
- WordPress 推薦外掛, 美化網站方便又實用~!!
- 修改網頁的實用工具們, 讓網頁初學者也能快速上手啦~!!
Let’s Start~!!
Step 1. WordPress 初步設定, 新手上路不徬徨~!!
Follow 香腸炒魷魚的 WordPress 百寶箱系列文章, 就可以一步一步的進行初步設定了~!!
- domain & 虛擬主機的部分大家可以選擇自己喜歡的喔~!!
在一開始選 domain 的時候, 為了之後可能會有增加能見度的需求而同時經營不同的社群網站, 建議也要參考一下那個 domain 在其他領域被使用的狀況, 畢竟能用同樣的名字串連是最棒的啦~!!! Namecheckr 可以幫你確認大部份社群網站的帳號狀態, 只要輸入想要的帳號就可以開始查詢, 是個很方便又一目了然的網站, 推薦給大家~!!!
- 在 WordPress 百寶箱-6, 安裝 JetPack 的時候可以順便打包下面幾支外掛! Skynet & StarPress 有針對 JetPack 寫了一篇精闢的分享文, 有興趣也可以去參考看看~!! PS. 2017 改版再改版後, 很多功能都自動代入囉… 所以設定超簡單…
- Monitor, 網站監控外掛! 即便是專業版主也不可能隨時的掛在自己的 blog 上, 但是又不希望自己是最後一個發現自己的網站當掉, 那麼這個外掛就可以幫大家隨時監控啦! 每 5 分鐘確認一次, 若有問題會寄 email 給你, 是個很令人放心的外掛 ^^
Extra Sidebar Widgets(2017 版本已自動代入不需手動加), 裡面提供了一些滿好用的側欄小工具, ex: Gallery, Facebook Page Plugin, Google+ Badge, Top Posts & Pages, RSS Link, etc. 我最滿意的就是 Gallery 啦~!! Tiled Galleries & Widget Visibility 也滿建議大家一併打包的, 詳細解說詳見 Step 6!
- 在 WordPress 百寶箱-10 裡提到用 Google XML Sitemaps 產生網站地圖, 但其實 All in one SEO Pack 也可以幫你做到喔, 又可以少安裝一個外掛了, yes, 設定很簡單, 詳見: 林北~!!
- 在 WordPress 百寶箱-11, 註冊網站的時候可以一併下載 All in one SEO Pack, 因為設定上也會需要 Google Webmaster 的認證碼, 詳見 Step 5, 網站優化~!!
Step 2. WordPress 備份再備份, 努力心血不白費~!!
備份! 備份! 備份! 因為很重要所以講三次!!!
- UpdraftPlus, 完整備份 + 手動備份回硬碟, 設定參考: 網賺速成班! 新手上路, 多備份沒事, 沒事多備份, 尤其是當你抱著雄心壯志想要改 “.htaccess”, “wp-config.php” 等等等這種可怕的程式的時候~!!
PS. FTP 上的備份資料預設是只存最新的 2 個喔, 所以在初期太常備份的時候也是會有蓋掉重要檔案, 只好哭哭捲土重來的可能… 哈, 如果遇到了就當做付學費吧, 新手上路總是會有出乎意料的新鮮事 ^^”
Step 3. WordPress 加鎖中, 網站安全有保障~!!
- 修改程式碼加強網站安全, 設定參考: 香腸炒魷魚! 香腸大大提供很多簡單的語法加強防護, 大家挑喜歡的做嚕~!! 我自己因為沒有固定 IP, 再加上很怕忘記密碼, 所以我沒有用 limit login attempts…
- Lockdown WP Admin, 修改登入網址讓駭客不得其門而入, 設定參考: 香腸炒魷魚! 大家記得要取個特別又好記的登入網址啊, 如果真的忘記, 也不會太麻煩, 只要先去 FTP 把這支 plugin 改名, 就可以用 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 劃重點! 裝好之後, 你每次新上傳的照片就會自動執行優化, 但是之前的照片就需要大家自己手動設定啦~!!! 手動批次優化設定如下面左圖! (點照片可以大圖喔~!!)
- Media –> Bulk Optimize –> Choose how long to pause between images –> “5” 這邊建議是設定 5-10s! 如果設定的時間太短可能會稍微拖慢網站的速度, 如果設定的時間太長, 則會等到天荒地老, 大家自行斟酌啦~!!
- Optimize Media Library –> Start Optimizing 開始後就會出現下面右圖優化中的狀態嚕~!!
- 接著要來檢查一下 DB 其他地方有沒有圖片需要壓縮! Optimize Everything Else –> Scan and Optimize
- 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!
- 文章版本限定, 語法參考: 香腸炒魷魚! 基於本人龜毛的個性, 一篇文章改個 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.com & nicolasgallagher.com)
PS. 辛苦改好, 建立了自己的 CSS 後, 下次佈景 update 的時候絕對要有這些 code 會被蓋掉的警覺啊~!! 備份備份, 還要記得下載自己的備份, 不然就只好捲土重來了, 哭~!! Jetpack 裡也有 Custom CSS 這個選項, 如果厭煩了每次 update themes 就要重貼好多設定那就啟用這個功能吧, 個人滿喜歡的 ^^
接著要推薦 WordPress 好用外掛們, 千萬不要錯過啦~!!!
Step 6. WordPress 推薦外掛, 美化網站方便又實用~!!
貼心小叮嚀: 因為 WordPress 行之有年, 所以千萬不要看到 “必備” 兩個字就安裝~!! 畢竟經過這幾年, WordPress 本身也已經進步了不少, 而且更好更輕量化的外掛也一直再推陳出清! 所以當大家用 “WordPress 必備外掛” 搜尋相關文章時, 還是建議大家先確認一下發表日期再做定奪喔~!! 截至目前為止尚在服役中的外掛 total 13 隻, 希望等我功力提升之後也能慢慢減少啦 ^^
- Tiled Galleries, 藝廊, JetPack 下的一個小外掛! 利用這個外掛組合照片直接放進 post or page, 是個寫文章的好工具~!! 不僅可以省了編排的時間也可以讓版面更漂亮, 推薦給大家啦~!! 有幾種不同的組合方式可以選擇大家可以玩玩看… 左圖是 Tiled Mosaic, 右圖是 Tiled Columns 的模式~!! 只是還是不可以太貪心, 不然會好長好長好長啊… ^^”
PS. 2017/12 Update: JetPack 真的是滿吃資源的一個 Plugin, 但如果一但愛上他們家的 Gallery, 那可能真的無法抽離了… 小桃公主曾經嘗試用其他的 Plugin 取代, 結論都是很醜的頁面, 或是需要一篇一篇文章重新微調… 所以, 小桃公主算是栽在 JetPack 手上了… 如果在意, 建議大家可以找別的替代… 網路上很多文章都提到可以把 JetPack 拆成不同的 Plugin 分別安裝… 大家可以斟酌一下啦~!!
- Gallery, 照片輪播, 這也是 JetPack 下的一個小外掛, 只要安裝 Extra Sidebar Widgets 後, 去 Appearance –> Widgets 把 Gallery (JetPack) 拉到側欄就可以新增 Gallery, 產生照片輪播小工具啦~!!
- 相關閱讀, 熱門文章, 最新文章 & 隨機文章個人覺得都是滿重要的側欄小工具… 如果自己的佈景主題沒有提供的話, 快去找好用又美觀的外掛吧~!! 也可以參考用加入語法的方式呈現, 畢竟外掛能少一支是一支嚕, 語法參考: 就是教不落, MUKI Space!
- Disqus Comment System, 我滿喜歡的留言系統~!!
- Simple Author Box, 文章結尾顯示作者欄, 更多 author box plugin 簡介參考: sitepoint! 個人覺得這是 blog 裡一個滿重要的元素, 宣示主權, 也可以增加一點專業感 (自己覺得啦 ^^)… 如果有多個作者共同維護, 就覺得更有必要了, 大家可以參考看看~!!
PS. 目前的版本 (1.5) 只會顯示在單篇文章, 如果 page 也想顯示, 可以 follow 以下步驟
- 進入 FTP, 在這個路徑下 /wp-content/plugins/simple-author-box/core 找到 “sabox_author_box.php” 這個檔案,
- 開頭前幾行可以找到這個語法 “if ( is_single() or is_author() or is_archive() )“
- 加上 is_page(), 整段程式變成 “if ( is_single() or is_page() or is_author() or is_archive() )“
- 儲存檔案!
- 接著一樣在 FTP 裡, 在佈景下找到頁面程式後在適當的位置加入下面語法就 ok 啦~!!
- 以我的 theme 為例, 我的頁面程式是 page.php, 加入位置是在 “<?php get_footer(); ?>” 前
雖然這樣可以達到 page 也有 author box 的心願, 但是如果佈景更新 or plugin 更新, 設定就會不見囉, 嘆… 真心希望下次 Simple Author Box plugin update 時可以增加這個選項 ^^
- Widget Visibility, 特定頁面顯示/不顯示 widget 的外掛! 這是 JetPack 下的一個小外掛, 如果你跟我一樣是個門外漢卻想自己改模板, 這個外掛好用又簡單!! 舉例來說, 如果我的主頁面不想要有某些側邊攔, 只要到 Appearance –> Widgets, 打開側邊攔的小工具, 在 SAVE 鍵旁會出現 visibility (可見度), 按下去就可以一個一個設定要不要顯示囉~!! 打到這裡真的覺得 WordPress 自由度 100 啊~!!!
- Count Per Day, 點閱統計外掛, 介紹參考: INNOVEXT! 雖然還不是很完美, 但算是我尋覓了好久, 符合有本日人氣, 在線人數 & 設計又不會跟網站設計美感衝突的一個計數器了… 他額外還有很完整的訪客報表, 每篇文章閱讀人數等詳細資訊可以給版主們觀察自己的 blog 訪客喔~!! 如果只是單純的想要個有型的總人數計數器, i2Yes 倒不失為一個好選擇, 可以參考看看! 如果大家有發現更讚的計數器麻煩通報我一聲啊!!!!
Google Adsense, 不用懂程式語法也可以隨心所與的擺放 Adsense 廣告外掛! PS. 這個 Plugin 已經宣布退休囉~!!- YouTube Channel, 影片輪播外掛! 因為我太想要影片輪播了, 所以在這裡下了不少功夫… 如果你也在苦惱怎麼在載入網頁時讓影片自動播放, 輪播又靜音, 不管你是想要用內嵌語法達成影片輪播或是轉而求助外掛, 都可以參考我的分享文喔, WordPress 筆記詳見: (Update: 2017/11 某天我又不想要這個功能了… 走向越來越簡潔的版面, 噗~!!!)
哈, 我絕對是不太喜歡裝太多外掛的 WordPress 新手, 所以, 以上都是我覺得非裝不可的外掛, 推薦給大家啦~!!
當然我也有不少備用的口袋外掛, 一般都 deactivate, 可能一個月 activate 一次跑跑測試嚕~!!
- WP-Optimize, 資料庫瘦身外掛, 久久再來瘦身一次啦, 只是使用上真的要小心, 真的是會刪的乾淨溜溜喔~!!
- Broken Link Checker, 檢查壞掉的連結! 雖然 Google Search Console 也會檢查, 但是這個外掛給的資料算是滿實用的, 久久 active 檢查一次就好~!!
- P3 (Plugin Performance Profiler), 檢查 plugins 對網頁下載速度的影響! 這種檢查性的 plugin 當然是久久檢視一次的時候再 activate 就好啦~!! 目前我的 plugins 對網頁下載影響度還有 65%, 其中 JetPack 竟然就佔了 46%!!!!!! 唉, 瘦身之路還好長啊~!!!
終於來到最後一個章節了, 呼, 非常的落落長啊 ^^” 最後想要介紹大家一路以來幫了我很多忙的實用網站們, 也歡迎大家跟我分享你的最常光顧實用網站, 一起分享一起成長啦~!!
Step 7. 修改網頁的實用工具們, 讓網頁初學者也能快速上手啦~!!
- HTML 教學 by 博全科技有限公司, 是網頁初學者的好幫手, 很詳盡的教學文喔!
- AKUZITI: 很多設計可愛的字體!! 如果需要可愛字體當做 title, 還滿不錯的, 我的標題就是用他們的可愛字型喔, 自己覺得大加分 ^^
- color-hex: 色碼對照, 選顏色的好幫手~!!
- unicode 一覽表: 可愛小圖式, 豐富文章內容的小工具~!!
- DevTool: 改版面格式/配色/字體大小的好幫手, 非常實用!
- GitHub: 分享程式語法的好工具, 設定參考: toppy368 的研究書房! 雖然自己並不是程式高手, 但是, 偶而也想要筆記並跟大家分享一下自己的收藏, 這就是個簡單又好用的小工具啦~!!
- 成效分析工具:
- PR Checker, 查詢 PR 值的好工具!
- GTmetrix, Pingdom, WEBPAGETEST, Google PageSpeed Insights or Think with Google: 測試網站速度 & 優化建議的好工具!
- 確認網站健康度:
- Google 黑名單? https://ismywebsitepenalized.com/ or just google “site:domainname.com” (ps. 新建立的網頁找不到被 index 的資訊是很正常的, 不要自己嚇自己呀…)
- Adsense 黑名單? http://www.bannedcheck.com/
最後好像還是要來結語一下…
我非常開心那些把我推坑進 WordPress 自有網域的先進們, 雖然這真的是一條不歸路 (包含 $$ 和 時間), 但是, 確實是一個很美, 很自由, 真的可以 100% control & 隨心所欲的世界!! 一開始的確需要花點時間摸索, 畢竟 Blogger 跟 WordPress 真的是 totally different stories!! 但是, 自己有了 domain 後,不會有花了很多時間找資料後才後發現只適用於自有網域的挫折感, 也不會有要屈就於醜醜版面的委屈, 這實在是太重要了 (好啦, 我承認是我自己功力不夠)~!!!
每天看著漂亮的版面心情真的好好啊~!!! 哈哈哈哈哈 ^O^ 現在要做的就是繼續努力寫文, 才不會浪費的這麼美麗的雜誌款啦~!!
以上是我認真玩了 WordPress 一個月後的心得, WordPress 新手們, 讓我們一起茁壯, 一起努力吧~!!!!
延伸閱讀:
- Blogger 搬家到 WordPress 不求人之搬家全紀錄~!!
- [WordPress 筆記] 嵌入 YouTube 影片/清單, 設定自動播放並靜音!
- [WordPress 筆記] YouTube Channel , 一支可以自動且靜音播放清單 & 展示影片藝廊的外掛~!!
–> 更多 WordPress 筆記詳見: ♥ Blogging ♥