web-dev-qa-db-fra.com

Typographie WordPress Customizer: Comment charger uniquement les polices uniques de Google?

J'ai 10 grandes listes déroulantes de liste déroulante 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, permettant de charger la langue et les ensembles d'épaisseurs de police. Celles-ci ne devraient être visibles/actives que si la police sélectionnée est une police Google.

Toutes les polices figurant dans les listes de sélection sont enregistrées dans un fichier JSON via json_decode. Auparavant, j'utilisais des zones de liste déroulante distinctes pour les polices système et Google, et la tâche était un peu plus simple que celle 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 distincts pour les polices système et les polices Google).

Ce que je veux faire est d’affecter des clés aux polices dans les zones de sélection afin de détecter leur type (police système ou Google).

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

  1. Recueillez-le dans une variable pour l'utiliser plus tard pour la mise en file d'attente.
  2. Activez les cases de sélection de langue et d'épaisseur de police pour la police de caractères respective.

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

  • Complexité 1: Obtenir le type de police
  • Complexité 2: Si les polices correspondent, fusionnez leurs listes de langues et de pondérations de polices respectives (une correspondance un pour un sera une valeur de code excessive).
  • Complexité 3: Demander à wp-ajax de recharger la police sans actualiser le personnaliseur.

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

theme-developmenttheme-customizertheme-optionsjson
3
Rahul Arora

Cette question est beaucoup trop large pour une réponse complète dans un format de questions-réponses, mais voici à peu près ce que je ferais:

  1. Collecte toutes les polices système dans un tableau $sys_fonts
  2. Collecter toutes les polices Google dans un tableau $ggl_fonts
  3. Collectez les informations complètes sur les polices Google dans un tableau multidimensionnel $ggl_fontinfo
  4. Fusionner $sys_fonts et $ggl_fonts dans un tableau $total_fonts
  5. Utilisez $total_fonts pour votre liste déroulante
  6. En utilisant jQuery, détecter quel élément est sélectionné dans la liste déroulante
  7. Si l'élément est en sys_fontsutilisez la procédure normale pour modifier le fichier css sans recharger la page.
  8. Si l'élément est en ggl_fonts, utilisez-le comme clé pour rechercher des variantes (gras, italique, etc.) et des sous-ensembles (langues) dans ggl_fontinfo. Ensuite, ajouter dynamiquement des champs au formulaire. Une fois que tout est défini, recherchez les fichiers de police dont vous avez besoin dans ggl_fontinfo et chargez-les dynamiquement dans la page.

Attention, cela peut prendre plusieurs jours en fonction de vos compétences (c'est pourquoi il est peu probable que vous obteniez gratuitement ici une réponse prête à la copie et au collage).

3
cjbj

Ce que vous pouvez faire est d’ajouter un préfixe à chaque choix key pour 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 la liste des polices sélectionnées, vous pouvez simplement rechercher le préfixe _google_ dans la clé. Vous pouvez utiliser Web Font Loader pour mettre à jour le personnaliseur sans actualiser. Il suffit de brancher un rafraîchissement sélectif .

Un peu trop compliqué?

J'ai effectivement 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 menus déroulants 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 instruction 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 de polices.

0
ricotheque