Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

WordPress práctico: Creación básica de temas

Sidebars como almacén de widgets

¡Prueba gratis durante 10 días

nuestros 1288 cursos !

Prueba gratis Mostrar modalidades de suscripción
En realidad el concepto de sidebar es un poco obsoleto, porque hoy en día el uso de teléfonos para navegar por la web hace que no podamos colocar barras de elementos en los laterales, así que en realidad van a consistir más en almacenes de widgets controlados desde el personalizador.

Transcripción

Hay una parte de la página que todavía no hemos tocado y que, de hecho, es bastante curiosa. Es todo este contenido que aparece en la parte de abajo en todas las páginas. Esto, aunque parezca mentira, en realidad es un sidebar. Es algo confuso, porque evidentemente, bueno, todos pensamos que un sidebar debería ser una barra colocada en un lado, como su nombre indica, pero realmente esto no es así. Debido a los cambios que ha habido, tecnológicamente hablando, ha llegado un momento en el que tenemos tantos dispositivos móviles para ver páginas, que se ha planteado el que el sidebar en realidad debería recolocarse en estas pantallas, en la parte de abajo, o sea, deberíamos plantearnos el sidebar como un contenedor de otras cosas. Y ese contenedor puede estar colocado a la derecha o puede estar colocado debajo, dependiendo del ancho de pantalla disponible. Visto desde esa perspectiva, entonces este sidebar en realidad, debería ser más bien, un widget-area. Y, de hecho, algo así es lo que ocurre. Si selecciono cualquier elemento de estos, del sidebar... Bien, me voy hasta la parte de arriba. Aquí vemos que tengo, en realidad, una etiqueta aside que es efectivamente, la que se suele utilizar para estos sidebar. Y, de hecho, tiene la clase aplicada widget-area. Y esto es lo interesante, el que es un widget-area. Entonces, va a ser un contenedor donde voy a meter los distintos widgets, que pueden ser, pues eso, entradas recientes, comentarios recientes, etc. Estos widget-area se pueden configurar fácilmente. Dentro de Customizer, dentro de Personalizar, tenemos un apartado para widgets. Haciendo clic sobre él, vemos que aparecen Buscar, Entradas recientes, Comentarios recientes y, qué casualidad, son justo los que aparecen: Buscar, Entradas recientes, Comentarios recientes, etc. ¿Y por qué sabe WordPress que tiene que pintarme este widget aquí? Y es el siguiente y el siguiente. Quiero decir, ¿dónde se configura que aquí en concreto existe un sidebar? Bueno, pues yéndonos al código, esa era la página single, así que me voy a ir a esa plantilla single. Y, yéndome al código, veo que al final tengo este get sidebar. Precisamente sirve para pintar el sidebar que haya configurado. Lo voy a cortar, voy a colocarlo, por ejemplo, aquí arriba, voy a guardar este código. Y ahora, cuando recargue la página, veremos... Voy a cerrar el Customizer. Bien, pues cuando recargue la página, efectivamente, me está apareciendo, justo debajo del cabecero, todo ese sidebar, o sea que, efectivamente, es esa función la que nos está dando las pistas. Esta forma de trabajar, cuando no se sabe, es interesante, la de tener una función que hace algo, bueno, pues decir: "Vale, pues la voy a cambiar de sitio y voy a ver qué pasa". De esa manera, vamos a tener bastante soltura para ver, pues para qué sirve cada cosa y, en caso de estropear la web, no pasa nada, porque es devolver la función a su sitio y listo. Y ahora tengo otra pregunta. Vale, yo tengo este get sidebar, pero ¿de dónde sale el sidebar? Quiero decir, ¿cómo se pinta? Pues tenemos una plantilla para él. Dentro de la raíz tenemos el archivo sidebar.php, que es efectivamente la plantilla. Y también es interesante ver un poco cómo está montado. Por un lado, por supuesto, tengo la pregunta de si realmente hay un sidebar activo. Entonces, en caso de que no lo haya, lo que hago es ejecutar un return. Ese return es una devolución, quiero decir, me hace salir de la función, me hace salir de todo este archivo, y entonces no se ejecuta lo que viene detrás, que es básicamente esa idea. Por otro lado, una vez que estoy seguro de que tengo un sidebar activo, entonces sí no es problema, lo siguiente que hago es añadir la etiqueta aside, que es la que se utiliza para envolver ese sidebar. En concreto, vemos que es aquí donde estoy añadiendo esta clase, widget-area, o sea que aquí podría cambiarlo, si quiero, por el siderbar, por ejemplo, me serviría exactamente igual. Y luego, por último, tengo una función php dynamic_sidebar, que es la que sirve para recuperar este sidebar-1. Vale, muy bien, he descubierto dónde estoy pintando ese sidebar, he descubierto dónde se añade la estructura de ese sidebar, pero ¿dónde está realmente este sidebar-1? ¿Dónde se ha nombrado, dónde se han añadido las propiedades que tiene? Si me voy a funciones, a functions.php. Aquí lo tengo, mitema_widgets_init, o sea, la inicialización de los widgets que voy a tener dentro de este tema. Para recuperar información, para poder ver información sobre ello, tenemos aquí un link que tiene precisamente eso, la explicación de cómo se puede registrar un nuevo sidebar. Y, de hecho, aquí tengo un primer sidebar, pero si quiero añadir más, lo único que necesito es copiar este y pegarlo más abajo, y así tendría un segundo sidebar. Las opciones que tiene son el nombre. Este nombre es el nombre que va a aparecer para diferenciar ese sidebar, El identificador, que es el identificador único del que estaba hablando previamente, o sea, el que tenemos aquí y aquí. Si yo añadiese un segundo sidebar, pues lo que tendría que hacer sería poner una condicional en la que pregunte si está activo el primero, si está activo el segundo. Entonces, en el caso de que se cumpla la condición del primero, ejecutaría este código; en caso de que se cumpliese la del segundo, cargaría el segundo widget; sería tan fácil como eso. Luego tengo una descripción, que es la descripción del widget. Tengo etiquetas que se van añadir antes y después de ese widget y que, gracias a ellas, voy a poder personalizarlo. Y luego, también, etiquetas para añadir antes del título y después del título. En realidad, no estoy hablando del título, estoy hablando de la etiqueta que lo envuelve y, de hecho, si selecciono cada uno de estos widgets, pues vamos a ver que, efectivamente, está añadiendo ese h2 con la clase widget-title y luego, ya, añade ese título, o sea, es lo que está configurando aquí. También es interesante pensar que, efectivamente, estos elementos en concreto, sirven para definir cómo se van a pintar los widgets que se van a meter en el widget-area. Estos otros elementos de aquí, estas otras propiedades que estoy pasando, sirven para definir cómo se va a ver ese sidebar. Bueno, pues con toda esta información, a partir de aquí podemos ya empezar a trabajar con el aspecto de ese sidebar.

WordPress práctico: Creación básica de temas

Aprende a dar un nuevo aspecto a tu página de WordPress, creando un tema desde cero usando como base las plantillas Underscore y dándole aspecto a nuestro gusto.

4:16 horas (48 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:11/08/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.