• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Recursos / Usar Firebug para modificar un theme WordPress

Usar Firebug para modificar un theme WordPress

Firebug para modificar Theme Wordpress

[ 20 julio 2016 ] [ Actualizado: hace 11 meses ]
[ 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

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
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 principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Búsqueda en tabla personalizada en WordPress

Configurar la papelera de WordPress

Agregar cuadros de alerta en el contenido de WordPress

Guía visual de Hooks para StoreFront y WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados