Wie wir Google -Schriftarten getaggt und Goofonts.com erstellt haben

Goofontsis Ein Nebenprojekt, das von einer Entwicklerin und einem Designer-Ehemann signiert wurde, beide große Fans der Typografie. Wir haben TaggingGoogle Fontsand eine Website erstellt, auf der die Suche und die richtige Schriftart erleichtert wird.

Goofontsuss WordPress im Backend and NuxtJS (avue.js Framework) am Frontend. Ich würde Ihnen gerne die Geschichte hinter Goofonts.com erzählen und einige technische Details zu den von uns ausgewählten Technologien und dem Anpassung und Verwendungsbereich für dieses Projekt teilen.

Warum wir Goofonts gebaut haben

Im Moment des Schreibens dieses Artikels werden 977 Schriften von Google Fonts angeboten. Sie können die genaue Nummer jederzeit mithilfe von TheGeogle -Schriftarten -Entwickler -API -API überprüfen. Sie können die dynamische Liste aller Schriftarten abrufen, einschließlich einer Liste der verfügbaren Stile und Skripte für jede Familie.

Die Google Fonts -Website bietet eine wunderschöne Oberfläche, an der Sie alle Schriftarten vorschauen und sie nach Trends, Popularität, Datum oder Namen sortieren können.

Aber was ist mit der Suchfunktion?

Sie können Schriftarten nach fünf Kategorien einschließen und ausschließen: Serife, Sans-Serif, Anzeige, Handschrift und Monospace.

Sie können in Skripten durchsuchen (Likelatin Extended, Cyrillic oder Devanagari (sie werden als Teilmengen in Google -Schriftarten bezeichnet). Sie können jedoch nicht innerhalb mehrerer Teilmengen gleichzeitig suchen.

Sie können nach vier Eigenschaften suchen: Dicke, Schräg-, Breite und „Anzahl der Stile“. Ein Stil , der auch Variante bezeichnet wird, bezieht sich sowohl auf den Stil (regelmäßig Italicor) als auch auf Gewichte (100.200, bis zu 900). Oft benötigt die Körperschrift drei Varianten: regulär, mutig und kursiv . Die Eigenschaft „Numberof Styles“ sortiert Schriftarten mit vielen Varianten aus, erlaubt jedoch nicht, Schriftarten auszuwählen, die in der Kombination aus „normaler, mutig, kursiv“ erhältlich sind.

Es gibt auch ein benutzerdefiniertes Suchfeld, in dem Sie Ihre Abfrage eingeben können. Ungefährlich wird die Suche ausschließlich über die Namen der Schriftarten durchgeführt. Daher umfassen die Ergebnisse, die Schriftfamilien eindeutig aus anderen Diensten als Google -Schriftarten enthalten.

Nehmen wir als Beispiel die "Cartoon" -Anfrage. Es führt zu „CartoonScript“ aus einem externen Foundry -Linotyp.

Ich kann mich daran erinnern, an einem Projekt gearbeitet zu haben, das zwei hoch stilisierte Schriftarten erforderte - einen, der den alten Wildwesten hervorruft, das andere nachahmte ein Drehbuch nach, um ein Drehbuch nachzuahmen. Das war der Moment, in dem ich mich entschied, Google -Schriftarten zu markieren. :)

Goofonts in Aktion

Lassen Sie mich Ihnen zeigen, wie Goofonts funktioniert. Die dunkle Seitenleiste auf der rechten Seite ist Ihr "Such" -Bereich. Sie können Ihre Schlüsselwörter in das Suchfeld eingeben - dies wird eine "und" -Suche durchführen. Zum Beispiel können Sie nach Schriftarten suchen, die gleichzeitig Cartoon und Platte sind.

Wir haben eine Reihe von Keywords aus Handverpackungen ausgewählt - klicken Sie auf einen von ihnen! Wenn für Ihr Projekt bestimmte Teilmengen erforderlich sind, überprüfen Sie sie in den Abschnitten der Untergruppen. Sie können auch alle Varianten überprüfen, die Sie für Ihre Schriftart benötigen.

Wenn Sie eine Schriftart mögen, klicken Sie auf das Herzsymbol, und sie wird in der lokalen Storage Ihres Browsers gespeichert. Mit dem Code finden Sie Ihre mit einem Lesezeichen versehenen Schriftarten auf theGoofonts.com/bookmarkSpage.together.

