Com afegir widgets de WordPress?Zona de widgets d'integració de temes

Funcions de menú personalitzades i widgets de la barra lateral, síWordPressCaracterístiques destacades del tema.

• Fer un tema, si no inclou aquestes dues funcions, és com una costella de pollastre...

Chen Weiliangen l'anteriorconstruir un lloc webEn aquest tutorial, comparteixo com donar un tema de WordPressAfegeix un menú personalitzat.

Aquest article descriu com afegir funcions de widget personalitzades quan es crea un tema.

Igual que afegir menús personalitzats als temes, l'addició de widgets personalitzats només requereix 3 passos.

El primer pas, el registre del gadget

Per utilitzar el giny, primer us heu de registrar, obrir el fitxer functions.php sota el tema de WordPress,

Al fitxer functions.php, afegiu el codi següent:

<?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>',
    ) );
}

?>

Modifiqueu les etiquetes li i h2 a functions.php perquè es corresponguin amb les etiquetes a sidebar.php:

Els títols de li i mòdul h2 de 'before_widget' i 'after_widget' modifiquen el codi segons la situació real.

(potser sense modificacions)

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

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

El codi anterior registra una àrea de widget anomenada "barra lateral superior":

• El nom que es mostra és "Barra lateral superior".
• Afegiu una etiqueta h2 al títol.
• Els elements de contingut estan etiquetats amb li.

登录Backend de WordPressTauler, aneu a Aparença → Ginys.

Si podeu veure l'àrea del giny de la barra lateral superior a la part dreta de la imatge següent, vol dir que el registre s'ha realitzat correctament ▼

El segon pas, trucada de gadget

Un cop registrat el gadget, es pot cridar al fitxer de plantilla del tema i es pot cridar el codi següent al fitxer sidebar.php.

1) Al fitxer sidebar.php, a sota de l'etiqueta li o div més gran, inseriu ▼

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

2) Al fitxer sidebar.php, el més granoA dalt, afegiu ▼

<?php endif; ?>

Pas XNUMX: configureu els widgets

1) El gadget està registrat i la posició de visualització també es defineix al fitxer del tema.

• Podeu configurar l'àrea del grup de widgets al fons de WordPress ▼

2) Després de desar, actualitzeu la portada.

• La barra lateral del nostre lloc web s'assemblarà a la imatge següent ▼

Podeu veure la imatge de dalt, que indica que el nostre gadget s'ha fet i que funciona com de costum.

Com afegir diversos ginys de WordPress en diferents àrees?

Repetiu els passos XNUMX i XNUMX per fer que el vostre tema de WordPress sigui compatible amb ginys en diferents ubicacions.

Suposem que necessiteu afegir un widget a la capçalera, la barra lateral i la part inferior del tema.

1) Primer, heu de copiar el codi següent al fitxer 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) A continuació, afegiu el codi següent als fitxers header.php, sidebar.php i footer.php respectivament.

header.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>

footer.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>

Això és un èxit!

• Per descomptat, també podeu modificar diversos detalls del codi segons les vostres necessitats ^_^
• Els 2 passos anteriors permeten que la resta del tema integri la funcionalitat del giny.

A continuació, continueu compartint consells per utilitzar ginys a WordPress.

Consells de widgets d'integració de temes de WordPress

Gestioneu eficaçment els ginys personalitzats:

1) Després d'afegir ginys al tema, podeu crear un fitxer independent i posar-lo un nomwidgets.php.

• Per desar tot el codi de widget personalitzat afegit al pas 1 a aquesta carpeta.

2) Afegiu el codi al fitxer functions.php:

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

3) Deseu tots els codis de widgets personalitzats afegits al pas 1 al fitxer widgets.php.

Aquest mètode garanteix que tots els ginys es carreguin sense problemes i funcionin en totes les versions de WordPress que admeten ginys.

D'aquesta manera, podeu gestionar els vostres fitxers temàtics de WordPress de manera més eficient.