Block Template erstellen
Produktbilder etwas größer anzeigen? Thumbnails des Sliders vertikal laufen lassen? Die Produktbeschreibung in einem Akkordeon darstellen?
Kein Problem mit eigenen Block-Templates.
Jeder Block zur Präsentation der Produkte und Kategorien kommt mit einer Auswahl des Block-Templates. Um die Darstellung im Frontend zu individualisieren, können eigene Templates für jeden Block erstellt werden.
Über ein Dropdown des Blocks kann das Template ausgewählt werden. Mindestens ein Template wird standardmäßig ausgeliefert, neue Templates können manuell über ein Child-Theme hinzugefügt werden.
Block-Templates im OBS-Pages Plugin
Die Block-Templates liegen im OBS-Pages Plugin unter /oneboxshop-pages/templates:
Kategorie-Templates:
unter /oneboxshop-pages/templates/category-page
| Blockname | Ordner |
|---|---|
| Breadcrumbs | /breadcrumb |
| Filter | /filter |
| Sortierung | /order |
| Pagination | /pagination |
| Produkte | /products |
| Filter entfernen | /remove-filter |
| WordPress Suchergebnisse | /search-results-wordpress |
| Titel | /title |
Produkt-Templates:
unter /oneboxshop-pages/templates/product-page
| Blockname | Ordner |
|---|---|
| Breadcrumbs | /breadcrumb |
| Kaufen | /buy |
| Beschreibung | /description |
| Merkmale | /features |
| Passend | /matching |
| Modelltabelle | /model-table |
| Bilder | /picture |
| Titel | /title |
| Variationen | /variations |
| Preis | /price |
Block-Templates selber erstellen
Innerhalb eines dieser Block-Ordner liegen die unterschiedlichen Block-Templates. In jedem Block-Ordner ist ein Ordner /default, der das Default-Template enthält.
So liegt das Default-Template für die Produktbeschreibung in /oneboxshop-pages/templates/product-page/description/default,
das Default-Template für die Filter auf einer Kategorie-Seite in /oneboxshop-pages/templates/category-page/filter/default.
In dem Template muss eine Datei index.php vorhanden sein, die zur Darstellung des Blocks im Frontend aufgerufen wird. Von dieser Datei kann auf andere Dateien verwiesen werden.
Der Name des Templates wird im Header-Kommentar der index.php definiert, mit
/**
* Template Name: Mein eigenes Template
*/Integration eines neues Block-Template
Individuelle Block-Templates können im Theme hinterlegt werden. Das OBS-Pages Plugin sucht im aktiven Theme unter /obs-blocks nach Block-Templates in der gleichen Ordnerstruktur wie im Plugin. Block-Templates mit gleichem Namen im Theme ersetzen das Block-Template aus dem Plugin, Templates mit neuem Namen erscheinen zusätzlich.
Damit die individuellen Block-Templates nicht durch Updates überschrieben werden, sollte ein Child-Theme genutzt werden, in dem die eigenen Block-Templates liegen.
Zum Erstellen eines neuen Block-Templates kann ein vorhandenes aus dem Plugin in das aktive Child-Theme kopiert werden um es anzupassen.
Ein neues Template für die Produktbeschreibung muss dafür in /{aktives Theme}/obs-blocks/product-page/description/eigene-description liegen.
Wenn für ein neues Template der gleiche Ordnername gewählt wird, der schon im Plugin vorhanden ist (z.B. default), wird das Template aus dem Plugin nicht mehr im Editor angezeigt und durch die Implementierung im Child-Theme ersetzt. Um zusätzliche Templates in dem Block zur Auswahl anzuzeigen, muss ein neuer Name für den Ordner genutzt werden. Der Anzeigename des Templates wird im Header der index.php festgelegt (siehe Codebeispiel oben).
Das Design kann dann in der Datei index.php angepasst werden, zusätzliche Dateien können innerhalb des Template-Ordners abgelegt und aus der index.php aufgerufen werden. Zur Übersichtlichkeit und Konsistenz empfehlen wir die Ordner-Struktur aus dem OBS-Plugin: Zusätzliche Dateien werden in einem /includes Ordner gespeichert, JavcScript innerhalb in /js, CSS innerhalb in /css.
Benötigte Styles werden in der index.php mit dem Filter obs_block_template_style_paths, benötigte Skripte mit dem Filter obs_block_template_script_paths eingebunden. Dadurch werden die CSS und JS Dateien im Footer per JavaScript geladen. Vorteil der Einbindung über diese Filter ist, dass auch bei AJAX-Nachladen eines Blocks die Dateien zur Verfügung stehen. Die WordPress-eigenen Funktionen wp_enqueue_style und wp_enqueue_script werden nur beim ersten Aufruf, nicht beim Nachladen von Inhalt ausgeführt.
// Beispiel: Einbindung eines Styles in der index.php eines Blocks im Child-Theme
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;
}
);
// Beispiel: Einbindung zweier Skripte in der index.php eines Blocks im Child-Theme
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';
$scripts[] = get_stylesheet_directory_uri() . '/obs-blocks/product-page/description/eigene-description/includes/js/custom.js';
return $scripts;
}
);