Comment nous avons tagué Google Fonts et créé des goofont.com

Goofontis un projet parallèle signé par une femme de développeur et un concepteur-mari, tous deux de grands fans de typographie. Nous avons tagginggoogle Fonttsand a construit un site Web qui facilite la recherche et la recherche de la bonne police.

Goofontussus WordPress dans le backend etnxtjs (framework avue.js) sur le frontend. J'adorerais vous raconter l'histoire derrière Goofont.com et partager quelques détails techniques concernant les technologies que nous avons choisies et comment nous les avons adaptées et utilisées pour ce projet.

Pourquoi nous avons construit des goofonts

Au moment de la rédaction de cet article, il y a 977 polices de caractères offertes par Google Fonts. Vous pouvez vérifier le numéro exact à tout moment en utilisant l'API du développeur des polices de google. Vous pouvez récupérer la liste dynamique de toutes les polices, y compris une liste des styles et scripts disponibles pour chaque famille.

Le site Web de Google Fonts fournit une belle interface où vous pouvez prévisualiser toutes les polices, en les triant par tendance, popularité, date ou nom.

Mais qu'en est-il de la fonctionnalité de recherche?

Vous pouvez inclure et exclure les polices par cinq catégories: Serif, Sans-Serif, affichage, écriture manuscrite et monospace.

