Cómo poner el código CSS en un Widget de WordPress

Escrito por sara williams | Traducido por aldana avale
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo poner el código CSS en un Widget de WordPress
A menudo deberás hacer referencia al código HTML generado y escribir CSS para el mismo en el archivo "style.css". (Jupiterimages/Photos.com/Getty Images)

No todos los widgets respetan el estilo y el sentimiento de tu blog. A menos que lo hayas desarrollado tú mismo, fue creado por una amplia audiencia por alguien que no pudo predecir cómo luciría el resultado final en cada tipo de blog. A veces, puedes agregar un código Cascading Style Sheets (CSS - Hoja de estilo cascada) a los widgets utilizando sus campos de opciones en la pantalla "Widgets" del tablero de WordPress, pero a menudo deberás hacer referencia al código HTML generado y escribir CSS para el mismo en el archivo "style.css".

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

  1. 1

    Ingresa al tablero de WordPress desde el directorio "wp-admin" de tu sitio web. Navega hasta "Apariencia" y haz clic en el vínculo "Widgets" para cargar la pantalla de los mismos. Verás tus barras laterales y una lista de widgets en esta página.

  2. 2

    Haz clic en el nombre de una barra lateral para expandirla y mostrar sus widgets. Expande las opciones del widget haciendo clic en la flecha que apunta hacia abajo.

  3. 3

    Agrega pestañas HTML conteniendo el código CSS en línea en un campo de opciones de la widget. No todos los campos de opciones pueden tomar el código HTML o CSS. Para probarlo, ingresa algún HTML y haz clic en "Guardar" para ver si el HTML queda o se borra. Siempre puedes agregar HTML y CSS en la widget "Tecto" que viene con cada instalación de WordPress. Haz clic en el botón azul "Guardar" en la opción de widget para guardar tus cambios.

  4. 4

    Navega a "Apariencia" y haz clic en el enlace "Editor" si no puedes agregar el código CSS directamente en el widget a través de sus campos de opción. Ubica el archivo "functions.php" y haz clic en su enlace. Ubica el código "register_sidebar" y haz una línea que contenga "before_widget" que luzca así:

    'before_widget' => '<div id="%1$s" class="widget %2$s">',

    Change the "after_widget" so that it closes the "<div>" tag you opened:

    'after_widget' => '</div>',

  5. 5

    Carga tu blog en otra pestaña o ventana en tu navegador web. Haz clic con el botón derecho sobre la pantalla del navegador y selecciona ver el código de fuente. Busca las pestañas "<div>" alrededor de la widget que quieres cambiar y toma nota de su atributo de identificación. Este código lucirá similar a:

    <div id="archives-3" class="widget widget_archive">

  6. 6

    Vuelve al tablero de WordPress y navega nuevamente hacia la pantalla "Edit Themes". Ubica el archivo "style.css" en la parte inferior de la pantalla y haz clic en el mismo. Agrega tu CSS para la widget al final del archivo como esto:

    archives-3 {

    property: value; }

    Reemplaza "property: value", con un par de valor de propiedad CSS como "color: rojo". Actualiza el archivo cuando termines la edición.

Consejos y advertencias

  • Haz un respaldo de los archivos de tema antes de editarlos. Si accidentalmente haces por error una "pantalla blanca" PHP, vuelve a cargar los archivos originales utilizando un cliente FTP para volver a ingresar a WordPress.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles