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.

css-wdiget-actualDicho 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.

css-widget-moderno

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?

¿Has visto ya el contenido de mi curso gratuito?

Compártelo si crees que puede ser de utilidad para otros. ¡Gracias!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

CURSO GRATUITO

PARA EMPRENDEDORES ONLINE

Algunos emprendedores buscan la libertad encerrados en una cárcel diaria de tareas infinitas.

Otros entienden su web y ganan mucho dinero con ella.

No te vayas sin dejar tu comentario...

48 comentarios en “Trucos para personalizar tus widgets con CSS”

  1. Hola.
    Quiero hacer un popup en un widget de imagen de WordPress, este popup debe aparecer al hacer hover sobre la imagen y quiero que contenga la url donde redirige al hacer click en ella para que el usuario sepa donde va antes de hacer click.
    No se como hacerlo. ¿Me ayudas?

    Saludos.

    1. Omar de la Fuente

      Hola David,
      si te refieres a si Google lo «lee», la respuesta es sí.
      Ahora bien, lo tiene identificado como tal (sidebar) y sabe que no lo puede considerar como contenido duplicado aunque se repita en todas tus páginas.
      Un saludo.

  2. Héctor Soriano

    Hola Omar buenas tardes.

    Soy seguidor tuyo desde hace mucho tiempo. Estoy aquí intentando añadir el menú a mi wordpress.

    Cuando añado el código al CSS debajo del todo en style.css y luego, mediante un Widget HTML código arbitrario añado el otro código.

    Aquí tengo el problema, no aparecen los botones azules, aparecen las letras en mayusculas con el hipervinculo funcionando perfectamente.

    Creo que el problema está en el codigo del Style.css que es lo que le da forma.

    ¿que opinas?

    Gracias tus contenidos son buenos. Un Saludo.

    1. Héctor Soriano

      Omar ya está solucionado disculpa.

      Cambié todas las comillas 40 veces y a la 41 ha cambiado todo. jajajaja

      La informática es una ciencia exacta dicen.

    2. Omar de la Fuente

      Hola Héctor 🙂
      Tienes que estar haciendo algún pequeño paso mal o algún error que no te des cuenta, porque si se hace tal cual, funciona.
      Normalmente es el error de las comillas, mira bien la parte del post donde dice «NOTA:» y ahí ves los errores más comunes y si no recuerdo mal os dejaba hasta la descarga del código para que sea copiar y pegar, y luego obviamente sustituir or vuestras URLs los enlaces y demás.
      Ya me dirás si lo consigues amigo 😉
      Un saludo!

  3. Hola Omar,
    Hago todos los pasos, pero no me funciona. Me sale el mismo error que a otras personas. Me aparecen en la barra, pero sin color ni caja. He cambiado las comillas manualmente y nada, no me funciona.
    No sé qué estoy haciendo mal. ¿Me podrías ayudar?
    Gracias

    1. Omar De La Fuente

      Hola Alicia,
      para solucionar el tema de las comillas, os puse un enlace de decarga al código en texto plano.
      Así no hay error, si lo haces paso a paso y exactamente comolo explico, te tiene que funcionar de no ser que haya un problema extraño con tu plantilla o lo que sea.
      Un saludo!

      1. Alicia Barcelona

        Sí, lo hice desde el texto que pones y no me funcionó. Probé a cambiar las comillas a mano y nada.
        Mi plantilla es la de Magazine Pro de Génesis y en principio va todo bien. Pero volveré a probar.
        Graciaa.

        1. Omar De La Fuente

          No sé qué decirte, a mí me funciona y son muchas las personas a las que también.

          Desconozco qué se nos pueda estar escapando en tu caso, si es un problema con tu theme, algo en el style.css… no lo sé.

          Lamento que no te funcione en tu caso 🙁

  4. Angel Yocupicio Yocupicio

    Hola Omar, me encantó tu blog. Me dedico a fabricar sitios web con wordpress y este blog me sirve a la perfección.

  5. Hola Omar,

    Me interesa mucho lo que tratas para personalizar los widgest, además estoy inscrita en tu curso de wordpress, pero a pesar de seguir todos tus pasos, tener especial atención en todo lo que comentas para que no de error y probar una y otra vez (parar el video y revisar que todo está igual y en el mismo sitio donde especificas pegarlo) al pegar el código Css en style.css y actualizar no se ve el resultado, no salen los cuadrados con color simplemente las letras. Espero que me ayudes.Gracias

    1. Omar De La Fuente

      Hola Cristina,

      esto que me me plateas es una duda dentro del curso de WordPress.

      Tramítala por favor desde dentro del propio formulario de soporte, para que pdoamos darte respuesta desde ahí.

      Ya te adelanto que si no te sale, en un 99% será por el tema de las comillas que explico en este post.

      Un saludo.

  6. Hola. Tengo una duda… Estoy editando el css mediante el editor de jetpack y asi no modificar directamente el fichero css del tema. Mi duda es que no se en que fichero css se guardan los nuevos estilos que estoy creando. Por firebug veo que apuntan a: misite/?custom-css=1&csblog=1&cscache=6&csrev=282:1
    He buscado por todos los ficheros pero nada… Se estaran guardando directamente sobre base de datos?
    Gracias¡

  7. ¡Hola Omar!
    Me estoy adentrando en este mundo de los blogs, y ya tengo mi web, quiero personalizar mis Widgets que tengo colocados al lateral, hacerlos más llamativos, ¡seguiré tus pasos a ver si lo logro! Muchas gracias 🙂

  8. Luis Fernando Arteaga

    Hola Omar. Gracias por tus aportes con los cuales estamos mejorando nuestro sitio web.

    No se que pasa pues no he podido lograr que funcione el widget de categorías. En la vista sale muy bien y se ve como el tuyo, pero cuando hago click en cualquiera de los botones, me sale Not found, error 404; o sea me falta saber enlazar el botón con el enlace de los post de cada categoría. Yo sé que es algo que estoy haciendo mal y le sigo buscando.
    Me interesa mucho el tema de .CSS.
    Gracias.

    1. Omar de la Fuente

      Hola Luis,
      acabo de actualizar el artículo porque eres la segunda personaq ue me comenta esto, y es por lo siguiente: 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.
      Un saludo!

          1. Te pido disculpas… Me estaba volviendo loco, mira que error tan tonto que simplemente editando la plantilla me olvide de cerrarla con » ; »

            Error de novato!!! Imagine que el header.php no estaba tomando el link de css y habia que configurarlo manualmente ya que estaba usando el nuevo wordpress e imagine que habia cambiado.

            Ooooops!!!

          2. Omar de la Fuente

            A veces pasa. Ya sabes que con el código, dejas sin poner una triste coma y se va todo al carajo 😉

  9. Muchísimas gracias!

    Pena que este articulo no este mejor indexado porque llevo dos días detrás de algo así 🙂

    Solo por eso ya merece la pena comprarte el curso!!

    Un Saludo!!

  10. Hola Omar,

    Quería darte las gracias por compartir tantísima información.
    Dedico mi tiempo a una asociación de pacientes y con «tu ayuda» estoy rejuvenecido nuestro blog. Acabo de publicar el widget con «mis categorías» y está genial!! 🙂

    Pues eso que muchísimas gracias!

  11. Aridane García

    Hola Omar, he metido el código html en el widget y luego el CSS en style.php, justo al final como dices pero no me funciona, no sé si lo habré puesto mal o que pero no va.

    ¿A qué se puede deber?

    Un saludo!

    1. Omar de la Fuente

      Hola Aridane,

      el CSS va en el style.css, no en el style.php, pero me imagino que será un descuido al escribir y que el fallo no es ese 😉

      Prueba a borrar las comillas y ponerlas de nuevo una vez ya has pegado los códigos en cada sitio, pasa a veces que coge otro tipo de comillas al copiar y pegar, es raro pero pasa.

      Un saludo!

  12. DAVID CLADERA

    Saludos Omar, gracias por tus posts, son de mucha ayuda, yo tengo genesis con metro pro igual que Elena, he leido tu post varias veces bien despacio, y algo no lo hago bien, en el css, dentro del apartado :
    /*
    Widgets
    —————————————————————————————————- */
    pego el codigo CSS que pones arriba.

    el otro codigo HTML. es el que tengo dudas de donde meterlo, yo lo he metido en esta ruta, pero claro dentro de mi public html, hay varios archivos widget, es en este o en otro que no se encontrar??
    :
    /home2/piensoen/public_html/wp-admin/widgets.php

    Muchas gracias, un saludo

    1. DAVID CLADERA

      Vale, a ver, me he bajado el plugin «Black Studio TinyMCE Widget.» y he creado un widget y ahora me aparecen en mi barra pero sin color ni caja :(… donde estoy fallando?

      p-d: he cambiado todas las comillas del codigo, y aun así.

      Gracias

      1. DAVID CLADERA

        Arreglado, muchas gracias, Omar, a veces la paciencia y la perseptiva nos ayudan a ver el camino.

        Gracias, me encantan tus posts.

        1. Omar de la Fuente

          Me alegro que lo hayas solucionado David, seguramente te estaba dando problemas la parte de pegar el código CSS en el «style.css», desde «Apariencia/Editor».

          Un saludo.

  13. Mil gracias Omar!!!

    Eres un fenómeno! Funciona de maravilla, eso sí después de meter las comillas de nuevo jejeje
    Muchas gracias de nuevo por todos tus consejos y artículos, son supeeprácticos.

    Saludos

  14. Hola omar, justo esta buscando como hacer estos botones. hace un par de días compre las plantillas de génesis y metro pro desde tu enlace ( ya que se que eres afiliado). No se que pasa que no me funciona. No se si estoy haciendo algo mal.

    1º Poner en el widget el codigo HTML que pones arriba

    2º Poner en Apariencia – editar- justo bajo de la plantilla el codigo css que nos has dado arriba.

    ¿ Es asi ? porque lo estoy haciendo pero solo me aparece los enlaces nada de cajas.

    Muchas gracias de antemano.

    Un saludo

    1. Omar de la Fuente

      Hola Iván,

      sí, lo estás haciendo de forma correcta, es seguir los pasos tal cual.

      Prueba que a veces pueden dar problemas las comillas, aunque hayas copiado y pegado ese código, ahora en tu WordPress prueba a borrar todas las comillas y volver a meterlas manualmente. Puede ser eso.

      Un saludo.

  15. Buenas Omar, tengo un grave problema. El theme que uso, que me encanta y he modificado a mi gusto tiene un problema con los widgets.

    El theme trae un widget de post más importantes y los más recientes, ese sí es bonito y lo he modificado a mi gusto después de tocar mucho (no se nada de esto).

    El problema es que con los demás widgets no tiene fondo ni marco, es decir que el contenido se monta sobre el fondo, por eso he creado los marcos y el fondo por mi cuenta. A la hora de colocar texto o el contenido, el widget no tiene sentido porque se ve todo amorfo.

    Si por favor puedes checkear mi web (la dejé en el campo correspondiente) y me dices como modificar el widget de Jetpack de suscripción para que se vea más bonito y el botón de «suscribir» sea igual al de buscar estaría muy agradecido.

    PD: Para que el texto se viera mejor utilicé el padding pero me modifica el widget de buscar y se ve horrible.

    Saludos y gracias por leer!

      1. Gracias por responder, justamente después de escribirte me puse a editar como loco, utilizando la opción de «inspeccionar elemento» pude encontrar el nombre de los objetos para modificarlos en css.

        Logré que quedada a la par con el theme, si quieres echas un vistazo jaja.

        Saludos!!

  16. Me ha venido genial este articulo. Precisamente estoy empezando a cambiar mi plantilla por Genesis.
    Si tenemos instalado JetPack podemos añadir el css con el editor de css

    1. Omar de la Fuente

      Hola Miguel,

      me alegro que te hya servido y estés pensando en Genesis, es muy ubuena opción.

      De Jetpack no te puedo decir nada porque no lo he utilizado nunca. Puede parecer raro, pero cuando «me acerqué» a él… la idea de que estaba como vinculado a WordPress.com y que era una batería de varios plugins (los cuales seguro no todos iba a usar) me echaron para atrás. Además, he oido que se ven las estadisticas pero no de las visitas, sino de las páginas vistas… lo dicho, no me convenció en su día 😉

      Gracias por pasarte y comentar, un saludo!

  17. Por cierto Omar, en el curso de wordpress explicas por casualidad como «migrar» wordpress desde localhost al hosting? Debo empezar hoy o mañana a hacerlo… y he leído tantas cosas en google que tengo ya hasta miedo 😀

  18. No lo esperaba tan rápido!! jeje
    Ayer por la tarde encontré algunos ejemplos en una web guiri, y ya empecé a trastear, he colocado de momento uno en el blog para ver como quedaba… aunque tengo que cuadrarlo un poco respecto al resto de elementos que forman parte de mi sidebar.

    A mí me interesa bastante todo el css práctico y aplicable a wordpress,ya que sin tener mucha idea del tema… observando e imitando códigos de ejemplo consigues hacer grandes cosas y con un magnífico resultado.

    1. Omar de la Fuente

      Esa es la idea Roberto, a ver si puedo prepararme tambien el tema de los Chils themes porque es importante y hay mucha gente que no lo conoce.

      Un saludo!

Deja un comentario

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

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Ir arriba
foto_Omar_Zoom

¿Tienes que irte ya?

Ok… pero no te vayas con las manos vacías.

Tengo un regalo para ti.

MI CURSO GRATUITO PARA EMPRENDEDORES ONLINE

megafono.png
#UNTRAININGDIFERENTE
Días
Horas
Minutos
Segundos

¿Ya tienes que irte?

Ok, pero échale un vistazo a esto, aún estás a tiempo.

VIDEO #1 [01/09/2020]

La gran oportunidad que nos ofrece hoy en día Internet
(sabiendo cómo aprovecharlo)

VIDEO #2 [03/09/2020]

Por qué parece tan complicado tener una web y un proyecto
(y porqué no debería serlo)

VIDEO #3 [07/09/2020]

El camino se hace mucho más sencillo si estás acompañado
(montamos el puzzle de tu web)

Cómo tener una web efectiva que convierta a tus lectores en suscriptores y clientes

megafono.png
#UNTRAININGDIFERENTE
Días
Horas
Minutos
Segundos