返回支援 開始使用 使用區塊建立多語言網站簡易教學 (未使用外掛程式)

使用區塊建立多語言網站簡易教學 (未使用外掛程式)

WordPress 區塊編輯器持續新增各種自訂網站功能。本教學課程將說明如何使用區塊建立兩種語言的網站選單,並將介紹可供訪客變更網站檢視語言的一款語言切換器。

此處提供操作示範:

注意事項和參考資料

  • 語言切換器的功能並非翻譯頁面,而是讓你以兩種以上的語言向訪客展示網站。若要翻譯頁面,請自行尋找其他方法!
  • 這款語言切換器只會將使用者重新導向各種語言的起始頁面。
  • 在網站新增額外頁面也需要一併更新選單。
  • 初始設定需要一點時間,不過一旦設定完成,即可快速調整和更新。
參考資料和更多資訊

本教學課程將使用以下功能:

方法

1. 設定頁面和頁面代稱
2. 為選單和語言切換器選取版面配置
3. 建立語言切換器
4. 新增導覽選單
5. 儲存新選單和語言切換器
6. 第二語言選單
7. 將新選單加入其他頁面
8. 新增更多頁面

1. 設定頁面和頁面代稱

為了讓本教學課程充分發揮效用,建議使用與區塊編輯器相容的佈景主題 (請參閱此處清單)。

前往「我的網站」→「網站」→「頁面」。請先為網站各種語言分別建立起始頁面。此時還不需要新增很多內容;只要有頁面標題就夠了。

發表每個頁面,讓頁面處於最新狀態,然後參照各頁面語言變更頁面 代稱。在此範例中,法文起始頁面標題是 Accueil,頁面代稱則是 /fr/

圖片:顯示頁面標題為法文「Accueil」,「頁面代稱」設定設為「fr」

選擇偏好的語言起始頁面並指定為網站的靜態首頁。這可確保網站訪客會先看到一種語言,並且可以切換其他語言。

設好所有起始頁面後,再為各種語言建立一些其他內容頁面。此時仍無需新增內容,只要發表有標題的頁面即可。

建立頁面時,請在「頁面屬性」區段中將這些頁面指定為語言起始頁面的子頁面

圖片:顯示頁面標題,以及可定義上層頁面的「頁面屬性」區段。
範例 – 頁面結構概覽
下方範例是英文和法文兩種語言的起始頁面。這兩種語言各有兩個子頁面;英文頁面的是「About」和「Contact」,法文頁面的是「À Propos」和「Contact 」:
圖片:上層頁面和子頁面結構概覽。
2. 為選單和語言切換器選取版面配置

「我的網站」>「網站」>「頁面」中,按一下主要語言起始頁面的標題,在 WordPress 編輯器中開啟此頁面。

在編輯器中的頁面標題下方新增一個欄位區塊,然後選擇兩欄版面配置。如果想更換版面配置,可以在區塊設定中變更。如需深入瞭解如何執行此操作,請參閱欄位區塊指南。

建議使用一大一小欄位的版面配置。較小欄位可放置語言切換器,較小欄位可放置選單。

將欄位區塊設為寬幅全寬

圖片:顯示欄位區塊的寬幅對齊
3. 建立語言切換器

建立語言切換器有兩種方法,看你想如何顯示語言切換器而定:你可以輸入語言名稱,也可以使用內嵌圖片顯示國旗。

注意:我們不建議使用國旗代表語言,原因有二:
1.對於可能看不到國旗圖片的訪客來說不太方便
2.這樣可能會產生誤會,訪客看到國旗可能會聯想到不同語言!
為清楚起見,我們建議使用文字連結 (方法 1 或方法 2)。

方法 1 – 導覽區塊中的文字連結
你現在應有兩個欄位待輸入內容。請按一下較窄的欄位,插入導覽區塊
圖片:顯示區塊清單中的導覽區塊。
選取「從所有上層頁面建立」,在上層語言起始頁面自動填入導覽區塊。

你之後可以將各項目的文字改成語言名稱 (或縮寫):
動畫 GIF:變更導覽區塊中各連結的文字。
方法 2 – 段落區塊中的文字連結
你現在應有兩個欄位待輸入內容。按一下較窄的欄位,加入段落區塊
圖片:顯示從區塊清單中選取段落區塊。

依你偏好的格式輸入語言名稱,例如「EN」和「FR」,或「英文」和「法文」。

反白顯示各語言名稱,然後按一下「插入超連結」按鈕,將語言名稱連結至對應的起始頁面。範例:

