Creare area Widget personalizzata in WordPress

Realizzazione siti web creare un'area widget personalizzata in wordpressCome abbiamo visto nell’articolo precedente, ci potrebbe capitare, nella realizzazione di un sito web,  di voler creare un’area widget personalizzata per poter inserire i nostri widget in maniera semplice all’interno di queste aree. Se hai un minimo di familiarità con i temi di WordPress, sai che la gran parte di essi è dotata di una barra laterale per i widget. Ciò significa che è possibile aggiungere, rimuovere e riordinare i widget sul vostro sito WordPress utilizzando la sezione widget nel menu’ aspetto che trovate nella dashboard. Avere una barra laterale widget è molto utile, ma si consiglia di far diventare widget altre parti del tuo tema WordPress. Questo è molto facile da fare, e una volta che il tema viene modificato, sarà semplice per voi, o l’amministratore di WordPress scambiare i widget dentro e fuori , in diverse parti del sito. Il grande vantaggio è che se, viene definita un’area personalizzata in una determinata posizione del template, essa verrà inserita in tutte le pagine del template stesso. La procedura per creare questa area widget personalizzata si compone di due step principali. Il primo passo è quello di aggiungere la riga di codice per la parte del tema che si desidera far diventare area widget . Assicurarsi di cambiare il “nome della Widget Area personalizzata” ad un nome che ha un senso per voi. Sarà necessario fare questo con un editor di codice e quindi caricare il file tramite un client FTP. Il primo step vero e proprio è però la personalizzazione del file functions.php, dove dovremo inserire il seguente codice:

if ( function_exists('register_sidebar') )
    register_sidebar( array(
   'name' => __( 'Area Widget Personalizzata'),
   'id' => 'areawidgetpersonalizzata',
   'description' => __( 'Area widget personalizzata',
   'nome del tema' ),
   'before_widget' => '<aside id="%1$s" class="widget %2$s">',
   'after_widget' => "</aside>",
   'before_title' => '<h3 class="widget-title">',
   'after_title' => '</h3>',
   ) );

Il codice qui sopra deve essere in un certo senso avvolto nel PHP (esempio <? Php e?>, ) , cioè bisogna rispettivamente aprire e chiudere i tag. Se si dispone già di un file functions.php questi tag saranno già lì e vengono inseriti quasi sempre automaticamente. Se è stato creato uno, dovrete aggiungerli voi stessi. Assicurarsi poi di cambiare il nome della funzione (in questo caso si tratta del “nome della Widget Area personalizzata” ) in modo che corrisponda al nome assegnato al punto 1. Il ‘before_widget’ e parametri ‘after_widget’ consentono di specificare quale codice si desidera mettere prima e dopo ciascun widget. In questo caso ho messo un aside con una class per scopi di styling. Il ‘before_title’ e parametri ‘after_title’ consentono di avvolgere i titoli di widget nel codice. In questo caso ho avvolto rispettivamente il documento nella <h3> e </ h3> tag.

Secondo step

Il secondo step è la modifica di uno dei file del template che corrisponderà alla posizione di visualizzazione all’interno della pagina del front end. I file che è possibile modificare per inserire il richiamo alla nuova area widget sono i seguenti:

  • header.php
  • footer.php
  • index.php
  • page.php
  • altri file .php presenti nel vostro specifico template.

Il codice da inserire in questi file è il seguente:

<?php 
 // Area Widget Personalizzata
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar
('Area Widget Personalizzata') ) : ?>
<?php endif;
?>

Naturalmente esso dovrà essere posizionato correttamentell’interno del file php.

Un ulteriore step

Inoltre c’è anche un terzo step che è quello in cui dopo aver aggiunto con successo l’area widget, è possibile iniziare ad aggiungere widget per il tuo sito WordPress. Per fare questo, accedere alla propria dashboard di WordPress, quindi fare clic sul Widget nel menu a discesa Aspetto sul lato sinistro. Ora dovreste vedere il “nome della Widget Area” nella sezione sul lato destro dello schermo. Infine basta fare clic e trascinare i widget nella casella proprio come la vostra barra laterale!


Autore:

Publisher: Easyweb Consulting Srls

Social Facebook / Google+

Data creazione:

09/02/2013

Data pubblicazione:

10/02/2013

Data modifica:

10/02/2013

2018-02-14T00:08:53+00:00Categories: Wordpress|Tags: |7 Commenti

7 Comments

  1. Adamdado 12/02/2013 at 14:55 - Reply

    Grazie dell’interessante post! Se volessi posizionarlo nel file header.php, quale sarebbe la posizione corretta per non incorrere in errori di codice?

    • Easyweb Consulting 26/02/2013 at 15:01 - Reply

      Purtroppo non esiste una risposta universale alla tua domanda in quanto il file header.php si differenzia da tema a tema. Una cosa semplice da dire è che il codice va posizionato rispettando i tag di apertura e chiusura del codice php o html che troverai all’interno del file. Detto questo ti consiglio l’utilizzo dell’estensione firebug di firefox per determinare la posizione nel codice. Fatto questo dovrai identificare quali stringhe php generano il codice di riferimento e posizionarti di conseguenza. A presto e buon lavoro

  2. ditta-trasloco 16/05/2013 at 21:11 - Reply

    Articolo molto interessante… di sicuro non sempre i soliti consigli triti e ritriti… grazie per lo spunto.

  3. Gigi 02/06/2014 at 14:56 - Reply

    Ciao, articolo molto interessante!!
    (ok arrivo in ritardo eheheh)
    Ne approfitto solo segnalare un’anomalia banale:
    ”nome del tema’ – bisogna levare un apostrofo prima di nome altrimenti da errore.

    Grazie ancora!

    • Easyweb Consulting 03/06/2014 at 06:00 - Reply

      Refuso corretto! Grazie

  4. Simone 15/07/2014 at 13:12 - Reply

    Ciao, ottimo post! Sto provando ad aggiungere con questo metodo un widget (anzi due) e funziona, però me li mette uno sotto l’altro, io invece li vorrei uno di fianco all’altro. Cosa bisogna cambiare?

  5. gianmario 14/08/2014 at 03:43 - Reply

    erano giorni che chiedevo ai programmatori di fare questo !!!!!!!! Grazie mille !!

Inserisci il tuo commento

This site uses Akismet to reduce spam. Learn how your comment data is processed.