zakmorris twitter response

Agregue un widget de pie de página a su tema de WordPress

La inspiración para este tutorial proviene de un tweet que recibí con comentarios para la próxima publicación Tema RS12.

Respuesta de Twitter de Zakmorris

Aunque el pie de página del widget finalmente no llegó a la versión del tema RS12, decidí escribir este tutorial para mostrarle a la gente cómo agregar exactamente un pie de página de widget en su tema. En esta guía, aprenderá:

  • El código HTML y CSS necesario para producir el pie de página con widget.
  • Cómo agregar etiquetas de plantilla de WordPress de uso común como marcadores de posición
  • Cómo widgetizar el pie de página y colocar widgets en él

Habrá mucho código en este artículo, así que si está listo, siga leyendo …

Usaré el Rayos verdes Tema de WordPress como mi ejemplo en este tutorial. Por el momento, el pie de página tiene solo un mensaje y créditos estándar de “derechos de autor”.

HTML

El primer paso es agregar el marcado HTML. Digamos que vamos a tener tres secciones diferentes en el pie de página con widgets con listas de las publicaciones más recientes, archivos mensuales y archivos diarios. Colocaremos este código HTML encima de la línea actual de “derechos de autor”.

<div class="footer-item">
<h3>Recent Posts</h3>
<ul>
<li><a href='#' title='Featured post'>Featured post</a></li>
<li><a href='#' title='Blockquotes'>Blockquotes</a></li>
<li><a href='#' title='How the ‘more’ tag works'>How the ‘more’ tag works</a></li>
<li><a href='#' title='Order or Unorder'>Order or Unorder</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Monthy Archives</h3>
<ul>
<li><a href='#' title='March 2008'>March 2008</a></li>
<li><a href='#' title='February 2008'>February 2008</a></li>
<li><a href='#' title='January 2008'>January 2008</a></li>
<li><a href='#' title='December 2007'>December 2007</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Daily Archives</h3>
<ul>
<li><a href='#' title='March 7, 2008'>March 7, 2008</a></li>
<li><a href='#' title='February 9, 2008'>February 9, 2008</a></li>
<li><a href='#' title='January 4, 2008'>January 4, 2008</a></li>
<li><a href='#' title='December 22, 2007'>December 22, 2007</a></li>
</ul>
</div>
<div class="clear"></div>

Básicamente, este código coloca cada “widget” en un div. Dentro de cada widget hay un encabezado y una lista desordenada con enlaces. Sí, sé que los enlaces no van a ninguna parte. Reemplazaremos esto con etiquetas de plantilla de WordPress más adelante. Esto es lo que tenemos hasta ahora:

Rayos verdes Pie de página 1

CSS

Como puede ver, no se ve tan bien sin el estilo CSS. Agregue el siguiente código a su hoja de estilo.

.footer-item {
float: left;
width: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}

Lo que hace este código es hacer flotar cada elemento de pie de página a la izquierda, lo que básicamente significa que pueden estar uno al lado del otro. El ancho se establece en 33%, lo que deja suficiente espacio para tres elementos de pie de página en una sola fila. También se agrega un poco de relleno debajo de cada elemento de pie de página. La segunda pieza solo llena las listas 15 píxeles a la izquierda.

Ahora puede ver que HTML y CSS están comenzando a combinarse. Esto es lo que debería tener hasta ahora:

Rayos verdes Pie de página 2

Código de WordPress

Por el momento, tenemos un montón de enlaces HTML vacíos, sin código de WordPress real. Reemplacemos las listas en Publicaciones recientes, Archivos mensuales y Archivos diarios con las etiquetas de plantilla de WordPress equivalentes. Reemplace lo que tiene actualmente con lo siguiente:

<div class="footer-item">
<h3>Recent Posts</h3>
<ul>
<?php wp_get_archives('type=postbypost&limit=4'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Monthy Archives</h3>
<ul>
<?php wp_get_archives('limit=4'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Daily Archives</h3>
<ul>
<?php wp_get_archives('type=daily&limit=4'); ?>
</ul>
</div>

La configuración debería ser bastante clara, pero si no está seguro de alguna de ellas, intente buscar wp_get_archives en el Buscador de etiquetas de plantillas de WordPress. Recuerde, solo estoy usando las etiquetas de plantilla wp_get_archives () como marcador de posición. Los reemplazaremos más tarde con otros widgets de WordPress, después de que hayamos widgetizado el pie de página.

Widgetize It

Para esta sección del tutorial, tomaré prestadas partes del anterior. widgets temáticos Tutorial.

El primer paso es registrar las “barras laterales”. Para hacer esto, simplemente reemplace el contenido actual del archivo functions.php con lo siguiente:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '<div class="sidebaritem">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer',
'before_widget' => '<div class="footer-item">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>

Ahora iremos a sidebar.php y reemplazaremos la etiqueta condicional de la barra lateral dinámica actual con esto:

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

Con eso:

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

Ahora iremos a nuestro archivo footer.php y envolveremos los elementos del pie de página en su propia etiqueta condicional de la barra lateral respectiva. Justo antes del primer div “elemento de la barra lateral”, agregue lo siguiente.

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

Justo después del div de cierre final “footer-item” (y encima del div “clear” que agregamos anteriormente), agregaremos lo siguiente:

<?php endif; ?>

Muy bien, ahora nuestra barra lateral y el pie de página debe tener un widget. Probémoslo agregando algunos widgets en el pie de página. Agregaré un widget de Blogroll, un widget de Comentarios recientes y un widget de texto. Así es como debería verse:

Rayos verdes Pie de página 3

Conclusión

Bueno, esos son los conceptos básicos para agregar un pie de página como widget a su tema. Es posible que desee agregar reglas de estilo independientes para otros tipos de widgets, como el calendario o el cuadro de búsqueda. Probablemente no funcione con todos los temas, como el tema RS12, por ejemplo, porque tenía un pie de página no expandible.

Si alguien quiere el tema Green Rays actualizado por casualidad, puede descargarlo aquí. De esta manera, puede ver exactamente dónde agregué el código. Puedes compararlo con el tema original además.

Espero que les haya gustado el tutorial. ¿Vas a agregar un pie de página con widget a tu tema? ¿Hay algo en el código que utilicé anteriormente que harías de manera diferente? Las preguntas, los comentarios, las sugerencias y las críticas son bienvenidos, así que no dude en escuchar sus comentarios en los comentarios.

Deja un comentario

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

Ir arriba