Google 글꼴을 태그하고 Goofonts.com을 작성한 방법

Goofontsis 개발자 부인과 디자이너 남편이 서명 한 부수적 인 프로젝트, 둘 다 타이포그래피의 큰 팬입니다. 우리는 Google Fonts를 태그하고 올바른 글꼴을 검색하고 찾는 웹 사이트를 구축했습니다.

goofontsuses andnuxtjs (avue.js 프레임 워크)의 goofontsuses wordpress. Goofonts.com의 비하인드 스토리를 말하고 우리가 선택한 기술 과이 프로젝트에 적응하고 사용한 방법에 관한 몇 가지 기술 세부 정보를 공유하고 싶습니다.

왜 우리가 구포트를 지었는지

이 기사를 작성하는 순간에는 Google Fonts가 제공하는 977 개의 서체가 있습니다. TheGoogle Fonts Developer API를 사용하여 언제라도 정확한 숫자를 확인할 수 있습니다. 각 제품군에 사용 가능한 스타일 및 스크립트 목록을 포함하여 모든 글꼴의 동적 목록을 검색 할 수 있습니다.

Google Fonts 웹 사이트는 모든 글꼴을 미리 볼 수있는 아름다운 인터페이스를 제공하여 트렌드, 인기, 날짜 또는 이름으로 정렬합니다.

그러나 검색 기능은 어떻습니까?

Serif, Sans-Serif, Display, 필기 및 Monospace의 5 가지 범주 씩 글꼴을 포함하고 제외 할 수 있습니다.

스크립트 내에서 검색 할 수 있습니다 (Ovelatin Extended, Cyrillic 또는 Devanagari (Google Fonts의 서브 세트)를 검색 할 수 있지만 한 번에 여러 하위 세트 내에서 검색 할 수는 없습니다.

두께, 경사, 너비 및“스타일의 숫자”의 네 가지 속성으로 검색 할 수 있습니다. 변형 이라고도하는 스타일은 스타일 (이탈리아 규칙)과 가중치 (100,200, 최대 900)를 나타냅니다. 종종 신체 글꼴에는 규칙적, 대담 하고 이탤릭체의 세 가지 변형이 필요합니다. "스타일의 숫자"속성은 많은 변형이있는 글꼴을 분류하지만 "일반, 대담한 이탤릭체"콤보에서 나오는 글꼴을 선택할 수는 없습니다.

쿼리를 입력 할 수있는 사용자 정의 검색 필드도 있습니다. 불행히도 검색은 글꼴의 이름보다 독점적으로 수행됩니다. 따라서 결과에는 Google Fonts 이외의 서비스에서 독창적 인 글꼴 패밀리가 포함됩니다.

"만화"쿼리를 예로 들어합시다. 외부 파운드리 리노 타입에서 "만화 스크립트"가 발생합니다.

나는 두 개의 고도로 양식화 된 서체를 요구하는 프로젝트를 수행하는 것을 기억할 수 있습니다. 하나는 올드 와일드 웨스트 (Old Wild West)를 불러 일으키고 다른 하나는 시나리오를 모방했습니다. Google 글꼴을 태그하기로 결정한 순간이었습니다. :)

행동중인 구폰트

Goofonts의 작동 방식을 보여 드리겠습니다. 오른쪽의 어두운 사이드 바는 "검색"영역입니다. 검색 필드에 키워드를 입력 할 수 있습니다. 이는 "및"검색을 수행합니다. 예를 들어, 만화 와 슬래브의 글꼴을 찾을 수 있습니다.

우리는 많은 키워드를 직접 선택했습니다. 키워드를 클릭하십시오! 프로젝트에 특정 서브 세트가 필요한 경우 서브 세트 섹션에서 확인하십시오. 또한 글꼴에 필요한 모든 변형을 확인할 수도 있습니다.

글꼴이 마음에 들면 하트 아이콘을 클릭하면 브라우저의 로컬 스터에 저장됩니다. 코드를 사용하여 goofonts.com/bookmarkspage.together에서 북마크 된 글꼴을 찾을 수 있습니다.

우리가 그것을 구축 한 방법 : WordPress 부분

우선, 각 글꼴을 미리보고 태그를 붙일 수있는 Kind ofinterface가 필요했습니다. 또한 thosetags를 저장하기 위해 데이터베이스가 필요했습니다.

WordPress에 대한 경험이있었습니다. 또한 WordPress는 REST API와 함께 제공되며, 이는 프론트 엔드의 데이터를 처리 할 수있는 여러 가능성을 열어줍니다. 초래가 빨리 만들어졌습니다.

나는 가장 간단한 가능한 초기 설정을 위해 갔다. 각 글꼴은 게시물이며 키워드에 포스트 태그를 사용합니다. Acustom Post 타입은 또한 작동했지만 데이터에 대해서만 WordPress를 사용하고 있기 때문에 기본 콘텐츠 유형은 완벽하게 작동합니다.

