Bagaimana kami menandakan font Google dan mencipta goofonts.com

Goofontsis Sebuah projek sampingan yang ditandatangani oleh seorang pemaju-isteri dan suami pereka, kedua-duanya peminat besar tipografi. Kami telah TaggingGoogle Fontsand membina sebuah laman web yang membuat mencari dan mencari fon yang lebih mudah.

Goofontsuses WordPress di backend andnuxtjs (rangka kerja avue.js) di frontend. Saya ingin memberitahu anda cerita di sebalik goofonts.com dan berkongsi beberapa butiran teknikal mengenai teknologi yang telah kami pilih dan bagaimana kami menyesuaikan diri dan menggunakannya untuk projek ini.

Mengapa kita membina goofonts

Pada saat menulis artikel ini, terdapat 977 typefaces yang ditawarkan oleh Google Fonts. Anda boleh menyemak nombor yang tepat pada bila -bila masa menggunakan pemaju fon fon.

Laman web Google Fonts menyediakan antara muka yang indah di mana anda boleh melihat semua fon, menyusunnya dengan trend, populariti, tarikh, atau nama.

Tetapi bagaimana dengan fungsi carian?

Anda boleh memasukkan dan mengecualikan fon oleh lima kategori: serif, sans-serif, paparan, tulisan tangan, dan monospace.

Anda boleh mencari dalam skrip (Likelatin Extended, Cyrillic, atau Devanagari (mereka yang dipanggil subset dalam font Google). Tetapi anda tidak boleh mencari dalam beberapa subset sekaligus.

Anda boleh mencari dengan empat sifat: ketebalan, slant, lebar, dan "gaya bilangan." Gaya , yang juga dikenali sebagai variasi , merujuk kedua -dua gaya (Italicor biasa) dan berat (100,200, sehingga 900). Sering kali, fon badan memerlukan tiga varian: biasa, berani, dan italic . Properti "Numberof Styles" menyusun fon dengan banyak varian, tetapi ia tidak membenarkan untuk memilih fon yang datang dalam kombo "biasa, berani, italic".

Terdapat juga medan carian tersuai di mana anda boleh menaip pertanyaan anda. Sayangnya, carian dilakukan secara eksklusif ke atas nama -nama fon. Oleh itu, hasilnya termasuk keluarga font secara unik dari perkhidmatan selain fon Google.

Mari ambil pertanyaan "kartun" sebagai contoh. Ia menghasilkan "Cartoonscript" dari linotype foundry luaran.

Saya boleh ingat bekerja pada projek yang menuntut dua typefaces yang sangat bergaya -satu yang membangkitkan Lama Wild West, yang lain meniru skrip. Itulah saat saya memutuskan untuk menandakan fon Google. :)

Goofonts dalam tindakan

Izinkan saya menunjukkan kepada anda bagaimana goofonts berfungsi. Sidebar gelap di sebelah kanan adalah kawasan "carian" anda. Anda boleh menaip kata kunci anda dalam medan carian -ini akan melakukan carian "dan". Sebagai contoh, anda boleh mencari fon yang sekaligus kartun dan papak.

Kami memilih sekumpulan kata kunci -klik mana -mana daripada mereka! Jika projek anda memerlukan beberapa subset tertentu, periksa mereka dalam bahagian subset. Anda juga boleh menyemak semua varian yang anda perlukan untuk fon anda.

Jika anda suka font, klik ikon jantungnya, dan ia akan disimpan di localStorage pelayar anda. Anda boleh menemui fon bookmark anda di thooofonts.com/bookmarkspage.Together dengan kod, anda mungkin perlu membenamkannya.

Bagaimana Kami Membangunnya: Bahagian WordPress

Untuk memulakan, kami memerlukan SomeKind OfInterface di mana kami boleh melihat dan menandai setiap fon. Kami juga memerlukan pangkalan data untuk menyimpan thosetags.

Saya mempunyai pengalaman dengan WordPress. Lebih -lebih lagi, WordPress datang dengan API REST, yang membuka pelbagai kemungkinan untuk menangani data di frontend. ThatChoice dibuat dengan cepat.

Saya pergi untuk persediaan awal yang paling mudah. Setiap fon adalah jawatan, dan kami menggunakan tag pos untuk kata kunci. Acustom post typecould telah bekerja juga, tetapi kerana kami menggunakan WordPress hanya untuk data, jenis kandungan lalai berfungsi dengan baik.

Jelas, kita perlu menambah semua fon secara programatik. Kami juga memerlukan untuk mengemas kini fon secara programatik, termasuk menambah yang baru atau menambah varian dan subset yang tersedia.

Pendekatan yang diterangkan di bawah boleh berguna dengan data lain yang tersedia melalui API luaran. Dalam plugin WordPress tersuai, kami mendaftarkan halaman menu dari mana kami boleh menyemak kemas kini dari API. Untuk kesederhanaan, halaman akan memaparkan tajuk, butang untuk mengaktifkan kemas kini dan bar kemajuan untuk beberapa maklum balas visual.

 /**
 * Daftar halaman menu tersuai. 
 */
fungsi daftar_custom_menu_page () {
  add_menu_page ( 
    'Fon Google ke WordPress', 
    'WP Goofonts', 
    'Manage_Options', 
    'WP-Goofonts-menu', 
  fungsi () {?>        
    <h1 id="Google-Fonts-API"> Google Fonts API </h1>
    <button type="Button"> Run </button>
    <p> </p>        
    <progress max="100" value="0"> </progress>
   php}
  );
}
add_action ('admin_menu', 'register_custom_menu_page');

Mari kita mulakan dengan menulis javascriptpart. Walaupun sebahagian besar contoh menggunakan Ajax dengan WordPress melaksanakan jQuery dan theJQuery.ajaxMethod, yang sama boleh diperolehi tanpa jQuery, menggunakanxiosand a helperqs.jsfor serialization data kecil.

Kami mahu toload scriptinthe footer kami, selepas loadingaxiosandqs :

 add_action ('admin_enqueue_scripts' fungsi () {
  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', benar);
});

Mari lihat bagaimana rupa JavaScriptcould:

 butang const = document.getElementById ('WP-Goofonts-Button')
const info = document.getElementById ('Info')
Const Progress = Document.GetElementById ('Kemajuan')
const updater = {
  TotalCount: 0,
  TotalChecked: 0,
  Dikemaskini: [],
  init: fungsi async () {
    Cuba {
      const allfonts = menunggu axios.get ('https://www.googleapis.com/webfonts/v1/webfonts?key=api_key&sort=date')
      this.totalcount = allfonts.data.items.length
      Info.textcontent = `diambil $ {this.totalcount} fonts.`
      this.updatePost (allfonts.data.items, 0)
    } menangkap (e) {
      Console.error (e)
    }
  },
  UpdatePost: Fungsi Async (ELS, Indeks) {
    jika (index === this.totalcount) {
      kembali
    }                
    data const = {
      Tindakan: 'goofonts_update_post',
      Font: ELS [indeks],
    }
    Cuba {
       const apirequest = menunggu axios.post (ajaxurl, qs.stringify (data))
       this.totalchecked  
       Kemajuan.setAttribute ('nilai', math.round (100*this.totalChecked/this.totalcount))
       this.updatePost (ELS, indeks 1)
    } menangkap (e) {
       Console.error (e)
      }
   }
}

Button.AdDeventListener ('klik', () => {
  updater.init ()
})

TheInitMethod membuat permintaan kepada API TheGoogleFonts. Sebaik sahaja data dari API tersedia, kami memanggil asynchronousupdatePostMethod rekursif yang SendSanIndividual font dalam permintaan pos ke pelayan WordPress.

Sekarang, penting untuk diingat bahawa WordPress melaksanakan Ajax dengan cara tertentu. Pertama sekali, setiap permintaan mesti dihantar TOWP-Admin/Admin-Ajax.php . URL ini boleh didapati di kawasan pentadbiran sebagai javascriptvariabeAjaxurl global .

Kedua, semua permintaan WordPress Ajax mesti termasuk anActionArgument dalam data. Nilai tindakan menentukan tag cangkuk mana yang akan digunakan pada sisi pelayan.

Dalam kes kami, nilai tindakan ISGOOFONTS_UPDATE_POST. Ini bermakna apa yang berlaku di sisi pelayan ditentukan oleh thewp_ajax_goofonts_update_posthook.

 add_action ('wp_ajax_goofonts_update_post', fungsi () {
  jika (isset ($ _post ['font'])) {
    / * jubin pos adalah nama font */
    $ title = wp_strip_all_tags ($ _post ['font'] ['family']);
    $ variants = $ _post ['font'] ['variants'];
    $ subsets = $ _post ['font'] ['subsets'];
    $ kategori = $ _post ['font'] ['kategori'];
    / * periksa sama ada siaran sudah ada */
    $ objek = get_page_by_title ($ title, 'object', 'post');
    jika (null === $ objek) {
      / * Buat catatan baru dan tetapkan kategori, varian dan subset sebagai tag */
      goofonts_new_post ($ title, $ kategori, $ varian, $ subsets);
    } else {
      / * Semak jika $ varian atau $ subset diubah */
      goofonts_update_post ($ objek, $ varian, $ subset);
    }
  }
});

fungsi goofonts_new_post ($ title, $ kategori, $ varian, $ subset) {
  $ post_id = wp_insert_post (array (
    'post_author' => 1,
    'post_name' => sanitize_title ($ title),
    'post_title' => $ tajuk,
    'post_type' => 'pos',
    'post_status' => 'draf',
    )
  );
  jika ($ post_id> 0) {
    / * Bahagian mudah penandaan;) tambah kategori font, varian dan subset (ketiga -tiga ini berasal dari API Google Fonts) sebagai tag */
    wp_set_object_terms ($ post_id, $ kategori, 'post_tag', benar);
    wp_set_object_terms ($ post_id, $ varian, 'post_tag', true);
    wp_set_object_terms ($ post_id, $ subsets, 'post_tag', true);
  }
}

Dengan cara ini, dalam masa kurang dari satu minit, kita berakhir dengan hampir seribu draf Post di papan pemuka-semuanya dengan beberapa tag yang sudah ada. Kita perlu mula menambah tag secara manual untuk setiap fon satu demi satu.
Editor WordPress lalai tidak masuk akal dalam kes ini. Apa yang kami perlukan adalah pratonton fon. Pautan ke halaman font di fonts.google.com juga berguna.

Acustom metaboxdoes pekerjaan dengan baik. Dalam kebanyakan kes, anda akan menggunakan kotak meta untuk elemen bentuk tersuai untuk menyimpan beberapa data tersuai yang berkaitan dengan jawatan. Malah, kandungan metabox boleh praktikal mana -mana HTML.

 fungsi display_font_preview ($ post) {
  / * Nama fon, contohnya fatface abril */
  $ font = $ post-> post_title;
  / * font seperti dalam URL, contohnya fatface abril */
  $ font_url_part = implode ('', meletup ('', $ font));
  ?>
  <dana> 
    <link href="<?%20php%20echo%20'https://fonts.googleapis.com/css?family='.%20%24%20font_url_part.%20'&%20paparan%20=%20swap';?>" rel="stylesheet">
    <header>
      <h2 id="php-echo-font-gt">  php echo $ font; ?> </h2>
      <a href="<?%20php%20echo%20'https://fonts.google.com/specimen/'.%20%24%20font_url_part;?>" target="_ blank" rel="noopener"> spesimen di Google Fonts </a>
    </header>
    <div contentedable="true" style="font-family: <? php echo $ font;?>">
      <p> Fox coklat cepat melompat ke atas anjing malas. </p>
      <p style="Text-Transform: Uppercase;"> Fox coklat cepat melompat ke atas anjing malas. </p>
      <p> 1 2 3 4 5 6 7 8 9 0 </p>
      <p> &! ; ? {} [] </p>
    </div>
  
 php}

add_action ('add_meta_boxes', fungsi () {
  add_meta_box (
    'font_preview', / * metabox id * /
    'Pratonton Font', / * Tajuk Metabox * /
    'Display_Font_Preview', / * Confen Callback * /
    'pos' / * di mana untuk memaparkan * /
  );
});</dana>

Tagging Font adalah tugas jangka panjang dengan banyak pengulangan. Ia juga memerlukan dos yang besar konsistensi. Itulah sebabnya kita bermula dengan menentukan satu set tag "pratetap." Itu boleh, contohnya:

 {
  / * ... */
  Komik: {
    Tags: 'komik, kasual, tidak rasmi, kartun'
  },
  kursif: {
    Tags: 'kursif, kaligrafi, skrip, manuskrip, tandatangan'
  },
  / * ... */
}

Seterusnya dengan beberapa CSS dan JavaScript tersuai, kami "menggodam" editor WordPress dan membentuk tag dengan memperkayakannya dengan set butang pratetap.

Bagaimana Kami Membinanya: Bahagian Akhir Depan (Menggunakan NuxtJS)

TheGoOfonts.cominterface direka Bysylvain Guizard, pereka Graphicandweb Perancis (yang menjadi suami saya). Kami mahukan sesuatu yang mudah dibezakan di kawasan "carian". Sylvain sengaja pergi untuk warna yang tidak jauh dari identiti Font Google. Kami sedang mencari keseimbangan antara membina sesuatu yang unik dan asli yang mengelirukan kekeliruan pengguna.

Walaupun idid tidak hesitatechoosing wordpress fortheback-end, idid not mahu menggunakannya di frontend. Kami mensasarkan pengalaman seperti aplikasi dan saya, secara peribadi, mahu kod dalam JavaScript, menggunakanvue.js khususnya.

Saya melihat contoh laman web yang menggunakan WordPress WordPress dan memutuskan untuk mencubanya. Pilihannya dibuat dengan segera. NUXTJS adalah rangka kerja Vue.js yang sangat popular, dan saya benar -benar menikmati kesederhanaan dan fleksibiliti.
Saya telah bermain -main dengan tetapan NUXTJS yang berbeza untuk berakhir dengan laman web statik 100%. Penyelesaian statik sepenuhnya merasakan yang paling berprestasi; pengalaman keseluruhan seolah -olah paling cair. Itu juga bermakna tapak WordPress saya hanya digunakan semasa proses membina. Oleh itu, ia boleh berjalan di localhost saya. Ini tidak dapat diabaikan kerana ia menghapuskan kos hosting dan yang paling penting, membolehkan saya melangkau konfigurasi WordPress yang berkaitan dengan keselamatan dan melegakan tekanan yang berkaitan dengan keselamatan;);)

Jika anda sudah biasa dengan NUXTJS, anda mungkin tahu bahawa generasi statik penuh tidak (namun) sebahagian daripada NUXTJS. Halaman Prerendered cuba mengambil data lagi apabila anda menavigasi.

Itulah sebabnya kita perlu "menggodam" generasi statik 100%. Dalam kes ini, kami menyimpan bahagian berguna data yang diambil ke AJSONFILE sebelum setiap proses membina. Ini mungkin, terima kasih Tonuxt Hooks, khususnya, cangkuk pembuatnya.

Cangkuk biasanya digunakan dalam modul NUXT:

 / * modul/terdahulu.js */

const fs = memerlukan ('fs')
const axios = memerlukan ('axios')

const sourcePath = 'http: //wpgoofonts.local/wp-json/wp/v2/'
Const Path = 'Static/Allfonts.json'

modul.exports = () => {
  / * Tulis data ke fail, menggantikan fail jika sudah ada */
  const storedata = (data, path) => {
    Cuba {
      Fs.WriteFileSync (Path, JSON.Stringify (data))
    } menangkap (err) {
      Console.error (err)
    }
  }
  fungsi async getData () {    
    const fetchedTags = menunggu axios.get (`$ {sourcePath} tags? per_page = 500`)
      .catch (e => {console.log (e); return false})
    
  / * Bina objek tag_id: tag_slug */
    tag const = fetchedtags.data.reduce ((acc, cur) => {
      acc [cur.id] = cur.slug
      kembali acc
    }, {})
    
  / * Kami ingin mengetahui jumlah atau halaman */
    const mhead = menunggu axios.head (`$ {sourcePath} posts? per_page = 100`)
      .catch (e => {console.log (e); return false})
    const totalPages = mhead.Headers ['X-WP-Totalpages']

  / * mari kita ambil semua fon */
    Biarkan fon = []
    Biarkan i = 0
    sementara (i <totalpages i const response="Tunggu" axios.get posts per_page="100" page="$" fonts.push.apply response.data dan mengurangkannya ke objek dengan entri seperti: roboto tags: ... fon="(fon)" .reduce el> {
      acc [el.slug] = {
        Nama: el.title.rendered,
        Tags: el.tags.map (i => tags [i]),
      }
      kembali acc
    }, {})

  / * Simpan objek fon ke fail .json */
    disimpan (fon, jalan)
  }

  / * pastikan ini berlaku sebelum setiap membina */
  this.nuxt.hook ('Bina: Sebelum', getData)
}</totalpages>

 / * nuxt.config.js */
modul.exports = {
  // ...
  BuildModules: [
    ['~ modul/terdahulu']
  ],
// ...
}

Seperti yang dapat anda lihat, kami hanya meminta senarai tag dan jawatan senarai.ThatMeans kami hanya menggunakan titik akhir API WordPressRest lalai, dan tiada konfigurasi diperlukan.

Pemikiran terakhir

Bekerja di Goofonts adalah pengembaraan jangka panjang. Ia juga jenis projek yang perlu dikekalkan secara aktif. Kami kerap terus menyemak fon Google untuk typefaces, subset, atau varian baru. Kami menandakan item baru dan mengemas kini pangkalan data kami. Baru -baru ini, saya benar -benar teruja untuk mengetahui bahawa Neuehas bersama keluarga. Kami juga mempunyai favs peribadi kami di kalangan spesimen yang kurang dikenali.

Sebagai jurulatih yang memberikan bengkel biasa, saya dapat melihat pengguna sebenar bermain dengan Goofonts. Pada peringkat projek ini, kami ingin mendapatkan sebanyak mungkin maklum balas. Kami akan suka Goofonts menjadi alat yang berguna, berguna dan intuitif untuk pereka web. Satu ciri tugasan adalah mencari font dengan namanya. Kami juga suka menambah kemungkinan untuk berkongsi set bookmark dan membuat pelbagai "koleksi" fon.

Sebagai pemaju, saya benar-benar menikmati aspek pelbagai disiplin projek ini. Ia adalah kali pertama saya bekerja dengan API REST WordPress, ia adalah projek besar pertama saya di Vue.js, dan saya belajar banyak tentang tipografi.

Adakah kita akan melakukan apa -apa yang berbeza jika kita boleh? Sudah tentu. Ia adalah proses pembelajaran. Sebaliknya, saya tidak fikir kita akan mengubah alat utama. Fleksibiliti kedua -dua wordpress dan nuxt.js terbukti menjadi pilihan yang tepat. Bermula hari ini, saya pasti akan mengambil masa untuk meneroka, dan saya mungkin akan melaksanakannya pada masa akan datang.

Saya harap anda dapati beberapa kaedah yang dibincangkan berguna. Seperti yang saya katakan sebelum ini, maklum balas anda sangat berharga. Jika anda mempunyai sebarang pertanyaan atau ucapan, sila beritahu saya dalam komen!

Atas ialah kandungan terperinci Bagaimana kami menandakan font Google dan mencipta goofonts.com. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!