Datenverarbeitung leicht gemacht: Bootstrap Icons als PHP Array aufbereiten

Knowledge-Base • Development • Datenverarbeitung leicht gemacht: Bootstrap Icons als PHP Array aufbereiten
Lesezeit ca: 9 min

Stell dir vor, du arbeitest an einer ACF-Plugin Erweiterung und möchtest eine riesige Auswahl an Bootstrap Icons in diese integrieren. Die Icons liegen dir als umfangreiche JSON-Datei vor, aber du brauchst sie in einem handlichen PHP Array, um sie einfach in deinen Code einzubinden.

Dieser Beitrag zeigt, wie du eine umfangreiche JSON-Datei mit über 2000 Bootstrap Icons mithilfe eines einfachen Bash-Skripts und des Tools jq in ein PHP-Array umwandeln kannst. Ideal für Web-Entwickler, um Icon-Sammlungen effizient in Themes und Plugins zu integrieren und als Dropdown oder Select-Optionen zu verwenden. Die Anleitung umfasst das Erstellen und Ausführen des Skripts zur automatischen Aufbereitung der Icon-Daten für eine einfache Verwendung in PHP-Code.

Die Herausforderung: Eine riesige JSON-Liste

Bootstrap Icons sind eine fantastische Ressource, die eine breite Palette an nützlichen Symbolen bietet. Oftmals werden diese Icons in einer JSON-Datei bereitgestellt, die alle Icon-Namen und deren zugehörigen Daten enthält. Für die direkte Verwendung in PHP ist dieses Format jedoch nicht ideal. Wir benötigen ein PHP Array, bei dem der Icon-Name der Schlüssel und beispielsweise ein lesbarer Label der Wert ist.

Die Lösung: Ein kleines Shell-Skript zur Datenverarbeitung

Glücklicherweise gibt es mächtige Kommandozeilen-Tools, die uns bei dieser Aufgabe helfen können. In diesem Fall nutzen wir jq, einen leichtgewichtigen und flexiblen JSON-Prozessor.

Wichtige Hinweise:

  • Stelle sicher, dass das Tool jq auf deinem System installiert ist. Falls nicht, musst du es vor der Ausführung des Skripts installieren (z.B. unter Debian/Ubuntu mit sudo apt-get install jq oder unter macOS mit brew install jq).
  • Überprüfe den Pfad zur icons.json-Datei im Skript (json_file=»icons.json»). Wenn deine Datei einen anderen Namen hat oder sich nicht im selben Ordner befindet, musst du den Pfad entsprechend anpassen.

Vorbereitung

  1. Bootstrap Icons JSON-Datei herunterladen:
    Stelle sicher, dass du die offizielle JSON-Datei der Bootstrap Icons heruntergeladen hast. Platziere diese Datei anschließend in einem neu erstellten Ordner. Wir werden im Folgenden davon ausgehen, dass diese Datei den Namen icons.json trägt.
  2. Bash-Skript erstellen:
    Öffne einen Texteditor deiner Wahl, füge den Code ein und speichere die Datei unter dem Namen transform.sh im selben Ordner, in dem sich auch die icons.json-Datei befindet.
  3. Skript ausführbar machen:
    Öffne deine Kommandozeile oder dein Terminal in dem Ordner, in dem du die Dateien icons.json und transform.sh gespeichert hast.
  4. Gib den folgenden Befehl ein und drücke Enter, um das Skript ausführbar zu machen
    chmod +x transform.sh

Bash script transform.sh:

#!/bin/bash

# Input JSON file
json_file="icons.json"

# Use jq to iterate through the JSON and transform the output
jq -r "to_entries | map(\"'bi-\(.key)' => esc_html__('\(.key) Icon', 'acf'),\") | .[]" "$json_file"

