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

Funzionalità del menu personalizzate e widget della barra laterale, sìWordPressFunzionalità in primo piano nel tema.

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

Chen Weiangnel precedentecostruire un sito webIn questo tutorial, condivido come dare un tema WordPressAggiungi menu personalizzato.

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.

登录Backend di WordPressDashboard, 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.