WPML

Thiết kế currency switcher tùy chỉnh bằng các tệp template

Cập nhật: ngày 1 tháng 7 năm 2026

Nhiều trang web và giao diện cần một currency switcher phù hợp với thiết kế tùy chỉnh của chúng. Tìm hiểu cách tạo currency switcher của riêng bạn bằng PHP.

Hiểu về các tệp template PHP cho currency switcher

Dưới đây là một ví dụ cơ bản về tệp template PHP cho một currency switcher:

<?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>

Tệp template này:

  • Mở các thẻ HTML vùng chứa <div> và <ul> để cấu trúc currency switcher
  • Hiển thị tiền tệ đã chọn
  • Lặp qua các loại tiền tệ có sẵn
  • Xuất một mục danh sách HTML <li> cho mỗi loại tiền tệ (ngoại trừ loại tiền tệ hiện đang được chọn)
  • Xuất các liên kết có thể nhấp để chuyển đổi tiền tệ

Bây giờ, hãy cùng xem cách tạo các tệp template như vậy cho các currency switcher của riêng bạn.

Thêm tệp template currency switcher vào giao diện của bạn

Bạn có thể thêm một thư mục vào giao diện của mình để chứa các tệp template currency switcher tùy chỉnh của bạn.

  • Nếu bạn đang phát triển một giao diện mà bạn dự định phân phối hoặc bán, hãy đưa trực tiếp các tệp template vào giao diện. Bằng cách này, tất cả người dùng giao diện của bạn sẽ có thể sử dụng các currency switcher mà bạn tạo.
  • Nếu bạn đang tùy chỉnh một giao diện hiện có, hãy tạo các tệp template bên trong một child theme (giao diện con). Điều này giúp các thay đổi của bạn không bị ghi đè khi giao diện gốc được cập nhật.

Sử dụng cấu trúc thư mục sau cho các tệp template currency switcher tùy chỉnh của bạn:

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

Cấu trúc thư mục cho các tệp template currency switcher tùy chỉnh

Để xây dựng cấu trúc này:

  1. Bên trong giao diện (hoặc child theme) của bạn, hãy tạo một thư mục có tên là wpml. WPML Multilingual & Multicurrency for WooCommerce sử dụng quy ước đặt tên này vì nó hoạt động cùng với WPML.
  2. Bên trong wpml, hãy tạo một thư mục templates.
  3. Bên trong templates, hãy tạo một thư mục currency-switchers.
  4. Bên trong currency-switchers, hãy tạo một thư mục con cho mỗi currency switcher tùy chỉnh mà bạn xây dựng — ví dụ: my-template.

Bên trong mỗi thư mục currency switcher tùy chỉnh (ví dụ: my-template), bạn sẽ cần:

  • template.php — Bắt buộc. Đây là tệp template PHP chính của bạn.
  • config.json — Bắt buộc. Tệp này cung cấp cho WCML siêu dữ liệu về currency switcher của bạn.
  • Bất kỳ tệp CSS hoặc JS tùy chọn nào — Bao gồm các tệp này nếu currency switcher của bạn sử dụng kiểu dáng hoặc tính tương tác tùy chỉnh.

Trong các phiên bản trước của WPML Multilingual & Multicurrency for WooCommerce (lên đến 5.5), bạn có thể sử dụng tệp template.twig nếu không có tệp template.php. Nếu cả hai đều được bao gồm, WPML Multilingual & Multicurrency for WooCommerce sẽ luôn sử dụng template.php.

Kể từ WPML Multilingual & Multicurrency for WooCommerce 5.6, các tệp .twig sẽ không còn được hỗ trợ. Kể từ bây giờ, luôn sử dụng template.php để xác định cấu trúc currency switcher của bạn.
 

Thiết kế tệp template.php

Tệp template.php xác định bố cục và hành vi của currency switcher tùy chỉnh của bạn. Nó sử dụng PHP tiêu chuẩn và xuất HTML sẽ được hiển thị trên giao diện người dùng.

Bên trong tệp template của bạn, bạn có thể sử dụng các biến sau do WPML Multilingual & Multicurrency for WooCommerce cung cấp:

  • $css_classes (chuỗi): Các lớp CSS được áp dụng cho vùng chứa chính.
  • $currencies (mảng): Danh sách các loại tiền tệ có sẵn.
  • $selected_currency (chuỗi): Tiền tệ hiện đang được chọn.
  • $format (chuỗi): Chuỗi xác định cách hiển thị tiền tệ.
  • WCML_Currency_Switcher_Template::get_formatted_price( $currency, $format ): Một phương thức tĩnh được sử dụng để định dạng và hiển thị từng nhãn tiền tệ.

Khi viết tệp template của bạn, hãy tuân theo các phương pháp hay nhất về giao diện người dùng WordPress để đảm bảo currency switcher của bạn có thể truy cập được và nhất quán với các thành phần giao diện khác. Ngoài ra, hãy đảm bảo escape dữ liệu đầu ra động bằng cách sử dụng các hàm như esc_attr() và wp_kses_post() để giữ cho mã của bạn an toàn.

Thiết lập tùy chọn trong tệp config.json

Mỗi currency switcher tùy chỉnh phải bao gồm một tệp config.json. Tệp này cung cấp cho WPML Multilingual & Multicurrency for WooCommerce thông tin cơ bản về currency switcher của bạn, chẳng hạn như tên của nó và bất kỳ tài nguyên CSS hoặc JS nào nó cần.

Các trường bắt buộc

Tệp phải xác định tên của currency switcher:

{
  "name": "My custom switcher"
}

Bạn không cần thêm tiền tố vào tên. WPML Multilingual & Multicurrency for WooCommerce sẽ tự động xử lý việc đó dựa trên giao diện hoặc plugin mà currency switcher thuộc về.

Các trường tùy chọn

Ngoài tên bắt buộc, bạn có thể bao gồm hai trường tùy chọn:

  • css: Danh sách các tệp CSS để tải từ thư mục tệp template của bạn. Theo mặc định, WPML Multilingual & Multicurrency for WooCommerce sẽ tự động enqueue tất cả các tệp .css trong thư mục tệp template, nhưng bạn có thể ghi đè hành vi đó bằng trường này.
"css": ["style.css", "responsive.css"]
  • js: Danh sách các tệp JavaScript để tải từ thư mục tệp template của bạn. Chỉ sử dụng JavaScript thuần túy trừ khi giao diện hoặc plugin của bạn đã bao gồm một thư viện JS như jQuery.
"js": ["script.js", "click-handler.js"]

Dưới đây là một tệp config.json hoàn chỉnh bao gồm tất cả các trường:

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

Thêm các tệp template currency switcher vào thư mục uploads

Bạn cũng có thể lưu trữ các tệp template currency switcher tùy chỉnh của mình trong thư mục uploads của WordPress. Điều này rất hữu ích nếu bạn muốn giữ cho các tệp template an toàn khỏi các bản cập nhật giao diện hoặc plugin.

Đặt các tệp template của bạn theo đường dẫn sau:

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

WPML Multilingual & Multicurrency for WooCommerce tự động quét đường dẫn này để tìm các tệp template currency switcher.

Thêm các tệp template currency switcher vào một plugin

Nếu bạn đang xây dựng một plugin và muốn bao gồm các currency switcher tùy chỉnh, bạn cần cho WPML Multilingual & Multicurrency for WooCommerce biết nơi để tìm chúng.

Sử dụng bộ lọc wcml_cs_directories_to_scan để đăng ký thư mục tệp template. Thêm mã này vào tệp plugin chính của bạn:

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 sau đó sẽ quét thư mục templates bên trong plugin của bạn. Bạn cần đặt mỗi currency switcher tùy chỉnh trong thư mục con riêng của nó, như thế này:

my-plugin/templates/my-template/

Ví dụ đầy đủ: Currency switcher tùy chỉnh

Ví dụ này cho thấy cách tạo một currency switcher hoàn chỉnh với thư mục, tệp template, tệp cấu hình và các kiểu dáng tùy chọn riêng.

  1. Trong giao diện hoặc child theme của bạn, hãy tạo thư mục sau:

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

  1. Tạo một tệp config.json bên trong thư mục:
{
"name": "Custom currency switcher"
}
  1. Tạo một tệp template.php để hiển thị tiền tệ đã chọn và danh sách các loại tiền tệ khác:
<?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. Nếu bạn muốn tùy chỉnh giao diện, hãy thêm một tệp style.css:
.your-custom-class li {
  list-style: none;
  float: left;
  margin: 0 3px;
}

Sử dụng các currency switcher tùy chỉnh trong các tệp template PHP

Sau khi bạn đã tạo một currency switcher tùy chỉnh, bạn có thể sử dụng nó trong các tệp template PHP của mình bằng cách gọi hành động wcml_currency_switcher.

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

Giá trị switcher_style phụ thuộc vào hai yếu tố: vị trí của currency switcher và tên được xác định trong tệp config.json của nó. WCML tự động tạo slug bằng định dạng này:

Vị trí của currency switcher tùy chỉnhCách slug được tạo
Thư mục giao diệnSlug giao diện + tên currency switcher đã được làm sạch
Thư mục pluginSlug plugin + tên currency switcher đã được làm sạch
Thư mục “uploads”“uploads-” + tên currency switcher đã được làm sạch

Vì vậy, giả sử:

  • Giao diện của bạn là Twenty Seventeen
  • Tệp config.json của currency switcher của bạn chứa:
{ "name": "My custom switcher" }

Khi đó, slug được tạo sẽ là:

twenty-seventeen-my-custom-switcher

Sử dụng giá trị này cho switcher_style trong đoạn mã ở trên.

Được viết bởi Amir · Cập nhật lần cuối vào 1 tháng 7 năm 2026