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

La inspiración para este tutorial proviene de un tweet que recibí con comentarios para el próximo lanzamiento Tema RS12.


respuesta de twitter de zakmorris

Aunque el pie de página con widgets finalmente no apareció en el lanzamiento del tema RS12, decidí escribir este tutorial para mostrar a las personas cómo agregar exactamente un pie de página con widgets en su tema. En esta guía, aprenderá:

  • El código HTML y CSS necesario para producir el pie de página widgetizado
  • 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 dentro de él

Habrá mucho código en esta publicación, así que si estás preparado, sigue leyendo …

Voy a usar el Rayos Verdes El tema de WordPress como mi ejemplo en este tutorial. Por el momento, el pie de página solo tiene un mensaje estándar de “copyright” y créditos.

El HTML

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

Mensajes recientes

Monthy Archives

archivos diarios

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 ningún lado. Más tarde reemplazaremos esto con etiquetas de plantilla de WordPress. Esto es lo que tenemos hasta ahora:

Green Rays Footer 1

El CSS

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

.elemento de pie de página {
flotador izquierdo;
ancho: 33%;
relleno inferior: 10px;
}
.elemento de pie de página ul {
relleno-izquierda: 15px;
}

Lo que hace este código es 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 da 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 es solo rellenar las listas 15 píxeles a la izquierda.

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

Green Rays Footer 2

Código de WordPress

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

Mensajes recientes

    <?php wp_get_archives (‘type = postbypost&límite = 4 ‘); ?>

Monthy Archives

    <?php wp_get_archives (‘límite = 4’); ?>

archivos diarios

    <?php wp_get_archives (‘type = daily&límite = 4 ‘); ?>

Los parámetros deberían explicarse por sí mismos, pero si no está seguro acerca de alguno de ellos, intente buscar wp_get_archives en Herramienta de búsqueda de etiquetas de plantillas de WordPress. Recuerde, solo estoy usando las etiquetas de plantilla wp_get_archives () como marcador de posición. Los cambiaremos con otros widgets de WordPress más tarde, después de que widgetize el pie de página.

Widgetize It

Para esta sección del tutorial, tomaré prestadas partes de mi anterior temas de widgets 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 (
‘nombre’ => ‘Barra lateral’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘nombre’ => ‘Pie de página’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
?>

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

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

Con este:

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ("Barra lateral")): ?>

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 barra lateral”, agregue lo siguiente.

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ("Pie de página")): ?>

Inmediatamente después del cierre final del “elemento de pie de página” (y por encima del div “claro” que agregamos anteriormente) agregaremos lo siguiente:

<?php endif; ?>

Bien, ahora nuestra barra lateral y pie de página deberían ser widgets. 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:

Green Rays Footer 3

Conclusión

Bueno, eso es lo básico para agregar un pie de página widgetizado a tu tema. Es posible que desee agregar reglas de estilo separadas para otros tipos de widgets, como el calendario o el cuadro de búsqueda. Esto probablemente no funcionará con todos los temas, como el tema RS12, por ejemplo, ya que tenía un pie de página no expandible.

Si alguien quiere el tema de 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 también.

Espero que les haya gustado el tutorial. ¿Agregará un pie de página widgetizado a su tema? ¿Hay algo en el código que usé arriba que haría diferente? Las preguntas, comentarios, sugerencias y críticas son bienvenidas, así que siéntase libre de expresarse en los comentarios..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map