Entwerfen benutzerdefinierter Währungsumschalter mithilfe von Template-Dateien

Viele Websites und Themes benötigen einen Währungsumschalter, der zu ihrem benutzerdefinierten Design passt. Erfahren Sie, wie Sie mithilfe von PHP Ihren eigenen Währungsumschalter erstellen.

Verstehen von PHP-Templates für Währungsumschalter

Hier ist ein einfaches Beispiel für ein PHP-Template für einen Währungsumschalter:

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

Dieses Template:

• Öffnet die HTML-Container-Tags <div> und <ul>, die den Umschalter strukturieren
• Zeigt die ausgewählte Währung an
• Durchläuft die verfügbaren Währungen
• Gibt ein HTML-Listenelement <li> für jede Währung aus (mit Ausnahme der aktuell ausgewählten)
• Gibt klickbare Links zum Wechseln der Währung aus

Lassen Sie uns nun durchgehen, wie Sie solche Templates für Ihre eigenen Währungsumschalter erstellen.

Ein Währungsumschalter-Template zu Ihrem Theme hinzufügen

Sie können Ihrem Theme ein Verzeichnis hinzufügen, um Ihre benutzerdefinierten Währungsumschalter-Templates zu speichern.

• Wenn Sie ein Theme entwickeln, das Sie vertreiben oder verkaufen möchten, fügen Sie die Templates direkt in das Theme ein. Auf diese Weise können alle Benutzer Ihres Themes die von Ihnen erstellten Währungsumschalter verwenden.
• Wenn Sie ein bestehendes Theme anpassen, erstellen Sie die Templates in einem Child-Theme. Dies verhindert, dass Ihre Änderungen überschrieben werden, wenn das Parent-Theme aktualisiert wird.

Verwenden Sie die folgende Ordnerstruktur für Ihre benutzerdefinierten Umschalter-Templates:

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

Um diese Struktur aufzubauen:

1. Erstellen Sie in Ihrem Theme (oder Child-Theme) einen Ordner namens wpml. WPML Multilingual & Multicurrency for WooCommerce verwendet diese Namenskonvention, da es mit WPML zusammenarbeitet.
2. Erstellen Sie im Ordner wpml einen Ordner templates.
3. Erstellen Sie im Ordner templates einen Ordner currency-switchers.
4. Erstellen Sie im Ordner currency-switchers für jeden benutzerdefinierten Umschalter, den Sie erstellen, einen Unterordner – zum Beispiel my-template.

In jedem Ordner für benutzerdefinierte Umschalter (zum Beispiel my-template) benötigen Sie Folgendes:

• template.php — Erforderlich. Dies ist Ihre Haupt-PHP-Template-Datei.
  
• config.json — Erforderlich. Diese Datei stellt WCML Metadaten über Ihren Währungsumschalter zur Verfügung.
  
• Optionale CSS- oder JS-Dateien — Fügen Sie diese hinzu, wenn Ihr Umschalter benutzerdefiniertes Styling oder Interaktivität verwendet.

Entwerfen der Datei template.php

Die Datei template.php definiert das Layout und Verhalten Ihres benutzerdefinierten Währungsumschalters. Sie verwendet Standard-PHP und gibt das HTML aus, das im Frontend gerendert wird.

Innerhalb Ihres Templates können Sie die folgenden Variablen verwenden, die von WPML Multilingual & Multicurrency for WooCommerce bereitgestellt werden:

• $css_classes (String): CSS-Klassen, die auf den Hauptcontainer angewendet werden.
• $currencies (Array): Eine Liste der verfügbaren Währungen.
• $selected_currency (String): Die aktuell ausgewählte Währung.
• $format (String): Ein String, der definiert, wie die Währung angezeigt werden soll.
• WCML_Currency_Switcher_Template::get_formatted_price( $currency, $format ): Eine statische Methode, die verwendet wird, um jedes Währungs-Label zu formatieren und anzuzeigen.

Befolgen Sie beim Schreiben Ihres Templates die Best Practices für die WordPress-UI, um sicherzustellen, dass Ihr Umschalter barrierefrei und konsistent mit anderen Theme-Elementen ist. Stellen Sie außerdem sicher, dass Sie dynamische Ausgaben mit Funktionen wie esc_attr() und wp_kses_post() escapen, um Ihren Code sicher zu halten.

Optionen in der Datei config.json festlegen

Jeder benutzerdefinierte Währungsumschalter muss eine Datei config.json enthalten. Diese Datei liefert WPML Multilingual & Multicurrency for WooCommerce grundlegende Informationen über Ihren Währungsumschalter, wie z. B. seinen Namen und alle benötigten CSS- oder JS-Assets.

