Come aggiungere i widget di WordPress?Integrazione del tema Area dei widget

I menu personalizzabili e i widget della barra laterale sono caratteristiche distintive dei temi WordPress .

• Fare un tema, se non include queste due funzioni, è come una costoletta di pollo...

Nel suo precedente tutorial sulla creazione di siti web , Chen Weiliang ha mostrato come aggiungere un menu personalizzato a un tema WordPress.

Questo articolo descrive come aggiungere funzioni widget personalizzate durante la creazione di un tema.

Proprio come l'aggiunta di menu personalizzati ai temi, l'aggiunta di widget personalizzati richiede solo 3 passaggi.

Il primo passo, la registrazione del gadget

Per utilizzare il widget è necessario prima registrarsi, aprire il file functions.php sotto il tema WordPress,

Nel file functions.php, aggiungi il seguente codice:

<?php

//侧边栏小工具
if ( function_exists('register_sidebar') ) {
    register_sidebar( array(
        'name' => __( 'Top Sidebar' ),
        'id' => 'top-sidebar',
        'description' => __( 'The top sidebar' ),
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );
}

?>

Modifica i tag li e h2 in functions.php in modo che corrispondano ai tag in sidebar.php:

I titoli li e del modulo h2 di 'before_widget' e 'after_widget', modificano il codice in base alla situazione attuale.

(forse senza modifiche)

        'before_widget' => '<li>',
        'after_widget' => '</li>',

        'before_title' => '<h2>',
        'after_title' => '</h2>',

Il codice sopra registra un'area widget denominata "top-sidebar":

• Il nome visualizzato è "Barra laterale superiore".
• Aggiungi un tag h2 al titolo.
• Gli elementi di contenuto sono contrassegnati con li.

Accedi alla dashboard di amministrazione di WordPress e vai su Aspetto → Widget.

Se riesci a vedere l'area del widget della barra laterale superiore sul lato destro dell'immagine qui sotto, significa che la registrazione è andata a buon fine ▼

Il secondo passo, chiamata gadget

Dopo che il gadget è stato registrato, può essere chiamato nel file del modello del tema e il codice seguente può essere chiamato nel file sidebar.php.

1) Nel file sidebar.php, sotto il tag li o div più grande, inserisci ▼

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(top-sidebar) ) : ?>

2) Nel file sidebar.php, il più grandeoSopra, aggiungi ▼

<?php endif; ?>

Passaggio XNUMX: imposta i widget

1) Il gadget è registrato e anche la posizione di visualizzazione è definita nel file del tema.

• Puoi impostare l'area del gruppo di widget sullo sfondo di WordPress ▼

2) Dopo il salvataggio, aggiornare la prima pagina.

• La barra laterale del nostro sito Web sarà simile all'immagine qui sotto ▼

Puoi vedere l'immagine sopra, che indica che il nostro gadget è stato realizzato e funziona come al solito.

Come aggiungere più widget WordPress in aree diverse?

Ripeti i passaggi XNUMX e XNUMX per rendere i tuoi widget di supporto del tema WordPress in posizioni diverse.

Supponiamo di dover aggiungere un widget all'intestazione, alla barra laterale e alla parte inferiore del tema.

1) Innanzitutto, devi copiare il seguente codice nel file functions.php ▼

if (function_exists('register_sidebar')) {

register_sidebar(array(
'name' => 'Header',
'id' => 'header',
'description' => 'This is the widgetized header.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'description' => 'This is the widgetized sidebar.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Footer',
'id' => 'footer',
'description' => 'This is the widgetized footer.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));

}

2) Successivamente, aggiungi il seguente codice rispettivamente ai file header.php, sidebar.php e footer.php.

intestazione.php ▼

<div id="widgetized-header">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

<div>
<p><strong>Widgetized Header</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

sidebar.php ▼

<div id="widgetized-sidebar">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

<div>
<p><strong>Widgetized Sidebar</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

piè di pagina.php ▼

<div id="widgetized-footer">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

<div>
<p><strong>Widgetized Footer</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

Questo è un successo!

• Ovviamente puoi anche modificare vari dettagli nel codice in base alle tue esigenze ^_^
• I 2 passaggi precedenti consentono al resto del tema di integrare le funzionalità del widget.

Quindi, continua a condividere suggerimenti per l'utilizzo dei widget in WordPress.

Suggerimenti per il widget di integrazione del tema WordPress

Gestisci in modo efficiente i widget personalizzati:

1) Dopo aver aggiunto i widget al tema, puoi creare un file separato e nominarlowidgets.php.

• Per salvare in questa cartella tutto il codice del widget personalizzato aggiunto nel passaggio 1.

2) Aggiungi il codice al file functions.php:

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

3) Salva tutto il codice del widget widget personalizzato aggiunto nel passaggio 1 nel file widgets.php.

Questo metodo garantisce che tutti i widget vengano caricati senza problemi e funzionino su tutte le versioni di WordPress che supportano i widget.

In questo modo, puoi gestire i tuoi file del tema WordPress in modo più efficiente.