Wie wir es gebaut haben: Der WordPress -Teil

Zu Beginn mussten wir eine gewisse Unterbrechung mussten, wo wir jede Schriftart einer Schriftart einstellen und markieren konnten. Wir brauchten auch eine Datenbank, um Thosetags zu speichern.

Ich hatte einige Erfahrung mit WordPress. Darüber hinaus wird WordPress mit seiner REST -API geliefert, die mehrere Möglichkeiten für den Umgang mit den Daten an der Frontend eröffnet. Thatchoice wurde schnell gemacht.

Ich entschied mich für das unkomplizierteste mögliche Anfangsaufbau. Jede Schrift ist ein Beitrag, und wir verwenden Post -Tags für Schlüsselwörter. Acustom post tytypec konnte auch funktioniert haben, aber da wir WordPress nur für die Daten verwenden, funktioniert der Standardinhaltstyp perfekt.

Offensichtlich mussten wir alle Schriftarten programmatisch hinzufügen. Wir mussten auch in der Lage sein, die Schriftarten programmgesteuert zu aktualisieren, einschließlich des Hinzufügens neuer oder neuer verfügbarer Varianten und Teilmengen.

Der nachstehend beschriebene Ansatz kann mit allen anderen Daten, die über eine externe API verfügbar sind, nützlich sein. In einem benutzerdefinierten WordPress -Plugin registrieren wir eine Menüseite, von der wir nach Updates über die API suchen können. Der Einfachheit halber wird auf der Seite einen Titel, eine Schaltfläche zum Aktivieren des Updates und eine Fortschrittsleiste für visuelle Feedback angezeigt.

 /**
 * Registrieren Sie eine benutzerdefinierte Menüseite. 
 */
Funktion register_custom_menu_page () {
  add_menu_page ( 
    'Google -Schriftarten zu WordPress', 
    'WP Goofonts', 
    'verwalten_options', 
    "WP-Goofonts-Menu", " 
  function () {?>        
    <h1 id="Google-Schriftarten-API"> Google -Schriftarten API </h1>
    <button type="button"> run </button>
    <p> </p>        
    <progress max="100" value="0"> </progress>
   php}
  );
}
add_action ('admin_menu', 'register_custom_menu_page');

Beginnen wir zunächst den JavaScriptPart. Während die meisten Beispiele für die Verwendung von AJAX mit WordPress jQuery und thejQuery.ajaxMethod implementieren, kann dies ohne JQuery erhalten werden, wobei Aaxios und eine kleine Helperqs.jsfor -Datenserialisierung verwendet werden.

Wir möchten, dass unsere benutzerdefinierte Skriptinhe -Fußzeile nach Loadingaxiosandqs :

 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-Goofonts-admin-script', Plugin_dir_url (__File__). 'JS/WP-GoofONTs.js', Array ('Axios', 'QS'), '1.0.0', True);
});

Schauen wir uns an, wie der JavaScript aussehen könnte:

 const button = document.getElementById ('WP-Goofonts-Button')
const info = document.getElementById ('info')
const progress = document.getElementById ('Fortschritt')
const updater = {
  TotalCount: 0,,
  TotalChecked: 0,,
  Aktualisiert: [],
  init: async function () {
    versuchen {
      const Allfonts = warte axios.get ('https://www.googleapis.com/webfonts/v1/webfonts?key=API_Key&sort=date')
      this.totalcount = allfonts.data.items.length
      Info.textContent = `abgerufen $ {this.totalCount} fonts.`
      this.updatePost (Allfonts.data.Items, 0)
    } catch (e) {
      console.Error (e)
    }
  },
  UPDATEPOST: ASYNC -Funktion (ELS, INDEX) {
    if (index === this.totalCount) {
      zurückkehren
    }                
    const data = {
      Aktion: 'goofonts_update_post',
      Schriftart: Els [Index],
    }
    versuchen {
       const apirequest = warte axios.post (ajaxurl, qs.stringify (data)))
       this.totalChecked  
       Progresor.setattribute ('value', math.round (100*this.totalChecked/this.totalCount))
       this.updatePost (ELS, Index 1)
    } catch (e) {
       console.Error (e)
      }
   }
}

Button.AdDeVentListener ('Click', () => {
  updater.init ()
})

DasInitMethod stellt eine Anfrage an die API von GEGELEFONTS. Sobald die Daten der API verfügbar sind, nennen wir den rekursiven asynchronousUpdatePostMethod, der in der Postanforderung an den WordPress -Server sendet.

Jetzt ist es wichtig, sich daran zu erinnern, dass WordPress Ajax auf seine spezifische Weise implementiert. Zunächst muss jede Anfrage toWp-admin/admin-ajax.php gesendet werden . Diese URL ist im Verwaltungsgebiet als globaler JavaScriptvariableAjaxurl erhältlich .

Zweitens müssen alle WordPress Ajax -Anfragen ein AnactionArgument in die Daten enthalten. Der Wert der Aktion bestimmt, welcher Hook-Tag auf der serverseitigen Verwendung verwendet wird.

In unserem Fall ist der Aktionswert isgoofonts_update_post. Das bedeutet, dass das, was auf der Serverseite passiert, durch thewp_ajax_goofonts_update_poThook bestimmt wird.

 add_action ('wp_ajax_goofonts_update_post', function () {
  if (isset ($ _post ['font'])) {
    / * Die Postkachel ist der Name der Schrift */
    $ title = wp_strip_all_tags ($ _post ['font'] ['family']);
    $ variants = $ _post ['font'] ['varianten'];
    $ subsets = $ _post ['font'] ['subsets'];
    $ category = $ _post ['font'] ['Kategorie'];
    / * Überprüfen Sie, ob der Beitrag bereits existiert */
    $ object = get_page_by_title ($ title, 'object', 'post');
    if (null === $ Objekt) {
      / * Erstellen Sie eine neue Post- und Set -Kategorie, Varianten und Teilmengen als Tags */
      Goofonts_New_Post ($ title, $ category, $ variants, $ subsets);
    } anders {
      / * Überprüfen Sie, ob $ Varianten oder $ Untergruppen geändert werden */
      goofonts_update_post ($ object, $ variants, $ subsets);
    }
  }
});

Funktion Goofonts_New_Post ($ title, $ category, $ variants, $ subsets) {
  $ post_id = wp_insert_post (Array (Array (Array)
    'post_author' => 1,
    'post_name' => sanitize_title ($ title),
    'post_title' => $ title,
    'post_type' => 'post',
    'post_status' => 'Entwurf',
    )
  );
  if ($ post_id> 0) {
    / * Der einfache Teil des Taggings;) Anhängen der Schriftkategorie, Varianten und Teilmengen (diese drei stammen aus der Google -Schriftart -API) als Tags *////
    wp_set_object_terms ($ post_id, $ category, 'post_tag', true);
    wp_set_object_terms ($ post_id, $ varianten, 'post_tag', true);
    wp_set_object_terms ($ post_id, $ subsets, 'post_tag', true);
  }
}

Auf diese Weise haben wir in weniger als einer Minute fast eintausend Post-Entwürfe im Dashboard-alle mit ein paar bereits vorhandenen Tags. Und in diesem Moment beginnt der entscheidende, zeitaufwändigste Teil des Projekts. Wir müssen für jede Schriftart für jede Schriftart manuell nacheinander anfangen.
Der Standard -WordPress -Editor macht in diesem Fall nicht viel Sinn. Was wir brauchten, ist eine Vorschau der Schriftart. Ein Link zur Seite der Schriftart auf fonts.google.com ist ebenfalls nützlich.

Acustom metaboxdoes die Arbeit sehr gut. In den meisten Fällen verwenden Sie Meta -Boxen für benutzerdefinierte Formularelemente, um einige benutzerdefinierte Daten im Zusammenhang mit dem Beitrag zu speichern. Tatsächlich kann der Inhalt eines Metaboxas praktisch jede HTML sein.

 Funktion display_font_preview ($ post) {
  / * Schriftname, zum Beispiel ABRIL FATFACE */
  $ font = $ post-> post_title;
  / * Schriftart wie in der URL, zum Beispiel ABRIL FATFACE */
  $ font_url_part = implode ('', explode ('', $ font));
  ?>
  <div> 
    <link href="<?%20php%20echo%20'https://fonts.googleapis.com/css?family='.%20%24%20font_url_part.%20'&%20display%20=%20swap';%0A%20%20%20%20<Header>%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>
    <div intdlichung="true" style="font-family: <? php echo $ font;?>">
      <p> Der schnelle braune Fuchs springt über einen faulen Hund. </p>
      <p style="Text-Transform: Großbuchstaben;"> Der schnelle braune Fuchs springt über einen faulen Hund. </p>
      <p> 1 2 3 4 5 6 7 8 9 0 </p>
      <p> &! ; ? {} [] </p>
    </div>
  </div>
 php}

