עיצוב בוררי מטבעות מותאמים אישית באמצעות קובצי תבנית

אתרים וערכות עיצוב רבים זקוקים לבורר מטבעות שיתאים לעיצוב המותאם אישית שלהם. למד כיצד לבנות בורר מטבעות משלך באמצעות 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> עבור כל מטבע (למעט המטבע שנבחר כעת)
• מוציא קישורים לחיצים להחלפת המטבע

כעת, נעבור על האופן שבו תוכל ליצור קובצי תבנית כאלה עבור בוררי המטבעות שלך.

הוספת קובץ תבנית של בורר מטבעות לערכת העיצוב שלך

באפשרותך להוסיף תיקייה לערכת העיצוב שלך כדי לאחסן את קובצי התבנית של בורר המטבעות המותאם אישית שלך.

• אם אתה מפתח ערכת עיצוב שאתה מתכנן להפיץ או למכור, כלול את קובצי התבנית ישירות בערכת העיצוב. בדרך זו, כל המשתמשים בערכת העיצוב שלך יוכלו להשתמש בבוררי המטבעות שתיצור.
• אם אתה מתאים אישית ערכת עיצוב קיימת, צור את קובצי התבנית בתוך ערכת עיצוב בת. הדבר מונע מהשינויים שלך להידרס כאשר ערכת העיצוב האב מתעדכנת.

השתמש במבנה התיקיות הבא עבור קובצי התבנית של הבורר המותאם אישית שלך:

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, צור תת־תיקייה אחת עבור כל בורר מותאם אישית שאתה בונה — לדוגמה, my-template.

בתוך כל תיקיית בורר מותאם אישית (לדוגמה, my-template), תצטרך את הקבצים הבאים:

• template.php — נדרש. זהו קובץ התבנית הראשי שלך ב־PHP.
  
• config.json — נדרש. קובץ זה מספק ל־WCML מטא־נתונים אודות בורר המטבעות שלך.
  
• קובצי CSS או JS אופציונליים כלשהם — כלול אותם אם הבורר שלך משתמש בעיצוב או אינטראקטיביות מותאמים אישית.

עיצוב הקובץ 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 כדי להבטיח שהבורר שלך יהיה נגיש ועקבי עם אלמנטים אחרים בערכת העיצוב. כמו כן, הקפד להשתמש בפונקציות כמו 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. בערכת העיצוב או בערכת העיצוב הבת שלך, צור את התיקייה הבאה:

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 בקטע הקוד שלמעלה.