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