Come aggiungere una barra laterale a WordPress »Guida passo passo definitiva

Quando crei il tuo sito WordPress dovresti aggiungere una barra laterale come una delle sezioni di layout del tuo sito WordPress. Creare una barra laterale in un sito HTML di base è semplice poiché devi solo utilizzare i tag della barra laterale <aside> </aside> ma per aggiungere una barra laterale a WordPress è necessario un approccio diverso.

Tag del modello della barra laterale: come viene visualizzata la barra laterale in WordPress

È importante ricordare che WordPress funziona con i tag template e l'intestazione viene chiamata con la funzione get_header() mentre il footer viene chiamato con la funzione get_footer(). Per la barra laterale, viene visualizzata con il tag del modello get_sidebar().

Questo tag modello può essere aggiunto ovunque desideri aggiungere la barra laterale di WordPress. Ma prima di iniziare a visualizzare la barra laterale di WordPress, dobbiamo imparare come viene creata in modo che esista nel codice del tema prima di poterla chiamare nei modelli.

Ci sono due passaggi principali che dovresti seguire per aggiungere una barra laterale in WordPress; questi passaggi includono: registrazione della barra laterale, chiamata della barra laterale

Come aggiungere una barra laterale a WordPress passo dopo passo

Affinché tu possa aggiungere correttamente la nuova barra laterale a WordPress o creare una barra laterale personalizzata in WordPress, devi seguire i seguenti passaggi:

1. Innanzitutto, crea una copia di backup del tuo tema WordPress
2. Crea un tema figlio dal tuo tema WordPress principale e il tema figlio dovrebbe avere il file functions.php
3. All'interno di questo file functions.php del tuo tema figlio, utilizzerai la funzione register_sidebar() per creare la barra laterale.
4. Crea il file sidebar.php e aggiungi la funzione dynamic_sidebar() a questo file con il nome della barra laterale in questo modo – dynamic_sidebar( 'sidebar-1' ) dove sidebar-1 è l'id della barra laterale che hai aggiunto durante la registrazione della barra laterale.
5. Nei file del modello del tema , ora puoi chiamare la barra laterale utilizzando il tag del modello get_sidebar() .
6. Se hai creato una barra laterale personalizzata puoi utilizzare la funzione dynamic_sidebar() per visualizzare la barra laterale personalizzata.

Anatomia di una barra laterale di WordPress

Per comprendere in modo approfondito come funziona la barra laterale in WordPress, devi imparare come il codice della barra laterale è distribuito su diversi file di temi di WordPress.

Funzioni della barra laterale di WordPress

È importante sapere che le tre funzioni di WordPress relative all'aggiunta della barra laterale di WordPress sono:

• Registra barra laterale – register_sidebar()
• Barra laterale dinamica – dynamic_sidebar()
• Ottieni barra laterale – get_sidebar()

Registra barra laterale - Passaggio uno

Questa funzione register_sidebar() è la prima funzione che crea la barra laterale e si trova nel file functions.php del tuo tema.

Quando apri il tuo file functions.php del tema, dovresti vedere questa funzione register_sidebar() che registra le varie barre laterali visualizzate sul tuo tema.

Come nel caso del tema WordPress predefinito Twenty seventeen, puoi vedere nell'immagine sotto il codice che registra le barre laterali su quel tema:

Fondamentalmente, questa funzione è quella che avvia tutto

Registra i parametri della barra laterale

La funzione della barra laterale del registro è espressa come una funzione che accetta i vari argomenti che possono essere sotto forma di dati di un array o di una stringa. Può essere generalmente espresso come segue:

register_sidebar( array|string $args = array() )

Quella che segue è un'immagine della funzione register_sidebar utilizzata in un tema WordPress in cui i diversi parametri vengono aggiunti all'array che viene passato all'interno della chiamata di funzione:

Questa funzione di WordPress ha vari argomenti che può accettare che possono essere una stringa PHP o un array PHP. Gli argomenti includono:

• Nome : questo è il nome o il titolo della barra laterale, dovrebbe essere una stringa.
• ID : questo è un identificatore univoco della barra laterale che utilizzerai la funzione dynamic_sidebar() per chiamare la barra laterale.
• Descrizione : questa è la descrizione della barra laterale visualizzata nell'interfaccia dei widget ed è una stringa.
• Classe questo è un argomento per aggiungere una classe CSS aggiuntiva per la barra laterale che ti aiuterà nello stile.
• Before_widget – questo è il contenuto HTML che viene aggiunto prima dell'output di ciascuna delle barre laterali
• After_widget – questo è il contenuto HTML che viene aggiunto dopo l'output di ciascuna delle barre laterali
• Before_title questo è il contenuto HTML da aggiungere al titolo della barra laterale quando viene visualizzato e l'impostazione predefinita è solitamente il tag HTML di apertura <h2>.
• After_title questo è il contenuto HTML da aggiungere al titolo della barra laterale quando viene visualizzato e l'impostazione predefinita è solitamente il tag HTML di apertura <h2>.

Questa funzione viene aggiunta al file functions.php e registra le barre laterali di WordPress utilizzando un action hook come quello condiviso di seguito:

add_action( 'widgets_init', ' njengah_tutorial_sidebars' ' );

Per registrare una barra laterale dobbiamo agganciarci all'evento widgets_init e abbiamo la funzione di callback con un nome a nostra scelta come in questo caso abbiamo chiamato la funzione di callback come 'njengah_tutorial_sidebars'

Il codice completo che dovresti aggiungere al tuo file functions.php per registrare la barra laterale è il seguente:

 <?php

//Funzione di richiamata 

funzione njengah_register_sidebar_tutorial() {
	
	//Registra la funzione della barra laterale - https://developer.wordpress.org/reference/functions/register_sidebar/
	register_sidebar(
		Vettore(
			'nome' => __( 'Esempio barra laterale', 'dominio testo' ),
			'id' => 'barra laterale-1',
			'description' => __( 'Aggiungi widget qui da visualizzare nella barra laterale sui post del blog e sulle pagine di archivio.', 'textdomain' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget' => '</sezione>',
			'before_title' => '<h2 class="widget-title">',
			'after_title' => '</h2>',
		)
	);
	
} 

// Gancio d'azione 

add_action('widgets_init', 'njengah_register_sidebar_tutorial');

Barra laterale dinamica: passaggio due

Questa funzione dynamic_sidebar() ora chiama la barra laterale che abbiamo registrato nel passaggio uno sopra e il codice viene inserito nel file sidebar.php o in qualsiasi altro file in cui vogliamo visualizzare la barra laterale che abbiamo creato nel primo passaggio.

L'espressione generale della funzione dynamic_sidebar() è la seguente:

dynamic_sidebar( int|string $index = 1 )

Questa funzione accetta un argomento intero o stringa e questo può essere il nome o i parametri ID utilizzati durante la registrazione della barra laterale nel primo passaggio.

Nel tema WordPress predefinito ventidiciassette quando apri il file sidebar.php, vedrai la funzione dynamic_sidebar() come mostrato nell'immagine qui sotto:

In questo caso, puoi vedere che stiamo passando il parametro id della funzione register_sidebar alla funzione dynamic_sidebar in modo da poter visualizzare quella barra laterale come barra laterale predefinita. Come mostrato nell'immagine qui sotto:

Se registrassimo questa barra laterale come barra laterale personalizzata, utilizzeremmo il codice sopra per mostrarlo in tutti i file di modelli di temi che potrebbero includere; intestazione, piè di pagina, corpo e così via. Quindi il codice per visualizzare la barra laterale dovrebbe essere il seguente:

 <?php if ( is_active_sidebar( 'custom' ) ) : ?>
  <div id="barra laterale">
    <?php dynamic_sidebar('personalizzato'); ?>
   </div>
<?php endif; ?>

Come puoi vedere, stiamo usando un'istruzione if per convalidare se la barra laterale è attiva e la funzione che utilizziamo qui è is_active_sidebar() . Questa funzione scopre semplicemente se la barra laterale passata in dynamic_sidebar() è in uso. Questo è uno dei tag condizionali di WordPress.

Ottieni la barra laterale - Passaggio tre

Quando crei la barra laterale predefinita di WordPress in un tema devi registrarti , creare il file sidebar.php e infine utilizzare il tag get_sidebar() t emplate per caricare la barra laterale nel modello.

La get_sidebar può essere utilizzata per visualizzare diverse barre laterali in pagine diverse poiché per impostazione predefinita la funzione accetta un argomento stringa equivalente al nome della barra laterale. Il nome che hai utilizzato per registrare la barra laterale o il parametro ID come descritto nel passaggio precedente.

get_sidebar( string $name = null )

Quindi, se hai una barra laterale denominata " cool-sidebar ", puoi chiamare la barra laterale in un modello di pagina personalizzato come segue:

get_sidebar('cool-sidebar');

Puoi anche avere diverse barre laterali per ogni pagina e puoi usare un'istruzione if/else per visualizzare ciascuna delle barre laterali in pagine diverse in modo condizionale come in questo codice dove abbiamo tre barre laterali; uno per la home page, un altro per 404 e la barra laterale predefinita:

 se ( is_home() ) :

      get_sidebar('casa');

   elseif ( is_404() ) :

      get_sidebar('404');

   altro :

     get_barra laterale();

finisci se;

File della barra laterale di WordPress

È altrettanto importante sapere che i sette file di temi comuni di WordPress in cui viene aggiunto il codice della barra laterale sono:

• functions.php File
• sidebar.php File
• Pages Files
• Posts Files
• Custom Posts Type Files
• footer.php File
• header.php File

Il codice può anche essere aggiunto ai plugin in cui ti stai registrando e visualizzando i widget della barra laterale come alcuni dei più comuni plugin per widget di WordPress.

Se sei uno sviluppatore di WordPress o un principiante di WordPress che sta imparando come funziona WordPress , capire il modo in cui questi file sono correlati all'aggiunta e alla visualizzazione della barra laterale di WordPress sarà un ottimo passo per diventare un professionista.

Come funziona il codice della barra laterale in ogni file WordPress del tema

In un breve riassunto le tre funzioni di aggiunta della barra laterale in WordPress sono collocate in ciascuno di questi file illustrati rispettivamente nella tabella seguente:

Per aggiungere la barra laterale in WordPress dovresti seguire i tre passaggi che abbiamo delineato in questo tutorial di sviluppo di WordPress che include:

• Registra: registra la barra laterale in functions.php usando register_sidebar()
• Chiama barra laterale predefinita/barra laterale personalizzata: chiama la barra laterale nel file sidebar.php per la barra laterale predefinita ma o la barra laterale personalizzata puoi chiamarla in qualsiasi file modello usando dynamic_sidebar()
• Visualizza la barra laterale nei modelli di post WP: nella pagina, nel post e nel modello di pagina personalizzata e nel modello di post personalizzato, puoi chiamare la barra laterale utilizzando il tag del modello get_sidebar().

Come aggiungere una barra laterale all'esempio di codice di WordPress

Quello che segue è l'esempio di codice di come aggiungere una barra laterale predefinita in un tema WordPress che chiameremo Njengah Tutorial Sidebar

Registra barra laterale

Il primo passo lo registreremmo come segue:

 /**
* Registra area widget.
*
* @link https://gist.github.com/Njengah/010453c11d170df9b9c8de2f31954a5d
*/

funzione njengah_register_sidebar_tutorial() {

  //Registra la funzione della barra laterale - https://developer.wordpress.org/reference/functions/register_sidebar/

  register_sidebar(

        Vettore(
                  'name' => __( 'Njengah Tutorial Sidebar ', 'textdomain' ),
                   'id' => 'njengah-sidebar-default',
                   'description' => __( 'Aggiungi widget qui da visualizzare nella barra laterale sui post del blog e sulle pagine di archivio.', 'textdomain' ),
                   'before_widget' => '<section id="%1$s" class="widget %2$s">',
                   'after_widget' => '</sezione>',
                   'before_title' => '<h2 class="widget-title">',
                   'after_title' => '</h2>',
                  )
             );
    
        }

add_action('widgets_init', 'njengah_register_sidebar_tutorial');

Il risultato verrebbe visualizzato sulla nostra dashboard di WordPress sotto aspetto> Widget come mostrato nell'immagine qui sotto:

Chiama la barra laterale predefinita nel file Sidebar.php

Nei file sidebar.php o index non dovremmo chiamare la barra laterale come segue:

 if ( ! is_active_sidebar('njengah-sidebar-default') ) {
   Restituzione;
}

  dynamic_sidebar('njengah-sidebar-default');

Visualizza la barra laterale

Infine, nei nostri modelli di pagina, chiameremo semplicemente la barra laterale utilizzando il codice seguente

get_sidebar();

Avvolgendo

In questo post, abbiamo delineato in modo completo l'approccio passo dopo passo su come aggiungere la barra laterale nel tema WordPress. In un breve riassunto, devi ricordare che ci sono solo 2 o tre passaggi; per aggiungere la barra laterale predefinita in WordPress devi registrare la barra laterale in functions.php , creare un file sidebar.php in cui chiami la barra laterale che hai registrato nel passaggio uno e nella pagina o nei modelli di post usi la funzione get_sidebar per chiamare il predefinito barra laterale .

Se stai aggiungendo barre laterali personalizzate non hai bisogno dell'ultima parte poiché collocheresti direttamente il codice dynamic_sidebar() nel modello o nel file in cui desideri visualizzare la barra laterale. Ad esempio, nel footer, vedrai comunemente i widget del footer visualizzati utilizzando questa funzione dynamic_sidebar().

Spero che tu abbia imparato qualcosa di nuovo da questo tutorial o che tu abbia acquisito una migliore comprensione di come aggiungere una barra laterale al tema WordPress senza necessariamente copiare e incollare il codice nel tuo file functions.php. Se desideri ulteriore assistenza in quest'area o hai bisogno di consigli da uno sviluppatore WordPress professionista, non esitare a contattarmi.