add_action ('add_meta_boxes', function () {
  add_meta_box (
    'font_preview', / * metabox id * / /
    'Schriftart Vorschau', / * Metabox -Titel * /
    'display_font_preview', / * Inhaltsrückruf * /
    'post' / * wo zu anzeigen * /
  );
});

Tagging-Schriftarten ist eine langfristige Aufgabe mit viel Wiederholung. Es erfordert auch eine große Dosis Konsistenz. Deshalb haben wir damit begonnen, eine Reihe von Tag -Voreinstellungen zu definieren. Das könnte zum Beispiel sein:

 {
  / * ... */
  Comic: {
    Tags: 'Comic, lässig, informell, Cartoon'
  },
  Kursiv: {{
    Tags: 'Kursiv, Kalligraphie, Skript, Manuskript, Unterschrift'
  },
  / * ... */
}

Als nächstes mit einigen benutzerdefinierten CSS und JavaScript haben wir den WordPress -Editor und das Tags -Formular "gehackt", indem wir ihn mit dem Satz voreingestellter Schaltflächen bereichern.

Wie wir es gebaut haben: Der Front -End -Teil (mit Nuxtjs)

TheGoofonts Wir wollten etwas Einfaches mit einem angesehenen "Such" -Bereich. Sylvain hat absichtlich Farben entschieden, die nicht zu weit von der Identität von Google -Schriftarten entfernt sind. Wir suchten nach einem Gleichgewicht zwischen dem Aufbau von etwas Einzigartigem und originalwhileavoidierendem Benutzerverwirrung.

Während Idid nicht zögern, WordPress fortzack-End zu zögern, möchte es nicht an Frontend verwenden. Wir wollten eine App-ähnliche Erfahrung und ich persönlich wollte in JavaScript insbesondere mit vue.js codieren.

Ich bin auf ein Beispiel für eine Website gestoßen, die Nuxtjswith WordPress verwendet habe, und beschloss, es auszuprobieren. Die Wahl wurde sofort getroffen. Nuxtjs ist ein sehr beliebtes Vue.js -Framework, und ich genieße seine Einfachheit und Flexibilität wirklich.
Ich habe mit verschiedenen NuxtJS -Einstellungen herumgespielt, um eine 100% statische Website zu erhalten. Die voll statische Lösung fühlte sich am leistungsfähigsten an. Die Gesamterfahrung schien die flüssigste zu sein. Das bedeutet auch, dass meine WordPress -Site nur während des Build -Prozesses verwendet wird. So kann es auf meinem Lokalhost laufen. Dies ist nicht vernachlässigbar, da es die Hosting-Kosten beseitigt und vor allem die Sicherheits-WordPress-Konfiguration überspringen und die Sicherheitsstress entlasten.;)

Wenn Sie mit NuxtJs vertraut sind, wissen Sie wahrscheinlich, dass die vollständige statische Generation (noch) nicht Teil von NuxtJs ist. Die vorgefertigten Seiten versuchen, die Daten erneut zu holen, wenn Sie navigieren.

Deshalb müssen wir die 100% statische Generation irgendwie „hacken“. In diesem Fall speichern wir die nützlichen Teile der abgerufenen Daten vor jedem Bauprozess in AJSONFILE. Dies ist möglich, dank Tonuxt Hooks, insbesondere seine Bauer -Hooks.

Haken werden normalerweise in Nuxt -Modulen verwendet:

 / * Module/vorbuild.js */

const fs = erfordern ('fs')
const axios = erfordern ('axios')

const SourcePath = 'http: //wpgoofonts.local/wp-json/wp/v2/'
const path = 'static/Allfonts.json'

module.exports = () => {
  / * Schreiben Sie Daten in die Datei und ersetzen Sie die Datei, wenn sie bereits existiert */
  const sporedata = (Daten, Pfad) => {
    versuchen {
      fs.writeFilesync (Path, JSON.Stringify (Daten)))
    } catch (err) {
      console.Error (err)
    }
  }
  asynchrische Funktion getData () {    
    const fetchedTags = warte axios.get (`$ {SourcePath} Tags? Per_Page = 500`)
      .Catch (e => {console.log (e); return false})
    
  / * Erstellen Sie ein Objekt von Tag_id: Tag_Slug */
    const tags = fetchedTags.data.Reduce ((ACC, CUR) => {
      ACC [cur.id] = cur.slug
      Rückgabe ACC
    }, {})
    
  / * Wir möchten die Gesamtzahl oder Seiten kennen */
    const mhead = warte axios.head (`$ {SourcePath} Beiträge? Per_Page = 100`)
      .Catch (e => {console.log (e); return false})
    const insgesamtpages = mhead.Headers ['x-wp-totalpages']

  / * Lassen Sie uns alle Schriftarten abrufen */
    Sei Schriftarten = []
    lass i = 0
    während (i <insgesamt ich const response="warte" axios.get posts per_page="100" page="$" fonts.push.apply antwort.data und reduzieren sie auf ein objekt mit eintr wie: roboto tags: ... fonts="(Schriftarten)" .reduce el> {
      ACC [el.slug] = {
        Name: El.Title.Rendered,
        Tags: El.Tags.map (i => Tags [i]),
      }
      Rückgabe ACC
    }, {})

  / * Speichern Sie das Objekt der Schriftarten in einer .json -Datei */
    gespeichert (Schriftarten, Pfad)
  }

  / * Stellen Sie sicher, dass dies vor jedem Build geschieht */
  this.nuxt.hook ('Build: vor', getData)
}</insgesamt>

 / * nuxt.config.js */
module.exports = {
  // ...
  Buildmodules: [
    ['~ module/vorbuild']]
  ],
// ...
}

Wie Sie sehen können, fordern wir nur eine Liste von Tags und eine Listenpostierung an. Thatmeans Wir verwenden nur Standard -WordPressRest -API -Endpunkte, und es ist keine Konfiguration erforderlich.

Letzte Gedanken

Die Arbeit an Goofonts war ein langfristiges Abenteuer. Es sind auch diese Art von Projekten, die aktiv aufrechterhalten werden müssen. Wir überprüfen regelmäßig Google -Schriftarten auf neue Schriften, Teilmengen oder Varianten. Wir markieren neue Elemente und aktualisieren unsere Datenbank. Kürzlich war ich wirklich aufgeregt, herauszufinden, dass Bebas Neuehas die Familie gemeinsam ist. Wir haben auch unsere persönlichen Favoriten unter den viel weniger bekannten Exemplaren.

Als Trainer, der regelmäßige Workshops gibt, kann ich echte Benutzer beobachten, die mit Goofonts spielen. In dieser Phase des Projekts möchten wir so viel Feedback wie möglich erhalten. Wir würden uns freuen, dass Goofonts ein nützliches, handliches und intuitives Tool für Webdesigner sein. Eines der To-Do-Funktionen sucht eine Schriftart nach ihrem Namen. Wir würden es auch gerne hinzufügen, die Lesezeichen -Sets zu teilen und mehrere „Sammlungen“ von Schriftarten zu erstellen.

Als Entwickler habe ich den multidisziplinären Aspekt dieses Projekts wirklich genossen. Es war das erste Mal, dass ich mit der WordPress Rest -API zusammenarbeitete, es war mein erstes großes Projekt in Vue.js, und ich habe so viel über Typografie gelernt.

Würden wir etwas anders machen, wenn wir könnten? Absolut. Es war ein Lernprozess. Andererseits glaube ich nicht, dass wir die Hauptwerkzeuge ändern würden. Die Flexibilität von WordPress und Nuxt.js erwies sich als die richtige Wahl. Ich würde heute auf jeden Fall Zeit nehmen, um zu erkunden, und ich werde es wahrscheinlich in Zukunft umsetzen.

Ich hoffe, dass Sie einige der diskutierten Methoden nützlich finden. Wie ich bereits sagte, ist Ihr Feedback sehr kostbar. Wenn Sie Fragen oder Bemerkungen haben, lassen Sie es mich bitte in den Kommentaren wissen!

Das obige ist der detaillierte Inhalt vonWie wir Google -Schriftarten getaggt und Goofonts.com erstellt haben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!