템플릿 파일을 사용한 사용자 정의 통화 전환기 디자인

많은 사이트와 테마에는 사용자 정의 디자인과 일치하는 통화 전환기가 필요합니다. 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

이 구조를 만들려면 다음을 수행하세요.

테마(또는 자식 테마) 안에 wpml이라는 폴더를 만드세요. WPML Multilingual & Multicurrency for WooCommerce는 WPML과 함께 작동하므로 이 명명 규칙을 사용합니다.
wpml 안에 templates 폴더를 만드세요.
templates 안에 currency-switchers 폴더를 만드세요.
currency-switchers 안에 만드는 각 사용자 정의 전환기용 하위 폴더를 하나씩 만드세요(예: 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 (문자열): 기본 컨테이너에 적용되는 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 파일 목록입니다. 테마나 플러그인에 jQuery와 같은 JS 라이브러리가 이미 포함되어 있지 않은 한 일반 JavaScript만 사용하세요.

"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/

전체 예: 사용자 정의 통화 전환기

이 예에서는 자체 폴더, 템플릿, 구성 및 선택적 스타일을 사용하여 완전한 통화 전환기를 만드는 방법을 보여줍니다.

테마 또는 자식 테마에 다음 폴더를 만드세요.

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

폴더 안에 config.json 파일을 만드세요.

{
"name": "Custom currency switcher"
}

선택한 통화 및 기타 통화 목록을 표시할 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>

모양을 사용자 정의하려면 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에 정의된 이름이라는 두 가지 요소에 따라 달라집니다. WCML은 다음 형식을 사용하여 슬러그를 자동으로 생성합니다.

사용자 정의 통화 전환기 위치	슬러그 생성 방법
테마 폴더	테마 슬러그 + 정리된 전환기 이름
플러그인 폴더	플러그인 슬러그 + 정리된 전환기 이름
“uploads” 폴더	“uploads-” + 정리된 전환기 이름

예를 들어 다음과 같다고 가정해 보겠습니다.

테마가 Twenty Seventeen입니다.
전환기의 config.json에 다음이 포함되어 있습니다.

{ "name": "My custom switcher" }

그러면 생성된 슬러그는 다음과 같습니다.

twenty-seventeen-my-custom-switcher

위의 코드 조각에서 switcher_style의 값으로 이것을 사용하세요.