Skip Navigation
Home » ตัวสลับภาษาที่กำหนดเอง

ตัวสลับภาษาที่กำหนดเอง

เมื่อพัฒนาเว็บไซต์หลายภาษาด้วย WPML คุณอาจจำเป็นต้องมีตัวสลับภาษาที่กำหนดเอง เรียนรู้วิธีดำเนินการนี้ด้วย PHP และ CSS แบบง่ายๆ

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

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

ไซต์ที่ใช้ตัวสลับภาษาแบบลอย

ปฏิบัติตามสามขั้นตอนหลักเหล่านี้:

  1. เพิ่มโค้ด PHP ที่แสดงตัวสลับภาษา
  2. ตกแต่งตัวสลับภาษาของคุณด้วย CSS
  3. อัปเดตการตั้งค่าตัวสลับภาษาของคุณ

ส่วน PHP

ขั้นตอนแรกคือการเพิ่มโค้ด PHP ที่รับผิดชอบในการแสดงผลตัวสลับภาษาบนเพจของคุณ ด้วยเหตุนี้ คุณจึงสร้างฟังก์ชันที่เพิ่มคอนเทนเนอร์ div โดยมีตัวสลับภาษาอยู่ข้างใน เราสามารถใช้ การดำเนินการ wpml_add_language_selector เพื่อแสดงตัวสลับภาษา

ในตัวอย่างนี้ เราต้องการให้ตัวสลับภาษาใหม่แสดงในส่วนท้าย ดังนั้นเราจึงใช้ฟังก์ชันใหม่ของเรากับ hook wp_footer ของ WordPress

โค้ด PHP ที่สมบูรณ์จะมีลักษณะเช่นนี้

Language switcher 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>'; 
}

คุณสามารถคัดลอกและเพิ่มลงในไฟล์ ฟังก์ชั่น.php ของธีม (ลูก) ของคุณได้

ส่วนจัดแต่งทรงผม

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

ใช้ขั้นตอนต่อไปนี้เพื่อเพิ่มโค้ด CSS:

  1. ไปที่ WPML → ภาษา
  2. เลื่อนลงไปที่ ตัวเลือกตัวสลับภาษา และขยายส่วน CSS เพิ่มเติม

หรือคุณสามารถเพิ่มโค้ด CSS นี้ได้โดยไปที่ Appearance → ปรับแต่ง และคลิก CSS เพิ่มเติม

ตัวอย่างต่อไปนี้เพิ่มการปรับแต่งพิเศษบางอย่าง เช่น เส้นขอบโค้งมนและเงาของกล่อง แน่นอนคุณสามารถปรับแต่งได้ตามที่คุณต้องการ

Language Switcher Styling 
/*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);
}

ส่วนการตั้งค่า

สุดท้าย คุณต้องปรับการตั้งค่าบางอย่างเพื่อให้ตัวสลับภาษาแสดงเฉพาะธงเท่านั้น

ใช้ขั้นตอนต่อไปนี้:

  1. ไปที่ WPML → ภาษา
  2. เลื่อนลงไปที่ ตัวสลับภาษาที่กำหนดเอง แล้วคลิก เปิดใช้งาน
  3. คลิกปุ่ม ปรับแต่ง
  4. สำหรับ สิ่งที่จะรวมไว้ในตัวสลับภาษา ให้เลือกตั้ง ค่าสถานะ และยกเลิกการเลือกตัวเลือกอื่นๆ
  5. คลิก บันทึก
Language switcher options
แสดงเฉพาะธงในตัวสลับภาษาแบบลอย

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

Horizontal language switcher
ตัวสลับภาษาที่ส่วนหน้า

โบนัส: ตัวสลับภาษาแบบลอยตัวในแนวตั้ง

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

Vertical language switcher
ตัวสลับภาษาแนวตั้ง

สำหรับสิ่งนี้ เพียงแทนที่ CSS ก่อนหน้าด้วยโค้ดต่อไปนี้:

Vertical Language Switcher 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;
}