Cara Menggunakan Google Fonts Tanpa Plugin

791

Cara Menggunakan Google Fonts Tanpa Plugin

Inilah bagian intinya. Seperti yang saya katakan sebelumnya, bagian ini dimulai dengan bagian pertama yakni dengan memasukkan code secara manual.

1. Buka functions.php file theme yang sedang Anda gunakan melalui Dashboard => Appearance => Editor dan pilih functions.php kemudian masukkan code di bawah ini:

Butuh VPN gratis kualitas premium? Dengan Moove VPN, semua konten di internet bisa diakses tanpa batas!

Copy Code Berikut
include( get_template_directory() . ‘/gwf-options.php’);

Code di atas berguna untuk memanggil fungsi gwf-options.php agar nantinya menu baru Google Fonts yang kita buat terlihat di Dashboard blog Anda, tepatnya di bagian bawah. Save Changes jika sudah.

Baca Juga: Cara Memasang Facebook Messenger di Blog

2. Di bagian ini kita akan membuat menu dan submenu Google Fonts itu sendiri, tentu untuk membuat fitur ini berfungsi sebagaimana tujuan kita. Masukkan code berikut ini ke dalam file gwf-options.php yang tadi Anda buat:

///////////////////////////////////////////////////////////////////////
// Membuat Menu Google Fonts di Dashboard
///////////////////////////////////////////////////////////////////////
function register_google_webfonts_menu(){
/* tambahkan menu utama untuk Google Fonts */
add_menu_page( 'Google Web Fonts', 'GW Fonts', 'manage_options', 'google-fonts-settings', 'wp_gwf_fonts_settings', get_template_directory_uri() . '/google.png' , 100 );

/* add sub menu - settings for GWF */
add_submenu_page('google-fonts-settings', 'GWF Settings', 'GWF Settings Page', 'manage_options', 'google-fonts-settings', 'wp_gwf_fonts_settings');

/* add sub menu - updates for GWF */
add_submenu_page('google-fonts-settings', 'GWF Update', 'GWF Update Page', 'manage_options', 'google-fonts-update', 'wp_gwf_fonts_update');

}
add_action( 'admin_menu', 'register_google_webfonts_menu' );

Code di atas berguna untuk mendaftarkan fungsi baru di Dashboard, dan dalam hal ini adalah untuk membuat menu baru di Dashboard sebagai menu Google Fonts.

3. Code berikutnya berfungsi untuk menambahkan daftar berbagai Google Fonts yang tersedia untuk memudahkan kita dalam memilihnya.

Masih di gwf-options.php, tambahkan code berikut ini dengan memberikan spasi antara baris akhir di code nomor 2 dan baris awal code berikut sebagai pemisahnya:

///////////////////////////////////////////////////////////////////////
// Fetch the Google Web Fonts API list
///////////////////////////////////////////////////////////////////////
if( !function_exists('wp_get_google_webfonts_list') ):
function wp_get_google_webfonts_list($key='', $sort='') {
    /*
    $key = Web Fonts Developer API
    $sort=
    alpha: Sort the list alphabetically
    date: Sort the list by date added (most recent font added or updated first)
    popularity: Sort the list by popularity (most popular family first)
    style: Sort the list by number of styles available (family with most styles first)
    trending: Sort the list by families seeing growth in usage (family seeing the most growth first)
    */

$http = (!empty($_SERVER['HTTPS'])) ? "https" : "http";

$google_api_url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=' . $key . '&sort=' . $sort;
//lets fetch it
$response = wp_remote_retrieve_body( wp_remote_get($google_api_url, array('sslverify' => false )));
if( is_wp_error( $response ) ) {
} else {
$data = json_decode($response, true);
$items = $data['items'];
foreach ($items as $item) {
$font_list[] .= $item['family'];
}
}
//Return the saved lit of Google Web Fonts
return $font_list;
}
endif;

Pastikan Anda mengcopy-paste semua code di atas sebelum melanjutkan ke tahap berikutnya.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.