• 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 el Inspector de código para modificar un theme WordPress

Usar el Inspector de código para modificar un theme WordPress

Inspector de código para modificar un theme WordPress

[ 24 enero 2018 ] [ Autor: Jhon Marreros Guzmán ][ Recursos - Intermedio] [ ]

css herramientas

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿Te gustaría hacer algunos cambios en el diseño de tu sitio?, tal vez cambiar el tamaño de la letra, cambiar algunos colores, etc. Puedes realizar estos cambios con la ayuda del inspector de código de tu navegador y aplicando CSS.

 

Generalidades

El inspector de código es una herramienta para desarrolladores que viene integrada en los navegadores modernos como Firefox y Google Chrome. Tienes varias formas de abrir el inspector de código, una de mis favoritas es con el acceso por teclas.

  • En Mac y Linux: Cmd + Opción + i
  • En Windows : Ctrl + Shift + i

 

También puedes abrir el inspector de código desde las opciones de menú, o haciendo click con el botón derecho del mouse y luego en el submenú inspeccionar elemento.
Mostrar inspector de código en navegador

 

Existen también versiones de Firefox y Google Chrome especiales para desarrolladores que incluyen herramientas adicionales: Firefox Quantum Developer Edition y Google Chrome Canary.

 

Modificaciones CSS usando el inspector de código

El inspector de código tiene varias opciones, sin embargo como herramienta de ayuda para modificar CSS usarás básicamente las opciones de:

  • Inspector y Editor de estilos – Firefox
  • Elementos y Fuentes – Google Chrome

 

Opciones del Inspector de código en Firefox vs Google Chrome

Como puedes observar, ambos navegadores tienen opciones similares para el inspector de código.

 

– Localizando elemento a modificar

Con el ícono de flecha seleccionado, puedes ubicar el elemento de tu página que quieres modificar, verás que se marcará con un fondo diferente y adicionalmente en la parte inferior se seleccionará el código HTML que genera este elemento.

En la siguiente imagen hemos seleccionado el link “Hola mundo” del menú.

Usando el inspector de código para seleccionar elemento

Tener en cuenta que en el inspector de código también muestra elementos HTML ocultos con un color más tenue.

 
Si seleccionas algún elemento, en la parte derecha aparecen las reglas CSS aplicadas al elemento, puedes ver también las pseudo clases CSS, como :hover, :active y :focus

Sub pantalla del inspector HTML

 
En la imagen anterior puedes ver las clases CSS y el archivo y línea de código en la que se encuentra esa clase, en algunos casos (líneas verdes) las clases no se encuentran en un archivo CSS específico, sino o bien son estilos aplicados en línea sobre el elemento HTML específico, o bien son elementos en línea como parte del documento HTML.

Usualmente un theme que permite agregar código CSS desde la configuración creará estilos en línea como parte del documento HTML.

 

– Realizando los cambios en el Inspector de Código

El inspector de código te ayudará a localizar las clases aplicadas sobre un elemento y qué atributo debes cambiar o agregar. Sin embargo una buena práctica es no modificar directamente esas clases, sino sobrescribir la clases ya sea al final del archivo, o mejor aún, en el caso de WordPress, en el archivo style.css de un child-theme. Es en este punto en donde el tab de Editor de estilos o fuentes, te puede ayudar.

En Firefox verás directamente los archivos .css que carga tu sitio web, y los estilos en línea que están siendo aplicados. En el caso de los archivos puedes averiguar la ruta de los mismos haciendo click con el botón alterno del mouse y abriéndolos en otra pantalla.

Tab de editor de estilos en el inspector de código Firefox

 
En Google Chrome verás que se organizan los estilos cargados por el dominio de origen, en tu caso te interesa los archivos CSS que carga tu dominio, si navegas en las carpetas podrás ubicar el archivo CSS, para averiguar la ruta tienes la opción de hacer click con el botón alterno, verás que tienes una opción muy útil de copiar enlace.

Tab de fuentes de estilos en el inspector de código Google Chrome

 

Una vez localizado el archivo puedes agregar tus cambios al final del código

 

En un artículo anterior vimos cómo usar Firebug, una extensión de Firefox, que era la predecesora del Inspector de Código, en el artículo: Usando Firebug para modificar la apariencia de un theme WordPress, puedes encontrar varios ejemplos de modificaciones a un theme WordPress.

 

Guardando los cambios de manera permanente

Sin embargo el código que colocaste en el inspector de código es temporal, para hacer que estos cambios se guarden de manera permanente tienes que agregar estos cambios directamente en tu archivo.

Anteriormente vimos cómo obtener la ruta del archivo (con el botón alterno del mouse), entonces usarás esa ruta para localizar el archivo a modificar.

