I widget sono parte integrante dei temi WordPress, tanto che è difficile immaginare un tema WordPress senza widget. I widget sono script eseguibili che possono essere semplicemente trascinati e rilasciati nelle barre laterali o in qualsiasi altra area predisposta per i widget nel tema. Molti dei nostri lettori utilizzano i widget per aggiungere elementi personalizzati alle loro barre laterali. Tuttavia, questo articolo è rivolto agli utenti curiosi che vogliono imparare ad aggiungere barre laterali o aree dinamiche pronte per i widget nei temi di WordPress.
Registrazione di barre laterali o aree pronte per widget in WordPress
La prima cosa da fare è registrare la barra laterale o l’area pronta per i widget nel tema. È possibile registrare più barre laterali e aree pronte per i widget. Copiate e incollate questo codice nel file functions.php del vostro tema
function wpb_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'wpb' ),
'id' => 'sidebar-1',
'description' => __( 'The main sidebar appears on the right on each page except the front page template', 'wpb' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' =>__( 'Front page sidebar', 'wpb'),
'id' => 'sidebar-2',
'description' => __( 'Appears on the static front page template', 'wpb' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );
In questo codice, abbiamo registrato due barre laterali. Abbiamo dato loro nomi e descrizioni per identificarle sullo schermo dei widget. Il parametro description può essere utilizzato per indicare agli utenti l’aspetto di questa barra laterale nel tema. Il parametro wpb è il nome del tema che stiamo elaborando in corso e viene utilizzato per rendere queste stringhe traducibili. Si consiglia di sostituirlo con il nome del tema.
Aggiunta di barre laterali dinamiche pronte per i widget nei file del tema WordPress
Finora abbiamo registrato solo le barre laterali dinamiche. Gli utenti possono trascina e rilascia i widget in queste barre laterali dallo schermo Aspetto ” Widget. Tuttavia, queste barre laterali non appariranno sul sito finché non saranno richiamate in un template come sidebar.php o in qualsiasi altro luogo in cui si desideri visualizzarle. Per aggiungere queste aree widget, modificare il file del template in cui si desidera visualizzarle e incollare questo codice:
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <div id="secondary" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </div> <?php endif; ?>
In questo esempio di codice, abbiamo usato l’ID sidebar per chiamare la barra laterale che vogliamo visualizzare qui. Cambiare l’ID della barra laterale per visualizzare un’altra barra laterale. Per esempio, si possono registrare tre barre laterali per l’area footer e poi chiamarle una per una nel template footer.php del tema.
I widget possono essere molto potenti. È possibile aggiungere widget ai contenuti degli articoli e delle pagine, rendere colorati i widget di testo o estendere la potenza dei widget predefiniti di WordPress. Le barre laterali pronte per i widget, opportunamente posizionate, consentono agli utenti di aggiungere elementi personalizzati ai loro siti web utilizzando una semplice interfaccia di trascinamento e rilascio.
Speriamo che questo articolo vi abbia aiutato a capire come aggiungere barre laterali dinamiche pronte per i widget in WordPress. Vi consigliamo di studiare il codice dei framework di temi come Genesis per imparare come i professionisti li utilizzano nei loro prodotti. Per domande e feedback, lasciate un commento qui sotto.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
nabil says
hi i need two column in side bar ! how can i do that whit css
Jason says
Where can i extend the functionality of my wordpress widgets
Milada says
Hallo team again,
sorry to trouble you, but I would like to specify, that I would need one widget above the themes current Primary Sidebar widget on the right and the other widget on the left side from the article in the middle.
How should I proceed?
Thank you,
Milada
Milada says
Hallo team again,
how do I add a field in the widget and which and where do I paste a field code to have there affiliate links?
Thank you,
Milada
Tanmay Bala says
i want to learn how to use DB Plugin in wordpress and redux framework.
Marc says
This tutorial was a great help.
Been trying to accomplish this for about a week now.
Nice and to-the-point.
Thank you!
Laura says
I just wondered, before I actually paste the code, does this work on a theme that originally doesn’t come with a sidebar? I’m using Book Lite which only has footers.
WPBeginner Support says
Yes, it does.
Admin
Laura says
Thanks so far – I tried to register the sidebar but whenever I hit “save” I get the white screen of death – which I never had before. Any suggestions what could be wrong?
Lohith says
Thanks Alot
Its really wonderful and simple method to explain….
Bakopu says
Thank you very very much sir. Where are you sir , we want to take your blessings by touching your feet.
akhilesh says
thanks sir these post have vry helpful for me
Marcos Nakamine says
Worked perfectly
Thanks
gWorldz says
I am having trouble getting the widget to display o.O
The widget is registering and displaying in the back-end properly with no issues, however, it will only show my widget content if I include content in the previous widget.
I’m using a 2011 child theme and registering an additional footer area.
functions.php snippet:
https://gist.github.com/gWorldz/76273b5901e1b5c4759b#file-functions-php
sidebar-footer.php
https://gist.github.com/gWorldz/b6177ccc9734718dd636#file-sidebar-footer-php
style.css
https://gist.github.com/gWorldz/0f24a9350da164ee2f29#file-style-css
Do you have any idea what I’m doing wrong or what is causing this issue?
Tiger says
Did you ever get any help on this? I am having the same issue.
MJ says
Just wanted to say thanks for this. I Googled to find out how to register a sidebar in WordPress, and hit a few other sites before this one, and yours had the best, clearest, most understandable directions. Well done.
arvind says
your post is helpful to me,
thanks !!!!!!
Dharmendra Prajapati says
Finally i got my dynamic widget ready sidebar after 23 days… I was googled all the sites.. and finally i redirected @ your site.
Thanks
Kevin says
In the second snippet, where you are inserting the widget code into the template, where you have
div id=”secondary”
Should that id change with each widget area.
Ex:
First, Secondary, Third, fourth, etc
WPBeginner Support says
Kevin yes you should, and it should be named after the widget area or the sidebar it is representing.
Admin
SS says
Works for registering the sidebars but when I go to the Appearance » Widgets screen I see all my widgets but nothing to drag them into.
WPBeginner Support says
SS, when you have successfully registered a dynamic widget ready sidebar it will appear on Widgets screen. This means that registering sidebars probably didn’t work.
Admin
Steve Smart says
Hi –
This is a very helpful post. Thankyou!
I’ve been successful using one dynamic widget area, now I’m trying to implement more than one. Everything seems to work as expected, except an odd problem in the dashboard. If I drag a text widget to my second dynamic widget area I can add content as you would expect, and save it, and it produces output on my pages as expected, however if I now revisit the dashboard widgets page, the second widget area does not appear to contain any widgets.
I am using a twentytwelve-child theme, and WordPress 3.7.1.
Any thoughts?
Jackson says
Hearty thanks….You have done such a wonderful work…thanks thanks thanks…
JP says
thanks, found this useful. right to the point.
Praveen Prasad says
Can you tell me where is the Call Function Started ?
Ed Du says
You can also use Headway with a additional block and it will take care of all of this. Or pagelines for that matter.