วิธีสร้างธีม WordPress แบบ RTL

RTL หมายถึงจากขวาไปซ้าย (right to left) มีเพียงไม่กี่ภาษาในโลกที่ใช้ทิศทางข้อความแบบ RTL แต่ภาษาเหล่านี้ครอบคลุมประชากรมากกว่าพันล้านคน การเพิ่มการรองรับ RTL สำหรับธีมของคุณนั้นทำได้ง่ายและสามารถเพิ่มโอกาสทางการตลาดได้อย่างมาก

นี่คือหน้าเว็บสองหน้า หน้าหนึ่งใช้ทิศทางแบบ RTL และอีกหน้าใช้ทิศทางแบบ LTR (ปกติ):
คุณจะเห็นได้ว่าทุกอย่างในหน้าเว็บ RTL ดูเหมือนถูก 'พลิก' ในแนวนอน เหมือนกับการมองหน้าเว็บ LTR 'ปกติ' ผ่านกระจกเงา การสร้างภาพสะท้อนนี้ทำได้ง่ายมาก ทิศทาง 'dir' ใน CSS จะจัดการงานส่วนใหญ่ และคุณเพียงแค่ต้องปรับแก้ในบางจุดเท่านั้น

การโหลดไฟล์ CSS ที่แตกต่างกันสำหรับภาษา RTL

WordPress ทราบดีว่าภาษาใดใช้การจัดวางแบบ RTL และช่วยให้คุณปรับแต่งเค้าโครงของภาษาเหล่านั้นได้ง่าย สร้างไฟล์ rtl.css ใหม่และวางไว้ในไดเรกทอรีรากของธีมของคุณ

WordPress จะโหลดไฟล์ rtl.css หลังจากโหลดไฟล์ styles.css ปกติ ดังนั้นไฟล์ RTL CSS จึงจำเป็นต้องเขียนทับเฉพาะแอตทริบิวต์ที่ต้องเปลี่ยนแปลงเท่านั้น ซึ่งหมายความว่าไฟล์ rtl.css มักจะมีขนาดค่อนข้างเล็กสำหรับธีมส่วนใหญ่

การตั้งค่าทิศทางของหน้าเว็บเป็น RTL

แอตทริบิวต์ 'direction' ใน CSS จะบอกเบราว์เซอร์ถึงทิศทางของหน้าเว็บ สำหรับภาษา RTL คุณควรตั้งค่าเป็น 'rtl' มีแอตทริบิวต์ 'วิเศษ' อีกตัวที่คุณควรตั้งค่าเพื่อให้แสดงผล RTL ได้อย่างถูกต้อง นั่นคือ 'unicode-bidi' แอตทริบิวต์ 'วิเศษ' นี้เข้าใจได้ง่ายมากหากคุณคุ้นเคยกับการเขียนแบบ RTL โดยจะควบคุมวิธีแสดงตัวอักษรภายในบรรทัด

เพื่อให้แสดงผล RTL ได้อย่างถูกต้อง ให้เพิ่มโค้ดต่อไปนี้ลงในตัวเลือก .body:


{
direction:rtl;
unicode-bidi:embed;
}

เท่านี้ก็เรียบร้อย ธีมของคุณจะแสดงผลเป็น RTL แล้ว (เกือบจะสมบูรณ์) คำสั่งทั้งสองนี้จะทำให้ส่วนใหญ่ของหน้าเว็บดูถูกต้อง ตอนนี้คุณต้องจัดการกับข้อยกเว้นต่าง ๆ

การพลิกทิศทางข้อความ float และ clear

ทุกจุดใน CSS ที่คุณตั้งค่าทิศทางข้อความและอิลิเมนต์ float จำเป็นต้องได้รับการตรวจสอบด้วยตนเอง

ค้นหาตัวเลือกทั้งหมดสำหรับ text-align, float และ clear หากมีตัวเลือกใดระบุทิศทาง ให้พลิกจาก 'right' เป็น 'left' (หรือกลับกัน) จำภาพสะท้อนในกระจกที่เราพยายามสร้างไว้ และมันจะช่วยให้เข้าใจการแปลงนี้ได้ง่ายขึ้น

กราฟิกที่สื่อถึงทิศทาง

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

การเลือกแบบอักษรแบบกำหนดเอง

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

หากคุณใช้แบบอักษรมาตรฐานของเว็บ ก็ไม่มีปัญหาใด ๆ

วิธีทดสอบธีมของคุณใน RTL

เมื่อคุณกำลังพัฒนาไฟล์ RTL CSS ขอแนะนำให้ทดสอบสิ่งที่คุณทำอยู่เสมอ

1. เปลี่ยนภาษาในไฟล์ wp-config.php เป็นภาษานั้น หากคุณใช้ WPML เพียงแค่เพิ่มภาษา RTL ลงในเว็บไซต์ของคุณ

   



2. แปลข้อความที่ฮาร์ดโค้ดไว้ในธีมของคุณ (อย่างน้อยข้อความในส่วนหน้าเว็บไซต์) เป็นภาษานั้น WPML ให้คุณทำสิ่งนี้ได้โดยใช้โมดูลการแปลสตริง

   



3. รับเนื้อหาตัวอย่างในภาษานั้น เพื่อให้แก้ไขในรูปแบบ RTL ได้ง่ายในหน้าจัดการเว็บไซต์ WordPress ให้ไปที่โปรไฟล์ของคุณ เลื่อนไปที่การตั้งค่าภาษาของผู้ดูแลระบบ และตั้งค่าภาษาให้เหมือนกับภาษาที่ใช้แก้ไข

   

หากคุณไม่รู้จักภาษา RTL เลย เพียงแค่ใช้ Google แปลภาษา คำแปลส่วนใหญ่อาจไม่สมเหตุสมผล แต่สำหรับวัตถุประสงค์ในการพัฒนา CSS ถือว่าใช้งานได้

ตอนนี้ ให้ตรวจสอบเนื้อหาประเภทต่าง ๆ ในเว็บไซต์ของคุณ ตรวจสอบให้แน่ใจว่าได้รวมโพสต์ หน้าเว็บ หน้าแรก และเนื้อหาแบบกำหนดเองใด ๆ ที่คุณสร้างขึ้น

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

เนื้อหาโบนัส – หน้าจัดการธีมของคุณในภาษา RTL

ข้อกำหนดพื้นฐานสำหรับการมีธีมที่เข้ากันได้กับ RTL คือส่วนหน้าเว็บไซต์ (เนื้อหาสาธารณะ) ต้องแสดงผลอย่างถูกต้องในภาษา RTL นี่คือพื้นฐานที่สำคัญที่สุด หากไม่มีสิ่งนี้ จะไม่มีใครสามารถใช้ธีมของคุณเพื่อสร้างเว็บไซต์ในภาษา RTL ได้

นอกจากนี้ ผู้ใช้หลายคนต้องการให้หน้าจัดการเว็บไซต์ WordPress เป็นภาษาของตนเอง ซึ่งหมายความว่าจะต้องเห็นหน้าจอการจัดการธีมของคุณในทิศทาง RTL ด้วย

วิธีง่าย ๆ ในการบรรลุความเข้ากันได้กับ RTL สำหรับหน้าจอการจัดการธีมของคุณคือการใช้คลาส CSS มาตรฐานของ WordPress สำหรับอิลิเมนต์ GUI จริงอยู่ที่วิธีนี้หมายความว่าคุณไม่สามารถใช้เอฟเฟกต์ CSS ที่สวยงามเพื่อตกแต่ง GUI ของคุณได้ แต่มันก็หมายความว่า GUI ของคุณจะผสมผสานเข้ากับหน้าจัดการเว็บไซต์ WordPress ได้อย่างสมบูรณ์แบบ และแสดงผลได้อย่างถูกต้องทั้งในรูปแบบ LTR / RTL

หากคุณจำเป็นต้องใช้ CSS แบบกำหนดเองสำหรับหน้าจอการจัดการ ให้ตรวจสอบว่าหน้าจอเหล่านั้นมีลักษณะอย่างไรในภาษา RTL กฎเดียวกันกับที่คุณปฏิบัติตามสำหรับ CSS ส่วนหน้าเว็บไซต์ก็มีผลกับส่วนหลังเว็บไซต์เช่นกัน พลิก align, float และ clear หลีกเลี่ยงการใช้ absolute positioning และดูแลเรื่องรูปภาพให้ดี

แหล่งอ้างอิงที่ยอดเยี่ยม – ธีมเริ่มต้นของ WordPress

ข้อมูลเพิ่มเติม: ธีมเริ่มต้นของ WordPress ทั้งหมดได้รับการปรับให้เข้ากับภาษา RTL อย่างสมบูรณ์แบบ เปิดธีมเริ่มต้นและค้นหาไฟล์ rtl.css คุณจะเห็นว่ามีการเปลี่ยนแปลงใดบ้างใน CSS สำหรับธีมเริ่มต้น โดยปกติแล้ว การเปลี่ยนแปลงเหล่านี้ค่อนข้างเล็กน้อยและทำตามได้ง่าย