โพสต์รับเชิญนี้สนับสนุนโดย Daan จาก wplift.com เขาเพิ่งเปิดตัว EasyThemePacks ซึ่งเป็นคลังเทมเพลต Elementor ระดับพรีเมียมที่ยอดเยี่ยม เขาจะมาแสดงให้คุณเห็นถึงวิธีแปลเทมเพลตเหล่านี้ด้วย WPML อย่างละเอียด
หากคุณเป็นผู้ใช้ Elementor เป็นประจำ คุณอาจคุ้นเคยดีอยู่แล้วว่า Elementor ช่วยให้คุณสร้างดีไซน์ที่สวยงามได้โดยไม่ต้องเขียนโค้ด แต่ Elementor จะช่วยคุณสร้างดีไซน์หลายภาษาที่สวยงามได้ด้วยหรือไม่
ข่าวดี: ด้วย WPML คุณสามารถทำได้
เมื่อจบการสอนนี้ คุณจะรู้วิธีเริ่มต้นสร้างเว็บไซต์หลายภาษาที่สร้างด้วย Elementor อย่างละเอียด แม้ว่าคุณจะใช้ตัวเลือก Elementor Canvas ที่ว่างเปล่าทั้งหมดก็ตาม
สิ่งที่คุณต้องมีในการสร้างเว็บไซต์หลายภาษาด้วย Elementor
นี่คือทุกสิ่งที่คุณต้องมีเพื่อทำตามบทช่วยสอนนี้:
- หน้าที่คุณออกแบบด้วย Elementor – เราใช้ เทมเพลต Barista Bluegrass จาก EasyThemePacks ซึ่งเป็นดีไซน์หน้าแลนดิ้งเพจที่สมบูรณ์แบบโดยอิงจากเทมเพลต Elementor Canvas ที่ว่างเปล่า
- WPML Multilingual CMS – นี่คือสิ่งที่จะช่วยคุณสร้างเว็บไซต์ WordPress หลายภาษา รวมถึงเนื้อหา Elementor ของคุณ
คุณต้องตรวจสอบให้แน่ใจด้วยว่าได้ติดตั้งส่วนประกอบอื่น ๆ ของแพ็คเกจ WPML Multilingual CMS โดยเฉพาะ WPML การแปลสตริง และ WPML การจัดการการแปล
เมื่อคุณมีสิ่งจำเป็นพื้นฐานเหล่านั้นแล้ว เรามาเจาะลึกวิธีใช้ WPML เพื่อสร้างเว็บไซต์ Elementor หลายภาษากันเลย
ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน WPML CMS และส่วนประกอบต่าง ๆ
เมื่อคุณติดตั้ง WPML Multilingual CMS และส่วนประกอบต่าง ๆ แล้ว คุณสามารถทำตามวิซาร์ดการตั้งค่า WPML เพื่อกำหนดการตั้งค่าภาษาพื้นฐานของคุณ (เช่น ภาษาที่คุณต้องการแปลดีไซน์ Elementor ของคุณ)
สำหรับตัวอย่างนี้ เราจะแปลเทมเพลตของเราเป็นภาษาเยอรมัน (ด้วย Google แปลภาษา – ขออภัยสำหรับข้อผิดพลาดใด ๆ สำหรับผู้ที่เคร่งครัดไวยากรณ์ภาษาเยอรมัน):
ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานผู้จัดการการแปลด้วย (WPML จะแจ้งให้คุณดำเนินการนี้ในแดชบอร์ดของคุณ – ซึ่งสังเกตเห็นได้ง่ายและคุณเพียงแค่คลิกปุ่มเท่านั้น)
ขั้นตอนที่ 2: ไปที่หน้า Elementor ที่คุณต้องการแปล
เมื่อคุณกำหนดการตั้งค่าพื้นฐานของ WPML แล้ว ให้ไปที่ตัวแก้ไขแดชบอร์ด WordPress สำหรับหน้า Elementor ที่คุณต้องการแปล (อย่าเปิดตัวแก้ไข Elementor – ให้อยู่ในตัวแก้ไข WordPress ตามปกติ)
นี่คือหน้าตาของเทมเพลต EasyThemePacks Barista Bluegrass ในภาษาอังกฤษที่เป็นภาษาต้นฉบับ:
ในเวลาเพียงไม่กี่นาที เราก็จะสามารถแปลเป็นภาษาเยอรมันได้แล้ว
ขั้นตอนที่ 3: สร้างการแปลใหม่สำหรับดีไซน์ Elementor ของคุณ
ในตัวแก้ไข WordPress ให้คลิกที่ไอคอน + เพื่อสร้างการแปลใหม่สำหรับดีไซน์ Elementor ของคุณ:
การดำเนินการนี้จะเปิดตัวแก้ไขแบบเคียงข้างกันที่ใช้งานสะดวก ทางด้านซ้าย คุณจะเห็นข้อมูลทั้งหมดจากการแปลภาษาอังกฤษต้นฉบับ WPML จะดึงสตริงข้อความแต่ละรายการจากดีไซน์ Elementor ของคุณ รวมถึงแอตทริบิวต์อื่น ๆ ที่เป็นประโยชน์ (เช่น URL ที่ปุ่มลิงก์ไป เพื่อให้คุณสามารถส่งผู้ใช้ไปยังคำแปลที่ถูกต้องได้)
ในการเริ่มต้นแปลเทมเพลต Elementor ของคุณ คุณเพียงแค่ป้อนคำแปลลงในช่องที่เกี่ยวข้องทางด้านขวา:
ในขณะที่คุณดำเนินการ ตรวจสอบให้แน่ใจว่าได้ทำเครื่องหมายแต่ละคำแปลเป็น การแปลเสร็จสมบูรณ์ เพื่อให้คุณสามารถบอกได้อย่างรวดเร็วว่าแปลอะไรไปแล้วและอะไรที่ยังต้องแปลเพิ่มเติม นอกจากนี้ แม้ว่าคุณจะสามารถบันทึกงานบางส่วนได้เสมอ แต่คุณจะไม่สามารถแสดงคำแปลของคุณบนส่วนหน้าเว็บไซต์ได้จนกว่าคุณจะทำเครื่องหมายทุกอย่างว่าเสร็จสมบูรณ์แล้ว
เมื่อคุณแปลเสร็จและบันทึกแล้ว ก็ถือว่าเสร็จสิ้น ตอนนี้ คุณจะสามารถแก้ไขคำแปลที่มีอยู่ได้ทุกเมื่อที่ต้องการ:
และหากคุณไปที่ส่วนหน้าเว็บไซต์ของคุณ คุณจะสามารถเข้าถึงหน้าเว็บเวอร์ชันที่แปลแล้วได้โดยการเปลี่ยน URL ตามความต้องการของคุณ (รายละเอียดเพิ่มเติมเกี่ยวกับวิธีสร้างตัวสลับภาษาในหัวข้อถัดไป)
นี่คือหน้าตาของเทมเพลต EasyThemePacks เวอร์ชันที่แปลแล้ว รวมถึงโครงสร้าง URL เพื่อให้คุณเห็นว่าทุกอย่างได้รับการปรับให้เข้ากับภาษาท้องถิ่นอย่างไร:
จะเกิดอะไรขึ้นหากคุณเปลี่ยนดีไซน์ Elementor ต้นฉบับ
ในบางช่วงเวลา คุณอาจพบกับสถานการณ์ที่คุณต้องการเปลี่ยนดีไซน์ Elementor เวอร์ชันต้นฉบับ
แล้วจะเกิดอะไรขึ้น คุณจะสูญเสียเนื้อหาที่แปลแล้วหลังจากทำการเปลี่ยนแปลงหรือไม่
ไม่เลย
หากคุณเคยใช้อินเทอร์เฟซของ Elementor เพื่อแก้ไขคำแปลที่มีอยู่ของหน้าเว็บ WPML จะทำเครื่องหมายคำแปลเหล่านั้นในตัวแก้ไขและให้ตัวเลือกแก่คุณในการแสดงความแตกต่าง:
WPML จะไม่ทำอะไรกับสตริงข้อความที่แปลแล้วซึ่งไม่ได้ถูกเปลี่ยนแปลง ดังนั้นสิ่งที่คุณต้องทำคืออัปเดตข้อความที่แก้ไขแล้วก็พร้อมใช้งานได้เลย
แล้วตัวสลับภาษากับเทมเพลต Elementor Canvas ล่ะ
ดีไซน์ทั้งหมดของ EasyThemePacks อิงตามการใช้เทมเพลต Elementor Canvas ที่ว่างเปล่า และหากคุณกำลังสร้างหน้าเว็บของคุณเองด้วย Elementor ก็มีโอกาสสูงที่คุณอาจใช้เทมเพลต Elementor Canvas ที่ว่างเปล่าเช่นกัน
เมื่อคุณใช้เทมเพลตนั้น จะไม่มีเมนูการนำทางหรือแถบด้านข้างจากธีมของคุณ ซึ่งเป็นสองตำแหน่งที่คุณมักจะเพิ่มตัวสลับภาษาด้วย WPML
แล้ว...คุณจะให้ผู้เยี่ยมชมเข้าถึงเทมเพลต Elementor เวอร์ชันที่แปลแล้วได้อย่างไร เมื่อคุณใช้ Elementor Canvas
แม้ว่าคุณจะสามารถสร้างตัวสลับภาษา WPML ของคุณเองโดยใช้โค้ดได้ แต่วิธีที่ง่ายที่สุดคือการรวม shortcode ของตัวสลับภาษาไว้ในเทมเพลต Elementor ของคุณ
ในการทำเช่นนั้น ให้วางวิดเจ็ต Elementor Shortcode ในตำแหน่งที่คุณต้องการให้แสดงและรวม shortcode นี้เข้าไป:
{{wpml_language_selector_footer}}
shortcode นี้จะดึงการตั้งค่าสำหรับตัวสลับภาษาในส่วนท้ายของ WPML ของคุณ ในการกำหนดการตั้งค่าเหล่านั้น ให้ไปที่ WPML → ภาษา ในแดชบอร์ด WordPress ของคุณและเลื่อนลงไปที่ส่วน ตัวสลับภาษาในส่วนท้าย :
เมื่อคุณคลิกที่ไอคอนดินสอ คุณจะสามารถกำหนดค่าการทำงานของตัวสลับภาษาของคุณได้ คุณสามารถ:
- เปลี่ยนเค้าโครง
- เลือกว่าจะแสดงชื่อภาษาและธงหรือไม่
- เลือกชุดสีใหม่
- กำหนดค่ารูปแบบขององค์ประกอบแต่ละรายการ
เคล็ดลับ: การใช้ชื่อภาษาเป็นตัวเลือกที่ยอดเยี่ยม เนื่องจากช่วยให้ผู้คนสามารถค้นหาภาษาท้องถิ่นของตนได้โดยใช้ CTRL + F
ข้อคิดเห็นสุดท้ายเกี่ยวกับวิธีแปล Elementor
ด้วยแพ็คเกจ WPML Multilingual CMS การแปลเทมเพลตหน้า Elementor ใด ๆ จึงเป็นเรื่องง่าย รวมถึงเทมเพลตที่อิงตาม Elementor Canvas เช่น เทมเพลตพรีเมียมที่มีให้ใน EasyThemePacks คุณสามารถดำเนินการทีละสตริงเพื่อแปลเนื้อหาทั้งหมดที่คุณสร้างด้วยปลั๊กอินสร้างหน้าเว็บ Elementor แบบภาพ และหากคุณทำการเปลี่ยนแปลงใด ๆ กับดีไซน์ Elementor ต้นฉบับของคุณในอนาคต WPML จะช่วยคุณค้นหาการเปลี่ยนแปลงเหล่านั้นเพื่อให้แน่ใจว่าคุณได้อัปเดตเวอร์ชันที่แปลแล้วด้วยเช่นกัน
สุดท้าย แม้ว่าคุณจะใช้เทมเพลต Elementor Canvas ที่ว่างเปล่า คุณก็ยังสามารถรวมตัวสลับภาษาที่ใช้งานง่ายผ่าน shortcode ของ WPML หรือวิธีการใช้โค้ดแบบกำหนดเองที่เราได้ลิงก์ไว้
มีคำถามอื่น ๆ เกี่ยวกับวิธีแปลดีไซน์ Elementor ของคุณหรือไม่ แสดงความคิดเห็นได้เลย
