WordPress 區塊編輯器持續新增各種自訂網站功能。本教學課程將說明如何使用區塊建立兩種語言的網站選單,並將介紹可供訪客變更網站檢視語言的一款語言切換器。
此處提供操作示範:
在此指南中
- 語言切換器的功能並非翻譯頁面,而是讓你以兩種以上的語言向訪客展示網站。若要翻譯頁面,請自行尋找其他方法!
- 這款語言切換器只會將使用者重新導向各種語言的起始頁面。
- 在網站新增額外頁面也需要一併更新選單。
- 初始設定需要一點時間,不過一旦設定完成,即可快速調整和更新。
本教學課程將使用以下功能:
1. 設定頁面和頁面代稱
2. 為選單和語言切換器選取版面配置
3. 建立語言切換器
4. 新增導覽選單
5. 儲存新選單和語言切換器
6. 第二語言選單
7. 將新選單加入其他頁面
8. 新增更多頁面
為了讓本教學課程充分發揮效用,建議使用與區塊編輯器相容的佈景主題 (請參閱此處清單)。
前往「我的網站」→「網站」→「頁面」。請先為網站各種語言分別建立起始頁面。此時還不需要新增很多內容;只要有頁面標題就夠了。
發表每個頁面,讓頁面處於最新狀態,然後參照各頁面語言變更頁面 代稱。在此範例中,法文起始頁面標題是 Accueil,頁面代稱則是 /fr/
:
![圖片:顯示頁面標題為法文「Accueil」,「頁面代稱」設定設為「fr」](https://en-support.files.wordpress.com/2019/12/frslug.png?w=1024)
選擇偏好的語言起始頁面並指定為網站的靜態首頁。這可確保網站訪客會先看到一種語言,並且可以切換其他語言。
設好所有起始頁面後,再為各種語言建立一些其他內容頁面。此時仍無需新增內容,只要發表有標題的頁面即可。
建立頁面時,請在「頁面屬性」區段中將這些頁面指定為語言起始頁面的子頁面:
![圖片:顯示頁面標題,以及可定義上層頁面的「頁面屬性」區段。](https://en-support.files.wordpress.com/2019/12/parentpagesetting.png?w=1024)
範例 – 頁面結構概覽
![圖片:上層頁面和子頁面結構概覽。](https://en-support.files.wordpress.com/2020/04/parentchildstructure.png)
在「我的網站」>「網站」>「頁面」中,按一下主要語言起始頁面的標題,在 WordPress 編輯器中開啟此頁面。
在編輯器中的頁面標題下方新增一個欄位區塊,然後選擇兩欄版面配置。如果想更換版面配置,可以在區塊設定中變更。如需深入瞭解如何執行此操作,請參閱欄位區塊指南。
建議使用一大一小欄位的版面配置。較小欄位可放置語言切換器,較小欄位可放置選單。
將欄位區塊設為寬幅或全寬:
![圖片:顯示欄位區塊的寬幅對齊](https://en-support.files.wordpress.com/2019/12/columnalignment.png?w=1024)
建立語言切換器有兩種方法,看你想如何顯示語言切換器而定:你可以輸入語言名稱,也可以使用內嵌圖片顯示國旗。
注意:我們不建議使用國旗代表語言,原因有二:
1.對於可能看不到國旗圖片的訪客來說不太方便
2.這樣可能會產生誤會,訪客看到國旗可能會聯想到不同語言!
為清楚起見,我們建議使用文字連結 (方法 1 或方法 2)。
方法 1 – 導覽區塊中的文字連結
![圖片:顯示區塊清單中的導覽區塊。](https://en-support.files.wordpress.com/2019/12/navlang1.png)
你之後可以將各項目的文字改成語言名稱 (或縮寫):
![動畫 GIF:變更導覽區塊中各連結的文字。](https://en-support.files.wordpress.com/2019/12/navlang2.gif)
方法 2 – 段落區塊中的文字連結
![圖片:顯示從區塊清單中選取段落區塊。](https://en-support.files.wordpress.com/2019/12/addparagraph.png?w=1024)
依你偏好的格式輸入語言名稱,例如「EN」和「FR」,或「英文」和「法文」。
反白顯示各語言名稱,然後按一下「插入超連結」按鈕,將語言名稱連結至對應的起始頁面。範例:
![動畫 GIF:反白顯示一段文字,並將該段文字設為網站頁面連結](https://en-support.files.wordpress.com/2019/12/textlink1.gif)
![動畫 GIF:反白顯示一段文字,並將該段文字設為網站頁面連結](https://en-support.files.wordpress.com/2019/12/textlink2.gif)
方法 3 – 內嵌圖片
![圖片:顯示從區塊清單中選取段落區塊。](https://en-support.files.wordpress.com/2019/12/addparagraph.png?w=1024)
![圖片:段落區塊的「更多選項」選單,並醒目標示「內嵌圖片」](https://en-support.files.wordpress.com/2019/12/inline1.png)
新增圖片後,按一下圖片可以調整大小:
![動畫 GIF:選取內嵌圖片,此時將出現尺寸選取器。](https://en-support.files.wordpress.com/2019/12/resizeflag.gif)
![動畫 GIF:點選內嵌圖片以選取,然後按一下「連結」按鈕。接著可選取要連結的頁面。](https://en-support.files.wordpress.com/2019/12/linkimg.gif)
接著在新語言切換器旁的欄位中加入導覽區塊。按一下空白欄位開啟區塊選單,然後搜尋「導覽」或直接在「版面配置元素」區段下搜尋該區塊:
![圖片:顯示區塊清單的「版面配置元素」子區段,導覽區塊列於該區段的右上角。](https://en-support.files.wordpress.com/2019/12/navblock1.png?w=1024)
導覽區塊會出現兩個選項,請選擇「建立空白區塊」。此時就可以將此區塊新增至頁面中:
![](https://en-support.files.wordpress.com/2019/12/navblock2.png?w=1024)
為每個母語頁面新增連結。按一下導覽區塊右側的新增區塊按鈕 (黑色「+」按鈕),即可新增額外連結:
![](https://en-support.files.wordpress.com/2019/12/navblock3.gif?w=1024)
使用編輯器頂端的「區塊導覽」按鈕選取欄位:
![動畫 GIF:使用「區塊導覽」選取欄位區塊 (內含導覽選單和語言切換器)。](https://en-support.files.wordpress.com/2019/12/selectcolumns.gif?w=1024)
使用欄位區塊工具列 檢視更多選項,然後選擇「新增到可重複使用區塊」:
![圖片:顯示區塊工具列和「新增到可重複使用區塊」選項。](https://en-support.files.wordpress.com/2019/12/addtoreusable.png?w=1012)
為新的可重複使用區塊命名以利識別,例如 選單 – 英文。你可以在本指南中閱讀可重複使用區塊如何運作的更多資訊。
也別忘了更新頁面,以儲存對頁面所做的變更。恭喜你,你的第一個選單和語言切換器已完成!
若要為第二語言建立選單,請重複步驟 1 至 5,或者採取捷徑:
在 WordPress 編輯器中開啟其中一個第二語言頁面。按一下新增區塊按鈕 (黑色「+」按鈕),在頁面中新增區塊。在區塊清單中向下捲到最底端,找到可重複使用區塊分類,也就是你的選單儲存位置。或者你可以使用搜尋方塊尋找此區塊。
![動畫 GIF:使用區塊選單尋找可重複使用區塊。](https://en-support.files.wordpress.com/2019/12/findblock.gif?w=1024)
在頁面新增選單區塊後,從「更多選項」選單中選取「轉換為一般區塊」:
![圖片:顯示「更多選項」選單和「轉換為一般區塊」選項。](https://en-support.files.wordpress.com/2019/12/converttoregular.png?w=928)
區塊變為一般區塊而非可重複使用區塊後,你可以更新導覽區塊,使其改與第二語言頁面連結。
方法 2 – 變更導覽項目
![動畫 GIF:變更導覽區塊項目](https://en-support.files.wordpress.com/2019/12/changenavitem.gif)
變更後,依照上方步驟 5 說明,將新欄位區塊另存為新的可重複使用區塊,並指定一個易於識別的名稱,表示這是第二語言選單。
也別忘了更新頁面,以儲存對頁面所做的變更。恭喜你,你的第二個選單和語言切換器已完成!
你的選單和語言切換器已準備就緒。現在可以依照上方步驟 6說明,在其他頁面加入兩種語言的選單。請注意:儲存可重複使用區塊後,可以直接加入其他頁面,無需轉換成一般區塊。
你已為每種語言建立更多頁面,並且需要將這些頁面加入選單嗎?別擔心,你可以編輯可重複使用區塊,這樣有加入重複使用區塊的每個頁面都會一併更新。詳情請見此處。