¿Cómo agregar widgets de WordPress?Integración de temas Área de widgets

Los menús personalizables y los widgets de la barra lateral son características distintivas de los temas de WordPress .

• Hacer un tema, si no incluye estas dos funciones, es como una costilla de pollo...

En su anterior tutorial sobre cómo crear sitios web , Chen Weiliang compartió cómo agregar un menú personalizado a un tema de WordPress.

Este artículo describe cómo agregar funciones de widget personalizadas al crear un tema.

Al igual que agregar menús personalizados a los temas, agregar widgets personalizados requiere solo 3 pasos.

El primer paso, registro de gadget

Para usar el widget, primero debe registrarse, abrir el archivo functions.php en el tema de WordPress,

En el archivo functions.php, agregue el siguiente 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 las etiquetas li y h2 en functions.php para que se correspondan con las etiquetas en sidebar.php:

Los títulos li y module h2 de 'before_widget' y 'after_widget' modifican el código de acuerdo con la situación real.

(tal vez sin modificación)

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

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

El código anterior registra un área de widget llamada "barra lateral superior":

• El nombre que se muestra es "Barra lateral superior".
• Agregue una etiqueta h2 al título.
• Los elementos de contenido están etiquetados con li.

Inicia sesión en el panel de administración de WordPress y ve a Apariencia → Widgets.

Si puede ver el área del widget de la barra lateral superior en el lado derecho de la imagen a continuación, significa que el registro se realizó correctamente ▼

El segundo paso, llamada de gadget.

Después de registrar el gadget, se puede llamar en el archivo de plantilla de tema y se puede llamar al siguiente código en el archivo sidebar.php.

1) En el archivo sidebar.php, debajo de la etiqueta li o div más grande, inserte ▼

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

2) En el archivo sidebar.php, el más grandeoArriba, agrega ▼

<?php endif; ?>

Paso XNUMX: Configurar widgets

1) El gadget está registrado y la posición de visualización también está definida en el archivo del tema.

• Puede configurar el área de grupo de widgets en el fondo de WordPress ▼

2) Después de guardar, actualice la página principal.

• La barra lateral de nuestro sitio web se verá como la imagen a continuación ▼

Puede ver la imagen de arriba, que indica que nuestro dispositivo se ha creado y funciona como de costumbre.

¿Cómo agregar múltiples widgets de WordPress en diferentes áreas?

Repita los pasos XNUMX y XNUMX para hacer que su tema de WordPress admita widgets en diferentes ubicaciones.

Suponga que necesita agregar un widget al encabezado, la barra lateral y la parte inferior del tema.

1) Primero, debe copiar el siguiente código en el archivo 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, agregue el siguiente código a los archivos header.php, sidebar.php y footer.php respectivamente.

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

barra lateral.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>

pie de página.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>

¡Esto es un éxito!

• Por supuesto, también puedes modificar varios detalles en el código según tus necesidades ^_^
• Los 2 pasos anteriores permiten que el resto del tema integre la funcionalidad del widget.

A continuación, continúe compartiendo consejos para usar widgets en WordPress.

Widget de integración de temas de WordPress Consejos para widgets

Administre de manera eficiente los widgets personalizados:

1) Después de agregar widgets al tema, puede crear un archivo separado y nombrarlowidgets.php.

• Para guardar todo el código de widget personalizado agregado en el paso 1 a esta carpeta.

2) Agregue el código al archivo functions.php:

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

3) Guarde todo el código de widget de widgets personalizados agregado en el paso 1 en el archivo widgets.php.

Este método garantiza que todos los widgets se carguen sin problemas y funcionen en todas las versiones de WordPress que admiten widgets.

De esta manera, puede administrar sus archivos de temas de WordPress de manera más eficiente.