Nutzen Sie die de_DE.json Sprachdatei als Ablageort für SVG-Icons im Template. Der Beitrag zeigt Ihnen, wie Sie diese Icons aus dem Template laden und anzeigen
Inhalt
Als SVG-Icon Bibliothek nutzen
Einen praktischeren Einsatz für die Verwendung der Language-Datei de_DE.json ist die Nutzung als Icon-Bibliothek. Legen Sie beispielsweise eine Liste von SVG-Icons dort ab die Sie in Ihren Templates zentral nutzen möchten.
001 {
002 "theme-data":
003 {
004 "name": "Theme Name",
005 "description": "Theme Beschreibung"
006 },
007 "icon_tags":"<svg... ...</svg>",
008 "icon_user":"<svg... ...</svg>",
009 "icon_date":"<svg... ...</svg>",
010 "icon_comments":"<svg... ...</svg>",
011 "icon_share":"<svg... ...</svg>"
012 }Code
Binden Sie das SVG-Icon in Ihrem Template mit dem folgenden Aufruf ein:
...
<?php $L->get('icon_tags'); ?>
...Code
Einenen Großteil der SVG-Icons können Sie aus dem Bootstrap-CSS nutzen und vor dort die gewünschten SVG-Daten zusammentragen und in der de_DE.json sammeln bzw. einbinden.
Hinweis: Der große Vorteil dieser Variante der Icon-Sammlung liegt darin, das Sie diese nicht als SVG, JPG oder PNG separat im Image-Verzeichnis IMG des Themes liegen haben müssen. Greifen Sie einfach über den Namen auf das Icon zu - ganz einfach. Zudem das $L-Objekt bereits geladen ist, muss es nicht mit global referenziert werden und Sie können die Methode get() sofort nutzen.
Für Textbausteine nutzen
Jedem Theme liegt im gesonderten Ordner languages eine Sprachdatei im JSON-Format vor. Für die deutsche Installation des CMS Bludit ist es die Datei de_DE.json. Die Sprachdatei wird beim Start des CMS geladen und steht im $L-Objekt für den Zugriff bereit.
Möchten Sie beispielsweise einen festen Hinweis auf eine Versionsnummer oder Copyright in Ihrem Template einbinden, dann können Sie das in die Datei:
../bl-theme/languages/de_DE.jsonCode
ganz einfach wie im folgenden Beispiel eintragen:
001 {
002 "theme-data":
003 {
004 "name": "ThemeName",
005 "description": "Das Beispiel-Theme ..."
006 },
007 "about-theme":"(c) Oliver Lohse - Kontakt@Oliver-Lohse.de"
008 }Code
Die Zeilen 001...006 finden Sie bereits in der Sprachdatei des betroffenen Templates vor. Ergänzen Sie das Komma in Zeile 006 und tragen einen Key-Value Paar in Zeile 007 ein und speichern das ganze ab.
Möchten Sie den Inhalt in einem Template speichern, dann können Sie den Aufruf wie folgt umsetzen:
...
046 <?php
047 global $L;
048 echo $L->get('about-theme');
049 ?>
...Code
Je nachdem wo Sie die Einbindung in Ihrem Theme vornehmen, erscheint dann die hinterlegte CR-Information im Laufe der Seite für den Leser.
Einblendungen auf bestimmten Seiten gefällig?
Möchten Sie hingegen, das solche Einblendungen auf bestimmten individuellen Seiten Ihres Blogs erfolgen, dann tragen Sie doch den Beitrags-Slug (das ist der SEO-URL-Name) als Key wie folgt ein:
...
006 },
007 "global-climate-problems":"Sichern Sie sich einen Platz auf der Arche"
008 }
...Code
Ruft Ihr Template den Beitrag global-climate-problems auf, liest das folgende Codeschnipsel den dazu passende Text aus:
...
048 echo $L->get($page->slug());
...Code
Allerdings müssen Sie zuvor durch eine geeignete Abfrage sicherstellen, das dieser Beitrags-Slug auch einen Eintrag in der de_DE.json Datei hat, denn sonst erhalten Sie immer die Anzeige des Slug in Ihrem Template - und das wollen Sie ja nicht. Etwa so:
046 <?php
047 global $L;
048 if($L->get($page->slug()) != $page->slug()) {;
049 echo $L->get($page->slug());
050 }
051 ?>Code
Hinweis: die Abfrage if($L->get($page->slug())) würde nicht zum Ziel führen, da der get() im Falle des Nichtexistierens eines Values mindestens den Slug wieder an den Aufrufer zurückgibt, er liefert folglich immer eine gültige Rückgabe (true). Daher muss der IF abfragen, ob es nicht der Slug ist der zurück gegeben wird.
Praxistipp: Sie können mit dieser Technik inhaltsbezogene Banner, Affiliate- oder CTA-Links für jeden Beitrag individuell anzeigen und einblenden - das ist toll (das funktioniert auch für Kategorien). Allerdings erhalten Sie bei großen Webseiten schnell ein Problem: Ändern Sie nachträglich einen Beitrags-Slug, dann müssen Sie diese Änderung auch in der de_DE.json vornehmen. Sollten Sie dies vergessen, erhalten Sie keine Einblendung in dem betreffenden Beitrag mehr - und irgendwann verlieren Sie den Überblick. Der Pflegeaufwand wird früher oder später sehr groß werden und Sie sollten dann doch eher zu einem Plugin greifen das diese Arbeit erledigt. Zudem ist der Zugriff für den Autor über das Backend nicht möglich, die Änderungen müssen vom Admin mit FTP-Zugang vorgenommen werden - es sei denn Sie sind selbst der Admin.
de_DE.json für Arrays nutzen
Bislang haben Sie die Angabe von einzelnen Key-Value-Paaren in der Language-Datei bl-themes/theme/de_DE.json kennengelernt. Natürlich ist es auch dort möglich Arrays abzulegen und aus dem Template auf Array-Variablen in der Json-Datei zuzugreifen.
001 {
002 "theme-data":
003 {
004 "name": "Lowpass",
005 "description": "Ein freundliches Layout."
006 },
007 "cta":
008 {
009 "key1":"value1",
010 "key2":"value2"
011 }
012 }Code
Legen Sie beispielsweise das Array cta ab Zeile 007 mit einigen Key-Value Paaren als Demonstration an.
Auf das Array zugreifen
Im Template können Sie auf einzelne Keys des Arrays cta wie im folgenden Coding zugreifen, um die Values auszulesen:
<?php echo $L->get('cta')['key1']; ?>Code
Das Template zeigt in Folge dessen
value1Code
an.
Iteration
Genau so gut können Sie durch die Schlüssel mit einer PHP-Schleife iterieren, denn cta ist ein iterierbares Objekt wie es in der PHP-Sprachdefinition für foreach heißt.
<?php
foreach($L->get('cta') as $key) {
echo $key;
}
?>Code
Auch hier zeigt das Template beim Aufruf durch die Schleife:
value1value2Code
den vollständigen Inhalt von cta an, also value1 und value2.
Mehrdimensionales Array
Möchten Sie beispielsweise Produkt-Gruppen bilden, dann empfiehlt es sich ein mehrdimensionales Array anzulegen, beispielsweise ein Array für CTA und Affiliate-Links. Im Beispiel unten nimmt das cta-Array zwei Buchempfehlungen WordPress 5 und WordPress 5 Das Praxisbuch auf. Sie können diese Produktempfehlungen ganz nach belieben erweitern oder anpassen.
001 {
002 "theme-data":
003 {
004 "name": "Lowpass",
005 "description": "Ein freundliches Layout."
006 },
007 "cta":
008 {
009 "wordpress-5":
010 {
011 "titel":"Wordpress 5",
012 "beschreibung":"Erstellen Sie einen Blog oder eine Website..",
013 "image":"https://www.amazon.de/.../wp5.png",
014 "link":"https://www.amazon.de/..."
015 },
016 "wordpress-5-praxisbuch":
017 {
018 "titel":"WordPress 5 Das Praxisbuch",
019 "beschreibung":"WordPress ist weltweit das beliebteste CMS-Tool...",
020 "image":"https://www.amazon.de/.../wp5-praxisbuch.png",
021 "link":"https://www.amazon.de/..."
022 }
023 }
024 }Code
Die beiden Buchempfehlungen sind gleichartig strukturiert, es gibt einen titel, eine beschreibung, ein bild und einen link zum Produkt selbst. Wenn Sie noch weitere Attribute benötigen, dann tragen Sie diese im gleichen Schema ein.
049 foreach($L->get('cta') as $key) {
050 echo '<img src="'.$key['image'].'">';
051 echo '<h1>'.$key['titel'].'</h1>';
052 echo '<p>'.$key['beschreibung'].'</p>';
053 echo '<a href="'.$key['link'].'">kaufen...</a>';
054 }Code
Möchten Sie im Template die Inhalte geeignet als Affiliate-Link anzeigen, dann ist das Coding oben ein guter Start in Ihr individuelles Design.
Zeile 49 holt die einzelnen Buchempfehlungen (Zeile 11 und 16) aus der cta-Tabelle und in den Zeilen 50, 51, 52 und 53 werden dann die einzelnen Attribute des Produktes ausgegeben.
Vorteilhaft bei dieser Array-Struktur ist, das es ein übergeordnetes Array cta gibt, welches Sie automatisch iterieren können ohne dabei die Anzahl der Produkte zuvor kennen zu müssen. Die Anzahl der Produktlinks kann dynamisch ermittelt werden und die Liste an Buchempfehlungen kann beliebig lang sein.
Mit Hilfe dieses Mechanismus können Sie leicht beliebig viele Banner oder Affiliate-Links in der Json-Datei anlegen, um diese dann im Template anzeigen zu lassen. Vorteilhaft hierbei ist, das Sie keinerlei Limitationen unterworfen sind, legen Sie so viele Einträge an wie Sie wollen.
Weiterführende Links
- Oracle: Was ist json?
- Wikipedia: JavaScript Object Notation
- json.org: Einführung in json
- php.net: JSON Funktionen
21.12.2023 Kontakt@Oliver-Lohse.de JSON YAML XML
