วิธีทำให้เว็บไซต์ WordPress ของคุณเป็นสากล

เมื่อวันที่ 30 กันยายน 2017 ชุมชน WordPress ระดับนานาชาติได้รวมตัวกันเป็นเวลา 24 ชั่วโมงเพื่อแปลระบบนิเวศของ WordPress เป็นครั้งที่สาม #WPTranslationDay ผสมผสานการแปลมาราธอนตลอดทั้งวันเข้ากับกิจกรรมดิจิทัลและผู้มีส่วนร่วมที่ออกแบบมาเพื่อส่งเสริมคุณค่าของการสร้างประสบการณ์ที่เข้าถึงได้สำหรับผู้ใช้ทั่วโลก หรือที่รู้จักกันดีในชื่อ "การแปลเป็นภาษาท้องถิ่น"

ในฐานะชุมชนโอเพนซอร์ซ เราทุกคนควรพยายามปรับการมีส่วนร่วมโอเพนซอร์ซของเราให้เข้ากับท้องถิ่น ก่อนที่คุณจะสามารถถอดเสียงเนื้อหาดิจิทัลของคุณได้ คุณต้องทำให้โค้ดเบสของคุณเป็นสากลเสียก่อน

คำว่า "การทำให้เป็นสากล" และ "การแปลเป็นภาษาท้องถิ่น" มักใช้สลับกันได้ แม้ว่าในทางเทคนิคแล้วจะเป็นตัวแทนของกระบวนการแปลสองลักษณะที่แตกต่างกัน

• การทำให้เป็น สากล (I18N) เป็นกระบวนการของการทำให้เป็นสากลหรือปรับธีมหรือปลั๊กอินของคุณเพื่อแปลเป็นภาษาใดๆ ในโลก
• การโลคัลไลซ์เซชั่น (L10N) เป็นกระบวนการที่ตามมาของการแปลเป็นภาษาท้องถิ่น หรือการ แปล เครื่องมือที่เป็นสากลของคุณเป็นภาษาที่กำหนด

ปัจจุบัน WordPress ได้รับการแปลเป็นภาษาท้องถิ่นโดยสมบูรณ์กว่า 65 ภาษาและให้บริการแปลบางส่วนสำหรับอีก 95 ภาษา การใช้งานในระดับสากลยังคงเพิ่มขึ้นเมื่อมีการแนะนำการโลคัลไลเซชั่นมากขึ้น

ผู้ใช้ WordPress ที่ไม่ได้พูดภาษาอังกฤษแซงหน้าผู้ใช้ที่พูดภาษาอังกฤษในปี 2014 และพวกเขายังคงลดเปอร์เซ็นต์ของผู้ใช้ภาษาอังกฤษในพายในปี 2017 โดยไม่ได้ตั้งใจ เนื่องจากความพยายามอย่าง #WPTranslateDay เติบโตขึ้น

เนื่องจาก WordPress เข้าถึงได้ทางภาษาศาสตร์มากขึ้นเรื่อยๆ ความรู้เกี่ยวกับ I18N & L10N จึงมีความจำเป็นสำหรับนักพัฒนาปลั๊กอินและธีมที่จะเติบโตในเศรษฐกิจของ WordPress ทั่วโลก สำหรับการขยายธุรกิจ ทักษะการพัฒนาเหล่านี้สามารถเปิดประตูสู่ตลาดต่างประเทศได้ การเข้าถึงเว็บ รวมถึงการช่วยสำหรับการเข้าถึงภาษา ดีสำหรับธุรกิจ และดีกว่าสำหรับผู้คน

เนื่องจากเป็นความต่อเนื่องของ #WPTranslationDay ต่อไปนี้คือคำแนะนำที่อัปเดตเพื่อทำให้ปลั๊กอินและธีม WordPress ของคุณเป็นสากล

นี่คือภาพรวมโดยย่อของกระบวนการที่เราจะสำรวจในวันนี้

• การค้นพบ
  • ทำความรู้จักกับไฟล์แปล
    • แฟ้มหม้อ
    • ไฟล์ PO
    • ไฟล์ MO
  • GlotPress & ชุดภาษา
  • สำรองและเตรียมสภาพแวดล้อมของคุณ
