เมื่อพัฒนาเว็บไซต์หลายภาษาด้วย WPML คุณอาจต้องใช้ตัวสลับภาษาแบบกำหนดเอง เรียนรู้วิธีทำโดยใช้ PHP และ CSS เพียงเล็กน้อย
WPML ช่วยให้คุณเพิ่มตัวสลับภาษาลงในเมนู วิดเจ็ต ส่วนท้าย และเว็บไซต์ที่ใช้ Site Editor (ก่อนหน้านี้เรียกว่า Full Site Editing) ได้ พร้อมด้วยตัวเลือกการปรับแต่งและธงในตัว แต่คุณอาจต้องการสิ่งที่พิเศษกว่าสำหรับเว็บไซต์ของคุณ
ในบทแนะนำนี้ เราจะแสดงวิธีเพิ่มตัวสลับภาษาแบบลอย ตัวสลับภาษาแบบลอยดูสวยงามและช่วยให้ลูกค้าของคุณดูเว็บไซต์ในภาษาของตนได้ง่ายขึ้น

ทำตามขั้นตอนหลัก 3 ขั้นตอนต่อไปนี้:
- เพิ่มโค้ด PHP ที่เรนเดอร์ตัวสลับภาษา
- จัดรูปแบบตัวสลับภาษาของคุณด้วย CSS
- อัปเดตการตั้งค่าตัวสลับภาษาของคุณ
ส่วนของ PHP
ขั้นตอนแรกคือการเพิ่มโค้ด PHP ที่ทำหน้าที่เรนเดอร์ตัวสลับภาษาบนหน้าเว็บของคุณ สำหรับขั้นตอนนี้ คุณต้องสร้างฟังก์ชันที่เพิ่มคอนเทนเนอร์ div ซึ่งมีตัวสลับภาษาอยู่ภายใน เราสามารถใช้แอ็กชัน wpml_add_language_selector เพื่อเรนเดอร์ตัวสลับภาษาได้
ในตัวอย่างนี้ เราต้องการให้ตัวสลับภาษาใหม่แสดงในส่วนท้าย เราจึงใช้ฟังก์ชันใหม่ของเรากับฮุก wp_footer ของ WordPress เอง
โค้ด PHP ทั้งหมดจะมีลักษณะดังนี้
PHP ของตัวสลับภาษา
//WPML - Add a floating language switcher to the footer
add_action('wp_footer', 'wpml_floating_language_switcher');
function wpml_floating_language_switcher() {
echo '<div class="wpml-floating-language-switcher">';
//PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
do_action('wpml_add_language_selector');
echo '</div>';
}คุณสามารถคัดลอกและเพิ่มลงในไฟล์ functions.php ของธีม (child) ของคุณได้
ส่วนของการจัดรูปแบบ
เมื่อใส่โค้ดก่อนหน้านี้แล้ว เราก็จะมีตัวสลับภาษาใหม่อยู่ในส่วนท้ายของเว็บไซต์เรียบร้อยแล้ว ตอนนี้ถึงเวลาปรับแต่งให้ลอยอยู่ที่มุมขวาล่างของเว็บไซต์ คุณสามารถทำได้โดยใช้แอตทริบิวต์ CSS position: fixed
ทำตามขั้นตอนต่อไปนี้เพื่อเพิ่มโค้ด CSS:
- ไปที่ WPML → การตั้งค่า → ตัวสลับภาษา
- ในการ์ด ตัวเลือกตัวสลับภาษา ให้ขยาย CSS เพิ่มเติม
อีกทางเลือกหนึ่ง คุณสามารถเพิ่มโค้ด CSS นี้ได้โดยไปที่ รูปแบบเว็บ → ปรับแต่ง และคลิก CSS เพิ่มเติม
ตัวอย่างต่อไปนี้จะเพิ่มการปรับแต่งพิเศษบางอย่าง เช่น ขอบโค้งมนและเงาของกล่อง (box-shadow) แน่นอนว่าคุณสามารถปรับแต่งได้ตามต้องการ
การจัดรูปแบบตัวสลับภาษา
/*Removing some default CSS from our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
margin-bottom: 0;
}
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions a {
background-color: transparent !important;
}
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
padding: 5px;
}
/*Customize this if you want*/
.wpml-floating-language-switcher {
position: fixed;
bottom: 10px;
right: 10px;
background: #f8f8f8; /*background color*/
border: 1px solid; /*border settings*/
border-color: #eee; /*color of the border*/
padding: 0px; /*padding of container*/
border-radius: 6px; /*rounded border*/
/*Box Shadow*/
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}ส่วนของการตั้งค่า
สุดท้าย คุณต้องปรับการตั้งค่าบางอย่างเพื่อให้ตัวสลับภาษาแสดงเฉพาะธงเท่านั้น
ทำตามขั้นตอนต่อไปนี้:
- ไปที่ WPML → การตั้งค่า → ตัวสลับภาษา → ตัวสลับภาษาแบบกำหนดเอง
- เลื่อนลงไปที่ ตัวสลับภาษาแบบกำหนดเอง แล้วคลิก เปิดใช้งาน
- คลิกปุ่ม ปรับแต่ง
- ภายใต้ สิ่งที่จะรวมไว้ในตัวสลับภาษา ให้คงเครื่องหมายถูกที่ ธง ไว้ และยกเลิกการทำเครื่องหมายที่ ชื่อภาษาท้องถิ่น ชื่อภาษาในภาษาปัจจุบัน และ ภาษาปัจจุบัน
- คลิก บันทึก

เท่านี้ก็เรียบร้อย! ตอนนี้คุณควรมีตัวสลับภาษาแบบกำหนดเองที่สวยงามบนเว็บไซต์แล้ว:

โบนัส: ตัวสลับภาษาแบบลอยแนวตั้ง
คุณยังสามารถสร้างตัวสลับภาษาแนวตั้งแทนได้ ดังภาพหน้าจอด้านล่าง:

สำหรับส่วนนี้ เพียงแทนที่ CSS ก่อนหน้าด้วยโค้ดต่อไปนี้:
CSS ของตัวสลับภาษาแนวตั้ง
/*Removing some default CSS our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
margin-bottom: 0;
}
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions a {
background-color: transparent !important;
}
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
padding: 5px;
}
.wpml-floating-language-switcher .wpml-ls-item {
display: block;
}
/*Customize this if you want*/
.wpml-floating-language-switcher {
position: fixed;
bottom: 20px;
right: 0px;
background: #f8f8f8; /*background color*/
border: 1px solid; /*border settings*/
border-color: #eee; /*color of the border*/
padding: 0px; /*padding of container*/
border-radius: 6px 0 0 6px; /*rounded border*/
/*Box Shadow*/
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
z-index: 999;
}