Erforderliche Felder

Die Datei muss den Namen des Währungsumschalters definieren:

{
  "name": "My custom switcher"
}

Sie müssen dem Namen kein Präfix hinzufügen. WPML Multilingual & Multicurrency for WooCommerce übernimmt dies automatisch basierend auf dem Theme oder Plugin, zu dem der Umschalter gehört.

Optionale Felder

Zusätzlich zum erforderlichen Namen können Sie zwei optionale Felder einfügen:

• css: Eine Liste von CSS-Dateien, die aus Ihrem Template-Ordner geladen werden sollen. Standardmäßig reiht WPML Multilingual & Multicurrency for WooCommerce alle .css-Dateien im Template-Ordner automatisch ein, aber Sie können dieses Verhalten mit diesem Feld überschreiben.

"css": ["style.css", "responsive.css"]

• js: Eine Liste von JavaScript-Dateien, die aus Ihrem Template-Ordner geladen werden sollen. Verwenden Sie nur reines JavaScript, es sei denn, Ihr Theme oder Plugin enthält bereits eine JS-Bibliothek wie jQuery.

"js": ["script.js", "click-handler.js"]

Hier ist eine vollständige config.json, die alle Felder enthält:

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

Währungsumschalter-Templates zum Uploads-Ordner hinzufügen

Sie können Ihre benutzerdefinierten Währungsumschalter-Templates auch im WordPress-Uploads-Ordner speichern. Dies ist nützlich, wenn Sie Templates vor Theme- oder Plugin-Updates schützen möchten.

Legen Sie Ihre Templates in folgendem Pfad ab:

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

WPML Multilingual & Multicurrency for WooCommerce durchsucht diesen Pfad automatisch nach Währungsumschalter-Templates.

Währungsumschalter-Templates zu einem Plugin hinzufügen

Wenn Sie ein Plugin erstellen und benutzerdefinierte Währungsumschalter einfügen möchten, müssen Sie WPML Multilingual & Multicurrency for WooCommerce mitteilen, wo diese zu finden sind.

Verwenden Sie den Filter wcml_cs_directories_to_scan, um das Template-Verzeichnis zu registrieren. Fügen Sie diesen Code in Ihre Haupt-Plugin-Datei ein:

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 durchsucht dann den Templates-Ordner innerhalb Ihres Plugins. Sie müssen jeden benutzerdefinierten Währungsumschalter in einem eigenen Unterordner platzieren, wie hier:

my-plugin/templates/my-template/

Vollständiges Beispiel: Benutzerdefinierter Währungsumschalter

Dieses Beispiel zeigt, wie Sie einen kompletten Währungsumschalter mit eigenem Ordner, Template, Config und optionalen Stilen erstellen.

1. Erstellen Sie in Ihrem Theme oder Child-Theme den folgenden Ordner:

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

1. Erstellen Sie eine Datei config.json in dem Ordner:

{
"name": "Custom currency switcher"
}

1. Erstellen Sie eine Datei template.php, um die ausgewählte Währung und eine Liste der anderen anzuzeigen:
   

<?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. Wenn Sie das Erscheinungsbild anpassen möchten, fügen Sie eine Datei style.css hinzu:

.your-custom-class li {
  list-style: none;
  float: left;
  margin: 0 3px;
}

Benutzerdefinierte Währungsumschalter in PHP-Templates verwenden

Sobald Sie einen benutzerdefinierten Währungsumschalter erstellt haben, können Sie ihn in Ihren PHP-Templates verwenden, indem Sie die Aktion wcml_currency_switcher aufrufen.

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

Der Wert switcher_style hängt von zwei Dingen ab: dem Ort des Umschalters und dem in seiner config.json definierten Namen. WCML generiert den Slug automatisch mithilfe dieses Formats:

Ort des benutzerdefinierten Währungsumschalters	Wie der Slug generiert wird
Theme-Ordner	Theme-Slug + bereinigter Umschalter-Name
Plugin-Ordner	Plugin-Slug + bereinigter Umschalter-Name
„uploads“-Ordner	„uploads-“ + bereinigter Umschalter-Name

Nehmen wir also an:

• Ihr Theme ist Twenty Seventeen
• Die config.json Ihres Umschalters enthält:

{ "name": "My custom switcher" }

Dann lautet der generierte Slug:

twenty-seventeen-my-custom-switcher

Verwenden Sie dies als Wert für switcher_style im obigen Code-Snippet.