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

Ich habe 10 große Drop-Down-Auswahl-Kombinationsfelder von Hunderten von fonts, einschließlich System-Fonts und Google Fonts. Alle Kombinationsfelder haben die gleichen Werte.

Es gibt zwei weitere Kombinationsfelder für jedes der obigen Kästchen zum Laden der Sprache und der Zeichensatzsätze. Diese sollten nur sichtbar / aktiv sein, wenn die ausgewählte Schriftart eine Google-Schriftart ist.

Ich bekomme alle Font-Faces in den json_decode durch eine JSON-Datei über json_decode . Zuvor verwendete ich separate Kombinationsfelder für System- und Google-fonts, und die Aufgabe war etwas einfacher als das, was ich jetzt habe.

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

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

Dann benutze ich eine function (nennen Sie es JSON_fonts), um alle diese Werte aus der JSON-Datei als ein Array zu erhalten.

 $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 Systemfonts und Google Fonts verwenden).

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

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

  1. Sammeln Sie es in einer Variablen, um es weiter für das Einreihen zu verwenden.
  2. Aktivieren Sie die Auswahlfelder für Sprache und Schriftgröße für die jeweilige Schriftart.

En-Queuing ist kein Problem, aber die Art der Schriftart und die eindeutigen Werte zu bekommen ist sehr problematisch für mich.

  • Komplexität 1: Die Schriftart erhalten
  • Kompliziertheit 2: Wenn die fonts übereinstimmen, füge die entsprechenden Sprachen und fonts-Listen zusammen (bei Eins-zu-eins-Vergleichen wird zu viel Code verwendet).
  • Komplexität 3: wp-ajax , um die Schriftart neu zu laden, ohne den Customizer zu aktualisieren.

Jede Hilfe würde sehr geschätzt werden. Fühlen Sie sich frei, Ihre Ideen zu teilen, um die Komplexitätsebene herunter zu bringen.

Solutions Collecting From Web of "WordPress Customizer Typografie: Wie lade ich nur die einzigartigen Google Fonts?"

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

  1. Sammeln Sie alle Systemschriftarten in einem Array $sys_fonts
  2. Sammeln Sie alle Google-Fonts in einem Array $ggl_fonts
  3. Sammeln Sie die vollständigen Informationen über Google Fonts in einem mehrdimensionalen Array $ggl_fontinfo
  4. Merge $sys_fonts und $ggl_fonts in einem Array $total_fonts
  5. Verwenden Sie $total_fonts für Ihr Dropdown-Menü
  6. Mit jquery erkennen Sie, welches Element aus dem Dropdown ausgewählt ist
  7. Wenn sich das Element in sys_fonts verwenden Sie die normale Prozedur , um die sys_fonts zu ändern, ohne die Seite neu zu sys_fonts .
  8. Wenn das Element in ggl_fonts verwenden Sie es als Schlüssel, um in ggl_fonts nach Varianten (fett, kursiv usw.) und Untergruppen (Sprachen) zu ggl_fontinfo . Fügen Sie dann dem Formular dynamisch Felder hinzu . Sobald alles eingestellt ist, suchen Sie in ggl_fontinfo nach den benötigten Font-Dateien und laden Sie diese dynamisch in die Seite.

Beachten Sie, dass dies, abhängig von Ihren Fähigkeiten, einige Tage dauern kann (daher ist es unwahrscheinlich, dass Sie hier eine kostenlose Antwort erhalten)

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

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

Wenn Sie dann Ihre Liste der ausgewählten fonts durchgehen, können Sie einfach nach dem Präfix _google_ im Schlüssel _google_ . Sie können den Web Font Loader verwenden , um den Customizer ohne Aktualisierung zu aktualisieren. Einfach an eine selektive Aktualisierung anschließen .

Ein bisschen zu kompliziert?

Ich habe den obigen Ansatz für ein Thema, das ich für einen Kunden gemacht habe, tatsächlich versucht. Ich habe die Google Fonts-API verwendet, um die Liste der fonts aufzurufen, zwischenzuspeichern und dann mit einer vorgenerierten Liste von Systemschriftarten zu vermischen, die alle für die Dropdown-Listen zur Auswahl der fonts verwendet werden.

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

Das war eigentlich einfacher für meinen Kunden. Anstatt durch ein loooong Dropdown zu scannen, musste er nur kopieren, was er brauchte. Dies beseitigt auch die Notwendigkeit, die fontsliste zwischenzuspeichern.