Sidebars en WordPress – Aprovechar su potencial en un sitio multiusuario

Nivel: Intermedio.

Inglés: básico.

PHP: Intermedio – (funciones, programación secuencial)

WordPress: básico – Estructura básica de un Theme, haber extendido/modificado uno

 


 

¿Que es un theme?

Theme es la plantilla de wordpress ubicada en la carpeta wp-content, en este screenshoot podemos ver la estructura de la plantilla TwentyTwenty.

Con este articulo pretendo maquetar básicamente un poco la idea que puedo enseñar lo que sé de WordPress y al mismo tiempo maquetar este estilo de posteos que voy a realizar normalmente.

 

¿Que es un sidebar?

Sidebar significa barra lateral en inglés. En WordPress es un componente dinamico del cual podemos sacar provecho en nuestro Theme para incrustar funcionalidad personalizada, información estática o dinámica (Widgets). Podemos editarlo desde el dashboard.

Ejemplo de un sidebar en un blog sobre wordpress

Como todo lo que voy aprendiendo me doy cuenta la cantidad de tiempo que nos permite ahorrar si implementamos las cosas bien, pensando a futuro en todas las modificaciones que podemos realizar en nuestro sitio.

Si creamos “zonas dinamicas” en nuestro sitio, podemos cambiarlas en cualquier momento, sin necesidad de volver a escribir codigo. Eso es un sidebar, una zona dinamica, la cual te toma 15 minutos registrar en functions (Si nunca lo hiciste), y despues la ubicas donde mas te convenga, estilizas con css y listo. Ya tenes codigo reutilizable y una zona modificable desde el panel de administración. Genial no?

 

What are Sidebars What are Sidebars

A sidebar is any widgetized area of your theme. Widget areas are places in your theme where users can add their own widgets. You do not need to include a sidebar in your theme, but including a sidebar means users can add content to the widget areas through the Customizer or the Widgets Admin Panel.

 

WordPress y los sidebars:

En WordPress, se utilizan como una “widgetized area” osea que es un elemento dinámico y modificable desde el panel de administración en el menú widgets.

Es un elemento facil de registrar en el archivo functions.php de tu Theme

Screenshoot widgets
Apariencia en español.
widget personalizado wordpress
Ejemplo de un sidebar personalizado creado para quartex

 

Ejemplo de footer widgetizado de CSS tricks. Esto es algo que podemos lograr con wordpress.

Un poco de código:

Por si no quedo claro el sidebar es el espacio donde insertamos un widget, dentro de un sidebar pueden incrustarse varios widgets.

En tu archivo functions.php tenes una función que se llama NombreDeTuTheme_widgets_init() ahí mismo podes registrar cuantos sidebars quieras.

Sidebars

Ejemplo de widgets_init()

Está es la forma mas facil, buscamos en nuestro archivo functions.php la función “widgets_init()” y ponemos nuestro código.


/**
* Register widget area.
*
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
*/
function NombreDeTuTheme_widgets_init() {
/**
* Acá va el codigo de cada sidebar que quieras registrar podes repetirlo cuantas veces quieras
* register_sidebar(
* Acá iria nuestro sidebar
* )
* Existe otra forma que es hacer un action hook
*/
}
add_action( 'widgets_init', 'NombreDeTuTheme_widgets_init' );

Ejemplo utilizando un action hook

La otra forma, es, crear una funcion aparte que se llame por ejemplo mi_sidebar() y hacer un add_action() osea enganchar nuestra función a una acción propia de wordpress.

Actions


//Agregamos el action hook a widgets_init
add_action( 'widgets_init', 'mi_sidebar' );
function mi_sidebar() {
/* Registramos un sidebar o dos, o tres. /
//register_sidebar(
//Acá va nuestro sidebar
//)
//register_sidebar(
//Acá va nuestro otro sidebar y etc
//)
);
/
Podemos hacerlo varias veces. */
}

 

Ejemplo de Sidebar

Los sidebars, en la práctica, al registrarlos son casi todos iguales, cambia el identificador o id, la descripción, el nombre, etc. Podes customizarlos un monton, pero en general se va a ver bastante repetido el código y no hay caso, es así.

Así que básicamente es copiar, pegar, customizar, guardar y seguir tu camino :mrgreen:

/**
* Header-area sidebar
* This is a little space where we can put a banner ad, or some user conversion mechanism, lang switcher.
* Espacio dinamico donde podemos insertar un ad, algun mecanismo de conversion o la barra de idiomas.
*/
register_sidebar(
array(
//Identificador de nuestro sidebar
'id' => 'header-area',
//Nombre de nuestro sidebar (Será utilizado en el dashboard)
'name' => esc_html__( 'Multipurpose Header', 'wpQuartex' ),
//Descripción de nuestro sidebar
'description' => esc_html__( 'Sidebar de proposito general para insertar contenido dinamico en la cabezera' ),
//Formato html opcional before es antes, y after es despues.
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
)
);

Invocar nuestro sidebar, en el theme:

get_sidebar()

Ahora si lo divertido, abrimos nuestro archivo header.php (o el que tu quieras) de nuestro theme e invocamos nuestro sidebar utilizando el id.

Le ponemos un poco de formato html, algunos comentarios, y estamos ready.

Ejemplo de get_sidebar() en wordpress

Usar nuestro sidebar:

Por ultimo gregamos un widget a nuestro sidebar desde el dashboard de wordpress, la sección widgets.

https://example.com/wp-admin/widgets.php

Editando un widget en wordpress

Y como podemos ver, un sidebar en el header de quartex

Resultado final de nuestro sidebar

Eso fue todo por ahora, muchisimas gracias por leerme 😎

 

Notas de edición

[WIP] blogpost, maqueta, wordpress, tutorial

Creado en noviembre de 2020

Editado, revisado y finalizado en enero de 2021

Propiedad de quartex.net

3 thoughts on “Sidebars en WordPress – Aprovechar su potencial en un sitio multiusuario


Quartex es un portal que permite Expresarnos.


Conectando y Compartiendo con otras personas con tus mismos intereses.
Podemos jugar, Compartir links y media, Contar historias o Enseñar algo.

Compartimos Media, Consultamos o Pedimos ayuda, Conectamos.


Quartex se integra con las redes actuales, y potencia tu idea. /concepto
Saber más - FAQ