Creazione di un tema WordPress da HTML statico - Aggiunta di widget

In questa serie, hai imparato come convertire un file HTML statico in un tema WordPress e modificare il file di intestazione.

Finora hai:

preparato il tuo markup per WordPress
convertito il tuo HTML in PHP e dividi il tuo file in file modello
modificato il foglio di stile e caricato il tuo tema su WordPress
aggiunto un ciclo al tuo file di indice
aggiunto meta tag, il wp_head gancio e il titolo del sito e la descrizione per il file di intestazione
aggiunto un menu di navigazione.

In questo tutorial, ti mostrerò come registrare le aree dei widget nel tuo tema e visualizzarle in varie posizioni. Aggiungerai un'intestazione all'intestazione per i dettagli del contatto (o qualsiasi altra cosa desideri!) E alla barra laterale per i widget della barra laterale.

Cosa ti serve

il tuo editor di codice di scelta
un browser per testare il tuo lavoro
un'installazione di WordPress, locale o remota
Se stai lavorando localmente, avrai bisogno di MAMP, WAMP o LAMP per abilitare l'esecuzione di WordPress.
Se stai lavorando in remoto, avrai bisogno di un accesso FTP al tuo sito più un account amministratore nella tua installazione di WordPress.

1. Registrazione dei widget

Per registrare le aree dei widget, utilizzare il register_sidebar () funzione. Creerai una funzione nel tuo file delle funzioni per includere tutte le barre laterali che devi registrare e poi la attiverai tramite widgets_init gancio di azione.

Nota: sebbene questa funzione includa la parola "barra laterale" nel suo nome, ciò non significa che le aree del widget dovrebbero essere solo nella barra laterale - questo è un postumo dei primi tempi di WordPress come piattaforma di blogging quando i widget erano solo nel sidebar.

Apri i tuoi functions.php file, quindi aggiungere il seguente codice prima della riga alla fine che legge ?>:

 function wptutsplus_widgets_init () // Nell'area del widget di intestazione, posizionata sul lato destro dell'intestazione, accanto al titolo e alla descrizione del sito. Vuoto di default. register_sidebar (array ('name' => 'In Header Widget Area', 'id' => 'in-header-widget-area', 'description' => 'Un'area del widget situata sul lato destro dell'intestazione, accanto al titolo e alla descrizione del sito. ',' before_widget '=>'',' after_widget '=>'
',' before_title '=>'',' after_title '=>'
',)); // Area del widget della sidebar, situata nella barra laterale. Vuoto di default. register_sidebar (array ('name' => 'Sidebar Widget Area', 'id' => 'sidebar-widget-area', 'description' => 'L'area del widget della barra laterale', 'before_widget' => '',' after_widget '=>'
',' before_title '=>'',' after_title '=>'
',));  add_action ('widgets_init', 'wptutsplus_widgets_init'); ?>

Questo registra due aree del widget: una nell'intestazione e una nella barra laterale stessa. I parametri di register_sidebar () siamo:

nome - un nome univoco per l'area del widget che verrà visualizzato nella schermata di amministrazione Widget.
id - un ID univoco per l'area del widget che verrà utilizzato a breve per aggiungere l'area del widget alla posizione corretta nel tema.
descrizione - una descrizione da visualizzare nella schermata di amministrazione Widget.
before_widget - il markup per precedere ciascun widget nell'area del widget. Questo aiuta con lo styling.
after_widget - il markup per seguire ogni area del widget. Assicurati di chiudere tutti gli elementi che hai aperto usando il before_widget parametro
before_title - markup per precedere il titolo di ogni widget - Ho aggiunto un h3 elemento con una classe che aiuta con lo stile.
after_title - il markup per chiudere tutti gli elementi che hai aperto prima del titolo del widget.

Ora salva il tuo file delle funzioni.

Se apri l'amministratore del tuo sito, vedrai che ora hai accesso a widget pagina di amministrazione, che ha aggiunto le due aree del widget:

Tuttavia, tutti i widget che aggiungi qui non verranno ancora visualizzati nel tuo tema poiché è ancora necessario aggiungerli ai tuoi file modello.

2. Aggiunta di aree widget ai file del modello

Innanzitutto, aggiungerò l'area del widget per l'intestazione e quindi la barra laterale.

Aggiunta di un'area widget all'intestazione

Apri i tuoi header.php file e individuare il seguente codice:

   Questa sarà un'area del widget nell'intestazione - i dettagli dell'indirizzo (o qualsiasi altra cosa che ti piace) vanno qui.

Sostituiscilo con questo:

Salva il file.

Aggiunta dell'area dei widget della sidebar

Ora apri i tuoi temi sidebar.php e trova questo codice:

Sostituirlo con il seguente:

Finalmente, salva il file.

3. Aggiunta di widget tramite l'amministratore dei widget

La fase finale consiste nell'aggiungere alcuni widget tramite la schermata di amministrazione dei widget. Ho intenzione di aggiungere due widget all'area del widget di intestazione:

un widget di testo con i dettagli di contatto
una casella di ricerca

E aggiungerò due widget alla barra laterale:

il widget "Messaggi recenti"
il widget "Meta"

Una volta che l'ho fatto, la schermata di amministrazione "Widget" ha il seguente aspetto:

Infine, se apro il mio sito nel mio browser, posso vedere i widget popolati nel tema:

Alcuni lavori sono ancora necessari per lo styling, ad esempio la barra di ricerca è un po 'ampia, ma il contenuto è lì. Ora hai aree widget nel tuo tema!

Sommario

In questo tutorial, ti ho mostrato come registrare le aree dei widget e aggiungerle in due punti del tema: l'intestazione e la barra laterale. Puoi aggiungere aree di widget ovunque nel tuo tema: possono essere molto utili per aggiungere contenuti attraverso le tue pagine o i tuoi post tramite i widget.

Esempi inclusi:

un'area del widget prima e dopo il contenuto, forse per la visualizzazione di post correlati o pulsanti di condivisione dei social media o un pulsante di invito all'azione
un'area del widget prima o dopo la navigazione
aree del widget nel footer: dovrai aggiungerle a questo tema nel prossimo tutorial
aree del widget solo per un tipo di contenuto: nella parte 11 di questo tutorial ti mostrerò come creare un modello di archivio personalizzato e vedrai come diversi modelli per diversi tipi di contenuto potrebbero essere combinati con più aree del widget per variare le barre laterali in il tuo sito.

Nel prossimo tutorial, finirai per footer.php file nel tema, aggiungendo più aree del widget in un "fat footer", oltre a un colophon per le informazioni sul copyright e il wp_footer gancio di azione.

risorse

L'API Widget
La funzione register_sidebar ()

Codice