• Homepage
  • Articoli
  • Guida
  • Crea più velocemente le impostazioni di personalizzazione utilizzando il framework Kirki nel tuo progetto

Crea più velocemente le impostazioni di personalizzazione utilizzando il framework Kirki nel tuo progetto

Pubblicato: 2019-08-10

Kirki è un framework open source gratuito (con licenza MIT) creato per gli sviluppatori che desiderano aggiungere controlli di personalizzazione ai propri temi o plug-in.

Aristeides Stathopoulos, lo sviluppatore principale di Kirki, lavora al framework dal 2014. Grazie ai continui aggiornamenti e miglioramenti, Kirki ha costruito una community su Github che include oltre 1000 stelle e 300 fork.

Prima di Kirki non ho mai toccato il personalizzatore. Kirki mi ha aiutato a capire il personalizzatore e fare molto in meno tempo!

LebCit – Sviluppatore di temi WordPress

Controlli di personalizzazione di base di WordPress

WordPress Core include una manciata di controlli di personalizzazione di base per impostazione predefinita. Ad esempio: testo, area di testo, casella di controllo, radio, selezione, pagine a discesa, e-mail, URL, numero, nascosto e controlli della data.

Kirki supporta anche i Core Control, più una ventina di altri. In generale, i controlli Kirki coprono i casi d'uso più avanzati. Per esempio:

  • Tipografia
  • Tavolozze dei colori
  • Editore di TinyMCE
  • Campi ordinabili

Kirki offre anche funzionalità non disponibili in Core WordPress, come la generazione automatica dell'output CSS e degli script postMessage. Queste funzionalità, che esamineremo più avanti in questo articolo, possono facilmente dimezzare i tempi di sviluppo.

Kirki è lento

Una critica comunemente mossa contro Kirki è che è lento. In effetti, questa critica viene utilizzata contro la maggior parte dei framework (incluso WordPress). Ha senso, vero? Stai caricando molto codice che potresti non usare mai.

In questo caso, la realtà è che è vero il contrario. La maggior parte dei pannelli di controllo del tempo costruiti utilizzando Kirki saranno effettivamente più veloci degli stessi pannelli costruiti con Core Controls.

Questo perché Kirki aggiunge un livello di ottimizzazione che non è integrato in WordPress.

Quando il Customizer viene inizializzato, WordPress tenta istantaneamente di caricare tutti i controlli, anche se si trovano all'interno di una sezione o di un pannello e l'utente non può ancora interagire con essi. In confronto, Kirki posticipa il caricamento fino a poco prima che l'utente interagisca con il controllo.

Per vedere l'effetto in pratica, proviamo ad aggiungere 50 controlli colore usando ciascun metodo.

Metodo principale:

 per ($i = 0; $i < 50; $i++){
	$wp_customize->add_setting( 'color_setting_hex_' . $i , array(
		'predefinito' => '#0088CC'
	) );

	// aggiungi il controllo del selettore colore
	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'color_setting_hex_' . $i, array(
		'etichetta' => 'Controllo colore',
		'sezione' => 'title_tagline',
		'impostazioni' => 'color_setting_hex_' . $ io,
	) ) );
}

Con Kirki:

 for ($i = 0; $i < 50; $i++) {
     Kirki::add_field( 'config_id', array(
         'tipo' => 'colore',
         'impostazioni' => 'color_setting_hex_' . $ io,
         'label' => __( 'Controllo colore', 'kirki' ),
         'sezione' => 'title_tagline',
         'predefinito' => '#0088CC',
     ) );
 }

I risultati:

Come puoi vedere, la velocità di caricamento iniziale è notevolmente superiore quando si utilizza Kirki. Anche il codice richiesto per creare i controlli è più conciso.

Integrare Kirki nel tuo progetto

Esistono diversi modi per integrare il Kirki Framework nel tuo progetto, la documentazione ufficiale fa un buon lavoro nello spiegare i diversi metodi.

Consiglio agli sviluppatori di guidare l'utente a installare la versione del plug-in di Kirki, piuttosto che includere il framework direttamente nel codice del progetto. Questo può essere fatto usando TGMPA o lo script fornito.

Il ragionamento alla base del percorso del plug-in è che Kirki viene aggiornato e migliorato frequentemente. Installando la versione del plug-in, i tuoi utenti avranno accesso immediato a correzioni di bug e aggiornamenti di sicurezza.

Al contrario, quando includi il framework come parte del tuo progetto, gli utenti riceveranno aggiornamenti solo quando aggiorni il tuo tema o plug-in, il che potrebbe essere meno frequente di quanto richiesto.

Qualunque sia il metodo che usi, assicurati di controllare che Kirki sia inizializzato prima di aggiungere le tue impostazioni:

 // Uscita anticipata se Kirki non esiste.
if ( ! class_exists( 'Kirki' ) ) {
    Restituzione;
}

Campi

Nell'esempio del metodo principale, abbiamo prima creato un'impostazione e quindi un controllo per essa. Nella maggior parte dei casi, i due sono direttamente collegati. Kirki semplifica il processo e ci consente invece di creare un "Campo". Quando un campo viene creato, crea per noi l'impostazione e il controllo in background.

I campi supportano tutti gli argomenti di controllo che ti aspetteresti (etichetta, descrizione, sezione, impostazione predefinita), nonché alcuni argomenti specifici di Kirki.

L'argomento "tipo" ti consente di scegliere uno dei 30 tipi di controllo di Kirki: https://kirki.org/docs/controls/

Sezioni

Le sezioni di personalizzazione ti consentono di raggruppare i controlli insieme. WordPress ha sei sezioni integrate a cui puoi aggiungere anche i tuoi controlli:

  • title_tagline – Identità del sito
  • colori – Colori
  • header_image – Immagine di intestazione
  • background_image – Immagine di sfondo
  • static_front_page – Impostazioni della home page
  • custom_css – CSS aggiuntivo


Le sezioni in Kirki funzionano esattamente come in Core, il metodo Kirki::add_section() è semplicemente un wrapper per $wp_customize->add_section() e accetta gli stessi parametri e argomenti.

 Kirki::add_section( 'section_id', array(
     'title' => esc_html__( 'La mia sezione', 'kirki' ),
     'description' => esc_html__( 'Descrizione della mia sezione.', 'kirki' ),
 ) );

Pannelli

I pannelli consentono di creare un altro livello di gerarchia raggruppando insieme le sezioni. WordPress Core ha un pannello integrato, che è "Menu".

Ancora una volta, l'implementazione di Kirki è semplicemente un wrapper per la funzionalità Core.

 Kirki::add_panel( 'panel_id', array(
     'priorita' => 10,
     'title' => esc_html__( 'Il mio pannello', 'kirki' ),
     'description' => esc_html__( 'Descrizione del mio pannello', 'kirki' ),
 ) );

'trasporto' => 'auto'

Tradizionalmente, quando si creano controlli di personalizzazione, si hanno due opzioni per l'argomento trasporto:

  • Aggiorna : ogni volta che l'utente apporta una modifica, il riquadro di anteprima viene aggiornato per mostrare le modifiche. Questo può richiedere un paio di secondi.
  • postMessage – Ogni volta che l'utente apporta una modifica, il riquadro di anteprima viene aggiornato utilizzando Javascript che non richiede un aggiornamento ed è quasi istantaneo.

postMessage è senza dubbio il metodo migliore per aggiornare l'anteprima e dovrebbe essere utilizzato ove possibile. Tuttavia, c'è uno svantaggio, l'utilizzo di postMessage significa che devi creare un codice JS personalizzato per ciascuno dei tuoi controlli. Una semplice implementazione è simile a questa:

 // Aggiorna il titolo del sito in tempo reale...
wp.customize('nomeblog', funzione( valore) {
    valore.bind( funzione( newval ) {
        $( '#sito-titolo a' ).html( newval );
    } );
} );

Quando hai molte impostazioni, questo può diventare rapidamente ripetitivo.

Qui è dove Kirki brilla, aggiunge una terza opzione: 'transport' => 'auto'.

'transport' => 'auto' funziona insieme a un altro argomento che Kirki aggiunge chiamato 'output'. Quando entrambi i valori sono definiti, Kirki genererà automaticamente gli script postMessage per te. Ciò significa che ottieni tutti i vantaggi dell'utilizzo di postMessage senza dover scrivere alcun codice Javascript.

Un campo che utilizza trasporto => 'auto' ha il seguente aspetto:

 Kirki::add_field( 'config_id', array(
     'tipo' => 'colore',
     'impostazioni' => 'color_setting_hex',
     'label' => __( 'Controllo colore', 'kirki' ),
     'sezione' => 'colori',
     'predefinito' => '#0088CC',
     'trasporto' => 'auto',
     'output' => array(
         Vettore(
             'elemento' => 'corpo',
             'proprietà' => 'colore di sfondo',
         ),
     ),
 ) );

Questa caratteristica di Kirki che fa risparmiare tempo significa che la maggior parte delle volte non avrai più bisogno di scrivere o accodare i tuoi script postMessage.

Uscita CSS front-end

Un'altra parte della creazione delle impostazioni di personalizzazione è la generazione dell'output CSS sul frontend. Un semplice esempio potrebbe assomigliare a questo:

 /**
 * Invia il CSS di personalizzazione a wp_head
 */
funzione wptavern_customizer_css() {
	$bg_color = get_theme_mod('impostazione_colore_esadecimale');
	?>
	<stile>
		corpo {
			colore di sfondo: <?php echo sanitize_hex_color($bg_color); ?>;
		}
	</stile>
	<?php
}
add_action( 'wp_head', wptavern_customizer_css );

Come nell'esempio postMessage, la scrittura di questo codice può diventare rapidamente ripetitiva se hai molte impostazioni.

Fortunatamente, 'transport' => 'auto' si occupa anche dell'output del frontend per te. Anche nel nostro esempio semplificato, 'transport' => 'auto' ha ridotto il codice che dobbiamo scrivere del ~50%.

Conclusione

In questo articolo, abbiamo esaminato solo le basi del Kirki Framework e due dei suoi argomenti, possiamo già vedere come ci consente di creare controlli di personalizzazione più velocemente e senza compromettere le prestazioni.

Quando ti immergi in Kirki scoprirai rapidamente la ricchezza di funzionalità che aggiunge in aggiunta all'API di personalizzazione. Non sorprende che sia in uso su oltre 300.000 siti Web e una parte fondamentale di alcuni dei più grandi temi WordPress sul mercato.