動畫 GIF:反白顯示一段文字,並將該段文字設為網站頁面連結
使用語言縮寫:
動畫 GIF:反白顯示一段文字,並將該段文字設為網站頁面連結
方法 3 – 內嵌圖片
你現在應有兩個欄位待輸入內容。按一下較窄的欄位,加入段落區塊
圖片:顯示從區塊清單中選取段落區塊。
如果你有想用的語言國旗圖片,可以使用內嵌圖片功能 (位於「更多選項」下) 插入並連結圖片:
圖片:段落區塊的「更多選項」選單,並醒目標示「內嵌圖片」
在段落區塊中輸入一個空格,啟用區塊工具列並顯示「更多選項」選單。選取內嵌圖片時,媒體庫/上傳方塊將自動開啟。請上傳或選取你的國旗。有關上傳或選取圖片的更多資訊,請檢視此文件

新增圖片後,按一下圖片可以調整大小:
動畫 GIF:選取內嵌圖片,此時將出現尺寸選取器。
你可以將圖片轉換為連結,方法如同建立文字連結:
動畫 GIF:點選內嵌圖片以選取,然後按一下「連結」按鈕。接著可選取要連結的頁面。
請重複此步驟設定第二語言的國旗。
4. 為首要語言頁面新增導覽選單

接著在新語言切換器旁的欄位中加入導覽區塊。按一下空白欄位開啟區塊選單,然後搜尋「導覽」或直接在「版面配置元素」區段下搜尋該區塊:

圖片:顯示區塊清單的「版面配置元素」子區段,導覽區塊列於該區段的右上角。

導覽區塊會出現兩個選項,請選擇「建立空白區塊」。此時就可以將此區塊新增至頁面中:

為每個母語頁面新增連結。按一下導覽區塊右側的新增區塊按鈕 (黑色「+」按鈕),即可新增額外連結:

5. 儲存新選單和語言切換器

使用編輯器頂端的「區塊導覽」按鈕選取欄位:

動畫 GIF:使用「區塊導覽」選取欄位區塊 (內含導覽選單和語言切換器)。

使用欄位區塊工具列 檢視更多選項,然後選擇「新增到可重複使用區塊」:

圖片:顯示區塊工具列和「新增到可重複使用區塊」選項。

為新的可重複使用區塊命名以利識別,例如 選單 – 英文。你可以在本指南中閱讀可重複使用區塊如何運作的更多資訊。

也別忘了更新頁面,以儲存對頁面所做的變更。恭喜你,你的第一個選單和語言切換器已完成!

6. 第二語言選單

若要為第二語言建立選單,請重複步驟 1 至 5,或者採取捷徑:

WordPress 編輯器中開啟其中一個第二語言頁面。按一下新增區塊按鈕 (黑色「+」按鈕),在頁面中新增區塊。在區塊清單中向下捲到最底端,找到可重複使用區塊分類,也就是你的選單儲存位置。或者你可以使用搜尋方塊尋找此區塊。

動畫 GIF:使用區塊選單尋找可重複使用區塊。

在頁面新增選單區塊後,從「更多選項」選單中選取「轉換為一般區塊」:

圖片:顯示「更多選項」選單和「轉換為一般區塊」選項。

區塊變為一般區塊而非可重複使用區塊後,你可以更新導覽區塊,使其改與第二語言頁面連結。

方法 1 – 移除並重新加入新的導覽區塊
使用區塊導覽器選取導覽區塊:
圖片:顯示區塊導覽器以及如何選取區塊
移除整個導覽區塊:
圖片:顯示導覽區塊上的「更多選項」選單和「移除區塊」選項
然後依照上方步驟 4操作,為第二語言重新新增空白的導覽區塊
方法 2 – 變更導覽項目
按一下要變更的項目。按一下「連結」按鈕開啟連結資訊,然後按一下「變更」按鈕。接著輸入並選取所需頁面。請注意,你也需要手動變更連結文字:

動畫 GIF:變更導覽區塊項目

變更後,依照上方步驟 5 說明,將新欄位區塊另存為新的可重複使用區塊,並指定一個易於識別的名稱,表示這是第二語言選單。

也別忘了更新頁面,以儲存對頁面所做的變更。恭喜你,你的第二個選單和語言切換器已完成!

7. 將新選單加入其他頁面

你的選單和語言切換器已準備就緒。現在可以依照上方步驟 6說明,在其他頁面加入兩種語言的選單。請注意:儲存可重複使用區塊後,可以直接加入其他頁面,無需轉換成一般區塊。

8. 新增更多頁面

你已為每種語言建立更多頁面,並且需要將這些頁面加入選單嗎?別擔心,你可以編輯可重複使用區塊,這樣有加入重複使用區塊的每個頁面都會一併更新。詳情請見此處

Copied to clipboard!