¿Cuál es el significado de $before_widget y $after_widget?

4 minutos de lectura

avatar de usuario
justin liang

¿Cómo funciona la función exact($args) ¿trabajar?
Cuál es el significado de $before_widget, $after_widget?

avatar de usuario
AliAwwad

en las barras laterales, es posible que desee agregar su propia clase a sus widgets, como <div class="well beforeW"> así que esto mantiene todos sus widgets con los mismos estilos que ya definió en el archivo style.css.

a veces, los diseñadores agregan una sombra curva en la parte inferior de cada widget, por lo que debe convertirlo en una imagen, por lo tanto, después del widget es su salvación, haga esto en el widget posterior </div><span class="specialShadow"></span>.

de esta manera puedes agregar nuevos elementos antes y después de cualquier widget que desees.

ejemplo:

register_sidebar(array('name'=>'Footer-Sidebar',
'before_widget' => '<div class="ftr-widget">',
'after_widget' => '</div><span class="specailShadow"></span>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));

observando el ejemplo anterior, así es como inserta $args en funciones. o de manera más clara:

$args = array('name'=>'Footer-Sidebar',
'before_widget' => '<div class="ftr-widget">',
'after_widget' => '</div><span class="specailShadow"></span>',
'before_title' => '<h3>',
'after_title' => '</h3>',
);
register_sidebar($args);

los $before_widget y $after_widget son argumentos en el registro_barra lateral función.

Los widgets solo están disponibles cuando se agregan a las barras laterales, y la función register_sidebar le permite especificar HTML para envolver el widget. Típicamente $before_widget se establecería en algo como <div id="1%$s" class="widget"> o <li id="%1$s" class="widget %2$s"> (predeterminado) y $after_widget se establecería en algo como </div> o </li> (defecto).

Luego, en su widget, extraerá estos argumentos de la barra lateral para usarlos en la salida de su instancia de widget.

  • +1 por explicar cómo extraer esos argumentos, estaba luchando con eso.

    – Greso

    30/10/2013 a las 20:05

Este código se coloca en el archivo functions.php. register_widget(‘Twenty_Eleven_Ephemera_Widget’);

register_sidebar( array(
    'name' => __( 'Main Sidebar', 'twentyeleven' ),
    'id' => 'sidebar-1',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => "</aside>",
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );



      before_widget - HTML to place before every widget(default: '<li id="%1$s" class="widget           %2$s">')
      after_widget - HTML to place after every widget (default: "</li>\n"). 

La respuesta es simple.

Paso 1: utiliza la función register_sidebar() para registrar una nueva barra lateral, dar nombre, identificación y descripción a su barra lateral recién registrada.

Paso 2: una vez que cree un nuevo widget dentro de la barra lateral. Estos widgets deben encerrarse dentro de un marcado. El marcado HTML es su elección, pero debe ser consistente para todos los widgets futuros en la barra lateral.

Por lo tanto, el marcado antes del widget es $before_widget y el marcado después del widget es $after_widget.

Ejemplo:

register_sidebar( array(

        'name' => _('Primary Sidebar', 'primary-sidebar'),
        'id'   => 'primary-area',
        'description' => _('The primary area','dir'),
        'before_widget' => '<div class="myWidget">',
        'after_widget' => "</div>",
        'before_title' => '<h3 class="myWidgetTitle">',
        'after_title' => '</h3>',

    ));

Después de crear la barra lateral, suponga que crea un nuevo widget de texto.

ingrese la descripción de la imagen aquí

Título del widget de texto: Mi contenido de widget de texto: Mi contenido para el widget es esta oración.

El código HTML en el navegador tendrá el siguiente aspecto:

<div class="myWidget">
<h3 class="myWidgetTitle">My Text Widget</h3>
<p>My content for the widget is this sentence"</p>
</h3>
</div>

¿Ha sido útil esta solución?