WPML

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

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

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

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

ทำตามขั้นตอนหลัก 3 ขั้นตอนต่อไปนี้:

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

ส่วนของ 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:

  1. ไปที่ WPMLการตั้งค่าตัวสลับภาษา
  2. ในการ์ด ตัวเลือกตัวสลับภาษา ให้ขยาย 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);
}

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

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

ทำตามขั้นตอนต่อไปนี้:

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

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

ตัวสลับภาษาแนวนอน
ตัวสลับภาษาบนส่วนหน้าเว็บไซต์

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

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

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

สำหรับส่วนนี้ เพียงแทนที่ 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;
}

เขียนโดย Amir · อัปเดตล่าสุด 2 มีนาคม 2023