Die Darstellung einzelner Blöcke in Kategorie- und Produkt-Templates lässt sich über eigene Block-Templates anpassen. Dieser Beitrag zeigt, wo die Templates liegen, wie Du ein eigenes im Child-Theme anlegst und wie Du dafür CSS und JavaScript einbindest.
Wozu eigene Block-Templates
Jeder Block in einem Kategorie- oder Produkt-Template kommt mit einer Auswahl an Block-Templates, die seine Darstellung im Frontend bestimmen. Standardmäßig wird mindestens ein Template ausgeliefert; über ein Dropdown des Blocks wählst Du es aus. Für individuelle Darstellungen – etwa größere Produktbilder oder eine Beschreibung im Akkordeon – legst Du eigene Block-Templates an.
Wo die Block-Templates liegen
Die mitgelieferten Templates liegen im OBS-Core-Plugin unter /oneboxshop-pages/templates, getrennt nach Kategorie- und Produktseite. Jeder Block hat einen eigenen Ordner, darin ein Ordner /default mit dem Standard-Template. Die Block-Ordner:
| Seite (Ordner) | Block-Ordner |
|---|---|
Kategorieseite (/category-page) | breadcrumb, filter, order, pagination, products, remove-filter, search-results-wordpress, title |
Produktseite (/product-page) | breadcrumb, buy, description, features, matching, model-table, picture, title, variations, price |
Ein eigenes Block-Template anlegen
Eigene Templates gehören ins Child-Theme, damit Updates sie nicht überschreiben. OBS-Core sucht im aktiven Theme unter /obs-blocks nach der gleichen Ordnerstruktur wie im Plugin. Ein neues Template für die Produktbeschreibung läge zum Beispiel unter /{aktives-theme}/obs-blocks/product-page/description/eigene-description.
Jedes Template braucht eine index.php, die zur Darstellung im Frontend aufgerufen wird; von ihr aus können weitere Dateien eingebunden werden. Der Anzeigename steht im Header-Kommentar:
/**
* Template Name: Mein eigenes Template
*/Wählst Du einen neuen Ordnernamen, erscheint das Template zusätzlich zur Auswahl. Wählst Du einen vorhandenen Namen (z. B. default), ersetzt Deine Fassung aus dem Child-Theme das Plugin- Template. Am einfachsten kopierst Du ein vorhandenes Plugin-Template ins Child-Theme und passt es an. Empfohlene Struktur: Zusatzdateien in /includes, JavaScript in /js, CSS in /css.
CSS und JavaScript einbinden
Styles und Skripte bindest Du in der index.php über die Filter obs_block_template_style_paths bzw. obs_block_template_script_paths ein. Der Vorteil: Die Dateien stehen auch beim AJAX-Nachladen eines Blocks zur Verfügung – anders als bei wp_enqueue_style/wp_enqueue_script, die nur beim ersten Aufruf greifen.
// Style einbinden
add_filter( 'obs_block_template_style_paths', function ( $styles ) {
$styles[] = get_stylesheet_directory_uri. '/obs-blocks/product-page/description/eigene-description/includes/css/style.css';
return $styles;
} );
// Skripte einbinden
add_filter( 'obs_block_template_script_paths', function ( $scripts ) {
$scripts[] = get_stylesheet_directory_uri. '/obs-blocks/product-page/description/eigene-description/includes/js/scripts.js';
return $scripts;
} );WEITERLESEN