Vea lo fácil que es widgetizar temas de WordPress

Preparar sus temas para los widgets no es tan difícil como podría pensar. La creación de widgets de su tema generalmente implica preparar los elementos de la barra lateral para los widgets. Paso ¿Qué es exactamente un tema listo para widgets? en un artículo anterior. Si tiene un tema codificado con CSS limpio, puede que le lleve 5 minutos o menos, y le mostraré cómo hacerlo.

  • Asegúrate de que tu tema sea “compatible con widgets”.
  • Creando un archivo functions.php para guardar la barra lateral
  • Inserte su barra lateral estática en la etiqueta condicional de la barra lateral dinámica
  • Creación de varias áreas listas para widgets.
  • Otras formas creativas de usar widgets

Comienza a crear widgets sobre tus temas y sigue leyendo …

Lo primero que debe hacer es asegurarse de que su barra lateral (o cualquier widget que cree) sea como me gusta llamarlo widget fácil de usar. Implica formatear HTML de cierta manera. El elemento de barra lateral ideal en un tema de WordPress listo para widgets está codificado de la siguiente manera:

<h2>Categories</h2>
<ul>
<li><a href="http://example.com/?cat=1">Category 1</a></li>
<li><a href="http://example.com/?cat=2">Category 2</a></li>
</ul>

