Goofontsis開発者妻とデザイナー夫によって署名されたサイドプロジェクト。どちらもタイポグラフィの大ファンです。 Fontsandをタグ付けしてきました。これにより、適切なフォントを検索して見つけやすくするWebサイトが作成されました。

フロントエンドのバックエンドおよびnuxtjs（avue.jsフレームワーク）のgoofontsuses wordpress。 Goofonts.comの背後にあるストーリーをお話しし、私たちが選択したテクノロジーと、このプロジェクトにどのように適応して使用したかに関するいくつかの技術(shù)的な詳細を共有したいと思います。

Goofontsを構(gòu)築した理由

この記事を書いている時點で、Google Fontsが提供する977の書體があります。 TheGoogle Fonts Developer APIを使用して、いつでも正確な番號を確認できます。すべてのフォントの動的リストを取得できます。

Google Fonts Webサイトには、すべてのフォントをプレビューし、トレンド、人気、日付、または名前で並べ替えることができる美しいインターフェイスがあります。

しかし、検索機能はどうですか？

Serif、Sans-Serif、ディスプレイ、手書き、およびMonospaceの5つのカテゴリでフォントを含めて除外できます。

スクリプト內(nèi)で検索できます（拡張、キリル語、またはDevanagari（Googleフォントのサブセットと呼ばれる）。ただし、複數(shù)のサブセット內(nèi)で一度に検索することはできません。

厚さ、スラント、幅、「幅スタイル」の4つのプロパティで検索できます。バリアントとも呼ばれるスタイルは、スタイル（イタリコールレギュラー）とウェイト（100,200、最大900）の両方を指します。多くの場合、ボディフォントには、通常、太字、斜體の3つのバリエーションが必要です。 「スタイルの數(shù)字」プロパティは、多くのバリエーションを備えたフォントを整理しますが、「通常の大膽な、斜體」コンボにあるフォントを選択することはできません。

また、クエリを入力できるカスタム検索フィールドもあります。殘念ながら、検索はフォントの名前のみで実行されます。したがって、結(jié)果には、Googleフォント以外のサービスからFontファミリが獨自に含まれています。

例として「漫畫」のクエリを取りましょう。その結(jié)果、外部鋳造リノタイプから「漫畫」が生じます。

2つの高度に様式化された書體を要求したプロジェクトに取り組んだことを覚えています。1つは古いワイルドウェストを呼び起こし、もう1つは腳本を模倣しています。それは私がGoogleフォントにタグを付けることにした瞬間でした。:)

Goofonts in Action

Goofontsの仕組みをお見せしましょう。右側(cè)の暗いサイドバーは、「検索」領(lǐng)域です。検索フィールドにキーワードを入力できます。これにより、「と」検索が実行されます。たとえば、一度に漫畫とスラブのフォントを探すことができます。

キーワードの束を引き出しました。それらのいずれかをクリックします。プロジェクトに特定のサブセットが必要な場合は、サブセットセクションで確認してください。また、フォントに必要なすべてのバリエーションを確認することもできます。

フォントが好きな場合は、そのハートアイコンをクリックすると、ブラウザのLocalStorageに保存されます。 goofonts.com/bookmarkspage.togetherでブックマークされたフォントを見つけることができます。それらを埋め込む必要があるかもしれません。

私たちがそれを構(gòu)築する方法：WordPress部分

開始するには、各フォントをプレビューしてタグ付けできるインターフェイスが必要でした。また、Thosetagsを保存するためにデータベースも必要でした。

WordPressの経験がありました。さらに、WordPressにはREST APIが付屬しており、フロントエンドのデータを処理するための複數(shù)の可能性が開きます。 thatchoiceは迅速に作られました。

私は最も簡単な可能な初期セットアップに行きました。各フォントは投稿であり、キーワードに投稿タグを使用します。 Acoustom Post Typecは同様に機能するはずですが、データにのみWordPressを使用しているため、デフォルトのコンテンツタイプは完全に機能します。

明らかに、すべてのフォントをプログラムで追加する必要がありました。また、新しいものを追加したり、利用可能な新しいバリアントやサブセットを追加したりするなど、フォントをプログラム的に更新できる必要がありました。

以下に説明するアプローチは、外部APIを介して利用可能な他のデータで役立ちます。カスタムWordPressプラグインでは、APIからの更新を確認できるメニューページを登録します。簡単にするために、ページにはタイトル、更新をアクティブにするボタン、および視覚的なフィードバックのために進行狀況バーが表示されます。

 /**
 *カスタムメニューページを登録します。 
 */
function Register_custom_menu_page（）{
  add_menu_page（ 
    「WordPressへのGoogleフォント」、 
    「WP Goofonts」、 
    「manage_options」、 
    'wp-goofonts-menu'、 
  function（）{？>        
    <h1> GoogleフォントAPI </h1>
    実行
    <p> </p>        
    <progress max="100" value="0"> </progress>
  <p><br> JavaScriptPartを書くことから始めましょう。 AjaxをWordPressを使用して使用する例のほとんどは、jQueryとthejquery.ajaxmethodを?qū)g裝しますが、データのシリアル化を使用して、Jqueryを使用せずに同じことを取得できます。</p><p> LoadingAxioSandqsの後、カスタムスクリプトインチフッターをtoloadしたいです<em>。</em></p><pre rel="PHP" data-line=""> 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__）。
}）;

JavaScriptがどのように見えるかを見てみましょう：

 const button = document.getElementById（ 'WP-GOOFONTS-BUTTON'）
const info = document.getElementById（ 'Info'）
const Progress = document.getElementById（ 'Progress'）
constupdater = {
  TotalCount：0、
  Total -checked：0、
  更新：[]、
  init：async function（）{
    試す {
      const allfonts = wait axios.get（ 'https://www.googleapis.com/webfonts/v1/webfonts?key=api_key&sort=date'）
      this.totalcount = allfonts.data.items.length
      info.textContent = `fetched $ {this.totalcount} fonts.`
      this.updatePost（allfonts.data.items、0）
    } catch（e）{
      console.error（e）
    }
  }、
  updatepost：async function（els、index）{
    if（index === this.totalcount）{
      戻る
    }                
    const data = {
      アクション： 'gooofonts_update_post'、
      フォント：els [index]、
    }
    試す {
       const apirequest = 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は、thegooglefonts APIにリクエストを行います。 APIからのデータが利用可能になったら、WordPressサーバーへのPOSTリクエストでSansanIndidividualフォントを送信する再帰的な非同期PostMethodを呼び出します。

現(xiàn)在、WordPressがAjaxを特定の方法で実裝することを覚えておくことが重要です。まず第一に、各リクエストはtowp-admin/admin-ajax.phpを送信する必要があります。このURLは、グローバルJavaScriptvariableajaxurlとして管理エリアで利用できます。

第二に、すべてのWordPress Ajax要求には、データにAnactionArgumentを含める必要があります。アクションの値は、サーバー側(cè)で使用されるフックタグを決定します。

私たちの場合、アクション値はasgoofonts_update_postです。つまり、サーバー側(cè)で起こることは、thewp_ajax_goofonts_update_poshookによって決定されます。

 add_action（ 'wp_ajax_goofonts_update_post'、function（）{
  if（isset（$ _post ['font']））{
    / * POSTタイルはフォントの名前です */
    $ title = wp_strip_all_tags（$ _post ['font'] ['family']）;
    $ variants = $ _post ['font'] ['variants'];
    $ subsets = $ _post ['font'] ['Subsets'];
    $ category = $ _post ['font'] ['category'];
    / *投稿が既に存在するかどうかを確認 */
    $ object = get_page_by_title（$ title、 'object'、 'post'）;
    if（null === $ object）{
      / *新しい投稿とセットカテゴリ、バリアント、サブセットをタグとして作成します */
      gooofonts_new_post（$ title、$ category、$ variants、$ subsets）;
    } それ以外 {
      / * $バリアントまたは$サブセットが変更されたかどうかを確認 */
      Goofonts_update_post（$ object、$ variants、$ subsets）;
    }
  }
}）;

function gooofonts_new_post（$ title、$ category、$ variants、$ subsets）{
  $ post_id = wp_insert_post（array（
    'post_author' => 1、
    'post_name' => sanitize_title（$ title）、
    'post_title' => $タイトル、
    'post_type' => 'post'、
    'post_status' => 'ドラフト'、
    ））
  ）;
  if（$ post_id> 0）{
    / *タグ付けの簡単な部分;）フォントカテゴリ、バリエーション、サブセット（これら3つはGoogleフォントAPIから來ています）をタグとして追加します */
    wp_set_object_terms（$ post_id、$ category、 'post_tag'、true）;
    wp_set_object_terms（$ post_id、$ variants、 'post_tag'、true）;
    wp_set_object_terms（$ post_id、$ subsets、 'post_tag'、true）;
  }
}

このようにして、1分も経たないうちに、ダッシュボードのドラフトをほぼ1,000人のポストドラフトにすることになります。それらはすべて、いくつかのタグが既に設(shè)置されています。それは、プロジェクトの重要で最も時間のかかる部分が始まる瞬間です。各フォントのタグを1つずつ手動で追加する必要があります。
この場合、デフォルトのWordPressエディターはあまり意味がありません。必要なのは、フォントのプレビューです。 fonts.google.comのフォントのページへのリンクも便利です。

Acaustom Metaboxdoは仕事を非常にうまくいきます。ほとんどの場合、カスタムフォーム要素にメタボックスを使用して、投稿に関連するカスタムデータを保存します。実際、メタボックスの含有量は、実際にはすべてのHTMLである可能性があります。

関數(shù)display_font_preview（$ post）{
  / *フォント名、たとえばAbril Fatface */
  $ font = $ post-> post_title;
  / * urlのようにフォント、たとえばablil fatface */
  $ font_url_part = inprode（ ''、Explode（ ''、$ font））;
  ？>
  <div> 
    <link href="<%EF%BC%9Fphp%20echo%20'https://fonts.googleapis.com/css?family='%E3%80%82%24%20font_url_part%E3%80%82%20'%EF%BC%86display%20=%20swap';%EF%BC%9F>" rel="styleSheet">
    
      <h2>  </h2>
      <a href="<%EF%BC%9Fphp%20echo%20'https://fonts.google.com/specimen/'%E3%80%82%24%20font_url_part;%EF%BC%9F>" blank rel="noopener"> Google fonts </a>
    
    <div contentedable="true" style="font-family：<？php echo $ font;？>">
      <p>クイックブラウンフォックスは怠zyな犬を飛び越えます。</p>
      <p style="Text-Transform：大文字;">クイックブラウンフォックスが怠zyな犬を飛び越えます。</p>
      <p> 1 2 3 4 5 6 7 8 9 0 </p>
      <p>＆！ ; ？ {} [] </p>
    </div>
  </div>
<p>タグ付けフォントは、多くの繰り返しを伴う長期的なタスクです。また、大量の一貫性が必要です。そのため、タグ「プリセット」のセットを定義することから始めました。たとえば、それは次のとおりです。</p><pre rel="JavaScript" data-line=""> {
  / * ... */
  コミック：{
    タグ：「コミック、カジュアル、非公式、漫畫」
  }、
  筆記體：{
    タグ：「筆記體、書道、臺本、原稿、署名」
  }、
  / * ... */
}

次に、いくつかのカスタムCSSとJavaScriptを使用して、プリセットボタンのセットで濃縮することにより、WordPressエディターとタグフォームを「ハッキング」しました。

私たちがそれを構(gòu)築する方法：フロントエンドパーツ（nuxtjsを使用）

thegoofonts.cominterfaceは、フランスのグラフィックアンドウェブデザイナー（たまたま私の夫）であるシルヴァンギザードによって設(shè)計されました。私たちは、「検索」領(lǐng)域を際立たせたシンプルウィッタが欲しかった。 Sylvainは、Google Fontsのアイデンティティからそれほど遠くない色に意図的に行きました。私たちは、ユーザーの混亂を招くユニークなものとオリジナルのものを構(gòu)築することのバランスを探していました。

IdidはhesitateCoing WordPress fortheTheback-endではありませんが、Ididはフロントエンドでそれを使用したくありません。私たちはアプリのようなエクスペリエンスを目指していましたが、私は個人的には、特にvue.jsを使用してJavaScriptでコーディングしたいと考えていました。

WordPressを使用してWebサイトの例に出くわし、試してみることにしました。選択はすぐに行われました。 Nuxtjsは非常に人気のあるVue.jsフレームワークであり、そのシンプルさと柔軟性を本當に楽しんでいます。
100％の靜的なWebサイトで終わるために、さまざまなNuxtJS設(shè)定を走り回っています。完全に靜的なソリ??ューションは最もパフォーマンスが高いと感じました。全體的なエクスペリエンスは最も流動的であるように見えました。つまり、ワードプレスサイトはビルドプロセス中にのみ使用されることを意味します。したがって、それは私のローカルホストで実行できます。ホスティングコストを排除するため、これは無視できません。何よりも、セキュリティ関連のWordPress構(gòu)成をスキップして、セキュリティ関連のストレスの緩和を軽減できます。）

Nuxtjsに精通している場合、おそらく完全な靜的生成は（まだ）Nuxtjsの一部ではないことを知っています。プレレンダリングされたページは、ナビゲートするときに再度データを取得しようとします。

だからこそ、私たちは何らかの形で100％の靜的生成を「ハッキング」しなければなりません。この場合、各ビルドプロセスの前に、フェッチされたデータの有用な部分をAjsonfileに保存しています。これは、特にそのビルダーフックに感謝します。

フックは通常、NUXTモジュールで使用されます。

 / * modules/beforedbuild.js */

const fs = require（ 'fs'）
const axios = require（ 'axios'）

const sourcepath = 'http：//wpgoofonts.local/wp-json/wp/v2/'
const path = 'static/allfonts.json'

module.exports =（）=> {
  / *ファイルにデータを書き込み、既に存在する場合はファイルを置き換えます */
  const storedata =（data、path）=> {
    試す {
      fs.writefilesync（path、json.stringify（data））
    } catch（err）{
      console.error（err）
    }
  }
  async関數(shù)getData（）{    
    const fetchedtags = axios.get（ `$ {sourcePath}タグ？per_page = 500`）
      .catch（e => {console.log（e）; return false}）
    
  / * tag_idのオブジェクトを作成：tag_slug */
    const tags = fetchedtags.data.reduce（（acc、cur）=> {
      acc [cur.id] = cur.slug
      ACCを返します
    }、{}）
    
  / *総數(shù)またはページを知りたい */
    const mhead = axios.head（ `$ {sourcePath}投稿？per_page = 100`）
      .catch（e => {console.log（e）; return false}）
    const totalpages = mhead.headers ['x-wp-totalpages']

  / *すべてのフォントを取得しましょう */
    fonts = []
    i = 0とします
    while（i <totalpages const response="wait" axios.get post fonts.push.apply fonts="（fonts）.reduce（（acc、el）="> {
      acc [el.slug] = {
        名前：el.title.rendered、
        タグ：el.tags.map（i => tags [i]）、
      }
      ACCを返します
    }、{}）

  / *フォントオブジェクトを.jsonファイルに保存 */
    保存された（フォント、パス）
  }

  / *各ビルドの前にこれが起こることを確認してください */
  this.nuxt.hook（ 'build：before'、getData）
}</totalpages>

 / * nuxt.config.js */
module.exports = {
  // ...
  buildmodules：[
    ['?モジュール/beforebuild']
  ]、、
// ...
}

ご覧のとおり、タグのリストとリスト投稿のみをリクエストします。習(xí)得したことは、デフォルトのWordPressRest APIエンドポイントのみを使用し、構(gòu)成は必要ありません。

最終的な考え

Goofontsに取り組むことは長期的な冒険でした。また、積極的に維持する必要があるのは、この種のプロジェクトでもあります。新しい書體、サブセット、またはバリアントのGoogleフォントを定期的にチェックし続けています。新しいアイテムにタグを付けてデータベースを更新します。最近、私は家族と共同で共同であることを発見することに本當に興奮していました。また、あまり知られていない標本の中に個人的なお気に入りがあります。

定期的なワークショップを提供するトレーナーとして、Goofontsで遊んでいる実際のユーザーを観察できます。プロジェクトのこの段階では、できるだけ多くのフィードバックを取得したいと考えています。 Goofontsは、Webデザイナーにとって便利で便利で直感的なツールであることを望んでいます。ToDo機能の1つは、その名前でフォントを検索しています。また、ブックマークされたセットを共有し、フォントの複數(shù)の「コレクション」を作成する可能性を追加したいと思います。

開発者として、私はこのプロジェクトの學(xué)際的な側(cè)面を本當に楽しんだ。 WordPress Rest APIで作業(yè)したのは初めてでした。Vue.jsでの最初の大きなプロジェクトであり、タイポグラフィについて多くのことを?qū)Wびました。

できれば、何か違うことをしますか？絶対に。それは學(xué)習(xí)プロセスでした。一方、メインツールを変更するとは思いません。 WordPressとnuxt.jsの両方の柔軟性が正しい選択であることが証明されました。今日から始めて、私は間違いなくグラフクルを探索するのに時間がかかりました。おそらく將來それを?qū)g裝するでしょう。

議論された方法のいくつかが役立つと思うことを願っています。前にも言ったように、あなたのフィードバックは非常に貴重です。質(zhì)問や発言がある場合は、コメントでお知らせください！

以上がGoogle Fontsをタグ付けし、Goofonts.comを作成する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。