de.json als SVG Bibliothek, Texte, Arrays

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
  • Für Textbausteine nutzen
  • Einblendungen auf bestimmten Seiten gefällig?
  • de_DE.json für Arrays nutzen
  • Auf das Array zugreifen
  • Iteration
  • Mehrdimensionales Array
  • Weiterführende Links

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.json

Code

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

value1

Code

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:

value1value2

Code

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

FlightCMS
2023-12-21
Konstanten
post
0