• ปลั๊กอิน I18N
  • ส่วนหัวของปลั๊กอิน
  • โหลดโดเมนข้อความ
  • การตรวจสอบสตริง
  • สร้างไฟล์ POT
• ธีม I18N
  • ส่วนหัวของธีม
  • โหลดโดเมนข้อความ
  • การตรวจสอบสตริง
  • สร้างไฟล์ POT
• JavaScript I18N
• แหล่งข้อมูลเพิ่มเติม

การค้นพบ

ทำความรู้จักกับไฟล์แปล

WordPress ใช้ไลบรารี gettext ของ GNU เพื่ออำนวยความสะดวกให้กับ I18N

ขั้นแรก มาทำความคุ้นเคยกับไฟล์การแปล gettext ที่สร้างขึ้นตลอดกระบวนการ

ไฟล์เทมเพลตออบเจ็กต์แบบพกพา (POT)

ในระหว่างกระบวนการ I18N เราจะใช้เครื่องมือเพื่อค้นหาสตริงที่เป็นสากลและสร้าง ไฟล์ POT ที่มีข้อความที่แปลได้ทั้งหมดในปลั๊กอินและธีมของคุณ

ไฟล์อ็อบเจ็กต์แบบพกพา (PO)

ในลักษณะที่ปรากฏ ไม่มีความแตกต่างที่เห็นได้ชัดเจนระหว่างไฟล์ POT และไฟล์ PO พวกมันเหมือนกันทางวากยสัมพันธ์และแตกต่างไปตามจุดประสงค์ที่ตั้งใจไว้เท่านั้น

หลังจากสร้างไฟล์ POT แล้ว นักแปลควรตีความสตริงข้อความเป็นภาษาที่คุณต้องการ ในที่สุด ไฟล์ PO จะมีสตริงข้อความในภาษาของคุณ รวมทั้งคำแปลที่เหมาะสม

ไฟล์ออบเจ็กต์เครื่อง (MO)

สุดท้าย ไฟล์ PO จะถูกแปลงเป็นเอกสารที่เครื่องอ่านได้หรือไฟล์ Machine Object ไฟล์นี้จะอยู่ในไดเร็กทอรีธีมหรือปลั๊กอินของคุณสำหรับ WordPress เพื่อเรียกใช้เมื่อถึงเวลาให้บริการเวอร์ชันแปล

สำรองข้อมูลและเตรียมสภาพแวดล้อมของคุณ

ก่อนแก้ไขมาร์กอัปใดๆ ให้สำรองข้อมูลปลั๊กอิน ธีม หรือทั้งไซต์ของคุณ (ไม่ว่าคุณจะทำให้เป็นสากล!) และรับสภาพแวดล้อมการพัฒนาของคุณตามลำดับ

อย่าลืมตรวจสอบปลั๊กอินอย่างรวดเร็วหากคุณวางแผนที่จะแปลเว็บไซต์ของคุณ ลบหรือปิดใช้งานปลั๊กอินที่คุณไม่ได้ใช้งานอีกต่อไป การตรวจสอบอย่างรวดเร็วนี้จะช่วยคุณประหยัดเวลาในระยะยาว

ทำให้ปลั๊กอินของคุณเป็นสากล

ส่วนหัวของปลั๊กอิน

อันดับแรก เราจะอัปเดตส่วนหัวของปลั๊กอิน โดยเฉพาะ โดเมนข้อความ และ เส้นทางโดเมน

ตัวอย่างส่วนหัวของปลั๊กอิน

 /* Plugin Name: My Rad Plugin Plugin URI: https://myradplugin.com Description: Custom Plugin That Makes My Site Rad Author: Rad Plugin Creator Version: 1.0 Author URI: https://radplugincreator.com Text Domain: rad-plugin Domain Path: /languages/ */

โดเมนข้อความ

โดเมนข้อความเป็นตัวระบุเฉพาะสำหรับ WordPress เพื่อจดจำข้อความทั้งหมดที่เป็นของปลั๊กอิน และ ต้องตรงกับตัวบุ้งของปลั๊กอิน

