Theme Divi Language Translate 佈景主題繁體中文本地化

Theme Divi Language Translate 繁體中文本地化
日期:2020-12-03
作者:max
分類:示範教學

Theme Divi Language Translate 佈景主題繁體中文本地化,為了讓訪客有更好的閱讀體驗,這是必要的工作。

Theme Divi 佈景主題已經支援中文字型,不過目前還沒有提供繁體中文本地化,所以難免在網頁會發生部分區塊無法呈現繁體中文,這時候就需要自己去進行繁體中文的本地化建置,讓網頁呈現正確的繁體中文。如果你的網站也是使用 Divi 佈景主題的話,那麼今天分享的文章可以參考看看。

 

方法一:jQuery replace()

這是一段簡單的 jQuery 語法,可以幫助我們替換字串,特別是不需要大量繁體中文本地化的時候,例如將 Blog Module 的 Read More 替換成繼續閱讀Older EntriesNext Entries 替換成上一頁下一頁,這些使用 Divi 佈景主題的朋友,經常會需要修改的地方。示範的替換語法如下:

<script>
	jQuery(document).on('ready ajaxComplete', function () {
		//Replace read more link text
		jQuery(".et_pb_post a.more-link").html(function () {
			return jQuery(this).html().replace('read more', '繼續閱讀');
		});
		//Replace blog pagination text
        jQuery(".et_pb_ajax_pagination_container .pagination a, .archive .pagination a, .search .pagination a").html(function () {
            return jQuery(this).html().replace('«', '').replace('»', '').replace('Older Entries', '上一頁').replace('Next Entries', '下一頁');
        });
	}); 
</script>

 

接下來,將上述語法貼到 Divi/Theme Options/Integration/Add code to the < head > of your blog 欄裡面,完成以後記得點選 Save Changes。

將上述語法貼到 Divi/Theme Options/Integration/Add code to the < head > of your blog 欄裡面。

 

這樣就完成了部分繁體中文本地化的作業了,回到網頁檢視,可以看到這是示範的 Blog Module 中 的 read more, Older Entries, Next Entries,都已經繁體中文本地化完成為 繼續閱讀、上一頁、下一頁了。

 

修改前

繁體中文本地化修改前

 

修改後

繁體中文本地化修改後

 

方法二:gettext

如果想要修改的字串稍微多一點,可以透過 gettext 方式,來執行繁體中文化本地化作業。操作的方法是在子佈景主題的 functions.php 檔案中,新增以下語法:

function my_text_strings( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
        case 'read more' :
            $translated_text = __( '繼續閱讀', 'Divi' );
            break;
		case 'Next Entries »' :
            $translated_text = __( '下一頁', 'Divi' );
            break;
		case '« Older Entries' :
            $translated_text = __( '上一頁', 'Divi' );
            break;
		case 'Submit a Comment' :
            $translated_text = __( '填寫留言', 'Divi' );
            break;
		case '0 Comments' :
            $translated_text = __( '0 則留言', 'et_builder' );
            break;	
		case 'Submit Comment' :
            $translated_text = __( '傳送留言', 'Divi' );
            break;	
    }
    return $translated_text;
}
add_filter( 'gettext', 'my_text_strings', 20, 3 );

 

與方法一的差別,方法二新增了留言區塊的繁體中文本地化字串,修改完成以後,可以到單篇文章看到增加的繁體中文本地化成果。

留言區塊繁體中文本地化結果

關於方法二,細心的朋友應該會注意到 text_domain 的差異,所以如果繁體中文本地化沒有效果,就需要確實檢視該字串來源的 text_domain 是什麼,這樣才可以正確的完成本地化字串的修改。

 

結論

上述兩種方法,都是使用 Divi 佈景主題很常會使用的字串修改技巧,特別是那些一定需要繁體中文網頁的時候。最後,第三種方法就是自己建立完整的繁體中文本地化內容,因為修改的地方與方法比較複雜些,我將另外編寫一篇文章來專門說明,有興趣的朋友可以持續關注這裡的文章。

max

Hi 大家好,我是 Max,這個網站要跟大家介紹的 Divi 佈景主題,實在是因為它與 WordPress 的搭配,可以讓我們很輕鬆的就建立好一個專業又優雅的網站,所以特別來推薦給大家!

相關文章

Divi Vertically Align Content – 文字內容置中

Divi Vertically Align Content – 文字內容置中

這是一個經常在 Divi 編輯器中常見的功能,在圖片右側展示文字內容。 今天我們將分享一個簡單的技巧設定,讓文字內容可以置中展示,讓圖片與文字陳列更顯得平衡,有興趣的朋友可以參考一下。...

read more
Add Social Icons Primary Menu 選單新增社群圖示

Add Social Icons Primary Menu 選單新增社群圖示

Add Social Icons Primary Menu 在選單上新增社群圖示,讓訪客的互動可以更方便!Divi 佈景主題內建就支援幾款常見的社群圖示,有 Facebook、Twitter、Google+、Instagram(圖一、圖二),不過其中的 Google+ 消費者 (個人) 版在 2019 年 4 月 2 日已經停止服務。

read more

最新留言

0 Comments

有任何 Divi 或是網頁設計問題,都歡迎透過表單隨時與我聯繫。

12 + 15 =