Schauen wir uns das Skript genauer an:

  1. #!/bin/bash: Dies ist der Shebang, der angibt, dass das Skript mit Bash ausgeführt werden soll.
  2. json_file=»icons.json»: Hier definieren wir eine Variable $json_file, die den Pfad zu unserer Bootstrap Icons JSON-Datei enthält. Stelle sicher, dass du diesen Pfad entsprechend deiner Dateistruktur anpasst.
  3. jq -r «…» «$json_file»: Dies ist der Kern des Skripts. Wir rufen jq auf und übergeben ihm einen Filterausdruck in Anführungszeichen sowie den Namen der Eingabedatei.
    • to_entries: Dieser jq-Befehl wandelt das JSON-Objekt in ein Array von Key-Value-Paaren um. Jedes Element im Array ist ein Objekt mit den Schlüsseln «key» und «value».
    • map(\»‹bi-\(.key)› => esc_html__(‹\(.key) Icon›, ‹acf›),\»): Die map()-Funktion iteriert über jedes Key-Value-Paar im Array und wendet den angegebenen Ausdruck darauf an.
      • ‹bi-\(.key)›: Wir nehmen den ursprünglichen Key (den Icon-Namen) und setzen das Präfix ‹bi-‹ davor, was der übliche Klassen-Präfix für Bootstrap Icons ist. Dieser wird unser PHP Array-Schlüssel.
      • =>: Dies ist die PHP-Syntax für die Zuweisung in einem Array.
      • esc_html__(‹\(.key) Icon›, ‹acf›): Hier erstellen wir den Wert für unser PHP Array. Wir verwenden esc_html__(), eine WordPress-Funktion zur sicheren Ausgabe von lokalisierten Strings. \(.key) referenziert wiederum den Icon-Namen, an den wir den Text » Icon» anhängen. ‹acf› ist der Textdomain-Parameter für die Lokalisierung (diesen kannst du nach Bedarf anpassen).
      • ,: Wir fügen ein Komma hinzu, um die Array-Elemente in PHP zu trennen.
    • | .[]: Schließlich «entpacken» wir das Array von Strings, das map() erzeugt hat, sodass wir eine Liste von einzelnen PHP Array-Definitionen erhalten.

Ausführung des Skripts:

  1. Konsole öffnen: Stelle sicher, dass deine Kommandozeile oder dein Terminal weiterhin in dem Ordner geöffnet ist, der die beiden Dateien enthält.
  2. Skript ausführen: Gib den folgenden Befehl ein und drücke Enter, um das Transformationsskript zu starten: ./transform.sh

Nachdem du diesen Befehl ausgeführt hast, wird das Skript die icons.json-Datei verarbeiten und eine Liste von PHP-Array-Definitionen in deiner Konsole ausgeben. Diese Ausgabe kannst du dann kopieren und in deine PHP-Datei einfügen, wie im vorherigen Abschnitt beschrieben.

Das Ergebnis: Ein PHP Array für deine Bootstrap Icons

Die Ausgabe des Skripts wird eine lange Liste von Zeilen sein, die jeweils ein Element deines zukünftigen PHP Arrays darstellen:

```php
'bi-alarm' => esc_html__('alarm Icon', 'acf'),
'bi-alarm-fill' => esc_html__('alarm-fill Icon', 'acf'),
'bi-align-bottom' => esc_html__('align-bottom Icon', 'acf'),
'bi-align-center' => esc_html__('align-center Icon', 'acf'),
'bi-align-end' => esc_html__('align-end Icon', 'acf'),
// ... über 2000 weitere Einträge ...
'bi-zoom-out' => esc_html__('zoom-out Icon', 'acf'),
```

So verwendest du das PHP Array mit den Bootstrap Icons in deinem Code:

Du kannst die Ausgabe des Skripts einfach in eine PHP-Datei kopieren und in ein Array einfügen:

<?php

$bootstrap_icons = [
'bi-alarm' => esc_html__('alarm Icon', 'acf'),
'bi-alarm-fill' => esc_html__('alarm-fill Icon', 'acf'),
'bi-align-bottom' => esc_html__('align-bottom Icon', 'acf'),
'bi-align-center' => esc_html__('align-center Icon', 'acf'),
'bi-align-end' => esc_html__('align-end Icon', 'acf'),
// ... die gesamte Ausgabe des Skripts ...
'bi-zoom-out' => esc_html__('zoom-out Icon', 'acf'),
];

// Nun kannst du das Array in deinem Theme oder Plugin verwenden
foreach ($bootstrap_icons as $icon_class => $icon_label) {
echo '<i class="' . esc_attr($icon_class) . '"></i> ' . esc_html($icon_label) . '<br>';
}

?>

Fazit

Dieses einfache Shell-Skript in Kombination mit jq demonstriert auf elegante Weise, wie du große Datenmengen in einem spezifischen Format verarbeiten und für deine PHP-Anwendungen aufbereiten kannst. Anstatt mühsam über 2000 Einträge manuell zu erstellen, erledigt das Skript die Arbeit in Sekundenschnelle. Das spart nicht nur Zeit, sondern reduziert auch das Risiko von Tippfehlern.

Probiere es aus und integriere die beeindruckende Vielfalt der Bootstrap Icons auf einfache Weise in deine WordPress Projekte! Die Bootstrap json-File findest du hier auf github.

Expand Your Knowledge