분명히, 우리는 모든 글꼴을 프로그래밍 방식으로 추가해야했습니다. 우리는 또한 새로운 글꼴 추가 또는 새로운 사용 가능한 변형 및 서브 세트 추가를 포함하여 프로그래밍 방식으로 프로그래밍 방식으로 업데이트 할 수 있어야했습니다.

아래에 설명 된 접근법은 외부 API를 통해 사용할 수있는 다른 데이터에 유용 할 수 있습니다. Custom WordPress 플러그인에서 API에서 업데이트를 확인할 수있는 메뉴 페이지를 등록합니다. 단순화하기 위해 페이지에는 제목, 업데이트를 활성화하는 버튼 및 시각적 피드백을위한 진행률 표시 줄이 표시됩니다.

 /**
 * 사용자 정의 메뉴 페이지를 등록하십시오. 
 */
함수 레지스터 _custom_menu_page () {
  add_menu_page ( 
    'Google Fonts to WordPress', 
    'wp goofonts', 
    'manage_options', 
    'wp-goofonts-menu', 
  함수 () {?>        
    <h1 id="Google-Fonts-API"> Google Fonts API </h1>
     실행 
    <p> </p>        
     
   php}
  );
}
add_action ( 'admin_menu', 'register_custom_menu_page');

JavaScriptPart를 작성하여 시작하겠습니다. WordPress와 함께 Ajax를 사용하는 대부분의 예는 jQuery 및 jQuery.ajaxmethod를 구현하지만, jQuery 없이도 동일하게 얻을 수 있습니다.

우리는로드 잉택시오 앤 Qs 다음에 맞춤형 스크립트 바닥 글을 toload하고 싶습니다 .

 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', 배열 ( 'axios', 'qs'), '1.0.0', true);
});

JavaScript가 어떻게 보일지 살펴 보겠습니다.

 const button = document.getElementById ( 'wp-goofonts-button')
