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> 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!