WordPress: Añadir más áreas para widgets y menús

Redes sociales

WordPress

WordPress es el sistema de gestión de contenidos (CMS) más popular del mundo. Utilizado por miles de sitios web, entre los que se incluyen blogs de sitios muy populares. Al usar WordPress como plataforma para tu sitio web, probablemnte descubrirás que necesitas más áreas de widgets o menús de navegación. Hay muchos tutoriales por ahí que cubren este tema en profundidad, pero muchas son difíciles de entender e innecesariamente complicados.

Añadir un área nueva para Widgets

Hay dos archivos que debemos modificar el fin de añadir una área nueva para widgets. Uno de ellos es el archivo functions.php de tu tema y el otro archivo dependerá de donde deseas ubicar el área de widget. Si quieres un nuevo área de widget en la cabecera, entonces tendrás que modificar también el archivo header.php del tema que estés utilizando. En este artículo, vamos a  agregar un nuevo área de widgets en la cabecea  (archivo header.php). En WordPress, la función que defino los áreas de widgets se denomina dynamic_sidebar. Se utiliza principalmente para las barras laterales, pero no hay limitaciones en cuanto a donde puede aparecer en la página.

Paso 1. Editar el archivo functions.php

 

Archivo functions.php

Accede al archivo functions.php del tema que estés utilizando, ábrelo y busca el término “register_sidebar“. Debes de encontrar un código similar al que se muestra a continuación:

function blankslate_widgets_init() {
 register_sidebar( array (
 'name' => __('Sidebar Widget Area', 'blankslate'),
 'id' => 'primary-widget-area',
 'before_widget' => '</pre>
<ul>
	<li id="%1$s" class="widget-container %2$s">', 'after_widget' => "</li>
</ul>
<pre>",
 'before_title' => '</pre>
<h3 class="widget-title">', 'after_title' => '</h3>
<pre>',
 ));
 }

register_sidebar es la función que define cada sidebar o área de widgets. Así que vas a añadir una adicional al código tal y como se muestra a continuación:

function blankslate_widgets_init() {
register_sidebar( array (
'name' => __('Sidebar Widget Area', 'blankslate'),
'id' => 'primary-widget-area',
'before_widget' => '</pre>
<ul>
	<li id="%1$s" class="widget-container %2$s">', 'after_widget' => "</li>
</ul>
<pre>",
'before_title' => '</pre>
<h3 class="widget-title">', 'after_title' => '</h3>
<pre>',
));
register_sidebar(array(
'name' => __('Arriba Derecha', 'blankslate'),
'id' => 'arriba-derecha-widget-area',
'before_widget' => '',
'before_title' => '</pre>
<h3 class="widget-title">', 'after_title' => '</h3>
<pre>',
'after_widget' => ''
));
}

Los elementos cruciales son el nombre del área, el nombre del tema, y el ID. El nombre del área de Widgets es “Arriba Derecha“, el nombre del tema es “BlankSlate“, y el ID es “arriba-derecha-widget-area“.

Una vez has registrado el nuevo área de widgets, guarda el archivo functions.php y ciérralo.

Paso 2. Editar el archivo header.php

En primer lugar debes encontrar el lugar en el código en el que colocar el nuevo área de widgets. Si quieres que sea en la parte superior derecha de la cabecera, tienes que abrir el archivo header.php del tema que estés utilizando, buscar el DIV con el código del logotipo, y tras él, añade el siguiente código:

<div id = "top-right">
   <? php dynamic_sidebar ('arriba-derecha-widget-area'); ?>
</ div>

Recuerda que el ID del área de widgets tal y como lo definimos en el paso anterior es “arriba-derecha-widget-area“.

Una vez hayas guardado los cambios, en la administración de WordPress, encontrarás un área nueva para widgets de nombre “top-right” a la que podrás añadir widgets. Para colocar correctamente el código del área de widgets, deberás con toda probabilidad, añadirle estilos para que flote con relación al DIV del logo y para posicionarlo con precisión.

Recuerda, que deseábamos colocar el área de widgets en la cabecera de la página y por eso hemos añadido al código al archivo header.php. Según dónde desees añadir el área de widgets, editarás los siguientes archivos:

Ubicaciones área widgets

Añadir un nuevo menú de navegación

Al igual que con el área de widgets, también puedes añadir nuevos menús de navegación. Esta función se introdujo en WordPress 3.0.

La función de WordPress que se utiliza para cargar los menús de navegación se llama wp_nav_menu. Al igual que con el área de widgets, el área de navegación requerirá que edites dos archivos. Uno de ellos, es de nuevo, es el archivo functions.php, del tema que estés utilizando, y el otro es el archivo donde deseas que aparezca el nuevo menú de navegación. Si deseas, por ejemplo, un nuevo menú de navegación en el píe de página, entonces tendrás que editar el archivo footer.php del tema que estés utilizando.

Paso 1. Editar el archivo functions.php

Lo primero que tienes que hacer, es buscar el array “register_nav_menus” en el archivo functions.php de tu tema. Deberás encontrar algo similar a lo siguiente:

register_nav_menus( array(
'main-menu' => __( 'Main Menu', 'blankslate' )
) );

Para registrar el nuevo menú, tienes que añaidr un elemento al array, quedando de la siguiente manera:

register_nav_menus( array(
'main-menu' => __( 'Main Menu', 'blankslate' ),
'footer-menu' => __( 'Footer Menu', 'blankslate' )
) );

Observa que se ha añadido una nueva línea para el menú de navegación del pie de página. La primera parte ‘footer-menu’, la utilizarás para llamar al menú de navegación en el código del pie de página. Recuerda que el último elemento del array no debe de tener una coma al final del mismo.

Guarda el archivo functions.php y ciérralo.

Paso 2. Editar el archivo footer.php

Ahora que has registrado ya el nuevo menú de navegación en el archivo de funciones, estás preparado para añadirlo al pie de página.

Archivo footer.php

Abre el archivo footer.php, busca el sitio en el que deseas colocar el menú de navegación y añade el siguiente código:

<div class="footer-nav">
<?php wp_nav_menu( array( 'theme_location' => footer-menu' ) ); ?>
</div>

Una vez hayas guardado el archivo footer.php, en la pantalla de administración de WordPress se te mostrará el nuevo menu de navegación.

Como ocurre con los áreas de widgets nuevos, tendrás que añadir estilos CSS al nuevo menú para que se muestre exactamente donde y como quieres.

¡Esto es todo! El saber cómo agregar áreas de widgets y menús de navegación nuevos, a un tema de wordpress, es fundamental a la hora de personalizarlo y darle el aspecto que realmente deseas para el mismo.

Redes sociales

Deja un comentario

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