วิธีแสดงหรือซ่อนตัวสลับภาษาในหน้าที่กำหนด

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

คุณทำได้ง่าย ๆ ด้วย CSS เพียงไม่กี่บรรทัด

การแสดงตัวสลับภาษาเฉพาะในหน้าที่เจาะจง

ขั้นตอนที่ 1: ซ่อนตัวสลับภาษาในทุกหน้า

ขั้นแรก คุณต้องตรวจสอบว่าตัวสลับภาษาของเราใช้คลาสใด

คุณตรวจสอบได้โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์:

เปิดเว็บไซต์ของคุณในส่วนหน้า แล้วกดปุ่ม F12 บนแป้นพิมพ์
ใช้เครื่องมือ "ตรวจสอบ" เพื่อเลือกตัวสลับภาษา แล้วมาร์กอัป HTML ของตัวสลับภาษาจะปรากฏขึ้น

การใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์เพื่อดูคลาสของตัวสลับภาษา

ต่อไปนี้คือคลาสทั่วไปสองคลาสสำหรับตัวสลับภาษา:

คลาส wpml-ls-menu-item เมื่อตัวสลับภาษาปรากฏในเมนู
คลาส wpml-ls เมื่อตัวสลับภาษาปรากฏที่ส่วนท้าย

เมื่อคุณทราบคลาสที่ถูกต้องแล้ว ให้ไปที่หน้า รูปแบบเว็บ → ปรับแต่ง คลิก CSS เพิ่มเติม และเพิ่ม CSS ต่อไปนี้ลงในเว็บไซต์ของคุณ

ซ่อนตัวสลับภาษาในเมนู

/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
	visibility: hidden !important;
}

/*Hide footer Language Switcher*/
.wpml-ls {
	visibility: hidden  !important;
}

วิธีนี้จะซ่อนตัวสลับภาษาในทุกหน้า

หรือคุณสามารถเพิ่มกฎการจัดรูปแบบเหล่านี้ลงในไฟล์ style.css ของธีมได้ แต่ต้องแน่ใจว่าใช้ธีมลูก มิฉะนั้น การจัดรูปแบบที่คุณกำหนดเองจะหายไปเมื่อคุณอัปเดตธีม

สำหรับข้อมูลโดยละเอียดเกี่ยวกับคลาส CSS ของตัวสลับภาษา โปรดไปที่หน้าของเราเกี่ยวกับการจัดรูปแบบ CSS สำหรับตัวสลับภาษา

ขั้นตอนที่ 2: แสดงตัวสลับภาษาในหน้าที่เจาะจง

ในขั้นตอนถัดไป คุณต้องเพิ่มข้อมูลโค้ด CSS อีกชุดเพื่อแสดงตัวสลับภาษาเฉพาะในหน้าที่คุณต้องการ

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

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

คุณจะเห็นลักษณะดังนี้:

ค้นหาคลาส ID

<body class="page-template-default page page-id-2 logged-in admin-bar wp-embed-responsive is-light-theme singular has-main-navigation customize-support">

ในกรณีนี้ คลาส page-id-2 จะถูกเพิ่มลงในหน้าที่เจาะจงนี้เท่านั้น ตัวเลขแสดงถึง ID ของหน้านี้ และคุณสามารถนำไปใช้สร้างข้อมูลโค้ดของคุณได้

ข้อมูลโค้ดที่สมบูรณ์ควรมีลักษณะดังนี้:

ซ่อนตัวสลับภาษาในเมนู – เสร็จสมบูรณ์

/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
	visibility: hidden !important;
}

/*Hide footer Language Switcher*/
.wpml-ls {
	visibility: hidden  !important;
}

/*Display Language Switcher only in the page with ID 2*/
body.page-id-2 .wpml-ls-menu-item {
	visibility: visible !important;
}

body.page-id-2 .wpml-ls {
	visibility: visible !important;
}

อย่าลืมแทนที่คลาส page-id-2 ด้วยคลาสของหน้าเว็บของคุณ

ต่อไปนี้คือคลาสเฉพาะบางส่วนที่คุณสามารถใช้ได้:

page-id-X: ใช้สำหรับหน้า (แทนที่ X ด้วย ID ของหน้า)
postid-X: ใช้สำหรับโพสต์ (แทนที่ X ด้วย ID ของโพสต์)
home: ใช้สำหรับหน้าแรก
single-post: ใช้สำหรับโพสต์ทั้งหมด (ไม่เจาะจงโพสต์ใดโพสต์หนึ่ง)
page: ใช้สำหรับหน้าทั้งหมด (ไม่เจาะจงหน้าใดหน้าหนึ่ง)

การซ่อนตัวสลับภาษาเฉพาะในหน้าที่เจาะจง

การซ่อนตัวสลับภาษาในหน้าที่เจาะจงจะคล้ายกับขั้นตอนก่อนหน้ามาก แต่แทนที่จะซ่อนในทุกหน้า คุณจะซ่อนเฉพาะในหน้าที่เจาะจงเท่านั้น

ในกรณีนี้ คุณเพียงหาคลาสเฉพาะของหน้านั้น แล้วนำไปใช้ซ่อนตัวสลับภาษาของหน้านั้น

ข้อมูลโค้ด CSS ของคุณควรมีลักษณะดังนี้:

ซ่อนตัวสลับภาษาเฉพาะในหน้าที่มี ID 2

/*Hide Language Switcher only on the page with ID 2*/

/*Menu Language Switcher*/
body.page-id-2 .wpml-ls-menu-item {
	visibility: hidden !important;
}
/*Footer Language Switcher*/
body.page-id-2 .wpml-ls {
	visibility: hidden !important;
}

อย่าลืมแทนที่คลาส page-id-2 ด้วยคลาสเฉพาะของคุณ