Select Page

WordPress Multi Language Website – 逐步架設多國語言網站

WordPress Multi Language Website – 逐步架設多國語言網站

WordPress Multi Language Website

WordPress Multilingual – 如何建立多國語言網站這一篇文章,跟大家分享了幾個可以在 WordPress 建立多國語言網站的外掛程式,每一個外掛程式各有各的優點,今天將取其中的一款外掛程式以 Step By Step 的方式,將逐步架設多國語言網站 WordPress Multi Language Website 的步驟 ,整理出來展示給大家參考,希望可以幫助有建立多國語言網站需求的朋友。

準備工作

  • 首先是需要有一個已經建立好的網站,是中文或是英文都可以。
  • 請下載安裝 Polylang 這一個外掛程式,這一篇文章是以 Polylang 來做示範說明的。
  • 多國語言版本的建立重點在:
    1. 網頁語言切換
    2. 多國語言選單
    3. 多國語言網頁內容展示。
  • 文章的佈景主題是 Virtue,頁面的建置方法是使用 Page Builder by SiteOrigin 來完成的。
  • 這一篇文章重點在敘述 Polylang 的建置步驟,所以網站建置方式不在此篇文章示範內容當中。

 

中文網站首頁
中文網站首頁

 

英文網站首頁
英文網站首頁

 

Step By Step

    1. 安裝並啟用 Polylang 外掛程式,然後在後台管理介面找到設定/語言/新增語言,即使網站語言已經是中文,如果多國語言版本的網站將採用第一語言是中文,那麼這裡請一定要記得優先新增中文,點選確定後請按新增語言按鈕(圖一)。

 

新增中文語言
(圖一)新增中文語言

 

    1. 中文語言新增完成後,會出現一個小小的警示區塊,通知網站有幾篇文章,可以調整為預設的語言版本,如果網站的第一語言是中文,請點選 You can set them all to the default language.讓程式自動將文章設定成預設的語言版本(圖二)(圖三)。

 

已編輯文章調整預設語言
(圖二)已編輯文章調整預設語言

 

已編輯文章調整預設語言完成
(圖三)已編輯文章調整預設語言完成

 

    1. 接著新增第二種語言版本,以這篇文章為範例,我們要新增英文,新增完成後可以看到我們有兩個語言版本了(圖四)(圖五)。

 

新增英文語言版本
(圖四)新增英文語言版本

 

新增英文語言版本
(圖五)新增英文語言版本完成

 

    1. 開始新增頁面內容為英文語言版本,以這一篇文章為例,我們需要對首頁 / 公司介紹 / 專業技術 / 服務項目等四個頁面做新增英文內容的動作,請到後台管理介面的工具欄找到頁面,接著我們以首頁新增英文語言版本來做範例,其他頁面方法相同,就不重複撰述。
    2. 在首頁編輯頁面右側,可以看到語言選項,請點選 + 符號(圖六),接著會轉換到相同文章內容的編輯頁面(圖七),這裡請記得填入的頁面標題(英文),後續的編輯會需要使用到,以這篇文章為範例我們在標題這裡填入Home-En,頁面內容也請依序修改成英文內容,完成以後請發表文章。

 

首頁新增英文語言
(圖六)首頁新增英文語言

 

編輯英文首頁內容
(圖七)編輯英文首頁內容

 

    1. 再回到工具欄的頁面區塊,可以看到我們現在有兩個首頁(圖八),接著就請依照上面的步驟重複的將公司介紹 / 專業技術 / 服務項目這三個頁面也新增英文語言內容(圖九)。

 

中文與英文首頁完成
(圖八)中文與英文首頁完成

 

中文與英文頁面建置完成
(圖九)中文與英文頁面建置完成

 

    1. 多國語言網頁內容建置完成以後,接著我們就要來建立中文與英文頁面各自的選單。請到外觀/選單/新增選單,這裡我們新增一個中文上方選單,將首頁 / 公司介紹 / 專業技術 / 服務項目等四個頁面拉到選單裡,選單設定區塊請勾選 Primary Navigation 中文 (台灣),其他的就不需要勾選,完成以後請儲存選單(圖十)。(註)每一個佈景主題選單的位置或有不同,可以自行斟酌並以主選單開始建置起。
    2. 中文選單建立完成以後,可以在中文首頁看到中文的選單了(圖十一)。

 

建立中文上方選單
(圖十)建立中文上方選單

 

中文首頁中文選單
(圖十一)中文首頁中文選單

 

    1. 接著在外觀/選單,建立新選單,這裡我們建立上方英文選單,並將 HOME-EN/Professional/Company Info/Service 等四個英文頁面拉至選單,選單設定請勾選 Primary Navigation English(圖十二)。
    2. 上方英文選單建立完成,英文首頁就可以看到英文選單了(圖十三)。

 

新增英文選單
(圖十二)新增英文選單

 

英文首頁英文選單
(圖十三)英文首頁英文選單

 

    1. 接著在外觀/選單,建立新選單,我們要建立語言切換選單。當然這一個步驟語言切換選單也可以結合在上一個上方選單步驟裡,不過在這個佈景主題搭配下,我們選擇為語言切換新增一個選單,Topbar Navigation 中文 (台灣)與 Topbar Navigation English 這兩個地方需要勾選(圖十四)。
    2. 語言切換選單建立完成以後,在中文頁面或是英文頁面都可以看到這個語言切換的選項(圖十五,圖十六),步驟到此,整個中文與英文並存的網站建立就算完成了。

 

新增中文英文語言切換選單
(圖十四)新增中文英文語言切換選單

 

中文首頁中文英文語言切換選單完成
(圖十五)中文首頁中文英文語言切換選單完成

 

英文首頁中文英文語言切換選單完成
(圖十六)英文首頁中文英文語言切換選單完成

 

結論

架設網站透過 WordPress 的佈景主題與外掛程式搭配,完美的建立了多國語言網站,這不再是一件困難又痛苦的工作。作為一個網站管理者或是設計者,在因應全球化的趨勢下,都應該審慎思考將自己的網站建置成為多國語言版本,因為這將不再是一個選項,而是一個必經過程。
 
 

About The Author

max

使用 WordPress 架設網站不再是一件痛苦的工作。這裡跟大家分享使用WordPress的相關問題與研究。 並且提供有關WordPress外掛程式,佈景主題等等的使用經驗分享。 幫助想要建立網站的朋友,可以簡單,快速,無痛苦的建立與使用網站。

4 Comments

  1. max

    Jim 你好,方便提供你的網址嗎?

  2. KAIENS

    你好..我想請教一下..如何讓2個以上的語系使用同一個頁面?
    這樣說好了..假設我架了一個商業網站…
    在產品頁以外的部份,每種語言做一個頁面這都沒問題..
    可是產品頁的部份 我希望不管什麼語系都是只要用英文版的就好..
    該要怎麼設定會比較好? 我在頁面的編輯頁面中 在右邊的語系文字框內直接填入同一個頁面名撐…可是更新儲存後都無法設定進去…

    因為產品很多…三個語系要更新三次的話..很沒效率..浪費時間..徒增管理上的困擾…

  3. max

    KAIENS
    你好,關於這個問題,你提到因為產品很多,所以想以產品為主,產品也是以英文為唯一語系。
    印象中,polylang 關於語系設定,商品屬於設定裡的 Custom post types and Taxonomies,如果沒有勾選,商品是沒有語系選項的,並不需要建置其他語系內容。
    這部分請檢視一下。