นี่เป็นสิ่งสำคัญอย่างยิ่งหากปลั๊กอินของคุณโฮสต์บน WordPress.org; สิ่งเหล่านี้ต้องตรงกันเพื่อให้ GlotPress นำเข้าการแปลสำหรับปลั๊กอินของคุณอย่างเหมาะสม

ในตัวอย่างของเรา ไฟล์ปลั๊กอินชื่อ rad-plugin.php และโดเมนข้อความคือ rad-plugin

คุณอาจมีชุดโดเมนข้อความอยู่แล้ว หากคุณไม่ทำเช่นนั้น อย่าลืมใช้ขีดกลาง ไม่ใช่ขีดล่าง

เส้นทางโดเมน

เส้นทางของโดเมนคือโฟลเดอร์ที่ไฟล์การแปลที่เสร็จสิ้นแล้วจะใช้งานได้ คุณควรสร้างโฟลเดอร์ใหม่ภายในไดเร็กทอรีปลั๊กอิน เช่น /languages/ และอัปเดตพาธของโดเมน เพื่อให้ WordPress รู้ว่าจะค้นหาไฟล์การแปลจากที่ใด

โหลดข้อความ DOMAIN

ต่อไป เราจะโหลดโดเมนข้อความโดยเพิ่มฟังก์ชันต่อไปนี้ในโค้ดของเรา

load_plugin_textdomain()

 load_plugin_textdomain( $domain, $abs_rel_path, $plugin_rel_path );

หากมีไฟล์การแปลสำหรับภาษาของผู้ใช้ ฟังก์ชัน load text domain จะบอก WordPress ให้จัดส่ง

พารามิเตอร์

• $domain — โดเมนข้อความ (จำเป็น)
• $abs_rel_path — เท็จ (ไม่บังคับ เลิกใช้แล้ว)
• $plugin_rel_path — /languages/ (เป็นทางเลือก นี่คือพาธสัมพัทธ์ไปยังไดเร็กทอรีที่มีไฟล์การแปลของคุณ ในตัวอย่างของเรา /languages/ ณ วันที่ 4.6 WordPress จะค้นหาไฟล์เหล่านี้ในไดเร็กทอรี /languages/ ของปลั๊กอิน หากเป็นเช่นนี้ ไม่ระบุ)

ตัวอย่างปลั๊กอิน Rad

