WordPress Customizer Typography : Comment charger uniquement les Google Fonts uniques ?

J’ai 10 grandes listes déroulantes de sélection de centaines de polices, y compris les polices système et les polices Google. Toutes les listes déroulantes portent les mêmes valeurs.

Il existe deux autres zones de liste déroulante pour chacune des zones ci-dessus, pour charger la langue et les ensembles de poids de police. Celles-ci ne doivent être visibles/actives que si la police sélectionnée est une police Google.

Je reçois toutes les polices dans les listes de sélection via un fichier JSON via json_decode. Auparavant, j’utilisais des zones de liste déroulante distinctes pour les polices système et les polices Google, et la tâche était un peu plus simple que ce que j’ai maintenant.

Le fichier JSON est comme ci-dessous (juste un exemple):

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

Ensuite, j’utilise une fonction (appelez-la JSON_fonts) pour obtenir toutes ces valeurs du fichier JSON sous forme de tableau.

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

(Je pense que je devrais utiliser des fichiers JSON séparés pour les polices système et les polices Google).

Ce que je veux faire, c’est attribuer des clés aux polices dans les cases de sélection pour détecter leur type (est-ce une police système ou Google).

Si la valeur sélectionnée est une police Google, alors :

1. Collectez-le dans une variable pour l’utiliser davantage pour la mise en file d’attente.
2. Activez les cases de sélection de langue et de poids de police pour la police respective.

La mise en file d’attente n’est pas un problème, mais obtenir le type de police et les valeurs uniques est très problématique pour moi.

• Complexité 1 : Obtenir le type de police
• Complexité 2 : si les polices correspondent, fusionnez leurs listes respectives de langue et de poids de police (la correspondance un à un entraînera trop de code).
• Complexité 3 : Demander wp-ajaxde recharger la police sans actualiser le personnalisateur.

Toute aide serait grandement appréciée. Aussi, n’hésitez pas à partager vos idées pour réduire le niveau de complexité.

Solution n°1 trouvée

Ce que vous pouvez faire, c’est ajouter un préfixe à chaque choix keypour chaque police Google, afin que vos choix ressemblent à ceci :

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

Ensuite, lorsque vous parcourez votre liste de polices sélectionnées, vous pouvez simplement vérifier le _google_préfixe dans la clé. Vous pouvez utiliser Web Font Loader pour mettre à jour le Customizer sans rafraîchir. Branchez-vous simplement sur un rafraîchissement sélectif.

Un peu trop compliqué ?

En fait, j’ai essayé l’approche ci-dessus pour un thème que j’ai créé pour un client. J’ai utilisé l’API Google Fonts pour extraire la liste des polices, la mettre en cache, puis la mélanger avec une liste pré-générée de polices système, le tout pour les listes déroulantes du sélecteur de polices.

Cependant, le système final était un peu lourd. J’ai remplacé chaque liste déroulante par deux zones de texte. Le premier spécifiait quelle déclaration d’importation Google Font exécuter (comme Titillium+Web:400,400i,600,600i), tandis que le second spécifiait la famille de polices (comme "Titillium Web", Arial, sans-serif).

C’était en fait plus facile pour mon client. Au lieu de parcourir une longue liste déroulante, il lui suffisait de copier-coller ce dont il avait besoin. Cela a également éliminé le besoin de mettre en cache la liste des polices.

Solution n°2 trouvée

Cette question est bien trop large pour une réponse complète dans un format Q&A, mais voici à peu près ce que je ferais :

1. Collecter toutes les polices système dans un tableau$sys_fonts
2. Rassemblez toutes les polices Google dans un tableau$ggl_fonts
3. Collectez toutes les informations sur les polices Google dans un tableau multidimensionnel$ggl_fontinfo
4. Fusionner $sys_fontset $ggl_fontsdans un tableau$total_fonts
5. Utiliser $total_fontspour votre liste déroulante
6. À l’aide de jquery, détectez quel élément est sélectionné dans la liste déroulante
7. Si l’élément est en cours d’ sys_fontsutilisation, la procédure normale pour modifier le css sans recharger la page.
8. Si l’élément est ggl_fontsutilisé, utilisez-le comme clé pour rechercher des variantes (gras, italique, etc.) et des sous-ensembles (langues) dans ggl_fontinfo. Ensuite, ajoutez dynamiquement des champs au formulaire. Une fois que tout est défini, recherchez les fichiers de police dont vous avez besoin ggl_fontinfoet chargez-les dynamiquement dans la page.

Sachez qu’en fonction de vos compétences, cela peut prendre plusieurs jours à mettre en œuvre (c’est pourquoi il est peu probable que vous obteniez ici gratuitement une réponse prête à copier-coller)