概說多國語系製作
前言
在WordPress網站設計中,常常會聽到需要製作多國語系的網站的需求,一般人可能都是直接朝安裝相關外掛方向去思考,的確,安裝外掛是一個方式,但不見得是最佳方式。
在我剛出道前幾年,也是遇過一個客戶需要製作多國語系網站的需求,那時候是使用「WPML」多國語系外掛,這是一個付費式外掛,每年持續需要付訂閱費用(也不便宜),重點是這外掛在使用上有點複雜,光我自己在操作就覺得有難度了,交接給業主時他們也是覺得不太好管理整個後台也是很不順手,而且這外掛也會滿拖慢整個網站效能的,自該次案子的經驗後,我就不再使用這支「WPML」多國語系外掛來製作多國語系的網站了。
不一定要靠外掛
後來隨著自己的接案經驗越來越豐富,也開始有一點程式能力了之後,讓我體會到製作多國語系網站,因應不同需求則會有不同的作法,這些不同的作法中也可以用外掛,但有些需求可以完全不用外掛,僅靠jQuery也能在前端直接判斷處理導向另一語系 ,這讓我在製作多國語系中呈現出與別人完全不一樣的思維與作法。
假設是一頁式網站(不含電商)的多國語系需求
一次先設計好不同語系的頁面,透過點擊事件判斷並做網址導向就好了。
假設是形象網站(不含電商)的多國語系需求
也是一次先設計好不同語系的頁面,透過點擊事件判斷並做網址導向就好了,但尚須把主選單預先建好多組、頁面的階層架構或網址格式須先規劃出一致性,以利jQuery判斷。
假設含有文章功能的網站(不含電商)的多國語系需求
在文章分類上也都要預先建好不同語系的分類名稱,並讓文章分類網址的「slug」有規則性,以利jQuery判斷。
當然以後業主在新增文章上架時,也是要同時寫好不同語言的文章,並勾選對應的語系分類。
假設是含有電商功能的網站
在結帳時因考量到貨幣的不同、結帳欄位須要填的類型也不同、運送方式、付款方式的不同,
我是覺得直接做成「不同網站」處理更為方便,網址就用子網域的方式或資料夾目錄的方式都可以,這樣比較好管理,
然後也是用jQuery判斷訪客的語系或點擊想切換的語系做網址導向的處理。
網址規劃
做多國語系的網站很注重網址的規則,這一定要事先規劃好,會影響製作時的難易度,甚至也會影響SEO,
這邊只是先提個概念,實務上要執行時仍須與業主討論,因網址格式可能的有一些不同的考量。
注意版型破版
假設是製作「中英」兩個語系,任每一頁的文案都是中文與翻好的英文來分別置入,對吧?
但中文與英文,同樣一句話或同一個單字,它的字元長度完全不一樣,
例如「資訊」、「infortamtion」這單字的中英文的字元長度不一樣,甚至「中文一句話」在翻成英文後就變得更長了,那麼假設首頁的中文與英文的版型都是長得一樣的,但因不同字元長度的影響,會造成英文版的首頁可能會因過長的文字造成版面高度被撐開撐高了,或是跑出區塊範圍,造成整體頁面的排版都走鐘了,這個問題絕對是製作多國語系網站的痛,與用多國語系外掛或不用多國語系外掛的作法並無關係。
解決方式,就是兩個網站的每一頁的版型,統統要用頁面編輯器(例如Elementor)重新排版或微調過,或是適時把文案做修改刪修,請翻譯人員重新配合版型把譯文簡化至大意與中文一樣即可。
誰說兩個語系的內容一定要完全一樣?
有人覺得多國語系網站就是要長得一模一樣,只要有辦法把裡面的字翻成不同語言的字就好,若是這樣,我建議他直接用「Google翻譯外掛」就好,這樣就不用每一頁都要製作2次以上且還要調整版型,不過「Google翻譯外掛」所直翻的文法、語意常常會不順,甚至專有名詞也是無法識別,絕對會出很多問題。
我的看法是兩個語系的架構、內容可以大同小異就行了,不一定要長得完全一樣,甚至有些內容在中文版網頁可以出現,在英文版網頁可以不出現,這都是可以跟業主商討的,不須強制死腦筋硬把兩個網站搞成像鏡射一般。
總結
目前以我的能力,我是不再靠肥大又難用的多國語系外掛了,針對不同的需求寫點jQuery處理,反而輕鬆許多,也不影響整個主機的效能,慢慢的會把這些技巧整理上來,當然該收費時仍是要收費,畢竟這都是我的智慧財產權與心得經驗。
遠振主機簡介
簡介
「遠振主機」是網路負面風評算是非常少的一家台灣主機商,如果你一定要選「台灣主機商」的話,真的是滿建議找遠振的,它也提供直接購買網域的服務,主機與網域在同一家買的話,對新手比較友善。
說明
效能
雖然上面介紹的WordPress專用主機僅是「虛擬主機」的等級,但在效能與速度的使用上,我也覺得滿穩的,與之前介紹的Cloudways主機比,我覺得也不遜色。
客服
台灣主機商當然是有中文的客服,這一點的確是優勢。
不過主機商的客服僅是協助你「主機端」的問題,例如主機流量異常、CPU使用異常、斷線等等,而「網站端」的問題例如網頁跑版、主選單無法切換、….等等,非他們的服務範圍,這一點請使用者務必先了解在先喔!
發票
可以開發票,這對一定需要開發票的公司是一個值得考慮的點。
企業信箱
送20個免費的企業信箱(依不同方案而定),但信箱的使用會增加主機的使用空間的額度。
特別要注意的
如果你一台主機可能架二個以上的網站而且是對應不同的新網域,那麼在遠振主機中,它的限制是無法這樣做,如果你有這樣的需求,請你仍然租用Cloudways主機,才能有這樣的服務。
但如果你要在遠振主機中架第二個網站而且不使用新的網域,僅使用子網域的話來對應的話,那遠振主機就可以有這樣的功能!
『子網域』說明 ,
例 :
- 主網域 : smallway.com.tw
- 子網域1 : ex1.smallway.com.tw
- 子網域2 : ex2.smallway.com.tw
- 子網域3 : shop.smallway.com.tw
『 smallway.com.tw』就是我買的主網域,而我也可以對它再做切分成前面帶有一個類似id的自訂名稱,就稱為子網域。
子網域視同為一個全新的網址,它可以對應你新架設的網站,這樣就不用再花錢買全新的網域。
總結
基本上我的客戶們與我本身,遠振主機與Cloudways都有使用,效能上我覺得都不差,主要是考量其它層面來決定用哪一家,例如中文客服、只有架一個站的需求、國外買主機有匯差等等…
[儲值]Cloudways主機如何趁匯率好時預付月租費?或是改成「年付」?
前言
在Cloudways主機中的付款模式一律只有「月付」,但考慮到匯差的問題,其實我們也可以趁台幣匯率對我們比較有利時,「預付」一筆費用當成「儲值」,這樣以後每月主機費就會從此預付金額直接扣除,是不是也是一種省錢的方式?
加上使用有現金回饋0.5%~1%的信用卡,就更能再省點小錢了。
如果你是接案人員,幫客戶代申請Cloudway主機且是綁自己的信用卡,若是每月代墊並要再跟客戶收款的話,也是很不方便,所以也可以一次預付12個月的金額,就當作是「年繳」,這樣一年只要跟客戶收一次主機費用就行了,是不是就方便許多呢?
進入個人帳戶介面
依下圖步驟點擊
![[儲值]Cloudways主機如何趁匯率好時預付月租費?或是改成「年付」?-1](https://smallway.com.tw/wp-content/uploads/2022/08/image-1-1024x564.png)
輸入預付金額
這裡都是以美金計算喔!
![[儲值]Cloudways主機如何趁匯率好時預付月租費?或是改成「年付」?-2](https://smallway.com.tw/wp-content/uploads/2022/08/image-2-1024x335.png)
確認儲值結果
完成刷卡後,如下圖確認有沒有成功,有出現「Added」就代表成功了。
![[儲值]Cloudways主機如何趁匯率好時預付月租費?或是改成「年付」?-3](https://smallway.com.tw/wp-content/uploads/2022/08/image-3-1024x483.png)
有這方面問題,請記得密線上24小時客服,他們會幫你確認與排除預付上的任何問題。
當文字後面出現「obj」時的處理方法
如下圖,文章標題後面出現「obj」,這是什麼原因造成的呢?

其實道理很簡單,這一般是快速或大量複製資料來貼到WordPress中所造成的,最常見的是從Word或其它網頁複製資料來貼上所導致,因所複製的資料帶有「原始格式」,就自動現成了「obj」的字樣。
解決方法就是重新編輯該頁,把資料剪下先貼到記事本,再複製後再貼上就正常了。
以後如果要複製資料貼上時,記得先貼上記事本再複製過去,
或是直接使用「Ctrl + Shift + V」來貼上,就不會造成出現「obj」了。
「Ctrl + Shift + V 」→ 可以消除原始資料的格式。
如何讓訪客在購物車頁面之前,必須先登入會員或註冊?
簡介
雖然Woocommerce可以設定成在結帳時就順便註冊或登入,但仍會有業主有這樣的需求,就是求「會員要先登入」或「會員要先完成註冊」才可以結帳,此時本篇作法可派得上用場。
運用範圍
有安裝Woocommerce的購物網站。
範例
略。
原理與思路
這個需求,其實可以不用再裝什麼額外電商相關外掛,可以用301轉址外掛【Redirection】處理即可。
實作
雖然這篇我當作是付費式文章,畢竟當初也是多方嘗試不靠其它外掛來達成此需求的方法也花費不少時間,故就酌收學習幣囉!
不想購買本篇的人也可以自行嘗試,上面已有提示用301轉址外掛囉!
付費內容,需支付 : 100 個學習幣
您須先登入會員以使用學習幣與發問功能。總結
301轉址外掛本就是我必備必裝的,所以這樣我就免再裝其它外掛來達成此需求。
如何指定某些商品不能一起加入購物車中?(免外掛)
簡介
這個需求滿常見的,有時候因特殊情境需求,例如A商品與B商品有不同的運費,所以不能一起被加入購物車結帳,這樣的功能一般都要找特殊的外掛或付費式的外掛才能達成,而這樣的外掛好像也不好找。
運用範圍
1、有可能是有多個不同頁面或重類的「一頁式購物」,所以購物車中只能存在「當下這一頁式購物中所開放購買的商品」。
2、有些是低溫運送與常溫運送的商品,因運費不一樣所以須分開下單。
3、有些是特殊優惠商品,不能與一般商品一起下單。
4、有些是可寄海外、有些只寄國內的商品,所以要分開下單結帳。
5、有些是虛擬商品(例如課程)、有些是實體商品,所以分開下單結帳。
範例
原理與思路
免外掛,主要是在購物車頁與結帳頁寫了一篇jQuery程式,來判斷指定的商品是否有被「一起加入購物車中」,有的話會跳出警告,並暫時把結帳按鈕禁用,等訪客有刪除部分指定商品後,警告才會消失並才可以結帳。
在程式原始碼中,你可以先填入幾個不能與一般商品加入購物車的商品分類名稱,例如”冷凍食品的分類“、”預購商品的分類“預先設定好後,這二個分類的商品就不能與其它分類商品一同被加入購物車中。

另這個作法唯一有一個限制,就是Woocommerce內建的「購物車」流程仍需存在,也就是在訪客加入購物車後,在結帳過程中仍需出現「購物車明細」才能讓程式產生判斷的作用。
只要貼上本篇介紹之程式碼 ,即可運作。

實作
付費內容,需支付 : 999 個學習幣
您須先登入會員以使用學習幣與發問功能。總結
[細論][標題]調製不同樣式的「標題」
如何只靠Elementor而不靠其它外掛來自製麵包屑(Breadcrumbs)以強化SEO效用?
簡介
為了增加SEO效果與使用者體驗(讓訪客知道目前位於哪一頁),在設計網頁時常會在每一篇上方適當位置中加入「麵包屑(Breadcrumbs)」。
一般都是靠佈景主題內建的麵包屑(Breadcrumbs) 或 SEO外掛 或 麵包屑(Breadcrumbs)外掛來達成。
最常見的作法是靠SEO外掛就帶有麵包屑(Breadcrumbs)功能,但有些SEO外掛並不內建此功能(或是買Pro版才有),但也沒關係,我們可以利用Elementor Pro的模版功能來自製且更彈性,且不需再安裝任何外掛。
運用範圍
任何網站類型的每一篇文章、每一頁面、甚至每一商品都適用。
範例
用Elementor Pro做出以下範例的麵包屑(Breadcrumbs) :
- 首頁
- > 【Elementor】實戰情境題(含語法)
- > 如何只靠Elementor而不靠其它外掛來自製麵包屑(Breadcrumbs)以強化SEO效用?
這可不是寫死的文字,而是網頁載入時會自動根據這一頁的分類位置而自動出現相對應的分類與位置路徑。
原理與思路
用Elementor Pro的動態欄位對應來達成製作麵包屑(Breadcrumbs)的目的,所以我們一般會在「單篇文章」或「單篇頁面」或「單篇商品」的模版製作時,使用三組標題或文本或圖示列表來指定動態對應。
而範例中的「>」也是我們手動加的,它就不需要動態對應,僅是一個寫死的符號,你也可以改換成別的符號。
這麵包屑(Breadcrumbs)組好後,可以直接做在單頁模版中或另存成版型反覆插入套用喔。
實作
待補上。
影片
待補上。
總結
一般在「首頁」或「一頁式網頁」時可不用置入麵包屑(Breadcrumbs),比較不會破壞頁面設計的版型。
剩下的任何一頁可以考慮都置入麵包屑(Breadcrumbs),以強化SEO效果與使用者體驗。
麵包屑(Breadcrumbs)可以靠外掛來達成,但我覺真的覺得可以少裝一個外掛就盡量少裝一個,對整體維護與效能上有較大的助益。
如何讓會員登出後自動轉址到首頁?(方法2)
簡介
讓會員登出後自動轉址到首頁或其它指定頁,也可以用PHP一段小語法來達成,也是非常方便省事。
運用範圍
只要有會員功能的網站都可以使用。
範例
請自行創一個測試網站測試一下。
原理與思路
略。
實作
你也必須先製作好「登出」的連結或按鈕喔,不然完成下方步驟後仍看不到效果。
1、Code Snippets(自訂片段程式碼)
須安裝「Code Snippets(自訂片段程式碼)」外掛。
2、新增程式碼
貼上下列程式碼後勾選「執行於前端」即可。
//■ 登出後轉址至首頁
add_filter( 'logout_redirect', function() {
return esc_url( home_url() );
} );
3、如何在登出後不要轉至首頁而是重導向其它頁面或外面的網址?
這個需求的話需要小改上面的程式碼,並不是把 home_url()改掉而已,請參考付費內容裡的程式碼,一樣是複製貼上即可。
付費內容,需支付 : 100 個學習幣
您須先登入會員以使用學習幣與發問功能。總結
這段程式碼,已成為我必備之程式碼,只要是製作具有會員登入的網站,例如部落格、電商(Woocommerce),我就會用到,建議您也收藏下來!
![[申請]遠振WordPress專用主機的申請流程-1](https://smallway.com.tw/wp-content/uploads/2022/08/img_62fb4ccc77f0b.png)
![[申請]遠振WordPress專用主機的申請流程-2](https://smallway.com.tw/wp-content/uploads/2022/08/img_62fb4d5b34317.png)
