it-swarm.com.de

WordPress Customizer Typografie: Wie lade ich nur die einzigartigen Google Fonts?

Ich habe 10 große Dropdown-Auswahl-Kombinationsfelder mit Hunderten von Schriftarten, einschließlich Systemschriftarten und Google-Schriftarten. Alle Kombinationsfelder enthalten dieselben Werte.

Es gibt zwei weitere Kombinationsfelder für jedes der oben genannten Felder, um die Sprach- und Schriftgewichtungssätze zu laden. Diese sollten nur sichtbar/aktiv sein, wenn es sich bei der ausgewählten Schriftart um eine Google-Schriftart handelt.

Ich erhalte alle Schriftarten in den Auswahllisten über eine JSON-Datei per json_decode. Früher habe ich separate Kombinationsfelder für Systemschriftarten und Google-Schriftarten verwendet, und die Aufgabe war etwas einfacher als jetzt.

JSON-Datei ist wie folgt (nur ein Beispiel):

{
   "fonts":[
      "Arial",
      "Helvetica",
      "Georgia",
      "Aclonica",
      "Acme",
      "Actor",
      "Adamina",
      "Advent Pro",
      "Aguafina Script"
   ]
}

Dann benutze ich eine Funktion (nenne sie JSON_fonts), um alle diese Werte aus der JSON-Datei als Array abzurufen.

$wp_customize->add_control( 'font_1',
    array(
        'label' => esc_html( 'Body Font', 'my_theme' ),
        'section' => 'typography',
        'type' => 'select',
        'choices' => JSON_fonts()
    )
);

(Ich denke, ich sollte separate JSON-Dateien für System- und Google-Schriftarten verwenden.).

Was ich tun möchte, ist, den Schriftarten in den Auswahlfeldern Schlüssel zuzuweisen, um ihren Typ zu erkennen (ist es eine Systemschriftart oder Google).

Wenn der ausgewählte Wert eine Google-Schriftart ist, gilt Folgendes:

  1. Sammeln Sie es in einer Variablen, um es für die Warteschlange weiter zu verwenden.
  2. Aktivieren Sie die Auswahlfelder für Sprache und Schriftstärke für das jeweilige Schriftbild.

Das Einreihen in die Warteschlange ist kein Problem, aber das Abrufen der Schriftart und der eindeutigen Werte ist für mich sehr problematisch.

  • Komplexität 1: Ermitteln des Schrifttyps
  • Komplexität 2: Wenn die Schriftarten übereinstimmen, führen Sie die entsprechenden Sprach- und Schriftgewichtungslisten zusammen (eine Eins-zu-Eins-Übereinstimmung ist zu viel Code).
  • Komplexität 3: Bitten Sie wp-ajax, die Schriftart neu zu laden, ohne den Customizer zu aktualisieren.

Jede Hilfe wäre sehr dankbar. Teilen Sie auch Ihre Ideen mit, um die Komplexität zu verringern.

3
Rahul Arora

Diese Frage ist für eine vollständige Beantwortung in einem Q & A-Format viel zu weit gefasst, aber hier ist ungefähr, was ich tun würde:

  1. Sammeln Sie alle Systemschriftarten in einem Array $sys_fonts
  2. Sammeln Sie alle Google-Schriftarten in einem Array $ggl_fonts
  3. Sammeln Sie die vollständigen Informationen zu Google-Schriftarten in einem mehrdimensionalen Array $ggl_fontinfo
  4. $sys_fonts und $ggl_fonts in einem Array zusammenführen $total_fonts
  5. Verwenden Sie $total_fonts für Ihr Dropdown
  6. Ermitteln Sie mithilfe von jquery, welches Element in der Dropdown-Liste ausgewählt ist
  7. Befindet sich das Element in sys_fontsverwenden Sie das normale Verfahren , um das CSS zu ändern, ohne die Seite neu zu laden.
  8. Wenn sich das Element in ggl_fonts befindet, verwenden Sie es als Schlüssel, um Varianten (fett, kursiv usw.) und Teilmengen (Sprachen) in ggl_fontinfo nachzuschlagen. Dann Felder dynamisch hinzufügen zum Formular. Wenn alles festgelegt ist, suchen Sie in ggl_fontinfo nach den benötigten Schriftartdateien und laden Sie sie dynamisch in die Seite.

Beachten Sie, dass die Implementierung je nach Ihren Fähigkeiten mehrere Tage dauern kann (weshalb Sie hier wahrscheinlich keine kostenlose Antwort zum Ausschneiden und Einfügen erhalten).

3
cjbj

Sie können jeder Auswahl key für jede Google-Schriftart ein Präfix hinzufügen, sodass Ihre Auswahl ungefähr so ​​aussieht:

$choices = array(
     '_google_open_sans' => 'Open Sans',
     '_google_titillium' => 'Titillium Web',
     'arial' => 'Arial',
);

Wenn Sie dann Ihre Liste ausgewählter Schriftarten durchgehen, können Sie einfach nach dem Präfix _google_ im Schlüssel suchen. Sie können den Web Font Loader verwenden, um den Customizer ohne Aktualisierung zu aktualisieren. Schließen Sie einfach ein Selective Refresh an.

Ein bisschen zu kompliziert?

Ich habe den obigen Ansatz für ein Thema ausprobiert, das ich für einen Kunden erstellt habe. Ich habe die Google Fonts-API verwendet, um die Liste der Schriftarten abzurufen, zwischenzuspeichern und sie dann mit einer vorab generierten Liste der Systemschriftarten für die Dropdown-Listen der Schriftartenauswahl zu mischen.

Das endgültige System war jedoch etwas unhandlich. Ich habe jedes Dropdown-Menü durch zwei Textfelder ersetzt. Die erste gab an, welche Google Font-Importanweisung ausgeführt werden soll (wie Titillium+Web:400,400i,600,600i), während die zweite die Schriftfamilie angab (wie "Titillium Web", Arial, sans-serif).

Dies war für meinen Kunden tatsächlich einfacher. Anstatt eine lange Dropdown-Liste zu durchsuchen, musste er nur kopieren und einfügen, was er brauchte. Dadurch entfällt auch die Notwendigkeit, die Schriftartenliste zwischenzuspeichern.

0
ricotheque