const info = document.getElementById ( 'info')
const progress = document.getElementById ( 'Progress')
const updater = {
  TotalCount : 0,
  총 체크 : 0,
  업데이트 : [],
  초기 : Async function () {
    노력하다 {
      const allfonts = await 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 함수 (els, index) {
    if (index === this.totalCount) {
      반품
    }                
    const data = {
      조치 : 'goofonts_update_post',
      글꼴 : ELS [색인],
    }
    노력하다 {
       const apirequest = await axios.post (ajaxurl, qs.stringify (data))
       this.totalChecked  
       progress.setattribute ( 'value', math.round (100*this.totalChecked/this.totalCount)))
       this.updatepost (ELS, 색인 1)
    } catch (e) {
       Console.error (E)
      }
   }
}

button.addeventListener ( 'click', () => {
  updater.init ()
})

TheinitMethod는 GoogleFonts API에 요청합니다. API의 데이터를 사용할 수있게되면 WordPress 서버에 대한 게시물 요청에서 소집 된 글꼴을 보내는 재귀 비동기 비동기 동성 업이기를 호출합니다.

이제 WordPress가 특정 방식으로 Ajax를 구현한다는 것을 기억하는 것이 중요합니다. 우선, 각 요청은 towp-admin/admin-ajax.php를 보내야합니다 . 이 URL은 관리 영역에서 글로벌 JavaScriptVariaBleAjaxUrl로 제공됩니다 .

둘째, 모든 WordPress AJAX 요청에는 데이터에 ANACTIONARGUMENT가 포함되어야합니다. 작업 값은 서버 측에서 사용될 후크 태그를 결정합니다.

우리의 경우, 동작 값 isgoofonts_update_post. 즉, 서버 측에서 발생하는 일은 thewp_ajax_goofonts_update_posthook에 의해 결정됩니다.

 add_action ( 'wp_ajax_goofonts_update_post', function () {
  if (isset ($ _post [ 'font'])) {
    / * 포스트 타일은 글꼴의 이름입니다 */
    $ title = wp_strip_all_tags ($ _post [ 'font'] [ 'family']);
    $ variants = $ _post [ 'font'] [ 'variants'];
    $ subsets = $ _post [ 'font'] [ 'subsets'];
    $ 카테고리 = $ _post [ 'font'] [ 'category'];
    / * 게시물이 이미 존재하는지 확인하십시오 */
    $ object = get_page_by_title ($ title, 'object', 'post');
    if (null === $ 객체) {
      / * 새 게시물을 작성하고 카테고리, 변형 및 서브 세트를 태그로 설정하십시오 */
      goofonts_new_post ($ 제목, $ 카테고리, $ 변형, $ 하위 세트);
    } 또 다른 {
      / * $ 변형 또는 $ 하위 세트가 변경되었는지 확인 */
      goofonts_update_post ($ 객체, $ variants, $ subsets);
    }
  }
});

함수 goofonts_new_post ($ 제목, $ 카테고리, $ variants, $ subsets) {
  $ post_id = wp_insert_post (배열
    'post_author'=> 1,
    'post_name'=> sanitize_title ($ title),
    'post_title'=> $ 제목,
    'post_type'=> 'post',
    'post_status'=> 'draft',
    ))
  );
  if ($ post_id> 0) {
    / * 태깅의 쉬운 부분;) 글꼴 카테고리, 변형 및 서브 세트 (이 세 가지는 Google Fonts 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 천 개의 포스트 드래프트로 끝납니다. 모두 이미 몇 개의 태그가 제자리에 있습니다. 그리고 그것이 프로젝트의 가장 중요한 부분이 시작되는 순간입니다. 각 글꼴에 대한 태그를 하나씩 수동으로 추가해야합니다.
이 경우 기본 WordPress 편집기는별로 의미가 없습니다. 우리가 필요로하는 것은 글꼴 미리보기입니다. fonts.google.com의 글꼴 페이지에 대한 링크도 편리합니다.

Acustom은 그 일을 잘 대담합니다. 대부분의 경우 사용자 정의 양식 요소에 메타 상자를 사용하여 게시물과 관련된 몇 가지 사용자 정의 데이터를 저장합니다. 실제로, 대사의 내용은 실제로 모든 HTML 일 수 있습니다.

 함수 display_font_preview ($ post) {
  / * 글꼴 이름, 예를 들어 Abril Fatface */
  $ font = $ post-> post_title;
  / * URL에서와 같이 글꼴, 예를 들어 Abril Fatface */
  $ font_url_part = infford ( '', Explode ( '', $ font));
  ?>
  <div> 
    <link href="<?%20php%20echo%20'https://fonts.googleapis.com/css?family='.%20%24%20font_url_part.%20'&%20display%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"> Google fonts의 시편 </a>
    헤더>
    <div contenteditable="true" style="font-family : <? php echo $ font;?>">
      <p> 빠른 갈색 여우가 게으른 개 위로 뛰어 올라. </p>
      <p style="text-transform : 대문자;"> 빠른 갈색 여우가 게으른 개 위로 뛰어 들었습니다. </p>
      <p> 1 2 3 4 5 6 7 8 9 0 </p>
      <p> &! ; ? {} [] </p>
    </div>
  </header>
</div>
 php}

add_action ( 'add_meta_boxes', function () {
  add_meta_box (
    'font_preview', / * metabox id * /
    '글꼴 미리보기', / * metabox 제목 * /
    'display_font_preview', / * 컨텐츠 콜백 * /
    'POST' / * 표시 할 위치 * /
  );
});

태깅 글꼴은 많은 반복이있는 장기 작업입니다. 또한 많은 양의 일관성이 필요합니다. 그렇기 때문에 우리는 일련의 태그 "사전 설정"세트를 정의하여 시작했습니다. 예를 들어 다음과 같습니다.

 {
  / * ... */
  만화 : {
    태그 : '만화, 캐주얼, 비공식, 만화'
  },
  필기체 : {
    태그 : '필기체, 서예, 대본, 원고, 서명'
  },
  / * ... */
}

다음으로 일부 사용자 정의 CS 및 JavaScript를 사용하여 WordPress 편집기를 "해킹"했으며 사전 설정 버튼 세트로 풍부하게하여 태그 양식을 작성했습니다.

우리가 구축 한 방법 : 프론트 엔드 파트 (nuxtjs 사용)

thegoofonts.cominterface는 프랑스 그래픽 앤드웨이 디자이너 인 Sysylvain Guizard (내 남편이 될 것입니다)에 의해 설계되었습니다. 우리는 "검색"영역을 구별하는 단순한 것을 원했습니다. Sylvain은 Google Fonts Identity에서 그리 멀지 않은 색상을 고의적으로갔습니다. 우리는 독특하고 독창적 인 사용자 혼동을 구축하는 것 사이의 균형을 찾고있었습니다.

Idid는 theback-end를 위해 WordPress를 망설이지 않지만 Idid는 Frontend에서 사용하고 싶지 않습니다. 우리는 앱과 같은 경험을 목표로하고 있었고 개인적으로는 vue.js를 사용하여 JavaScript로 코딩하기를 원했습니다.

나는 WordPress와 함께 nuxtjswith를 사용하여 웹 사이트의 예를 발견하고 그것을 시도하기로 결정했습니다. 선택은 즉시 이루어졌습니다. nuxtjs는 매우 인기있는 vue.js 프레임 워크이며 단순성과 유연성을 정말 좋아합니다.
나는 100% 정적 웹 사이트로 끝나기 위해 다른 nuxtjs 설정을 가지고 놀았습니다. 완전 정적 솔루션은 가장 성능이 가장 높은 것으로 느껴졌습니다. 전반적인 경험이 가장 유동적 인 것처럼 보였습니다. 이는 또한 내 WordPress 사이트가 빌드 프로세스 중에 만 사용된다는 것을 의미합니다. 따라서 내 지역 호스트에서 실행할 수 있습니다. 호스팅 비용을 제거하고 무엇보다도 보안 관련 WordPress 구성과 보안 관련 응력의 안심을 건너 뛸 수 있기 때문에 이것은 무시할 수 없습니다.);)

