我把所有在搬家過程中碰到的問題，以及解法條列如下，做為自己的筆記，也希望對讀者有幫助囉！
| 碰到的問題 | 我的解決辦法 |
| 從零開始的第一步 | 【申請Bluehost主機、Domain name】 |
| 從http://變成https:// | 【開啟SSL】 |
| 選擇Wordpress主題 | 【安裝Wordpress、選定主題】 |
| 把Wordpress從英文介面改成中文介面 | 【Wordpress中文化】 |
| 匯入之前的文章 | 【文章從Pixnet匯出至Wordpress】 |
| 修改匯入文章的超連結至新站的文章 | 【文章中超連結轉換】 |
| 修改文章中顯示的圖片，從舊站的連結搬到新站 | 【文章中圖片搬移】 |
| 精選圖片無法顯示 | 【顯示精選圖片】 |
| 在設定完精選圖片之後，單一文章中的精選圖片顯示了兩次 | 【隱藏在單一文章的頁面中的精選圖片重覆顯示】 |
| 中文摘要文字不正常顯示 | 【顯示正確的中文摘要文字】 |
| 無法顯示瀏覽人數 | 【設定計數器】 |
| 發表文章時編輯器太複雜 | 【文章編輯器替換】 |
| 文章編輯器無法插入表格或錨點等功能 | 【增強編輯器工具列】 |
| 分享文章連結至Facebook時，顯示的縮圖錯誤 | 【修正Facebook抓圖問題】 |
| 無法修改文章分類的排序 | 【修改文章分類的排序】 |
| 想要自訂所有的顏色 | 【修改佈景主題的各種顏色】 |
| 想要修改中文字型 | 【修改文章的字型】 |
| 將舊站文章導向新站 | 【移除舊站的文章，並加上超連結至新站】 |
| 設定備份 | 【設定好每日自動備份至Google雲端硬碟】 |
| 首頁文章縮圖被強制裁切 | 【修改the_post_thumbnail()的參數】 |
| 新增英文版的網站 | 【安裝Polylang並進行設定】 |
【申請Bluehost主機、Domain name】
申請一台Bluehost主機，我是直接申請三年約，附送一年免費的Domain name網域，總共費用是USD 3.95*36=TWD 4,266，平均一個月120元左右。
【開啟SSL】
申請好主機之後照著步驟按，就會把Wordpress安裝好了。安裝好之後先去bluehost的控制台中把My Sites→Security→Free SSL Certificate這個項目打開。(要注意的是在申請完Bluehost主機之後，安裝Wordpress是背景進行的，但是需要一段時間，因此在還沒安裝完Wordpress的時候是看不到這個開關的唷！要耐心等候一段時間)
註：開啟SSL除了資料傳輪的加密性之外，另一個目的就是為了Google SEO的評分會增加 (未來在Google search時比較容易排在前面)，所以記得要開啟唷！
【安裝Wordpress、選定主題】
選定外觀主題，這個步驟可是花了我超過一天的時間。我有選擇性障礙，很難選擇一個完全符合我想要風格的主題。對我來說最大的問題點是在主題的顏色部分。大部分的都是白底黑字，但是我比較喜歡深色底的主題，因此有看到非白底黑字的主題就變成優先考慮的項目。會選到我目前使用的「Newp」也是因為第一眼就看到他是深色佈景的主題 (後來才知道有些主題可能沒有開放顏色的調整，但是其實也都是可以自行更換裡面的所有顏色的唷！)。這個主題並有提供一個配合的RT Slider外掛可安裝。
【Wordpress中文化】
中文化之前先把系統使用的語言改成中文吧！在設定→一般→網站介面語言這裡修改。(我是已經改成中文介面才截圖的，讀者可能要自行對照囉)
接著再安裝Loco Translate外掛。Wordpress的中文化和我想像的很不同，並不是安裝完之後就直接變中文了，而是他會根據系統指定的語言，「慢慢地」在背後進行置換。因此安裝好之後並不會馬上變中文，可能要等個一陣子，有可能等個幾天，等他置換完之後才會一個一個變中文。厲害的是他會看你安裝了什麼Plugin，自行在背後搜尋中文化的資源並幫你進行中文化。
【文章從Pixnet匯出至Wordpress】
文章從Pixnet匯出：在痞客邦的控制台中使用「設定管理」→「匯入/匯出」→「匯出MT格式備份檔」
在Wordpress中使用Movable Type 及 TypePad 內容匯入程式，把剛才匯出的檔案從這裡匯入，文章(文字的部分)就全部都轉過來囉！
【文章中超連結轉換】
這是一個麻煩的程序，幸好有工具可以幫忙！先安裝Search Regex吧！
這個工具是用於搜尋並取代部落格中所有的文字。由於我的舊站有經歷過一次的SSL轉換，因此有些文章是http://，有些是https://，先利用這個工具做第一次的取代，把http://都先取代成https://
然後再進行第二次的取代，這次要把所有的文章一篇一篇的進行取代！這部分花的時間還不少(如果文章的數量很多的話！！)的話就可以把所有文章中的超連結都轉成正確的囉！我這次搬家總共有78篇文章…光取代超連結至少就花了快一個小時@@
【文章中圖片搬移】
完成了文章之間超連結的取代之後，雖然圖片也是可以用同樣的方式去取代，但是圖片麻煩的地方是只有舊站有圖片，這些圖片並沒有在新站的資料夾中。因此安裝Import external attachments這個工具
執行這個工具，他會找尋你文章中所有用到外部連結的圖片。只要輕按一下「Import attachments now」，這個工具就會幫你把所有使用到外部連結的圖片都抓下來並放在本地的相簿中，並且自動幫你置換超連結！是不是真的很方便呢？！！
在做完這次的取代之後，再使用Search Regex工具檢查是否文章中還有出現舊站的任何連結，結果發現還是有不少文章中的圖片並沒有被取代掉。查了原因是因為這些圖片的連結並不是單純的http://xxx.jpg之類的，而是後面還有帶奇怪的字串，”?v=xxxxx”，才造成匯入圖片失敗。因此這個步驟就要把這些取代失敗的文章，修改裡面的圖片連結，把後面的”?v=xxxxx”去掉，然後再執行一次的圖片匯入。
哇，做完了修改之後這次就所有的圖片都匯入進來囉！！
【顯示精選圖片】
在首頁的顯示上，一般都會在每篇的文章旁邊顯示一個「精選圖片(Featured Image)」。但我的首頁卻看不到每篇文章的精選圖片。這時就先安裝Quick Featured Images這個Plugin。
安裝之後在「精選圖片」→「預設圖片」裡面把前兩個項目打勾，儲存修改之後再回到你的部落格首頁~之後只要是有修改文章的話，就會自動更新每個文章的精選圖片囉！(我是先安裝完精選圖片之後才做圖片取代的步驟，在圖片取代完的時候精選圖片就都可以正常顯示囉！)
【隱藏在單一文章的頁面中的精選圖片重覆顯示】
在設定好精選圖片並能正確顯示於首頁之後，不要高興得太早，這時進入任何一篇文章中，會發現精選圖片出現了兩次！第一次是在這個文章的最上面，第二次是在文章中使用到這張圖片的那個位置。因此需要把第一次出現在頂端的那張精選圖片隱藏起來。修改佈景主題的「附加的CSS」這個部分，並貼上下面這段程式碼
.single-post .wp-post-image {
display: none;
}
就可以把每篇文章中顯示在最上方的精選圖片給隱藏起來囉！
【顯示正確的中文摘要文字】
在首頁顯示文章列表的時候，每篇文章除了精選圖片之外還會顯示一串摘要文字。而摘要文字常常會顯示過多字數，是因為中文部分的字數計算有點問題。這時就先安裝Advanced Excerpt外掛。
我希望能把我每篇文章的第一句話當成摘要來顯示出來。就在此外掛的設定中，選擇以「Word」為單位，然後長度為「1Word」←不用懷疑，就是1個Word。
這是因為此plugin並為法正確判斷中文的「Word」，因此他只能以空白鍵來判斷是否為Word的結尾。因此在文章的第一段，中間不能有任何的空格或是半型符號，要整句話完整的都用全型寫完，然後再換行，就會被此Plugin視為是一個Word，而當成摘要顯示在文章清單中。
【設定計數器】
先安裝WP Statistics。這是一個有著非常多統計資訊的一個強大plugin。
安裝好之後，先去「設定」→「存取層級」→ 「查看權限」修改為[ read」，這樣才能使得計數器能在網站中正常地顯示。
接下來就是把計數器放在網站中的小工具欄位中唷！放好之後就能正確顯示了。註：有時在這裡勾選要顯示的項目會有失敗的情況，這時可以換成不要在佈景主題的介面設定小工具，而是在Wordpress的「外觀」→「小工具」這裡直接修改使用到的小工具，我試了這個方法就可以成功了。
【文章編輯器替換】
由於我已經在痞客邦密集寫了1個多月的文章了，因此換到Wordpress來看到文章編輯器的介面，還真不知道該怎麼寫文章。這時就安裝傳統編輯器吧！
【增強編輯器工具列】
編輯器置換為傳統編輯器之後感覺好多了！是個類似Word的熟悉介面，但是常常要插入表格、錨點等等，卻在工具列中找不到這些功能，這時就再安裝一個「TinyMCE Advanced」的外掛程式吧。裝好之後再回到文章編輯器中，就可以看到許多新增的按鈕囉！
【修正Facebook抓圖問題】
不知道是不是我選定主題的問題，在一切就緒之後要做Facebook的貼文分享測試時，發現Facebook抓到的文章圖片都變成我首頁最上方的Logo，而非我預期要顯示的「精選圖片」。這時就安裝Yoast SEO這個工具，然後照著他的設定精靈一步一步地設定完SEO的最佳化，就可以解決這個問題囉！
【修改文章分類的排序】
這個其實是一個很小的問題，就是我想要調整首頁中顯示的文章分類的順序，安裝Category Order and Taxonomy Terms Order這個plugin就可以解決！
【修改佈景主題的各種顏色】
這部分是最工程化的一個部分，我自己研究了非常地久。先說明一下以下的這些步驟只適用於我使用的「Newp」這個佈景主題，不一定適用其他的主題。這個佈景主題有提供了四種的顏色主題，分別是default(Dark), light brown, dark brown, & green。我想要新增另一個顏色的主題「Monkey color」
(1) 先利用Bluehost提供的FTP功能，把目前使用的「Newp」佈景主題程式碼都下載下來。然後我把在3個不同位置出現的類似佈景主題檔案，把最接近我想要顏色的darkbrown都copy成monkey這個新的檔案。
接下來就是要先把monkey這個主題加入到佈景主題選擇顏色主題的選單中，修改newp\framework\customizer\skins_colors.php這個檔案，新加入以下畫面圈起來的這兩個段程式。
接著，把剛才copy出來的monkey.css檔案打開，研究一下每個物件的顏色分別是設定在那個地方並做修改之。簡單的方法就是在原來的首頁顯示原始碼，然後找尋出現的文字是被什麼樣的tag包起來，再去monkey.css這個檔案中找尋這個tag，並修改顏色。這部分要多做甞試，若修改錯了記得要先改回來，再測試下一個修改唷！
上傳修改好的monkey.css到原來的FTP目錄中之後，再回到控制台，佈景主題在設定顏色主題的部分應該就可以看到我們新增的「Monkey」顏色主題，按下去套用之，就可以把網站中我們修改的顏色部分套入囉！
【修改文章的字型】
由於我使用的主題與大部分的主題一樣，都只支援英文的顯示，因此裡面在字型的部分並沒有指定中文的字型。除了直接修改程式碼之外，直接再修改Custom CSS也是一個非常簡單的方法。只要把下面這段程式貼到附加的CSS上面，就可以發現中文的字型都變成「微軟正黑體」囉！
body{font-family: arial,”Microsoft JhengHei”,”微軟正黑體”,sans-serif !important;
font-size:16px;
}
【移除舊站的文章，並加上超連結至新站】
眼看就要大功告成了！記得最後一個步驟，是把舊站的所有文章都加上超連結，告訴訪客我的網站已搬家，並一篇一篇地貼上正確的連結，就可以囉！
註：如果沒有刪除舊站的文章的話，當Google爬蟲找到新站的文章就會發現與舊站的文章重覆，也會影響到SEO的分數唷！
【設定好每日自動備份至Google雲端硬碟】
在一切就緒之後，因為網站上的每篇文章都是我的心血結晶~~所以一定要設定好自動備份，才不會那一天網站掛掉了就血本無歸啦~~(是這樣用嗎？XD)
先安裝UpdraftPlus吧！使用免費版即可~~
接下來就是照著設定囉！在設定→UpdraftPlus備份的頁面，點選「設定」，然後設置備份排程的間隔，並設定備份的地點 – 我是設定在我的Google雲端硬碟的空間裡，然後先儲存設定之後，會直接有頁面來要求存取權~ 照著步驟做就可以設定完成囉！設定完成之後可以回第一個頁面「Backup / Restore」直接手動進行備份試試看，一次就成功~ 大概只要不到10分鐘的時間，我在我的Google雲端硬碟中就可以看得到檔案囉！非常方便。
某一天我不知道動了什麼，首頁的文章縮圖(Featured image)發生被裁切的狀況 (如下圖)
我先修改了控制台中的「設定」→「媒體」，把縮圖裁切的選項先取消。
後來我追了一下程式碼，找到產生這段code的php程式，修改呼叫the_post_thumbnail()這個function的第一個參數為’post_thumbnail’後就解決了。
【安裝Polylang並進行設定】
想試著新增英文版的網站，把心血結晶向更多人分享！我找到最多人推的免費plugin是Polylang (另有付費版更強大的plugin叫WPML)
安裝完之後先確定控制台中的「設定」→「一般」裡面的語言還是維持中文沒有跑到，再繼續進行下一步~
在Add new language這邊先新增主要語言，就是中文啦~ Order為0，然後按「Add new language」
按下去之後在右邊就會出現中文了，此時先按上方的「You can set them all to the default languages」，來把目前所有站上的文章的語言都設定為中文。
接著再新增英文，Order換成1。
然後控制台中，要新增文章的時候或是管理文章介面、或管理頁面的介面就都會出現新增英文版的介面了！，如下圖，按下+就可以新增此頁面對應的英文版頁面 (是獨立的一個新頁面，因此裡面的內容需要再自行從中文copy過來再翻譯之)
要在工具列中新增語言切換的小工具，在控制台的「外觀」→「小工具」中將Language switcher加到工具列吧！就可以實現我的多國語言網站啦！(真正辛苦的翻譯工作才正要開始呢…)
以上是我這次從搬家開始一路走來的學習筆記~有碰到其他問題的話再陸續增加囉！
Views: 1555