Aggiungere Google Fonts nel Customizer di WordPress

Iniziamo creando un file che chiameremo myfonts.php.

Nel primo riquadro qui sotto vediamo il codice per settare con un array il default (in questo caso campo blank, ovvero vuoto), il transport, i permessi di chi può accedere a questa opzione:

1
2
3
4
5
6
7
8
9
 $wp_customize->add_setting( 'my_fonts', array(
         'default'        => '', // by default is blank, choose your font name.
          'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'?
          'transport' => 'refresh',
         'capability' => 'edit_theme_options',
          'sanitize_callback' => 'esc_html',
     ) );

     $wp_customize->get_setting( 'my_fonts' )->transport = 'refresh';
Sezione creata nel customizer di Wordpres

Di seguito il codice per aggiungere la sezione nel customizer di WordPress con il titolo e la priorità per farlo comparire in alto.


1
2
3
4
 $wp_customize->add_section( 'my_fonts_setting' , array(
 'title'      => __('My Google Fonts Setting','yourtextdomain'),
 'priority'   => 10,
) );
input field dove inseriremo il nome del font preferito

Ora l’array per una descrizione e l’input dove inseriremo manualmente nel customizer il nome del nostro font Google preferito (prima lettera del nome del font sarà sempre in maiuscolo es Cardo e non cardo, per nomi composti Source Sans Pro e non source sans pro .

1
2
3
4
5
6
 $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'my_fonts', array(
         'label'   => __('Font Name','yourtextdomain'),
         'description' =>  __('Insert here in below the Google font name (don\'t forget! Capitalize the first letter of the name)','yourtextdomain'),
         'section' => 'my_fonts_setting',
         'settings'   => 'my_fonts',
     ) ) );

Aggiungiamo l’action per registare la funzione che contiene il tutto come vedremo in seguito nel file myfonts.php definitivo

1
 add_action( 'customize_register', 'my_customize_register' );

Quindi il codice per lo style del font

1
2
3
4
5
6
7
8
function header_output() {
?>
<!--Customizer CSS-->
<style type="text/css">
  <?php self:generate_css(' body', 'font-family', 'my_fonts','\'','\', Arial, Verdana, Monaco, Times !important'); ?>
</style><!--/Customizer CSS-->
<?php
}

Ed infine l’equeue del javascript per il live preview che vedremo in seguito, nonchè l’action per l’output dello style.

1
2
3
4
5
6
7
8
9
 /**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */

function my_customize_preview_js() {
    wp_enqueue_script( 'my-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true );
}
add_action( 'customize_preview_init', 'my_customize_preview_js' );

add_action( 'wp_head' , 'header_output' );

Ed ecco il file myfonts.php completo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// file myfonts.php
function my_customize_register( $wp_customize ) {

$wp_customize->add_setting( 'my_fonts', array(
'default'        => '', // by default is blank, choose your font name.
'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'?
'transport' => 'refresh',
'capability' => 'edit_theme_options',
'sanitize_callback' => 'esc_html',
) );

$wp_customize->get_setting( 'my_fonts' )->transport = 'refresh';

$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'my_fonts', array(
'label'   => __('Insert here in below the Google font name (don\'t forget! Capitalize the first letter of the name)','yourtextdomain'),
'section' => 'my_fonts_setting',
'settings'   => 'my_fonts',
) ) );

$wp_customize->add_section( 'my_fonts_setting' , array(
'title'      => __('My Google Fonts Setting','yourtextdomain'),
'priority'   => 10,
) );

}
add_action( 'customize_register', 'my_customize_register' );

function header_output() {
?>
<!--Customizer CSS-->
<style type="text/css">  
<?php self:generate_css(' body', 'font-family', 'my_fonts','\'','\', Arial, Verdana, Monaco, Times !important'); ?>
</style><!--/Customizer CSS-->
<?php
}
 function generate_css( $selector, $style, $mod_name, $prefix='', $postfix='', $echo=true ) {
   $return = '';
   $mod = get_theme_mod($mod_name);
   if ( ! empty( $mod ) ) {
      $return = sprintf('%s { %s:%s; }',
         $selector,
         $style,
         $prefix.$mod.$postfix
      );
      if ( $echo ) {
         echo $return;
      }
   }
   return $return;
 }

/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */

function my_customize_preview_js() {
    wp_enqueue_script( 'my-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true );
}
add_action( 'customize_preview_init', 'my_customize_preview_js' );
add_action( 'wp_head' , 'header_output' );

Non ci rimane che creare il file javascript customizer.js in jQuery per il live preview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 /**
 * File customizer.js.
 *
 * Theme Customizer enhancements for a better user experience.
 *
 * Contains handlers to make Theme Customizer preview reload changes asynchronously.
 */


( function( $ ) {
 
     //Update site fonts in real time...
        wp.customize( 'my_fonts', function( value ) {
        value.bind( function( newval ) {
            $('body').css('font-family', newval );
                } );
    } );
} )( jQuery );

E nel file functions.php la funzione per l’enqueue delle api di Google Fonts aggiungendo almeno 3 parametri per il font size e quelli del linguaggio, poi l’include del file myfonts.php

1
2
3
4
5
6
7
8
9
10
11
12
// functions.php
function my_scripts() {
$my_mygoglefont = get_theme_mod('my_fonts', '');
    $protocol = is_ssl() ? 'https' : 'http';

wp_enqueue_style( 'googleFonts', esc_url_raw("$protocol://fonts.googleapis.com/css?family=$my_mygoglefont:200,300,400&subset=latin,latin-ext,greek-ext,greek") );
 }
add_action( 'wp_enqueue_scripts', 'my_scripts' );
/**
 * Load myfonts.php
 */

require get_template_directory() . '/myfonts.php';

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Su questo sito Web si utilizzano strumenti tecnici necessari al funzionamento ottimale e di terze parti che memorizzano piccoli file (cookie) sul tuo dispositivo. I cookie vengono normalmente utilizzati per consentire al sito di funzionare correttamente (cookie tecnici), per generare report di navigazione (cookie statistici) e per pubblicizzare adeguatamente i servizi / prodotti (cookie di profilazione). Possiamo utilizzare direttamente i cookie tecnici, ma hai il diritto di scegliere se abilitare o meno i cookie statistici e di profilazione. Abilitando questi cookie, ci aiuti a offrirti un’esperienza migliore. Cookies Policy Privacy Policy.

Alcuni contenuti o funzionalità non sono qui disponibili a causa della tua scelta sulla preferenze sui cookie!

Ciò accade perché la funzionalità / i contenuti contrassegnati come “% SERVICE_NAME%” utilizzano i cookie che hai scelto di mantenere disattivati. Per visualizzare questo contenuto o utilizzare questa funzionalità, si prega di abilitare i cookies: click here to open your cookie preferences.