ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างเว็บไซต์หลายภาษาด้วย Stitched และ WPML Stitched (เปิดในแท็บใหม่) เป็นธีมสำหรับช่างฝีมือ คุณสามารถใช้คอมโพเนนต์แนะนำหน้าแรกเพื่อบอกเล่าเรื่องราวของคุณให้ผู้เยี่ยมชมทราบ และคุณสามารถขยายฟังก์ชันการทำงานได้โดยการติดตั้งปลั๊กอินที่แนะนำซึ่งสามารถทำงานร่วมกับธีมได้
Stitched (เปิดในแท็บใหม่) พัฒนาโดย WooThemes (เปิดในแท็บใหม่) สำหรับธีมและปลั๊กอินที่พัฒนาโดย WooThemes (เปิดในแท็บใหม่) เราขอแนะนำให้คุณใช้ GUI ที่มีอยู่ใน WPML สำหรับการแปลคุณสมบัติพิเศษที่ WooThemes / ปลั๊กอินใช้ในโค้ด ในบทช่วยสอนนี้ ฉันจะแนะนำขั้นตอนต่างๆ เพื่อให้คุณทำได้อย่างราบรื่น
คุณสามารถดูตัวอย่างจริงได้ในเว็บไซต์เดโม Stitched + WPML
ในการรันเว็บไซต์ Stitched หลายภาษาด้วย WPML คุณจะต้องมีสิ่งต่อไปนี้:
- ธีม Stitched (เปิดในแท็บใหม่)
- WPML (เปิดในแท็บใหม่) เวอร์ชันล่าสุด รวมถึงโมดูลการแปลสตริงและการจัดการการแปล
เริ่มต้นใช้งาน
ต่อไปนี้คือขั้นตอนหลักที่คุณต้องทำตามเพื่อเริ่มต้นใช้งาน:
- ติดตั้งและเปิดใช้งาน Stitched
- ติดตั้งและเปิดใช้งานปลั๊กอิน WPML (WPML Multilingual CMS, WPML การแปลสตริง, WPML การจัดการการแปล)
- ตั้งค่า WPML จาก WPMLภาษา ดูคู่มือเริ่มต้นใช้งาน WPML ของเราสำหรับข้อมูลอ้างอิงฉบับสมบูรณ์
- ติดตั้งและเปิดใช้งานหนึ่งในปลั๊กอินหลายตัวที่สามารถทำงานร่วมกับ Stitched ได้ สำหรับบทช่วยสอนนี้ เราจะใช้ Projects (เปิดในแท็บใหม่)
การแปลข้อความแนะนำ
คุณสมบัติ 'ข้อความแนะนำ' (Introductory Message) ของธีม Stitched เป็นการรวมกันของรูปภาพ Gravatar ของผู้ดูแลเว็บไซต์และข้อความสโลแกนของไซต์ ด้วย WPML ข้อความใดๆ (หรือที่เราเรียกว่าสตริง) ที่ไม่ได้เป็นส่วนหนึ่งของโพสต์ หน้า และอนุกรมวิธาน จะถูกแปลโดยใช้โมดูลการแปลสตริง
ข้อความสำหรับส่วนนั้นตั้งค่าไว้ที่ การตั้งค่าทั่วไป
และตอนนี้ในการแปล คุณเพียงแค่ไปที่ WPMLการแปลสตริง และค้นหาสตริงนั้น
แปล ทำเครื่องหมายว่าเสร็จสมบูรณ์ แล้วบันทึก
ดังนั้นนี่คือลักษณะส่วนหน้าเว็บไซต์ของเราในตอนนี้ รวมถึงรูปภาพ Gravatar ที่ธีมดึงมาโดยอัตโนมัติตามการตั้งค่าของคุณ
การแปลข้อความทั่วไป
Stitched มาพร้อมกับสตริงเพิ่มเติมบางส่วนที่คุณอาจต้องการแปล คุณสามารถแปลส่วนที่ขาดหายไปให้เสร็จสมบูรณ์ได้โดยใช้โมดูลการแปลสตริงของ WPML ตามที่ฉันได้อธิบายไว้สำหรับ 'ข้อความแนะนำ' หากมีสตริงบางส่วนขาดหายไป ให้ทำตามคำแนะนำสำหรับการแปลธีมและปลั๊กอิน (เปิดในแท็บใหม่) สรุปสั้นๆ คือไปที่ WPMLการแปลธีมและปลั๊กอิน แล้วคลิกที่ 'สแกนธีมเพื่อหาสตริง' (Scan the theme for strings) โปรดทราบว่าคุณสามารถกรองหาสตริงที่ถูกต้องได้อย่างง่ายดายในเมนูแบบเลื่อนลงของบริบท – สำหรับ Stitched ให้กรองเป็น 'theme woothemes' และสำหรับปลั๊กอิน 'Projects' ให้กรองเป็น 'plugin projects-by-woothemes' ซึ่งจะมีลักษณะดังนี้:
การแปลปลั๊กอินที่ผสานการทำงาน
ตอนนี้เราได้เห็นวิธีแปลข้อความทั้งหมดที่มาจากธีมแล้ว มาดูกันว่าเราจะทำให้สตริงและคุณสมบัติที่มาจากปลั๊กอินของ Woo สามารถแปลได้เช่นกันอย่างไร สำหรับบทช่วยสอนนี้ ฉันได้เลือกปลั๊กอินที่ยอดเยี่ยมมากซึ่งแนะนำให้ใช้กับ Stitched นั่นคือ 'Projects โดย WooThemes'
หลังจากที่คุณติดตั้งและเปิดใช้งาน 'Projects' แล้ว คุณจะเห็นเมนูใหม่ในหน้าจัดการเว็บไซต์ WordPress ของคุณที่ชื่อว่า...'projects' ดังนี้:
เพื่อให้โปรเจกต์ของคุณและหมวดหมู่สามารถแปลได้ คุณต้องใช้การตั้งค่า WPML (WPML GUI) โดยพื้นฐานแล้วสิ่งที่คุณต้องทำคือไปที่ WPMLการจัดการการแปล ดังนี้
เลือก การตั้งค่าเนื้อหาหลายภาษา จากแท็บด้านบน
ก่อนที่เราจะดำเนินการต่อ ขออธิบายสั้นๆ เกี่ยวกับสิ่งที่เกิดขึ้นเบื้องหลัง – ปลั๊กอิน Projects เช่นเดียวกับปลั๊กอิน (และธีม) อื่นๆ ใช้ประเภทโพสต์แบบกำหนดเอง (Custom Post Types) สำหรับการทำงาน โพสต์เหล่านี้เป็นโพสต์แบบ 'พิเศษ' และเนื่องจากเป็นโพสต์พิเศษ WPML จึงไม่ 'รู้' ว่าจำเป็นต้องแปลโพสต์เหล่านี้ ดังนั้นขั้นตอนต่อไปของเราคือการบอก WPML ว่า – ให้แปล Projects!
คลิกที่ Custom posts เลือก แปล สำหรับ Projects – อย่างที่คุณเห็น คุณยังสามารถตั้งค่า slug ของ Projects ให้แปลได้ด้วย และด้านล่างคุณสามารถแปล อนุกรมวิธานที่กำหนดเอง ที่เกี่ยวข้องกับโพสต์แบบกำหนดเองเหล่านี้ได้ ซึ่งในกรณีนี้เรียกว่า 'Project categories' จากนั้นเพียงแค่ บันทึก ก็เสร็จเรียบร้อย ในทำนองเดียวกัน คุณสามารถควบคุมวิธีจัดการฟิลด์กำหนดเองสำหรับการแปลได้โดยคลิกที่ลิงก์ การแปลฟิลด์ที่กำหนดเอง ที่ด้านบน สำหรับ Projects คุณสามารถตั้งค่าฟิลด์กำหนดเองได้ 3 ฟิลด์ ได้แก่ _client, _project_image_gallery และ _url แต่สำหรับฟิลด์เหล่านี้ ฉันขอแนะนำให้คุณทำตามหัวข้อถัดไป -
มาดูกันว่าหน้าผู้ดูแลระบบของ Projects มีลักษณะอย่างไร เราคลิกที่ 'Projects' ในหน้าจอผู้ดูแลระบบ และตอนนี้ – เช่นเดียวกับหน้าหรือโพสต์ 'ปกติ' ทั่วไป เราสามารถทำสำเนา หรือแปลโปรเจกต์ที่มีอยู่ สร้างโปรเจกต์ใหม่ในภาษาใดก็ได้ที่เราต้องการ และที่สำคัญมาก – สามารถใช้ฟังก์ชันการทำงานทั้งหมดของประเภทโพสต์โปรเจกต์ได้ – ในกรณีนี้ เราสามารถเพิ่มรายละเอียด คำอธิบาย และแกลเลอรีพิเศษที่ปลั๊กอินมีให้ ดังนี้:
การทำให้ฟิลด์กำหนดเอง (และสิ่งอื่นๆ) แปลได้ในหน้าแก้ไขโพสต์แบบกำหนดเอง
ประเด็นสุดท้ายในส่วนนี้ – อย่างที่คุณอาจสังเกตเห็นในหน้าจอก่อนหน้า – คุณยังสามารถควบคุมวิธีจัดการ ฟิลด์ที่กำหนดเอง และแม้แต่อนุกรมวิธานและประเภทโพสต์สำหรับการแปลในแต่ละหน้าแก้ไขสำหรับโพสต์ได้ ลองขยายดูสักนิด:
ที่นี่เราต้องการให้คัดลอก _project_image_gallery ระหว่างภาษา และฉันพบว่าฟิลด์ _client และ _url ควรปล่อยไว้โดยไม่ต้องแปล – คุณยังสามารถเปลี่ยนฟิลด์เหล่านี้ได้ในหน้าโพสต์ที่แปลแล้ว แต่เราไม่จำเป็นต้องแปลจริงๆ
การจัดรูปแบบตัวสลับภาษา
สุดท้ายแต่ไม่ท้ายสุด มาทำการปรับแต่งเล็กน้อยเพื่อให้ตัวสลับภาษาของ WPML ผสานเข้ากับการนำทางหลักของ Stitched ได้อย่างสมบูรณ์แบบ ตัวสลับภาษาของ WPML ได้เพิ่มคลาสที่คุณสามารถจัดรูปแบบได้ตามความต้องการ หรือคุณสามารถสร้างตัวสลับภาษาแบบกำหนดเองทั้งหมดเลยก็ได้หากต้องการ แต่ที่นี่ไม่จำเป็น สิ่งที่เราต้องการคือการเพิ่ม padding ให้กับธงเพื่อให้ 'จัดวาง' เข้าที่และดูไม่แปลกตา
ในการทำเช่นนั้น ให้ไปที่ WPMLภาษาตัวเลือกตัวสลับภาษาCSS เพิ่มเติม (ไม่บังคับ) และเพิ่ม padding ให้กับคลาสที่ควบคุมการจัดรูปแบบของรูปภาพธงของตัวสลับภาษา – img.iclflag
ตอนนี้ดูสวยงามมาก เหมือนกับรายการเมนู Stitched อื่นๆ
บทสรุป
Stitched เป็นธีมที่ยอดเยี่ยมมากสำหรับการทำเป็นหลายภาษาและบอกให้โลกได้รู้เกี่ยวกับตัวคุณและโปรเจกต์ของคุณ คุณยังสามารถเพิ่มร้านค้าลงไปได้โดยใช้ WooCommerce (เปิดในแท็บใหม่) และ WPML Multilingual & Multicurrency for WooCommerce (เปิดในแท็บใหม่) เราได้เห็นแล้วว่าคุณสามารถปรับคุณสมบัติต่างๆ ได้อย่างราบรื่นโดยใช้ WPML (เปิดในแท็บใหม่)
เวอร์ชันที่ใช้
- WordPress 3.9
- WPML 3.1.5
- ธีม Stitched 1.0.2
- ปลั๊กอิน Projects 1.2.0