ในการโหลดโดเมนข้อความ เราจะขอดำเนินการ 'plugins_loaded'

 add_action( 'plugins_loaded', 'rad_plugin_load_text_domain' ); function rad_plugin_load_text_domain() { load_plugin_textdomain( 'rad-plugin', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' ); }

การตรวจสอบสตริง

ขั้นตอนต่อไปคือการห่อสตริงข้อความของปลั๊กอินทั้งหมดในฟังก์ชันการแปล

ฟังก์ชันการแปลที่พบบ่อยที่สุดคือ __() สำหรับการส่งคืนสตริงที่แปลแล้ว และ _e() สำหรับการสะท้อนสตริงที่แปลแล้ว

ตัวอย่างปลั๊กอิน Rad

 __() $text = __( 'Super Rad!', 'rad-plugin' );

ฟังก์ชันนี้จะทำงานสำหรับการแปลอย่างง่าย คำนึงถึงสองพารามิเตอร์ สตริงข้อความ และ โดเมนข้อความ

 _e( 'Super Rad!', 'rad-plugin' );

ฟังก์ชันนี้เป็นเพียงการสะท้อนค่า มิฉะนั้นจะทำงานเหมือนกับฟังก์ชันก่อนหน้านี้

มีฟังก์ชันการแปลเพิ่มเติมจำนวนหนึ่งที่ควรใช้เมื่อเหมาะสม

ฟังก์ชันพื้นฐานอื่นๆ

 __() _e() _x() _ex() _n() _nx() _n_noop() _nx_noop() translate_nooped_plural()

ฟังก์ชันวันที่และตัวเลข

 number_format_i18n() date_i18n()

ฟังก์ชั่นหลบหนี

อย่าลืมหลีกเลี่ยงข้อมูลใดๆ ที่กำลังส่งออกโดยใช้ฟังก์ชัน Escape ต่อไปนี้

 esc_html__() esc_html__() esc_html_x() esc_attr__() esc_attr_e() esc_attr_x()

ในตัวอย่าง Rad เราอาจมีโค้ดปลั๊กอินที่มีลักษณะดังนี้:

 function create_section() { esc_html_e( 'Below are your settings for Rad Plugin', 'rad-plugin' ); }

สร้างไฟล์หม้อ

ขั้นตอนสุดท้ายคือการสร้างไฟล์ POT มีเครื่องมือสองสามอย่างที่ใช้ได้ในการสร้างไฟล์ประเภทนี้ แต่สำหรับบทช่วยสอนนี้ เราจะยึดตามคำแนะนำจาก WordPress codex และใช้ Poedit ซึ่งเป็น GUI ที่ใช้งานง่ายสำหรับการจัดการการแปล

หมายเหตุ : หากปลั๊กอินหรือธีมของคุณอยู่ในที่เก็บ WordPress.org แล้ว คุณสามารถข้ามขั้นตอนนี้และสร้างไฟล์ POT ได้จากหน้าผู้ดูแลระบบ ในกรณีนี้ ไม่จำเป็นต้องสร้างไฟล์ .po สำหรับแต่ละภาษา การเปิดตัว GlotPress และชุดภาษาในปี 2015 ทำให้ขั้นตอนการแปลง่ายขึ้น ทั้งหมดที่จำเป็นสำหรับ GlotPress คือไฟล์ .pot ซึ่ง WordPress.org นำเข้ามาและให้บริการแก่นักแปลผ่านแดชบอร์ด translate.wordpress.org ผู้ทำงานร่วมกันจากทั่วโลกจะใช้แดชบอร์ดนี้เพื่อจัดเตรียมการแปลใน #WPTranslateDay

ดาวน์โหลด Poedit

การกำหนดค่า Poedit

คุณสมบัติการแปล

เริ่มต้นด้วยการไปที่ File > New จากนั้นเลือกภาษาแม่ของปลั๊กอินและกด OK

จากนั้นเลือก แคตตาล็อก > ใหม่ ป้อนชื่อโครงการ เวอร์ชัน ผู้ติดต่อและภาษา

เส้นทาง

เลือกแท็บ เส้นทางแหล่งที่มา ถัดไป หากเป็นไฟล์ใหม่ คุณจะต้องบันทึกไฟล์ก่อน

ตามตัวอย่างของเรา เราจะเลือก File > Save As เพื่อบันทึกเป็นไฟล์ .po ไปยังไดเร็กทอรี /languages/ ภายใน rad-plugin อีกครั้ง ชื่อไฟล์ควรตรงกับกระสุนของปลั๊กอินของคุณ

 rad-plugin.po

หลังจากบันทึกแล้ว ให้ป้อนเส้นทางสัมพัทธ์ไปยังไดเร็กทอรีที่ไฟล์การแปลของคุณจะใช้งานได้ ในสถานการณ์สมมตินี้ ภาษา

คีย์เวิร์ด

เลือกแท็บ แหล่งที่มาของคำหลัก คลิก ไอคอน + เพื่อเพิ่มชื่อฟังก์ชันที่เหมาะสม

สูตรลับ

 __ _e _x _ex _n _nx _n_noop _nx_noop translate_nooped_plural number_format_i18n date_i18n esc_html__ esc_html__ esc_html_x esc_attr__ esc_attr_e esc_attr_x

หลังจากนั้น คุณสามารถคลิก ตกลง จากนั้นคลิก ไฟล์ > บันทึก

Poedit จะบันทึกทั้งไฟล์ .mo และ .po คุณสามารถสร้างไฟล์ .pot ได้โดยการคัดลอกไฟล์ .po และเพิ่มนามสกุล .pot ผู้ใช้ต่างประเทศสามารถใช้ไฟล์เทมเพลต .pot เพื่อแปลสตริงเป็นภาษาของตน

ทำให้ธีมของคุณเป็นสากล

กระบวนการในการทำให้ธีมของคุณเป็นสากลนั้นแทบจะเหมือนกับ I18N สำหรับปลั๊กอิน เราจะเริ่มต้นด้วยการตรวจสอบส่วนหัวของธีมและสิ้นสุดโดยการสร้างไฟล์ POT อื่น

ส่วนหัวของธีม

ตรวจสอบส่วนหัวของธีมอีกครั้งเพื่อให้แน่ใจว่ามีการตั้งค่าโดเมนข้อความและเส้นทางโดเมน

ตัวอย่างส่วนหัวของธีม

 /* Theme Name: Rad Theme Author: Rad Theme Author Text Domain: rad-theme Domain Path: /languages/ */

โหลดข้อความ DOMAIN

ขั้นตอนต่อไปคือการโหลดโดเมนข้อความในไฟล์ functions.php ของธีมของคุณในครั้งนี้

load_theme_textdomain()

 load_theme_textdomain( 'radtheme', get_template_directory() . '/languages' );

เพื่อให้ไฟล์เหล่านี้โหลดได้ คุณต้องลงทะเบียนด้วยการดำเนินการ after_setup_theme

 add_action( 'after_setup_theme', 'rad_theme_setup' ); function rad_theme_setup() { load_theme_textdomain( 'radtheme', get_template_directory() . '/languages' ); }

การตรวจสอบสตริง

ถึงเวลาสำหรับการตรวจสอบสตริงอื่น! คุณควรจะคุ้นเคยกับฟังก์ชันการแปลพื้นฐาน ณ จุดนี้

มาดูคำแปลที่ยากกว่ากัน

ตัวยึด

ตัวแปร PHP เช่นตัวอย่างด้านล่างจะไม่สามารถแปลได้อย่างถูกต้องหากไม่มีตัวยึดตำแหน่ง

 echo "We added $count rad points.";

printf() และ sprintf()

ฟังก์ชันเหล่านี้ใช้ตัวยึดตำแหน่ง เช่น %s หรือ %d สำหรับจำนวนเต็ม เพื่อสอดแทรกสตริงข้อความที่มีเนื้อหาแบบไดนามิก

ตัวอย่างธีม Rad

 /* Translators: %d is the number of rad points added */ printf( esc_html__( 'We added %d rad points.', 'rad-plugin' ), $count );

พหูพจน์

ฟังก์ชัน _n() สามารถจัดการกับการแปลสตริงที่ซับซ้อนมากขึ้น เช่น พหูพจน์ แต่ไม่แนะนำ เนื่องจากมีข้อจำกัดภายในซอฟต์แวร์การแปล คุณสามารถเขียน คำสั่ง if อย่างง่ายเพื่อแยกความแตกต่างระหว่างคำเอกพจน์และพหูพจน์ได้

ตัวอย่างปลั๊กอิน Rad

 If ( 1 === $rad_points_found ) { $message = __( '1 rad point', 'rad-plugin' ); } else { /* Translators: %s is the number of rad points found */ $message = sprintf( __( '%s rad points' , 'rad-plugin' ) , $rad_points_found ); }

สร้างไฟล์หม้อ

ขั้นตอนการสร้างไฟล์ POT ของธีมจะเหมือนกับการสร้างไฟล์ POT ของปลั๊กอิน สำรวจวิธีการด้านล่าง

บรรทัดคำสั่ง

เมื่อติดตั้ง WordPress Trunk และแพ็คเกจ gettext GNU แล้ว คุณสามารถทำตามขั้นตอนนี้ได้โดยเรียกใช้สคริปต์ makepot.php ในบรรทัดคำสั่ง

เปิดบรรทัดคำสั่งและไปที่ไดเร็กทอรีเครื่องมือ I18N

 cd wpdev/tools/i18n/

สคริปต์ควรมีลักษณะดังนี้:

 php path/to/makepot.php wp-theme path/to/rad-theme rad-theme.pot

สคริปต์จะทำสิ่งนั้นและไฟล์ที่เสร็จแล้ว rad-theme.pot จะสิ้นสุดในไดเร็กทอรีปัจจุบัน

Grunt Tasks

อีกวิธีหนึ่งในการสร้างไฟล์ POT คือการเรียกใช้งาน Grunt โดยใช้ grunt-wp-i18n หรือ grunt-pot ตัวดำเนินการอย่าง Grunt สามารถทำงานที่น่าเบื่อได้โดยอัตโนมัติ เช่น การสร้างไฟล์ POT

ในการสร้างไฟล์ POT ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง node.js ก่อน จากนั้น ติดตั้ง Grunt ในไดเร็กทอรีภาษาของคุณผ่านทางบรรทัดคำสั่ง และไม่ต้องดำเนินการใดๆ ตอนนี้คุณสามารถเรียกใช้คำสั่ง I18N เหล่านี้และสร้างไฟล์การแปลของคุณได้อย่างรวดเร็วโดยไม่ต้องออกจากบรรทัดคำสั่ง

JavaScript I18N

หากคุณเป็นผู้พัฒนาธีมหรือปลั๊กอินที่ทันสมัย ​​มีโอกาสที่คุณจะใช้ JavaScript เพื่อจัดการองค์ประกอบบางอย่างของโครงการของคุณ wp_localize_script เป็นฟังก์ชันที่มีประสิทธิภาพในการดึงข้อมูล PHP เพื่อให้สคริปต์ของคุณ และเป็นวิธีเดียวที่จะแปล JavaScript ภายใน WordPress

WP_LOCALIZE_SCRIPT()

ฟังก์ชันนี้จะช่วยให้เราแปลสตริงฝั่งเซิร์ฟเวอร์ใน PHP และจัดเตรียมสตริงข้อความเป็นออบเจกต์ JavaScript ให้กับสคริปต์ได้

 wp_localize_script( $handle, $name, $data );

พารามิเตอร์

• $handle — สคริปต์จัดการข้อมูลต้องมีสำหรับ (จำเป็น — ต้องตรงกับหมายเลขอ้างอิงของสคริปต์ที่ข้อมูลนี้มีไว้สำหรับ ดูตัวอย่างด้านล่าง)
• $name — ชื่อของวัตถุที่จะเก็บข้อมูล (จำเป็น — ไม่ควรซ้ำกัน)
• $data — อาร์เรย์ของข้อมูลที่จะส่งผ่านไปยังสคริปต์ (จำเป็น)

ตัวอย่างปลั๊กอิน RAD

 add_action( 'wp_enqueue_scripts', 'rad_theme_scripts' ); function rad_theme_scripts() { wp_enqueue_script( 'rad-theme-script', get_template_directory_url() . '/js/rad-theme-script.js' ); wp_localize_script( 'rad-theme-script', 'rad-I18n', array( 'message' => __( 'Super Rad!', 'rad-theme' ), ) ); }

เข้าถึงข้อมูลในจาวาสคริปต์

ข้อมูลโค้ดอย่างง่ายด้านล่างนี้คือตัวอย่างวิธีเข้าถึงข้อมูลนี้ในไฟล์ JavaScript ของคุณ

 alert( rad-I18n.message );

แหล่งข้อมูลเพิ่มเติม

• I18N สำหรับนักพัฒนา WordPress
• คู่มือธีม WordPress: การทำให้เป็นสากล
• คู่มือปลั๊กอิน WordPress: การทำให้เป็นสากล
• WordPress.tv: I18N

ห่อมันขึ้น

ยินดีด้วย! คุณเพิ่งทำให้ธีมและ/หรือปลั๊กอินของคุณเป็นสากล ทำให้ผู้คนจากทุกภาษาท้องถิ่นได้รับประโยชน์จากมัน ไม่ว่าโครงการของคุณจะเผยแพร่ผ่านพื้นที่เก็บข้อมูล WordPress หรือพัฒนาเองสำหรับเว็บไซต์ขององค์กร มีเพียงข้อดีของการทำให้ไฟล์ของคุณเป็นสากลตั้งแต่เริ่มต้น

• ทำให้การสนับสนุนโอเพนซอร์สของคุณสามารถเข้าถึงได้ทั่วโลก
• สร้างการสนทนากับลูกค้าใหม่ในตลาดต่างประเทศ
• ประหยัดเวลาและลดการอัปเดตที่ลำบากในอนาคต

เป็นสากลเสมอ