Vous pouvez rechercher dans les scripts (Likélatine étendue, cyrillique ou devanagari (ils sont appelés sous-ensembles dans Google Fonts). Mais vous ne pouvez pas rechercher dans plusieurs sous-ensembles à la fois.

Vous pouvez rechercher par quatre propriétés: épaisseur, inclinaison, largeur et «nombre de styles». Un style , également appelé variant , fait référence à la fois au style (Italicor régulier) et aux poids (100 200, jusqu'à 900). Souvent, la police du corps nécessite trois variantes: régulière, audacieuse et italique . La propriété «NumberOf Styles» régle les polices avec de nombreuses variantes, mais elle ne permet pas de sélectionner des polices qui viennent dans le combo «régulier, audacieux et italique».

Il existe également un champ de recherche personnalisé où vous pouvez taper votre requête. Ainsi, les résultats comprennent des familles de polices uniquement à partir de services autres que les polices Google.

Prenons l'exemple de la requête «dessin animé». Il en résulte un «cartoonscrit» à partir d'un linotype de fonderie externe.

Je me souviens avoir travaillé sur un projet qui exigeait deux polices de caractères très stylisées, ce qui évoque le vieux Far West, l'autre imitant un scénario. C'était le moment où j'ai décidé de marquer des polices Google. :)

Goofont en action

Permettez-moi de vous montrer comment fonctionne les goofont. La barre latérale sombre à droite est votre zone de «recherche». Vous pouvez taper vos mots clés dans le champ de recherche - cela effectuera une recherche «et». Par exemple, vous pouvez rechercher des polices qui sont à la fois des dessins animés et des dalles.

Nous avons trié sur le volet un tas de mots clés - cliquez l'un d'eux! Si votre projet nécessite des sous-ensembles spécifiques, vérifiez-les dans les sections de sous-ensembles. Vous pouvez également vérifier toutes les variantes dont vous avez besoin pour votre police.

Si vous aimez une police, cliquez sur son icône de cœur et elle sera stockée dans le storage local de votre navigateur. Vous pouvez trouver vos polices en signet sur thegoofont.com/bookmarkspage.together avec le code, vous devrez peut-être les intégrer.

Comment nous l'avons construit: la partie WordPress

Pour commencer, nous avions besoin d'une certaine interface d'Interface où nous pourrions prévisualiser et marquer chaque police. Nous avions également besoin d'une base de données pour stocker les thosetags.

J'ai eu une certaine expérience avec WordPress. De plus, WordPress est livré avec son API REST, qui ouvre plusieurs possibilités pour traiter les données sur le frontend. Thatchice a été fait rapidement.

Je suis allé pour la configuration initiale la plus simple possible. Chaque police est un message et nous utilisons des balises de publication pour les mots clés. ACUSMOST POST TYPECECT a également pu fonctionner, mais comme nous n'utilisons WordPress que pour les données, le type de contenu par défaut fonctionne parfaitement bien.

De toute évidence, nous devions ajouter toutes les polices par programme. Nous devions également être en mesure de mettre à jour par programme les polices, y compris en ajouter de nouvelles ou en ajoutant de nouvelles variantes et sous-ensembles disponibles.

L'approche décrite ci-dessous peut être utile avec toutes les autres données disponibles via une API externe. Dans un plugin WordPress personnalisé, nous enregistrons une page de menu à partir de laquelle nous pouvons vérifier les mises à jour de l'API. Pour plus de simplicité, la page affichera un titre, un bouton pour activer la mise à jour et une barre de progression pour quelques commentaires visuels.

 / **
 * Enregistrez une page de menu personnalisée. 
 * /
fonction register_custom_menu_page () {
  add_menu_page ( 
    «Google Fonts to WordPress», 
    «WP Goofont», 
    'manage_options', 
    «wp-goofont-menu», 
  function () {?>        
    <h1 id="API-des-polices-Google"> API des polices Google </h1>
    <button type="Button"> Exécuter 
    <p> </p>        
    <progr max="100" value="0">  progress>
   Php}
  ));
}
add_action ('admin_menu', 'register_custom_menu_page');</progr></button>

Commençons par écrire le javascriptPart. Alors que la plupart des exemples d'utilisation d'Ajax avec WordPress implémentent jQuery et thejQuery.ajaxMethod, le même peut être obtenu sans jQuery, en utilisant aaxios et un petit helperqs.js pour la sérialisation des données.

Nous voulons tolérer notre page de page de script personnalisé, après chargementaxiosandqs :

 add_action ('admin_enqueue_scripts' function () {
  wp__script ('axios', 'https://unpkg.com/axios/dist/axios.min.js');
  wp_enqueue_script ('qs', 'https://unpkg.com/qs/dist/qs.js');
  wp_enqueue_script ('wp-goofont-admin-script', plugin_dir_url (__file__). 'js / wp-goofont.js', array ('axios', 'qs'), '1.0.0', true);
});

Regardons à quoi ressemble le JavaScriptCled:

 const Button = Document.getElementById («WP-goofont-button»)
const info = document.getElementByid ('info')
const progress = document.getElementByid («progrès»)
const updater = {
  TotalCount: 0,
  Total vérifié: 0,
  mis à jour: [],
  init: fonction async () {
    essayer {
      const allfonts = Await axios.get ('https://www.googleapis.com/webfont/v1/webfonts?key=api_key&sort=date')
      this.totalCount = allfonts.data.items.length
      Info.TextContent = `FetChed $ {this.totalcount} polices.`
      this.updatePost (allfonts.data.items, 0)
    } catch (e) {
      console.error (e)
    }
  },
  UpdatePost: fonction asynchrone (Els, index) {
    if (index === this.totalCount) {
      retour
    }                
    const data = {
      Action: 'goofonts_update_post',
      FONT: ELS [INDEX],
    }
    essayer {
       const apirequest = attendre axios.post (ajaxurl, qs.stringify (data))
       this.totalchecked  
       Progress.SetAttribute ('Value', Math.round (100 * this.totalchecked / this.totalcount))
       this.updatePost (ELS, index 1)
    } catch (e) {
       console.error (e)
      }
   }
}

Button.AddeventListener ('click', () => {
  updater.init ()
})

TheInitMethod fait une demande à l'API GOOGLEFONTS. Une fois que les données de l'API sont disponibles, nous appelons la récursive asynchronousupdatePostMethod qui envoie une police individuelle dans la demande de poste au serveur WordPress.

Maintenant, il est important de se rappeler que WordPress implémente Ajax à sa manière spécifique. Tout d'abord, chaque demande doit être envoyée towp-admin / admin-ajax.php . Cette URL est disponible dans la zone d'administration en tant que JavaScriptVariaBeleajaxurl mondial .

Deuxièmement, toutes les demandes de WordPress AJAX doivent inclure AnActionArgument dans les données. La valeur de l'action détermine quelle balise de crochet sera utilisée à côté du serveur.

Dans notre cas, la valeur d'action isgoofont_update_post. Cela signifie que ce qui se passe dans le côté du serveur est déterminé par thewp_ajax_goofont_update_posthook.

 add_action ('wp_ajax_goofonts_update_post', function () {
  if (isset ($ _post ['font'])) {
    / * La tuile post est le nom de la police * /
    $ title = wp_strip_all_tags ($ _post ['font'] ['famille']);
    $ variantes = $ _post ['font'] ['variantes'];
    $ subset = $ _post ['font'] ['sous-ensembles'];
    $ category = $ _post ['font'] ['catégorie'];
    / * Vérifiez si le message existe déjà * /
    $ objet = get_page_by_title ($ title, 'objet', 'post');
    if (null === $ objet) {
      / * Créez une nouvelle catégorie de publication et définir, les variantes et les sous-ensembles en tant que balises * /
      goofonts_new_post ($ title, $ category, $ variantes, $ subset);
    } autre {
      / * Vérifiez si $ variantes ou $ sous-ensembles modifiés * /
      goofonts_update_post ($ objet, $ variantes, $ subset);
    }
  }
});

fonction goofont_new_post ($ title, $ category, $ variantes, $ subset) {
  $ post_id = wp_insert_post (array (array (
    'post_author' => 1,
    'post_name' => Sanitize_title ($ title),
    'post_title' => $ title,
    'post_type' => 'post',
    'post_status' => 'draft',
    )
  ));
  if ($ post_id> 0) {
    / * La partie facile du taggage;) Ajouter la catégorie de police, les variantes et les sous-ensembles (ces trois proviennent de l'API Google Fonts) en tant que balises * /
    wp_set_object_terms ($ post_id, $ catégorie, 'post_tag', true);
    wp_set_object_terms ($ post_id, $ variantes, 'post_tag', true);
    wp_set_object_terms ($ post_id, $ subset, 'post_tag', true);
  }
}

De cette façon, en moins d'une minute, nous nous retrouvons avec près de mille repêchages post dans le tableau de bord, tous avec quelques étiquettes déjà en place. Et c'est le moment où commence la partie cruciale et la plus longue du projet. Nous devons commencer à ajouter manuellement des balises pour chaque police une par une.
L'éditeur WordPress par défaut n'a pas beaucoup de sens dans ce cas. Ce dont nous avions besoin, c'est un aperçu de la police. Un lien vers la page de la police sur Fonts.google.com est également utile.

MetaboxDoes ACUSTUM TRÈS bien le travail. Dans la plupart des cas, vous utiliserez des méta-box pour des éléments de formulaire personnalisés pour enregistrer certaines données personnalisées liées à la publication. En fait, le contenu d'un métabox peut être pratiquement n'importe quel HTML.

 fonction affiche_font_preview ($ post) {
  / * nom de police, par exemple abril fatface * /
  $ font = $ post-> post_title;
  / * police comme dans l'URL, par exemple abril fatface * /
  $ font_url_part = implode ('', explosage ('', $ font));
  ?>
  <div> 
    <link href="<?%20php%20echo%20'https://fonts.googleapis.com/css?family='.%20%24%20font_url_part.%0A%20%20%20%20<dique>%0A%20%20%20%20%20%20<h2>%20<?%20PHP%20Echo%20%24%20FONT;%20?>%20</h2>%0A%20%20%20%20%20%20<a%20href%20=%20" php echo font_url_part>" Target = "_ Blank" rel = "Noopenner"> Spécime sur Google Fonts 
    -header>
    <div tenteditable="true" style="font-family: <? php echo $ font;?>">
      <p> Le renard brun rapide saute par-dessus un chien paresseux. </p>
      <p style="Text-transform: majuscule;"> Le renard brun rapide saute par-dessus un chien paresseux. </p>
      <p> 1 2 3 4 5 6 7 8 9 0 </p>
      <p> &! ; ? {} [] </p>
    </div>
  </div>
 Php}

add_action ('add_meta_boxes', fonction () {
  add_meta_box (
    'font_preview', / * Metabox ID * /
    'Font Preview', / * Metabox Title * /
    'affiche_font_preview', / * Rappel de contenu * /
    'post' / * où afficher * /
  ));
});

Le marquage des polices est une tâche à long terme avec beaucoup de répétition. Cela nécessite également une forte dose de cohérence. C'est pourquoi nous avons commencé par définir un ensemble de «préréglages» de balise. Cela pourrait être, par exemple:

 {
  / * ... * /
  bande dessinée: {
    Tags: «Comic, décontracté, informel, dessin animé»
  },
  cursif: {
    Tags: «cursive, calligraphie, script, manuscrit, signature»
  },
  / * ... * /
}

Ensuite, avec quelques CSS et JavaScript personnalisés, nous avons «piraté» l'éditeur WordPress et les balises en l'enrichissant avec l'ensemble des boutons prédéfinis.

Comment nous l'avons construit: la partie frontale (en utilisant des nuxtjs)

Thegoofont.comInterface a été conçu Bysylvain Guizard, un concepteur de Graphicandweb français (qui se trouve également être mon mari). Nous voulions quelque chose de simple avec une zone de «recherche» distinguée. Sylvain a délibérément opté pour des couleurs qui ne sont pas trop éloignées de l'identité des polices Google. Nous recherchions un équilibre entre construire quelque chose d'unique et d'origine pendant la confusion de l'utilisateur.

Bien que IDID ne hésite pas WordPress pour Theback-End, idide ne veut pas l'utiliser sur Frontend. Nous visions une expérience de type application et moi, personnellement, je voulais coder en javascript, usingvue.js en particulier.

Je suis tombé sur un exemple de site Web à l'aide de NuxtJswith WordPress et j'ai décidé de l'essayer. Le choix a été fait immédiatement. Nuxtjs est un cadre Vue.js très populaire, et j'apprécie vraiment sa simplicité et sa flexibilité.
J'ai joué avec différents paramètres Nuxjs pour finir avec un site Web 100% statique. La solution entièrement statique semblait la plus performante; l'expérience globale semblait la plus fluide. Cela signifie également que mon site WordPress n'est utilisé que pendant le processus de construction. Ainsi, il peut fonctionner sur mon hôte local. Ce n'est pas négligeable car il élimine les coûts d'hébergement et surtout, me permet de sauter la configuration WordPress liée à la sécurité et de soulager le stress lié à la sécurité.;)

Si vous connaissez NuxtJS, vous savez probablement que la génération statique complète ne fait pas (encore) une partie de NuxtJS. Les pages prépendantes essaient de récupérer à nouveau les données lorsque vous naviguez.

C'est pourquoi nous devons en quelque sorte «pirater» la génération 100% statique. Dans ce cas, nous enregistrons les parties utiles des données récupérées à Ajsonfile avant chaque processus de construction. Ceci est possible, grâce à des crochets TonXx, en particulier, ses crochets Builder.

Les crochets sont généralement utilisés dans les modules NUXT:

 / * modules / avantbuild.js * /

const fs = require ('fs')
const axios = require ('axios')

const SourcePath = 'http: //wpgoofont.local/wp-json/wp/v2/'
const path = 'static / allfont.json'

module.exports = () => {
  / * Écrivez des données dans le fichier, en remplaçant le fichier s'il existe déjà * /
  const storeData = (data, path) => {
    essayer {
      fs.writeFileSync (path, json.stringify (data))
    } catch (err) {
      console.error (err)
    }
  }
  fonction asynchrone getData () {    
    const fetchedtags = attendre axios.get (`$ {sourcePath} tags? per_page = 500`)
      .Catch (e => {console.log (e); return false})
    
  / * construire un objet de tag_id: tag_slug * /
    const tags = fetchedtags.data.reduce ((acc, cur) => {
      Acc [cur.id] = cur.slug
      Retour ACC
    }, {})
    
  / * Nous voulons connaître le nombre total ou les pages * /
    const mhead = attendre axios.head (`$ {sourcePath} Posts? Per_page = 100`)
      .Catch (e => {console.log (e); return false})
    const totalpages = mhead.headers ['x-wp-totalpages']

  / * Répondons à toutes les polices * /
    Soit Fonts = []
    Laisse i = 0
    while (i <totalpages je const response="Await" axios.get posts per_page="100" page="$" fonts.push.apply r et les un objet avec des entr comme: roboto tags: ... fonts="(polices)" .reduce el> {
      Acc [el.slug] = {
        Nom: el.title.endered,
        Tags: el.tags.map (i => tags [i]),
      }
      Retour ACC
    }, {})

  / * Enregistrez l'objet Fonts dans un fichier .json * /
    stockata (polices, chemin)
  }

  / * Assurez-vous que cela se produit avant chaque construction * /
  this.nuxt.hook ('build: avant', getData)
}</totalpages>

 / * nuxt.config.js * /
module.exports = {
  // ...
  BuildModules: [
    ['~ modules / avant deBuild']
  ],
// ...
}

Comme vous pouvez le voir, nous demandons uniquement une liste de balises et une liste de postes.Ceans que nous utilisons uniquement les points de terminaison de l'API WordPressRest par défaut, et aucune configuration n'est requise.

Réflexions finales

Travailler sur des goofonts était une aventure à long terme. C'est aussi ce type de projets qui doivent être activement maintenus. Nous continuons régulièrement à vérifier les polices Google pour les nouvelles polices de caractères, sous-ensembles ou variantes. Nous marquons de nouveaux éléments et mettons à jour notre base de données. Récemment, j'ai été vraiment excité de découvrir que Bebas Neuehas a joint la famille. Nous avons également nos favoris personnels parmi les spécimens bien moins connus.

En tant que formateur qui donne des ateliers réguliers, je peux observer que de vrais utilisateurs jouent avec des goofonts. À ce stade du projet, nous voulons obtenir autant de commentaires que possible. Nous serions ravis que les chênes soient un outil utile, pratique et intuitif pour les concepteurs de sites. Nous aimerions également ajouter la possibilité de partager les ensembles de signets et de créer plusieurs «collections» de polices.

En tant que développeur, j'ai vraiment apprécié l'aspect multidisciplinaire de ce projet. C'était la première fois que je travaillais avec l'API WordPress REST, c'était mon premier grand projet dans Vue.js, et j'ai tellement appris sur la typographie.

Finrions-nous quelque chose de différemment si nous le pouvions? Absolument. C'était un processus d'apprentissage. D'un autre côté, je ne pense pas que nous changerions les principaux outils. La flexibilité de WordPress et Nuxt.js s'est avérée être le bon choix. En recommençant aujourd'hui, je prendrais certainement du temps à explorergraphql, et je vais probablement l'implémenter à l'avenir.

J'espère que vous trouverez certaines des méthodes discutées utiles. Comme je l'ai déjà dit, vos commentaires sont très précieux. Si vous avez des questions ou des remarques, veuillez me le faire savoir dans les commentaires!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!