• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Recursos / Usar Firebug para modificar un theme WordPress
Anuncio banner webservi

Usar Firebug para modificar un theme WordPress

Firebug para modificar Theme Wordpress

[ 20 julio 2016 ] [ Actualizado: 24 enero 2018 ]
[ Autor: Jhon Marreros Guzmán ][ Recursos - Intermedio] [ ]

css herramientas

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Inspeccionar el código Html, para hacer modificaciones de diseño en nuestro sitio Web, es algo común; existen varias herramientas, sin embargo, en este artículo, veremos el uso de Firebug para modificar un theme WordPress.

En los siguientes videos realizaremos algunos cambios a la plantilla Twenty Sixteen de WordPress.

 

En versiones actuales de Firefox, este complemento ya no esta disponible, sin embargo puedes usar el Inspector de código que viene integrado con el propio navegador y que es igual o más potente, puedes abrir el inspector de código directamente con : Crl+Shif+c (windows) , Cmd+Alt+c (mac o linux)

 

1- Generalidades de Firebug

En el siguiente video se explica algunas generalidades de Firebug, básicamente usaremos los tabs de Html y CSS. El tab de Html nos ayuda con la inspección de código Html y a través del Tab CSS vemos todos los archivos de estilos que carga nuestro sitio.

 

2- Cambio de Colores

En el siguiente video cambiaremos los colores de fondo de los títulos de los Widgets de la barra lateral, así como los fondos de los títulos de las entradas.

 

3- Cambio de Posición

En el siguiente video veremos un ejemplo práctico de cómo realizar modificaciones sólo para las entradas, cambiaremos la posición de la metadata del artículo que se muestra en la parte lateral.

 

4- Media Queries

En el siguiente video veremos algo de diseño responsive, ocultando elementos sólo para dispositivos móviles en las entradas. Puedes ver otro ejemplo similar de media queries en el siguiente artículo: Cambiar logo en la versión móvil.

 

5- Conclusión

Espero que los videos anteriores te hayan ayudado a tener un mejor entendimiento de cómo usar esta herramienta para realizar modificaciones en tu theme WordPress, este sólo el primer paso, te sugiero complementarlo con el estudio de CSS.

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Exportar / importar  la configuración del personalizador de temas en WordPressExportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommercePersonalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPressConfigura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamenteAbrir enlaces externos en un nuevo tab automáticamente
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Carlos

    9 mayo, 2017

    Tu sitio es una joya que no había descubierto.
    Llevo un buen rato estudiando información que ofreces, y ya me he suscrito.
    Gracias por tan buen material, en español la información que se ofrece es muy repetitiva y quizá demasiado demasiados sitios repiten contenidos básicos. Realmente para temas avanzados eres el único sitio, que yo conozca, que ofrece tan buena información

    • Jhon Marreros Guzmán

      9 mayo, 2017

      Hola Carlos, gracias por tu comentario :).
      PD. Si tienes alguna sugerencia de algún tema me lo puedes comentar por el formulario de contacto.

  2. Carlos

    9 mayo, 2017

    Gracias,
    seguro que algo soy capaz de sugerírte, cuenta con ello 😉

  3. jesus

    6 diciembre, 2017

    Gracias por tu Buen trabajo. Solo me estoy iniciando.

    • Jhon Marreros Guzmán

      6 diciembre, 2017

      Hola Jesus, te sugiero también revisar la sección de cursos: https://decodecms.com/cursos/

  4. Nelson eche

    12 diciembre, 2018

    Muy denso y completo enseña muy bien esta super el contenido

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Posts relacionados sin plugins en WordPress

Agregar Whatsapp flotante en WordPress

Clases CSS basadas en el Rol de usuario en WordPress

Personalizar email de registro de nuevo usuario en WordPress

Recientes

  • Exportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamente
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad