WPML

テンプレートファイルを使用したカスタム通貨切り替えのデザイン

更新日: 2026年7月1日

多くのサイトやテーマでは、カスタムデザインに合わせた通貨切り替えが必要です。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>

このテンプレートは以下の処理を行います。

  • 切り替えを構成するコンテナの<div>および<ul>HTMLタグの開始
  • 選択された通貨の表示
  • 利用可能な通貨のループ処理
  • 各通貨（現在選択されているものを除く）の<li>HTMLリスト項目の出力
  • 通貨を切り替えるためのクリック可能なリンクの出力

それでは、独自の通貨切り替え用にこのようなテンプレートを作成する方法を見ていきましょう。

テーマへの通貨切り替えテンプレートの追加

カスタム通貨切り替えテンプレートを保存するディレクトリをテーマに追加できます。

  • 配布または販売を予定しているテーマを開発している場合は、テンプレートをテーマに直接含めます。これにより、テーマのすべてのユーザーが、作成した通貨切り替えを使用できるようになります。
  • 既存のテーマをカスタマイズしている場合は、子テーマ内にテンプレートを作成します。これにより、親テーマがアップデートされたときに変更が上書きされるのを防ぐことができます。

カスタム切り替えテンプレートには、以下のフォルダ構造を使用します。

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

カスタム通貨切り替えテンプレートのフォルダ構造

この構造を構築するには、以下の手順を実行します。

  1. テーマ（または子テーマ）内に、wpmlという名前のフォルダを作成します。WPML Multilingual & Multicurrency for WooCommerceはWPMLと連携して動作するため、この命名規則を使用します。
  2. wpml内に、templatesフォルダを作成します。
  3. templates内に、currency-switchersフォルダを作成します。
  4. currency-switchers内に、構築するカスタム切り替えごとにサブフォルダを1つ作成します（例：my-template）。

各カスタム切り替えフォルダ（例：my-template）内には、以下が必要です。

  • template.php — 必須。メインのPHPテンプレートファイルです。
  • config.json — 必須。このファイルは、通貨切り替えに関するメタデータをWCMLに提供します。
  • 任意のCSSまたはJSファイル — 切り替えがカスタムスタイルやインタラクティブな機能を使用する場合に含めます。

以前のバージョンのWPML Multilingual & Multicurrency for WooCommerce（5.5まで）では、template.phpファイルが存在しない場合にtemplate.twigファイルを使用できました。両方が含まれている場合、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 (string): メインコンテナに適用されるCSSクラス。
  • $currencies (array): 利用可能な通貨のリスト。
  • $selected_currency (string): 現在選択されている通貨。
  • $format (string): 通貨の表示方法を定義する文字列。
  • WCML_Currency_Switcher_Template::get_formatted_price( $currency, $format ): 各通貨ラベルをフォーマットして表示するために使用される静的メソッド。

テンプレートを記述する際は、WordPress UIのベストプラクティスに従って、切り替えがアクセシブルであり、他のテーマ要素と一貫していることを確認してください。また、コードを安全に保つために、esc_attr()やwp_kses_post()などの関数を使用して動的出力をエスケープするようにしてください。

config.jsonファイルでのオプションの設定

各カスタム通貨切り替えには、config.jsonファイルを含める必要があります。このファイルは、通貨切り替えの名前や必要なCSSまたはJSアセットなど、通貨切り替えに関する基本情報をWPML Multilingual & Multicurrency for WooCommerceに提供します。

必須フィールド

ファイルには、通貨切り替えの名前を定義する必要があります。

{
  "name": "My custom switcher"
}

名前にプレフィックスを追加する必要はありません。WPML Multilingual & Multicurrency for WooCommerceは、切り替えが属するテーマやプラグインに基づいて自動的に処理します。

オプションフィールド

必須の名前の他に、2つのオプションフィールドを含めることができます。

  • css: テンプレートフォルダから読み込むCSSファイルのリスト。デフォルトでは、WPML Multilingual & Multicurrency for WooCommerceはテンプレートフォルダ内のすべての.cssファイルを自動的にエンキューしますが、このフィールドを使用してその動作を上書きできます。
"css": ["style.css", "responsive.css"]
  • js: テンプレートフォルダから読み込むJavaScriptファイルのリスト。テーマやプラグインにjQueryのようなJSライブラリがすでに含まれていない限り、プレーンなJavaScriptのみを使用してください。
"js": ["script.js", "click-handler.js"]

すべてのフィールドを含む完全なconfig.jsonは以下のようになります。

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

Uploadsフォルダへの通貨切り替えテンプレートの追加

カスタム通貨切り替えテンプレートをWordPressのuploadsフォルダに保存することもできます。これは、テーマやプラグインのアップデートからテンプレートを保護したい場合に便利です。

テンプレートを以下のパスに配置します。

../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はプラグイン内のtemplatesフォルダをスキャンします。各カスタム通貨切り替えは、以下のように独自のサブフォルダに配置する必要があります。

my-plugin/templates/my-template/

完全な例：カスタム通貨切り替え

この例では、独自のフォルダ、テンプレート、設定、およびオプションのスタイルを備えた完全な通貨切り替えを作成する方法を示します。

  1. テーマまたは子テーマ内に、以下のフォルダを作成します。

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テンプレートでのカスタム通貨切り替えの使用

カスタム通貨切り替えを作成したら、wcml_currency_switcherアクションを呼び出すことで、PHPテンプレート内で使用できます。

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

switcher_styleの値は、切り替えの場所とconfig.jsonで定義された名前の2つに依存します。WCMLは、以下の形式を使用してスラッグを自動的に生成します。

カスタム通貨切り替えの場所スラッグの生成方法
テーマフォルダテーマスラッグ + サニタイズされた切り替え名
プラグインフォルダプラグインスラッグ + サニタイズされた切り替え名
「uploads」フォルダ「uploads-」 + サニタイズされた切り替え名

たとえば、以下の条件を想定します。

  • テーマがTwenty Seventeenである
  • 切り替えのconfig.jsonに以下が含まれている
{ "name": "My custom switcher" }

その場合、生成されるスラッグは以下のようになります。

twenty-seventeen-my-custom-switcher

これを上記のコードスニペットのswitcher_styleの値として使用します。

執筆者：Amir · 最終更新日：2026年7月1日