Was du beim Update von Atomion 1.3.4 beachten solltest

Kontinuierlich verbessern wir Atomion und erweitern die Kompatibilität mit verschiedenen Plugins. Auch durch das Update auf die Version 1.3.4 sind neue Funktionen in Atomion hinzugekommen.

In diesem Update haben wir einige strukturelle Anpassungen vorgenommen, sodass es ab sofort noch einfacher ist Atomion mit eigenen Templates zu versehen oder auch einzelne bereits bestehende Elemente von Atomion zu überarbeiten oder zu überschreiben.

Es ist wichtig, dass du das Update vorher auf einer separaten Testumgebung durchführst und testest. Solltest du z.B. bereits in deinem Child-Theme Änderungen an Templates vorgenommen haben, so sind hier sicherlich Anpassungen erforderlich.

Falls du keine Testumgebung hast, empfehlen wir dazu auch den Beitrag “Anleitung: Testumgebung für WooCommerce einrichten”.

Tipp: Informiere dich über die zahlreichen Möglichkeiten der Individualisierung, die unser modernes WooCommerce Theme Atomion zur Verfügung stellt.

Inhaltsverzeichnis:

Anpassung der ID’s

Im Zuge der strukturellen Anpassungen wurden vor allem im Header die ID’s durch Klassen ersetzt. Solltest du also eigenes CSS verwenden, welches eine der folgenden ID’s enthält, so muss dieses angepasst und erneut geprüft werden, ob die Darstellung weiterhin noch der Vorstellung entspricht.

Folgende ID’s wurden zu Klassen geändert:

Die ID “#primary-menu” bleibt als solche erhalten, in der mobilen Version erhält die ID einen Zusatz, sodass dort folgende Bezeichnung entsteht: “#primary-menu-mobile”

Angepasste Templates

Aufgrund der strukturellen Anpassungen wurden folgende Header-Templates angepasst:

• element-account.php
• element-cart.php
• element-logo.php
• element-menu.php
• element-nav-mobile.php
• element-search.php
• element-social.php
• element-wishlist.php

Entfernte Templates

Folgende Header-Templates wurden entfernt und deren Inhalt u.a. in die angepassten Templates integriert:

• element-logo-center-navigation.php
• element-logo-right-navigation.php
• element-logo-top-navigation.php
• element-split-navigation.php
• element-navigation.php

Bei folgendem Template fand eine Umbenennung statt:

Anpassung einzelner Header-Elemente

In unserem neuen Update vereinfachen wir die Anpassung bereits bestehender Header-Elemente und ermöglichen nun auch das Hinzufügen eigener Elemente durch das Nutzen von Hooks.

Im /template-parts/header/header-main.php Template gibt es eine konkrete Auflistung bei jedem Hook, welche Funktion, bei welchem Header-Stil, in welcher Reihenfolge geladen wird.

Das “Hooken” findet in der/inc/navigation.php statt, dort befinden sich auch neue Funktionen, welche dann die jeweiligen Templates von den Header-Elementen laden.

Ein Beispiel für die functions.php: Position der Social-Media Icons und der Wunschliste tauschen

add_action( 'init', function() {
// Hier entfernen wir das aktuelle Wunschlisten-Header-Element
remove_action( 'atomion_main_header_nav', 'atomion_header_element_wishlist', 20 );
// Nun klinken wir das Wunschlisten-Header-Element zu einem späteren Zeitpunkt mit der Prio 28 ( nach dem Social-Media-Element - Prio 25) ein.
add_action( 'atomion_main_header_nav', 'atomion_header_element_wishlist', 28 );
});

Nach dem gleichen Prinzip können auch eigene Header-Elemente hinzugefügt werden. Zum Beispiel ein Sprach-Switcher für WPML:

add_action('atomion_main_header_nav', 'atomion_wpml_switcher_header_element', 40 );

function atomion_wpml_switcher_header_element() {
echo '
<div class="wpml-ls-item header-element">' . do_shortcode('[wpml_language_selector_widget]' . '</div>
' );
}

In diesem konkreten Beispiel sollte noch ein wenig CSS im Customizer unter “Zusätzliches CSS” hinzugefügt werden:

.wpml-ls-item.header-element {
display: flex;
align-items: center;
max-width: 95px;
border-left: 1px solid #ddd;
padding: 15px;
}

Sollte das eigene Element umfangreicher werden, so kann auch eine extra Datei erstellt und entsprechend eingebunden werden.

Verwendung eines eigenen Header-Stils

Reichen dir unsere vier Header-Stile nicht aus? Nun kannst du auch einfach ein komplett eigenes Header-Template erstellen und laden. Dort kannst du auf Teile von Atomion zurückgreifen oder auch ein komplett eigenes entwerfen.

Mit folgendem Code-Schnipsel registriert du in der functions.php deines Child-Themes einen weiteren Header-Stil (“custom-style”) im Customizer:

/** Add new header style 'custom-style' to the customizer option */
add_filter( 'atomion_customizer_header_styles', function( $styles ) {
$styles['custom-style'] = 'http://via.placeholder.com/1225x74';
return $styles;
});

Danach steht dir der neue Stil im Customizer unter Header -> Main-Header zur Verfügung.

Um nun ein eigenes Header-Template zu laden muss noch folgender Code-Schnipsel verwendet werden:

/* Load custom header template if custom style is active */
add_filter('atomion_main_header_template', function( $template ) {

if ( 'custom-style' == get_theme_mod( 'hm_style_setting', 'default' ) ) {
// get_template_part() is used
$template = 'path/to/custom-style-template';
}

return $template;
});

Dort kannst du nun den Pfad zum eigenen Header-Template angeben, welches geladen werden soll, wenn unser “custom-style” Header-Stil im Customizer aktiv ist.

Du kannst gerne als Vorlage unser /template-parts/header/header-main.php Template nutzen oder du startest komplett von 0 – wie du magst.

Das soll es soweit schon gewesen sein. Weitere Details zum Update findest du im Changelog.

Du hast Fragen zu diesem Beitrag? Stelle diese gerne in den Kommentaren. Du willst über zukünftige Tipps zu WooCommerce informiert werden? Dann folge uns auf Twitter, Facebook oder über unseren Newsletter.