Como engadir widgets de WordPress?Área de widgets de integración de temas

Funcións de menú personalizados e widgets da barra lateral, siWordPressFuncións destacadas no tema.

• Facer un tema, se non inclúe estas dúas funcións, é como unha costela de polo...

Chen WeiliangAntesConstruír unha estaciónNeste tutorial, comparto como dar un tema de WordPressEngadir menú personalizado.

Este artigo describe como engadir funcións de widget personalizadas ao crear un tema.

Do mesmo xeito que engadir menús personalizados aos temas, engadir widgets personalizados leva só 3 pasos.

O primeiro paso, o rexistro do gadget

Para usar o widget, primeiro debes rexistrarte, abrir o ficheiro functions.php baixo o tema de WordPress,

No ficheiro functions.php, engade o seguinte código:

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

?>

Modifique as etiquetas li e h2 en functions.php para que se correspondan coas etiquetas en sidebar.php:

Os títulos li e do módulo h2 de 'before_widget' e 'after_widget' modifican o código segundo a situación real.

(quizais sen modificación)

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

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

O código anterior rexistra unha área de widgets chamada "barra lateral superior":

• O nome que se mostra é "Barra lateral superior".
• Engade unha etiqueta h2 ao título.
• Os elementos de contido están etiquetados con li.

log inBackend de WordPressPanel de control, vai a Aparencia → Widgets.

Se podes ver a área do widget da barra lateral superior no lado dereito da imaxe de abaixo, significa que o rexistro foi exitoso ▼

O segundo paso, chamada gadget

Despois de rexistrar o gadget, pódese chamar no ficheiro de modelo do tema e pódese chamar ao seguinte código no ficheiro sidebar.php.

1) No ficheiro sidebar.php, debaixo da etiqueta li ou div máis grande, insira ▼

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

2) No ficheiro sidebar.php, o máis grandeouArriba, engade ▼

<?php endif; ?>

Paso XNUMX: configurar widgets

1) O gadget está rexistrado e a posición de visualización tamén se define no ficheiro do tema.

• Podes configurar a área do grupo de widgets no fondo de WordPress ▼

2) Despois de gardar, actualice a páxina principal.

• A barra lateral do noso sitio web parecerase á imaxe de abaixo ▼

Podes ver a imaxe de arriba, indicando que o noso gadget foi feito e funciona como sempre.

Como engadir varios widgets de WordPress en diferentes áreas?

Repita os pasos XNUMX e XNUMX para facer que o seu tema de WordPress soporte widgets en diferentes lugares.

Supoña que necesitas engadir un widget á cabeceira, á barra lateral e á parte inferior do tema.

1) Primeiro, cómpre copiar o seguinte código no ficheiro 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ón, engade o seguinte código aos ficheiros header.php, sidebar.php e footer.php respectivamente.

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>

pé de páxina.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>

Tan exitoso!

• Por suposto, tamén pode modificar varios detalles do código segundo as súas necesidades ^_^
• Os 2 pasos anteriores permiten que o resto do tema integre a funcionalidade do widget.

A continuación, continúa compartindo consellos de WordPress para usar widgets.

Consellos sobre o widget de integración de temas de WordPress

Xestiona de forma eficiente widgets personalizados:

1) Despois de engadir widgets ao tema, podes crear un ficheiro separado e poñerlle un nomewidgets.php.

• Para gardar todo o código do widget personalizado engadido no paso 1 a este cartafol.

2) Engade o código ao ficheiro functions.php:

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

3) Garda todo o código do widget de widgets personalizados engadido no paso 1 ao ficheiro widgets.php.

Este método garante que todos os widgets se carguen sen problemas e funcionen en todas as versións de WordPress que admitan widgets.

Deste xeito, podes xestionar os teus ficheiros temáticos de WordPress de forma máis eficiente.