Trucos para personalizar tus widgets con CSS

Hoy te traigo un par de trucos para personalizar tus widgets con CSS y HTML.

Te dejaré el código utilizado y algunos enlaces para ampliar información. Vamos allá.

Cómo añadir código en los widgets de tu sidebar

Lo más habitual, es utilizar el widget de «Texto arbitrario/html», el cual te permite pegar tu código.

Dicho código puede ser html y css, y lo puedes generar tú o ser un código copiado de otro sitio. (Ejemplo: código para un formulario de MailChimp)

Ahora bien, este widget que nos ofrece Wordpress por defecto, es como un editor de «texto plano», no es muy cómodo.

Existe un plugin que nos facilita la vida, se llama Black Studio TinyMCE Widget.

Ya he hablado de él en este otro artículo, y básicamente sirve para tener un editor mucho más amigable para escribir, como el que puedes tener por ejemplo en la creación de las propias entradas.

Dicho artículo anterior contiene un video mio sobre cómo utilizar el plugin e insertar código en los widgets.

Además, no toma demasiados recursos por lo que es un plugin que yo suelo utilizar bastante y no me importa tenerlo instalado.

Ejemplo de mi widget de categorías actual

A petición de mi amigo Roberto, voy a explicar el código que lleva el widget de categorías que tengo puesto ahora mismo.

En realidad es muy sencillo: se trata de una lista desordenada de html, con una clase de css aplicada.

Código de ejemplo de HTML en el widget

<div class=»mis-categorias»>

<ul>

<li><a href=»enlace_categoria_1″>Nombre de categoría 1</a></li>

<li><a href=»enlace_categoria_2″>Nombre de categoría 2</a></li>

<li><a href=»enlace_categoria_3″>Nombre de categoría 3</a></li>

</u>

</div>

Código CSS a insertar para la clase «mis-categorias» en el archivo style.css

.mis-categorias {
background-color: #005c8c;
color: white;
text-align: center;
margin-top: -20px;
margin-bottom: -20px;
width: 210px;
padding: 8px 7px 2px 7px;
}

.mis-categorias a {
color: white;
}

.mis-categorias li a :hover{
color: grey;
}

¿Dónde aplicar ese código CSS para la clase?

Lo más directo, es ir a «Apariencia/Editor», que por defecto nos abre el archivo style.css de nuestro theme. Ahí podemos pegar este código, preferentemente en la parte inferior.

Ahora bien, hay que tener en cuenta, que haciéndolo así cuando actualicemos nuestra plantilla, el código se sustituirá por la nueva y el nuestro personalizado desaparecerá.

Por lo tanto, es mejor utilizar siempre los Child Themes (tengo un post pendiente sobre esto) o directamente vincular un archivo .css nuestro de forma externa, lo cual puede ser más complicado y dependiendo desde donde lo vinculemos también puede desaparecer dicha vinculación al archivo cuando actualicemos la plantilla.

Otra opción sería insertar el CSS directamente en el widget, sobre las etiquetas HTML, pero aquí nos imposibilita el tema de cambiar de color al pasar sobre los enlaces, por lo del a:hover

Definitivamente, tengo que hacer un post sobre los Child Themes y la problemática de añadir código personalizado a nuestras plantillas.

Ya te adelanto, que lo que hace un Child Theme es tener «una capa» por encima de la propia plantilla, únicamente con el .css y los archivos relacionados con la parte estética. De esta forma, cuando se actualiza la version del theme únicamente se ve afectada la capa inferior, la que contiene los archivos PHP, pero no te sustituye el CSS. Lo veremos.

Otro ejemplo más moderno (adelanto del nuevo diseño)

Actualmente estoy metido en el rediseño del look&feel de mi blog, el cual por cierto me comprometo a tener listo el 1 de Diciembre como tarde. (Me he autoimpuesto esta fecha límite porque sino veo que me dan las uvas. Literalmente)

Es un widget mucho más limpio y con botones grandes. De hecho, la idea de este código es no usar una «lista», sino DIVs que contienen enlaces <a>, con una clase asociada que los convierte como si fueran botones.

Código HTML en el widget

<div class=»mis-categorias»><a  href=»enlace_de_tu_categoria1″>CÓMO HACER UN BLOG</a></div>
<div class=»mis-categorias»><a  href=»enlace_de_tu_categoria2″>PRESENCIA EN INTERNET</a></div>
<div class=»mis-categorias»><a  href=»enlace_de_tu_categoria3″>MARKETING ONLINE</a></div>
<div class=»mis-categorias»><a  href=»enlace_de_tu_categoria4″>ENTREVISTAS A CRACKS</a></div>
<div class=»mis-categorias»><a  href=»enlace_de_tu_categoria5″>RECURSOS Y UTILIDADES</a></div>

Código CSS a insertar en el archivo .css del theme

.mis-categorias{
width: 100%;
height: 62px;
background-color: #444444;
padding: 17px;
margin-bottom: 4px;
text-align: center;
text-transform: uppercase;
font-family: ‘Open Sans’, Arial;
font-size: 1.2em;
color: #fff;
}

.mis-categorias a{
color: #fff;
text-decoration: none;
}

.mis-categorias a:hover{
color: #fff;
}

.mis-categorias:hover{
background-color: #db5741;
}

NOTA: recuerda sustituir los enlaces de prueba de estos códigos (enlace_de_tu_categoria1) por los enlaces reales de tus categorías. Para ello, puedes ir a «Entradas/Categorías» y verás que en cada una de ellas debajo tiene un botón de «Ver». Si haces botón derecho ahí, puedes hacer «copiar la ruta del enlace» y ahí ya te vas a pegar eso donde corresponde del código dentro del widget.

MUY IMPORTANTE: parece ser que muchos están teniendo problemas con las comillas al «copiar y pegar» desde este post hacia su WordPress. Te dejo este enlace de descarga donde puedes tener estos mismos códigos en un archivo .TXT donde es texto plano y no hay problema con los acracteres especiales ni nada.

Conclusiones

El mundo de personalizar tu blog y tu plantilla con CSS, para el que le guste trastear (es mi caso) es muy interesante y divertido, pero está claro que antes de meter mano hay que saber lo que haces para no llevarte sustos.

Bien es cierto, que si metes la pata con el CSS y cometes un error que luego no sabes solucionar o encontrar dónde está el fallo, las consecuencias van a ser siempre estéticas, y no funcionales como puede ser en el caso de tocar el código de los archivos PHP. (Ahí si que mucho ojo, puedes inhabilitar tu blog si la metedura de pata es gorda)

Dicho lo cual, no me responsabilizo de lo que puedas hacer y pasar en tu blog cuando tocas el código de tu theme, pero sí te animo si te gusta, a que pruebes.

Siempre puedes guardar una copia de seguridad del archivo CSS en local, para que a las malas puedas sustituirlo si algo sale mal y quedarlo como estaba.

Nada más, sólo una pregunta por si hay algún friki en la sala (tanto como yo), ¿te interesa el mundo del CSS en Wordpress?