Para editar el archivo tienes varias opciones:

  • Desde el propio WordPress en: Apariencia > Editor
  • Usando algún cliente FTP, localizar el archivo y editar
  • Desde el Administrador de Archivos de tu Cpanel

 
En la siguiente imagen puedes ver la pantalla que aparece cuando usas la opción de WordPress: Apariencia > Editor.

Opción de Apariencia - Editor en WordPress

Asegúrate en esta pantalla de seleccionar el archivo correcto con extensión CSS, evita editar los archivos con extensión PHP.

 

¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Query Monitor para optimizar y depurar tu sitio WordPressQuery Monitor para optimizar y depurar tu sitio WordPress
  • WP CLI para WordPressWP CLI: Interfaz de línea de comandos para WordPress
  • Instalar WordPress localmente con MAMPInstalar WordPress localmente con MAMP
  • Igualar altura de elementos de un gridIgualar altura de elementos de un grid
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (9 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Enrique Sirera

    26 marzo, 2020

    Hola!
    gracias por el tutorial, es muy didáctico.
    Tengo una duda:
    En un Thema de WP quiero cambiar solo una cosa, el color que sale en todos los botones y resaltes.
    El tema no lo permite en personalizar.
    Siguiendo el tutorial localizo algún elemento con este color y veo que es el #ff0707;
    Voy a WP/Personalizar/Editor de temas/Style.css y cambio todos los valores #ff0707; por #cfd146;
    Guardo cambios pero no cambia. Incluso volví a hacerlo añadiendo !important, pero no funciona.
    ¿Qué estoy mal?
    ¿Donde debo cambiar ese color?
    Perdone mi ignorancia, y de lo atrevido de esa acción basada en el desconocimiento.
    El tema en cuestión es este: https://envothemes.com/envo-storefront-pro/

    Gracias por su tiempo.
    Saludos
    Enrique S.

    PD: quédense en casa hasta que pase esta pandemia. Si su gobierno no lo recomienda, hágalo igualmente. Le hablo desde la experiencia, estoy de España y las cosas se están poniendo muy feas.

    • Jhon Marreros Guzmán

      27 marzo, 2020

      Hola

      Supongo que te refieres a los botones de WooCommerce, puedes probar con el siguiente código, cambiando blue y green por algún código de color.

      .woocommerce #respond input#submit:hover, 
      .woocommerce a.button:hover, 
      .woocommerce button.button:hover, 
      .woocommerce input.button:hover, 
      .woocommerce #respond input#submit.alt:hover, 
      .woocommerce a.button.alt:hover, 
      .woocommerce button.button.alt:hover, 
      .woocommerce input.button.alt:hover{
        border-color:blue;
        color:blue;
      }
      
      .woocommerce #respond input#submit, 
      .woocommerce a.button, 
      .woocommerce button.button, 
      .woocommerce input.button, 
      .woocommerce #respond input#submit.alt, 
      .woocommerce a.button.alt, 
      .woocommerce button.button.alt, 
      .woocommerce input.button.alt{
        border-color:green;
        color:green;
      }
      

      PD. Gracias por la recomendación, efectivamente estamos en cuarentena también en Perú y evitamos salir de casa hasta que pase todo esto.

      Saludos.

  2. Giancarlos Piselli

    2 abril, 2020

    Hola! que tal? muy interesante toda tu web y que veo que contestas los mensajes. Pues la verdad es que tengo poco tiempo con esto de wordpress pero compre una plantilla que esta en ingles. Podrias ayudarme y asesorarme en varias cosas ? cuanto me saldria ? por ejemplo a poder editar el nombre de algunos botones que aparecen en ingles. Y otra cosa es cambiar los placeholder de la plantila, que dicen ” search for product” y yo los quiero colocar en espanol. Probe con loco translate pero me toma unas cosas si y otras no. SALUDOS Y GRACIAS DE ANTEMANO.

    • Jhon Marreros Guzmán

      2 abril, 2020

      Hola Giancarlos, gracias. Para esto que me comentas comunícate mejor a través del formulario de contacto: https://decodecms.com/contacto/ .Saludos.

  3. Carlos De La Cruz

    6 abril, 2020

    Hola Jhon, tengo un problema con , mi web no puedo encontrar como cambiar el color de mi menu, he hecho todo lo debido por wordpress y nada .. el diseñador que tenia le pague y no me termino la pagina, en realidad, tengo problemas con el menu ya que no puedo modificar he hecho mil cosas y aun nada. claro que esta bloqueado o algo no se ven las letras del menu, mi pagina de comercio es http://www.astoreica.com te dará cuenta como esta el menu, saludos esperotu apoyo

    • Jhon Marreros Guzmán

      6 abril, 2020

      Hola, supongo que te refieres al color de fondo de los submenus, prueba agregando el siguiente código CSS:

      .mega-menu .popup .sub-menu{
          background-color:#efefef!important;
      }

      Si sigues con problemas mejor comunícate a través del formulario de contacto: https://decodecms.com/contacto/

  4. esteban corre45

    15 abril, 2020

    hola, yo puedo saber quien a inspeccionado mi pagina web si es asi como?

    • Jhon Marreros Guzmán

      15 abril, 2020

      Hola, no es posible, salvo lo cuentes como una visita, pero no hay forma de saber si ha visto el código fuente con el inspector.

  5. jenny

    23 febrero, 2021

    hola jhon necesito tu ayuda, en producto de la pagina de mi tienda no aparece para comprar por cantidad, ni el signo + tampoco el –
    dime que debo de hacer?
    agradezco todas tus publicaciones

  6. Carolina Cifuentes

    13 marzo, 2021

    Hola Jhon nescesiot ayuda. Me aparece esto: Warning: A non-numeric value encountered in /home/computa1/public_html/wp-content/plugins/checkout-fees-for-woocommerce-pro/includes/class-alg-wc-checkout-fees-info.php on line 215
    Cómo puedo solucionarlo.

    • Jhon Marreros Guzmán

      16 marzo, 2021

      Hola, es una advertencia, igual consulta con los desarrolladores del plugin: checkout-fees-for-woocommerce-pro

  7. Luis

    15 marzo, 2021

    Como grabar los cambios efectuados

    • Jhon Marreros Guzmán

      16 marzo, 2021

      Hola, puedes replicar el código en el archivo style.css de tu tema hijo, o en la opción CSS del personalizador del tema.

  8. Ele

    30 abril, 2021

    Hola! Muchas gracias por la explicación, es realmente útil. En mi caso, hay un elemento que sale duplicado en la cabecera. Si lo “borro” en la pestaña de inspeccionar aparece correctamente, pero donde lo modifico en wordpress? Gracias!

    • Jhon Marreros Guzmán

      3 mayo, 2021

      Hola, tienes que modificar el archivo style.css de tu theme, de preferencia hacer un tema hijo para esto.

  9. Karolina

    2 septiembre, 2021

    Hola me interesa que no se vean esas carpetas de wordpress en source al inspeccionar la web por un tema de seguridad. Sabes como podría hacerlo?

    • Jhon Marreros Guzmán

      4 septiembre, 2021

      Hola, podrías reducir los archivos estáticos a un solo archivo a través de plugins de optimización, las carpetas de contenido algunas las puedes cambiar de nombre, por ejemplo la de plugins y de uploads, sin embargo difícilmente podrás ocultar las carpetas completamente.
      Tendrías una opción de hacerlo si sólo usas WordPress como un servidor y usar su API Rest y construir tu front-end con Gatsby

  10. Eduardo

    14 septiembre, 2021

    Hola Interesante todo esto que explicas a la verdad esta muy bueno.

    Ahora bien tengo una duda que preguntarte.
    En mi sitio web tengo un problema con el botón de mi cuenta ubicado al lado del carrito resulta que en mi pagina de inicio me sale oculto y sin embargo en mis demás paginas me sale visible y estoy buscando por el inspector de código para ver que sucede pero realmente no logro determinar cual es el problema.

    Espero puedas ayudarme a descifrar esta interrogante y esta situación que se me hecho un gran problema y que quizás la solución es sencilla pero no logro encontrarla.

    De antemano muchas gracias por tu ayuda y por este tutorial.

    Saludos
    Eduardo

    • Jhon Marreros Guzmán

      15 septiembre, 2021

      Hola, es como si cargara varias veces diferentes iconos para el usuario pero ninguno de ellos corresponde con el archivo de fuente, consulta con los desarrolladores de tu theme ya que es posible que sea un bug.

  11. Edwin Benavides

    20 diciembre, 2021

    Necesito poner unos párrafos adicionales en Html a un tema ya realizad por no es posible no se si se pueda hacer con un plugin o algo adicional

    • Jhon Marreros Guzmán

      20 diciembre, 2021

      Hola, para agregar código HTML revisa si tienes widgets que se muestren en donde quieres, sin embargo lo más probable es que termines modificando el tema o usando alguno de los hooks (en caso tenga).

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

¿Qué son los Hooks de WordPress y Cómo usarlos?

¿Cómo mostrar un menú diferente para usuarios registrados?

¿Se puede evitar el efecto Lock-in en WordPress?

Modificar el mensaje de notificación de comentarios en WordPress

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