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

Funciones de menú personalizadas y widgets de barra lateral, síWordPressFunciones destacadas en el tema.

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

chen weiliangAntesconstruir un sitio webEn este tutorial, comparto cómo dar un tema de WordPressAñadir menú personalizado.

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.

iniciar la sesiónback-end de WordPressTablero, vaya 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.