WPML

การออกแบบตัวสลับสกุลเงินที่กำหนดเองโดยใช้ไฟล์เทมเพลต

อัปเดตเมื่อ: 1 กรกฎาคม 2026

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

ทำความเข้าใจไฟล์เทมเพลต PHP สำหรับตัวสลับสกุลเงิน

นี่คือตัวอย่างพื้นฐานของเทมเพลต PHP สำหรับตัวสลับสกุลเงิน:

<?php
/**
 * @var string $css_classes
 * @var string $format
 * @var string $selected_currency
 * @var string[] $currencies
 */
?>
<div class="<?php echo esc_attr( $css_classes ) ?>">
	<ul>
		<li class="wcml-cs-active-currency">
			<a class="wcml-cs-item-toggle"><?php echo wp_kses_post( WCML_Currency_Switcher_Template::get_formatted_price( $selected_currency, $format ) ); ?></a>
			<ul class="wcml-cs-submenu">
				<?php foreach ( $currencies as $currency ) : ?>
					<?php if ( $currency != $selected_currency ) : ?>
						<li>
							<a rel="<?php echo esc_attr( $currency ); ?>"><?php echo wp_kses_post( WCML_Currency_Switcher_Template::get_formatted_price( $currency, $format ) ); ?></a>
						</li>
					<?php endif; ?>
				<?php endforeach; ?>
			</ul>
		</li>
	</ul>
</div>

เทมเพลตนี้:

  • เปิดแท็ก HTML คอนเทนเนอร์ <div> และ <ul> ที่จัดโครงสร้างตัวสลับ
  • แสดงสกุลเงินที่เลือก
  • วนลูปผ่านสกุลเงินที่มีอยู่
  • ส่งออกรายการ HTML <li> สำหรับแต่ละสกุลเงิน (ไม่รวมสกุลเงินที่เลือกอยู่ในปัจจุบัน)
  • ส่งออกลิงก์ที่คลิกได้เพื่อสลับสกุลเงิน

ตอนนี้เรามาดูวิธีสร้างเทมเพลตดังกล่าวสำหรับตัวสลับสกุลเงินของคุณเอง

การเพิ่มเทมเพลตตัวสลับสกุลเงินลงในธีมของคุณ

คุณสามารถเพิ่มไดเรกทอรีลงในธีมของคุณเพื่อเก็บเทมเพลตตัวสลับสกุลเงินที่กำหนดเอง

  • หากคุณกำลังพัฒนาธีมที่วางแผนจะแจกจ่ายหรือขาย ให้รวมเทมเพลตไว้ในธีมโดยตรง ด้วยวิธีนี้ ผู้ใช้ธีมของคุณทุกคนจะสามารถใช้ตัวสลับสกุลเงินที่คุณสร้างขึ้นได้
  • หากคุณกำลังปรับแต่งธีมที่มีอยู่ ให้สร้างเทมเพลตภายใน child theme วิธีนี้จะช่วยป้องกันไม่ให้การเปลี่ยนแปลงของคุณถูกเขียนทับเมื่อธีมหลักได้รับการอัปเดต

ใช้โครงสร้างโฟลเดอร์ต่อไปนี้สำหรับเทมเพลตตัวสลับที่กำหนดเองของคุณ:

my-theme/wpml/templates/currency-switchers/my-template

โครงสร้างโฟลเดอร์สำหรับเทมเพลตตัวสลับสกุลเงินที่กำหนดเอง

ในการสร้างโครงสร้างนี้:

  1. ภายในธีม (หรือ child theme) ของคุณ ให้สร้างโฟลเดอร์ชื่อ wpml WPML Multilingual & Multicurrency for WooCommerce ใช้รูปแบบการตั้งชื่อนี้เนื่องจากทำงานร่วมกับ WPML
  2. ภายใน wpml ให้สร้างโฟลเดอร์ templates
  3. ภายใน templates ให้สร้างโฟลเดอร์ currency-switchers
  4. ภายใน currency-switchers ให้สร้างโฟลเดอร์ย่อยหนึ่งโฟลเดอร์สำหรับตัวสลับที่กำหนดเองแต่ละตัวที่คุณสร้าง เช่น my-template

ภายในแต่ละโฟลเดอร์ตัวสลับที่กำหนดเอง (เช่น my-template) คุณจะต้องมี:

  • template.php — จำเป็น นี่คือไฟล์เทมเพลต PHP หลักของคุณ
  • config.json — จำเป็น ไฟล์นี้ให้ข้อมูลเมตาเกี่ยวกับตัวสลับสกุลเงินของคุณแก่ WCML
  • ไฟล์ CSS หรือ JS ที่เป็นทางเลือก — รวมไฟล์เหล่านี้หากตัวสลับของคุณใช้การจัดรูปแบบหรือการโต้ตอบที่กำหนดเอง

ใน WPML Multilingual & Multicurrency for WooCommerce เวอร์ชันก่อนหน้า (จนถึง 5.5) คุณสามารถใช้ไฟล์ template.twig ได้หากไม่มีไฟล์ template.php หากมีทั้งสองไฟล์ WPML Multilingual & Multicurrency for WooCommerce จะใช้ template.php เสมอ

ตั้งแต่ WPML Multilingual & Multicurrency for WooCommerce 5.6 เป็นต้นไป จะไม่รองรับไฟล์ .twig อีกต่อไป ต่อจากนี้ไป ให้ใช้ template.php เสมอ เพื่อกำหนดโครงสร้างตัวสลับสกุลเงินของคุณ
 

การออกแบบไฟล์ template.php

ไฟล์ template.php กำหนดเค้าโครงและพฤติกรรมของตัวสลับสกุลเงินที่กำหนดเองของคุณ โดยใช้ PHP มาตรฐานและส่งออก HTML ที่จะแสดงผลในส่วนหน้าเว็บไซต์

ภายในเทมเพลตของคุณ คุณสามารถใช้ตัวแปรต่อไปนี้ที่ให้มาโดย WPML Multilingual & Multicurrency for WooCommerce:

  • $css_classes (สตริง): คลาส CSS ที่ใช้กับคอนเทนเนอร์หลัก
  • $currencies (อาร์เรย์): รายการสกุลเงินที่มีอยู่
  • $selected_currency (สตริง): สกุลเงินที่เลือกอยู่ในปัจจุบัน
  • $format (สตริง): สตริงที่กำหนดวิธีการแสดงสกุลเงิน
  • WCML_Currency_Switcher_Template::get_formatted_price( $currency, $format ): เมธอดแบบคงที่ที่ใช้ในการจัดรูปแบบและแสดงป้ายกำกับสกุลเงินแต่ละรายการ

เมื่อเขียนเทมเพลต ให้ปฏิบัติตาม แนวทางปฏิบัติที่ดีที่สุดของ WordPress UI เพื่อให้แน่ใจว่าตัวสลับของคุณสามารถเข้าถึงได้และสอดคล้องกับองค์ประกอบอื่น ๆ ของธีม นอกจากนี้ ตรวจสอบให้แน่ใจว่าได้หลีกเลี่ยงเอาต์พุตแบบไดนามิกโดยใช้ฟังก์ชันเช่น esc_attr() และ wp_kses_post() เพื่อรักษาความปลอดภัยของโค้ดของคุณ

การตั้งค่าตัวเลือกในไฟล์ config.json

ตัวสลับสกุลเงินที่กำหนดเองแต่ละตัวต้องมีไฟล์ config.json ไฟล์นี้ให้ข้อมูลพื้นฐานเกี่ยวกับตัวสลับสกุลเงินของคุณแก่ WPML Multilingual & Multicurrency for WooCommerce เช่น ชื่อและแอสเซท CSS หรือ JS ใด ๆ ที่จำเป็น

ฟิลด์ที่จำเป็น

ไฟล์ต้องกำหนดชื่อของตัวสลับสกุลเงิน:

{
  "name": "My custom switcher"
}

คุณไม่จำเป็นต้องเพิ่มคำนำหน้าให้กับชื่อ WPML Multilingual & Multicurrency for WooCommerce จะจัดการสิ่งนั้นโดยอัตโนมัติตามธีมหรือปลั๊กอินที่ตัวสลับเป็นส่วนหนึ่ง

ฟิลด์ทางเลือก

นอกจากชื่อที่จำเป็นแล้ว คุณสามารถรวมฟิลด์ทางเลือกสองฟิลด์:

  • css: รายการไฟล์ CSS ที่จะโหลดจากโฟลเดอร์เทมเพลตของคุณ ตามค่าเริ่มต้น WPML Multilingual & Multicurrency for WooCommerce จะจัดคิวไฟล์ .css ทั้งหมดในโฟลเดอร์เทมเพลตโดยอัตโนมัติ แต่คุณสามารถลบล้างพฤติกรรมนั้นได้ด้วยฟิลด์นี้
"css": ["style.css", "responsive.css"]
  • js: รายการไฟล์ JavaScript ที่จะโหลดจากโฟลเดอร์เทมเพลตของคุณ ใช้ JavaScript ธรรมดาเท่านั้น เว้นแต่ธีมหรือปลั๊กอินของคุณจะมีไลบรารี JS เช่น jQuery อยู่แล้ว
"js": ["script.js", "click-handler.js"]

นี่คือ config.json ที่สมบูรณ์ซึ่งรวมทุกฟิลด์:

{
"name":           "My custom Vertical List",
"css":            ["style.css"],
"js":             ["script.js"],
}

การเพิ่มเทมเพลตตัวสลับสกุลเงินลงในโฟลเดอร์อัปโหลด

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

วางเทมเพลตของคุณในเส้นทางต่อไปนี้:

../wp-content/uploads/wpml/templates/currency-switchers/

WPML Multilingual & Multicurrency for WooCommerce จะสแกนเส้นทางนี้เพื่อหาเทมเพลตตัวสลับสกุลเงินโดยอัตโนมัติ

การเพิ่มเทมเพลตตัวสลับสกุลเงินลงในปลั๊กอิน

หากคุณกำลังสร้างปลั๊กอินและต้องการรวมตัวสลับสกุลเงินที่กำหนดเอง คุณต้องบอก WPML Multilingual & Multicurrency for WooCommerce ว่าจะค้นหาได้ที่ไหน

ใช้ฟิลเตอร์ wcml_cs_directories_to_scan เพื่อลงทะเบียนไดเรกทอรีเทมเพลต เพิ่มโค้ดนี้ลงในไฟล์ปลั๊กอินหลักของคุณ:

function myplugin_wcml_cs_dirs_to_scan( $dirs ) {
    $folder_name = basename( dirname( __FILE__ ) );
    $dirs[] 	= trailingslashit( WP_PLUGIN_DIR ) . $folder_name . '/templates/';
    return $dirs;
}
add_filter( 'wcml_cs_directories_to_scan', 'myplugin_wcml_cs_dirs_to_scan' );

จากนั้น WPML Multilingual & Multicurrency for WooCommerce จะสแกนโฟลเดอร์เทมเพลตภายในปลั๊กอินของคุณ คุณต้องวางตัวสลับสกุลเงินที่กำหนดเองแต่ละตัวในโฟลเดอร์ย่อยของตัวเอง เช่นนี้:

my-plugin/templates/my-template/

ตัวอย่างแบบเต็ม: ตัวสลับสกุลเงินที่กำหนดเอง

ตัวอย่างนี้แสดงวิธีสร้างตัวสลับสกุลเงินที่สมบูรณ์พร้อมโฟลเดอร์ เทมเพลต คอนฟิก และสไตล์ที่เป็นทางเลือกของตัวเอง

  1. ในธีมหรือ child theme ของคุณ ให้สร้างโฟลเดอร์ต่อไปนี้:

wpml/templates/currency-switchers/custom-currency-switcher/

  1. สร้างไฟล์ config.json ภายในโฟลเดอร์:
{
"name": "Custom currency switcher"
}
  1. สร้างไฟล์ template.php เพื่อแสดงสกุลเงินที่เลือกและรายการสกุลเงินอื่น ๆ:
<?php
/**
* @var string $css_classes
* @var string $format
* @var string $selected_currency
* @var string[] $currencies
*/
?>
<div class="<?php echo esc_attr( $css_classes ) ?>">
	<ul>
		<li class="wcml-cs-active-currency">
			<a class="wcml-cs-item-toggle"><?php echo wp_kses_post( WCML_Currency_Switcher_Template::get_formatted_price( $selected_currency, $format ) ); ?></a>
			<ul class="wcml-cs-submenu">
				<?php foreach ( $currencies as $currency ) : ?>
					<?php if ( $currency != $selected_currency ) : ?>
						<li>
							<a rel="<?php echo esc_attr( $currency ); ?>"><?php echo wp_kses_post( WCML_Currency_Switcher_Template::get_formatted_price( $currency, $format ) ); ?></a>
						</li>
					<?php endif; ?>
				<?php endforeach; ?>
			</ul>
		</li>
	</ul>
</div>
  1. หากคุณต้องการปรับแต่งรูปลักษณ์ ให้เพิ่มไฟล์ style.css:
.your-custom-class li {
  list-style: none;
  float: left;
  margin: 0 3px;
}

การใช้ตัวสลับสกุลเงินที่กำหนดเองในเทมเพลต PHP

เมื่อคุณสร้างตัวสลับสกุลเงินที่กำหนดเองแล้ว คุณสามารถใช้ในเทมเพลต PHP ของคุณได้โดยเรียกการดำเนินการ wcml_currency_switcher

do_action('wcml_currency_switcher', array(
  'format' => '%name% (%symbol%)',
  'switcher_style' => 'twenty-seventeen-my-custom-switcher'
));

ค่า switcher_style ขึ้นอยู่กับสองสิ่ง: ตำแหน่งของตัวสลับและชื่อที่กำหนดไว้ใน config.json WCML จะสร้างสลักโดยอัตโนมัติโดยใช้รูปแบบนี้:

ตำแหน่งของตัวสลับสกุลเงินที่กำหนดเองวิธีการสร้างสลัก
โฟลเดอร์ธีมสลักของธีม + ชื่อตัวสลับที่ผ่านการล้างข้อมูล
โฟลเดอร์ปลั๊กอินสลักของปลั๊กอิน + ชื่อตัวสลับที่ผ่านการล้างข้อมูล
โฟลเดอร์ "uploads""uploads-" + ชื่อตัวสลับที่ผ่านการล้างข้อมูล

สมมติว่า:

  • ธีมของคุณคือ Twenty Seventeen
  • config.json ของตัวสลับของคุณประกอบด้วย:
{ "name": "My custom switcher" }

จากนั้นสลักที่สร้างขึ้นจะเป็น:

twenty-seventeen-my-custom-switcher

ใช้ค่านี้เป็นค่าสำหรับ switcher_style ในข้อมูลโค้ดด้านบน

เขียนโดย Amir · อัปเดตล่าสุด 1 กรกฎาคม 2026