Observe cómo este es un código muy limpio. No se agregan divs ni clases a las etiquetas

    y

  • .

    Los siguientes cuatro ejemplos también se pueden widget.

    <div class="sidebar-item">
    <h2>Categories</h2>
    <ul>
    <li><a href="http://example.com/?cat=1">Category 1</a></li>
    <li><a href="http://example.com/?cat=2">Category 2</a></li>
    </ul>
    </div>

    <li class="sidebar-item">
    <h2>Categories</h2>
    <ul>
    <li><a href="http://example.com/?cat=1">Category 1</a></li>
    <li><a href="http://example.com/?cat=2">Category 2</a></li>
    </ul>
    </li>

    <h2>Categories</h2>
    <div class="sidebar-item">
    <ul>
    <li><a href="http://example.com/?cat=1">Category 1</a></li>
    <li><a href="http://example.com/?cat=2">Category 2</a></li>
    </ul>
    </div>

    <h2 class="sidebar-heading">Categories</h2>
    <ul>
    <li><a href="http://example.com/?cat=1">Category 1</a></li>
    <li><a href="http://example.com/?cat=2">Category 2</a></li>
    </ul>

    Sí, hay divs agregados en estos ejemplos, pero funcionan con el sistema de widgets de WordPress. Siempre que nada entre las dos etiquetas

      es necesario para el estilo CSS, debería estar listo. Dicho esto, el siguiente ejemplo es no widget fácil de usar.

      <h2>Categories</h2>
      <ul class="blahblahblha">
      <li class="blah"><a href="http://example.com/?cat=1">Category 1</a></li>
      <li class="blah"><a href="http://example.com/?cat=2">Category 2</a></li>
      <div id="bottom-of-list"></div>
      </ul>

      De hecho, los estilos se agregan a las etiquetas.

        y

      • . Asegúrese de que su tema esté codificado utilizando uno de los métodos más “ideales” para evitar este problema.

        Guardar barras laterales

        El siguiente paso es evaluar su diseño. ¿Cuántas áreas de widgets quieres? Uno no es un problema. Dos o más tampoco son un problema. Incluso puede formatearlos de diferentes maneras, siempre que sean compatibles con los widgets, como se explicó anteriormente.

        Lo primero que necesitará es crear un functions.php archivo en su directorio de temas. Este es un archivo que puede usar para modificar la funcionalidad de WordPress con código PHP, sin usar un complemento o sin modificar el código base. Todo está integrado en un tema específico.

        Volvamos a este gran formato de elemento de barra lateral para widgets, el primer ejemplo de este artículo. Para guardar una barra lateral con este formato, colocaríamos el siguiente código en nuestro functions.php bajar ó dejar algo.

        <?php
        if ( function_exists('register_sidebar') )
        register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
        ));
        ?>

        Suena bastante claro, ¿verdad? El título “Categorías” se colocó entre

        y

        , es por eso que establecemos este valor para before_title y after_title respectivamente. También puede colocar el código en el otro before_widget y after_widget para incluir cada elemento del widget en otro código que pueda necesitar para su diseño.

        Etiquetas de barra lateral condicionales

        Oye, ¿una etiqueta condicional? Con un poco de suerte suena familiar. Usaremos algo similar para comprobar si la barra lateral está registrada con widgets y si están activos. En la parte superior de la barra lateral (o donde desea que comiencen a aparecer los widgets), coloca el siguiente código.

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

        Los elementos de la barra lateral están en el medio, entonces …

        <?php endif; ?>

        Asegúrate de tener el terminara si; después de abrir si la declaración en algún momento, o todo su tema se romperá. Si ha hecho todo bien en este punto, su tema debería estar listo para widgets. Sin embargo, aún no hemos terminado …

        Varias áreas listas para widgets

        Con algunas adiciones y cambios en su functions.php archivo y algunos otros si declaraciones en sus archivos de tema, puede tener tantas áreas con widgets como desee, cada una con su propio nombre único.

        Digamos que tiene un diseño de tres columnas con 2 barras laterales, una a la izquierda y otra a la derecha. Quieres widgetizar estos dos por separado. Trabajaremos con la estructura de la barra lateral del primer ejemplo para ambos. Su archivo functions.php se verá así:

        <?php
        if ( function_exists('register_sidebar') )
        register_sidebar(array(
        'name' => 'Left Sidebar',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
        ));
        if ( function_exists('register_sidebar') )
        register_sidebar(array(
        'name' => 'Right Sidebar',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
        ));
        ?>

        Note el nuevo apellido parte de la mesa. Puedes nombrar lo que quieras, pero trata de ser descriptivo. Ahora, cuando vayas a tu sidebar.php o donde sea que cada una de sus barras laterales esté en su tema, usará la siguiente etiqueta condicional, con el nombre de la barra lateral que eligió en functions.php. Asegúrese también de que este archivo no contenga espacios o saltos de línea incorrectos, ya que esto puede provocar que aparezcan mensajes de advertencia durante la edición.

        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Left Sidebar") ) : ?>Contenido predeterminado de la barra lateral izquierda aquí …
        <?php endif; ?>

        Y para la barra lateral derecha …

        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Right Sidebar") ) : ?>Contenido predeterminado de la barra lateral derecha aquí …
        <?php endif; ?>

        Asegúrese de que todo sea coherente en cuanto a los nombres que eligió en los dos archivos.

        Otras cosas que puedes hacer con los widgets

        No es necesario utilizar widgets para las barras laterales. Se pueden usar para otras cosas como pies de página o incluso en el encabezado. En teoría, ni siquiera necesita poner ningún código “predeterminado” entre la etiqueta condicional. Sea creativo y use su imaginación. Use un widget en su encabezado para rotar anuncios, o tener un widget de cuadro de inicio de sesión en el pie de página, o donde quieras, tú decides.

        Conclusión

        Espero que haya aprendido de este tutorial y ahora sepa cómo widgetizar sus temas. Si obtiene un error como “encabezados ya enviados …” mientras edita algo, es posible que deba verificar su archivo functions.php para asegurarse de que no haya espacio debajo de la etiqueta de cierre?>.

        Más información está disponible en Automático y WPDesigner. Hay otras versiones “cortas” del código que creé en estas páginas.

        No dudes en comentar o compartir si te gustó. Agradezco todos los comentarios. También asegúrese de suscribirse a el hilo si aún no lo ha hecho para las últimas versiones de temas y tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba