Share
Benvenuti nella seconda parte della serie "Toolbox of the Smart WordPress Developer"! In questa parte, passeremo attraverso Kirki, un ottimo toolkit Customizer per gli sviluppatori di temi di WordPress.
Cominciamo!
WordPress versione 3.4 ha introdotto una nuova API chiamata API di personalizzazione del tema e la schermata "Personalizzazione tema". (Nella versione 4.1, la parola "Tema" è stata eliminata poiché non è esclusivamente un "tema di personalizzazione".) Ci consente di aggiungere opzioni di personalizzazione nel Aspetto> Personalizza menu, con la possibilità di modificare le impostazioni del tema contemporaneamente durante l'anteprima del sito Web.
All'inizio non creò molto clamore, ma la comunità lo adottò nel tempo e gradualmente ci eccitammo sempre più su questa pratica API. Oltre due anni dopo la sua pubblicazione, l'API di Customizer si è evoluta in una meravigliosa utility che ci consente persino di pubblicare post e personalizzare la schermata di accesso.
Non è un'esagerazione affermare che Customizer è una delle API più preziose di WordPress per la sua capacità di cambiare completamente l'esperienza degli utenti.
Se vuoi saperne di più su questo argomento, controlla le nostre serie sul Customizer, scritto da Lee Pham.
Kirki è un ottimo strumento per migliorare l'esperienza degli utenti di un tema. Si concentra esclusivamente sulla personalizzazione del tema e estende i controlli Customizer predefiniti con i pulsanti di controllo, gli input di intervallo e le immagini come pulsanti di opzione.
Una volta che sai come funziona, creare una schermata di personalizzazione dei temi sarà più facile che mai.
Un invito all'azione: Kirki è pronto per la traduzione e ha bisogno del tuo aiuto per tradurre questo progetto open-source in diverse lingue. Gestirò la traduzione in turco e sarebbe bello se potessi aiutare a tradurre Kirki nella tua lingua. Se vuoi contribuire, contatta Aristeides Stathopoulos, autore di Kirki, per i dettagli.
Raggruppare il tuo tema con Kirki è molto semplice, in realtà. Devi solo scaricare l'ultima versione da GitHub, estrarre il contenuto in una cartella del tuo tema e includere il file plugin principale (usando il include_once () funzione) nei temi del tuo tema functions.php file.
Ecco un esempio:
Pezzo di torta, non è vero? Al di sotto di questo, puoi creare una configurazione per evitare conflitti con altri temi o plugin che usano anche Kirki:
'edit_theme_options', 'option_type' => 'option', 'option_name' => 'my_theme',)); ?>
Fatto!
Ora abbiamo imparato come incorporare e configurare Kirki nei nostri temi, è tempo di vedere alcuni esempi su come creare la nostra pagina di personalizzazione del tema.
Iniziamo con le basi. Ecco il codice di un'installazione di base con alcuni pannelli e sezioni ma senza campi di controllo:
Accentsconagua
10, 'title' => __ ('My Title', 'textdomain'), 'description' => __ ('My Description', 'textdomain'),)); / ** * Aggiungi sezioni * / Kirki :: add_section ('custom_css', array ('title' => __ ('Custom CSS'), 'description' => __ ('Aggiungi CSS personalizzato qui'), 'pannello' => ", // Non tipicamente necessario. 'Priority' => 160, 'capability' => 'edit_theme_options', 'theme_supports' =>", // Raramente necessario.)); ?> Ora, vediamo i campi di controllo forniti da Kirki.
Dopo aver creato i pannelli e le sezioni, è possibile compilare le sezioni con "campi di controllo". Ecco il codice per aggiungere un campo all'interno di una sezione:
'text', 'setting' => 'text_demo', 'label' => __ ('Questa è l'etichetta', 'kirki'), 'description' => __ ('Questa è la descrizione del controllo', 'kirki' ), 'help' => __ ('Questo è un testo di aiuto aggiuntivo.', 'kirki'), 'section' => 'my_section', 'default' => __ ('Questo è un testo predefinito', 'kirki '),' priorità '=> 10,)); ?> Come ho detto prima, Kirki si estende l'elenco dei campi di controllo predefiniti con quelli nuovi. Per scrivere un tutorial più "completo", includerò i campi di controllo principali e i campi di controllo aggiuntivi di Kirki.
testo ti consente di aggiungere un semplice inserimento di testo.textarea ti permette di aggiungere una textarea.editore ti permette di aggiungere un editor WYSIWYG.Radio ti consente di aggiungere pulsanti di opzione.casella di controllo ti permette di aggiungere checkbox.colore e color-alfa (supporta la trasparenza) consente di selezionare un colore con un bel selettore di colori.sfondo ti consente di aggiungere un customizer di sfondo CSS completo.tavolozza ti permette di aggiungere una tavolozza di colori.selezionare ti permette di aggiungere un menu a tendina.select2 consente di aggiungere un menu di selezione "migliore", diverso da quello predefinito select2-multipla ti consente di aggiungere un menu di selezione con più scelte. (Wild guess: questo potrebbe essere unito al select2 campo in futuro.)discesa pagine consente di aggiungere un menu a discesa che elenca le pagine nel database.caricare ti consente di aggiungere l'uploader nativo.Immagine ti consente di aggiungere il selettore di immagini nativo / uploader.Radio-image ti consente di aggiungere immagini che fungono da pulsanti di opzione.Radio-buttonset consente di aggiungere un set di pulsanti che fungono da pulsanti di opzione.numero ti consente di aggiungere un numero HTML5 di input.cursore ti permette di aggiungere un cursore di intervallo HTML5.Multicheck ti consente di aggiungere una lista con più input di checkbox.interruttore ti permette di aggiungere un pulsante "interruttore" che funziona come una casella di controllo, ma più carina.ginocchiera ti consente di aggiungere un pulsante "Attiva / Disattiva" che funziona anche come una casella di controllo.ordinabile ti consente di aggiungere un elenco ordinabile di controlli casella di controllo.costume ti permette di aggiungere un campo di controllo personalizzato, che è praticamente un frammento di codice HTML valido.Kirki ha alcune impostazioni interessanti per te Customizer personalizzato per il tuo tema. È possibile visualizzare un logo sopra i campi di controllo, impostare una combinazione di colori diversa per il Customizer e così via.
LOGO_IMAGE: Specifica l'URL dell'immagine del logo.descrizione: Specifica un testo descrittivo che verrà visualizzato dopo aver fatto clic sul logo.color_active: Specifica il colore "attivo" per voci di menu, pulsanti di aiuto e così via.color_light: Specifica il colore "secondario" per i controlli disabilitati e inattivi.color_select: Specifica il colore "selezionato" per, bene, materiale selezionato.color_accent: Specifica il colore "accent" utilizzato nei controlli del cursore e nelle selezioni di immagini.color_back: Specifica il colore di sfondo per il Customizer.url_path: Specifica il percorso dell'URL per Kirki, utilizzato per caricare i file CSS nella sua /risorse/ cartella.stylesheet_id: L'ID del foglio di stile da impostare come handle nei processi di accodamento CSS.Per impostare queste opzioni di stile, è necessario utilizzare il Kirki / config filtro. Ecco un esempio di come configurare Kirki:
Devi usare i valori nel tuo tema che Kirki memorizza, giusto? Ecco come:
Semplice come quella. Certo, puoi ancora usare il nucleo get_option () e get_theme_mod () funzioni.
Strumenti come questo rendono WordPress ancora più user-friendly e facile da sviluppare, non credi? Come ho detto nella presentazione della serie, la potenza di WordPress proviene dalla sua comunità e strumenti come questo sono la chiave per la crescita della comunità. Kirki offre più di quanto abbia scritto in questo tutorial, e Ari (l'autore) promette che continuerà a sviluppare Kirki per, nelle sue parole, tutto il tempo necessario.
Cosa ne pensi di Kirki? Spara i tuoi pensieri nella sezione commenti qui sotto. E se ti è piaciuto l'articolo, non dimenticare di condividerlo con i tuoi amici!
Ci vediamo nella prossima parte in cui tratteremo il plugin per il controllo del tema.