nuxtjs에 익숙하다면, 전체 정적 생성이 아직 nuxtjs의 일부가 아니라는 것을 알고있을 것입니다. 사전 페이지는 탐색 할 때 데이터를 다시 가져 오려고합니다.

그렇기 때문에 우리는 어떻게 든 100% 정적 생성을“해킹”해야합니다. 이 경우 각 빌드 프로세스 전에 페치 된 데이터의 유용한 부분을 AjsonFile에 저장하고 있습니다. Tonuxt 후크, 특히 Itsbuilder Hooks에게 감사합니다.

후크는 일반적으로 nuxt 모듈에서 사용됩니다.

 / * 모듈/preverbuild.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 함수 getData () {    
    const fetchedtags = await axios.get (`$ {sourcepath} tags? 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
    }, {})
    
  / * 우리는 총 번호 또는 페이지를 알고 싶습니다 */
    const mhead = await axios.head (`$ {sourcepath} posts? per_page = 100`)
      .catch (e => {console.log (e); return false})
    const totalpages = mhead.headers [ 'x-wp-totalpages']

  / * 모든 글꼴을 가져 오자 */
    글꼴을하자 = []
    i = 0을 봅시다
    while (i <totalpages const response="await" axios.get posts per_page="100" page="$" fonts.push.apply .data fonts="(fonts)" .reduce el> {
      acc [el.slug] = {
        이름 : el.title.rendered,
        태그 : el.tags.map (i => 태그 [i]),
      }
      반품 ACC
    }, {})

  / * 글꼴 객체를 .json 파일에 저장 */
    Storedata (글꼴, 경로)
  }

  / * 각 빌드 전에 발생하는지 확인하십시오 */
  this.nuxt.hook ( '빌드 : 이전', getData)
}</totalpages>

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

보시다시피, 우리는 태그 목록과 목록 게시물 만 요청합니다. 기본 wordPressRest API 엔드 포인트 만 사용하며 구성이 필요하지 않습니다.

최종 생각

Goofonts에서 일하는 것은 장기적인 모험이었습니다. 또한 적극적으로 유지 해야하는 것은 이런 종류의 프로젝트입니다. 우리는 정기적으로 새로운 서체, 서브 세트 또는 변형에 대한 Google 글꼴을 계속 확인합니다. 새 항목을 태그하고 데이터베이스를 업데이트합니다. 최근에, 나는 Bebas Neuehas가 가족을 공동으로 발견하게되어 진정으로 흥분했습니다. 우리는 또한 훨씬 덜 알려진 표본 중에서도 개인적인 fav를 가지고 있습니다.

정기적 인 워크샵을 제공하는 트레이너로서 실제 사용자가 Goofonts를 사용하는 것을 관찰 할 수 있습니다. 이 프로젝트 의이 단계에서 가능한 한 많은 피드백을 받고 싶습니다. 우리는 Goofonts가 웹 디자이너에게 유용하고 편리하며 직관적 인 도구가되기를 좋아합니다. 할 일 기능 중 하나는 이름으로 글꼴을 검색하고 있습니다. 또한 북마크 세트를 공유하고 글꼴의 여러 "수집"을 생성 할 가능성을 추가하고 싶습니다.

개발자로서 저는이 프로젝트의 다 분야 측면을 진정으로 즐겼습니다. WordPress Rest API와 함께 처음 일했던 것은 Vue.js에서 첫 번째 큰 프로젝트였으며 타이포그래피에 대해 많은 것을 배웠습니다.

우리가 할 수 있다면 다르게 무엇을할까요? 전적으로. 학습 과정이었습니다. 반면에, 나는 우리가 주요 도구를 바꿀 것이라고 생각하지 않습니다. WordPress와 Nuxt.js의 유연성은 올바른 선택으로 판명되었습니다. 오늘부터 나는 탐색하기 위해 시간이 걸렸을 것입니다. 그리고 아마도 앞으로 그것을 구현할 것입니다.

논의 된 방법 중 일부가 유용하다는 것을 알기를 바랍니다. 앞에서 말했듯이, 당신의 의견은 매우 소중합니다. 질문이나 발언이 있으시면 의견에 알려주십시오!

위 내용은 Google 글꼴을 태그하고 Goofonts.com을 작성한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!