• 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 / Overrides del navegador para modificar un tema de WordPress

Overrides del navegador para modificar un tema de WordPress

Overrides del navegador para modificar un tema de WordPress

[ 17 febrero 2020 ] [ Autor: Jhon Marreros Guzmán ][ Recursos - Avanzado] [ ]

herramientas

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En un artículo anterior habíamos visto cómo usar el inspector de código para modificar un tema. Sin embargo el inspector de código en algunos navegadores incluye una funcionalidad de overrides que nos facilitará hacer cambios sin perderlos al refrescar el navegador.

 
 

Generalidades

Actualmente todos los navegadores incluyen una herramienta de Inspector de código, tal como se muestra en la siguiente imagen:

Para abrir el Inspector de Código del Navegador podemos usar:

  • En Mac y Linux: Cmd + Opción + i
  • En Windows : Ctrl + Shift + i
Mostrar inspecto de código del navegador

 
Algunos navegadores como Google Chrome, Microsoft Edge o Brave, incluyen una funcionalidad de overrides, esto nos permite agregar código CSS o Javascript sin que se pierda al refrescar el navegador ya que se guardará una copia del archivo modificado en una ruta en tu máquina local.

 
 

¿Como crear la carpeta de overrides?

Desde el Inspector de Código, en tab de Sources, selecciona la opción de overrides, tal como se muestra en la imagen.

Selección de la opción de overrides en el tab sources

 
Luego crea la carpeta de overrides, usa la opción: Select folder for overrdies, te permitirá elegir una ruta local y crear o usar una carpeta existente.

Crear carpeta para overrides

 
El navegador solicitará acceso completo a la carpeta seleccionada, por lo que debes permitir el acceso.

Acceso completo a carpeta

 
Con esto tendremos el override habilitado y veremos que aparece la ruta de nuestra carpeta en la sección de override, tal como se muestra en la siguiente imagen:

Habilitación del override

 
 

Overrides para código CSS

Primero tienes que buscar el archivo que vas a editar, en la siguiente imagen usando el inspector vemos que el código CSS para ese elemento HTML seleccionado se encuentra en el archivo style.css

archivo style.css a modificar

 
Simplemente usando el enlace al archivo style.css nos llevará al tab de Sources

override archivo CSS en tab Sources

 
Desde el tab sources podemos grabar el archivo recuperado para overrides, tal como se muestra en la siguiente imagen:

Grabar para overrides

 
Al realizar esto veremos que se ha creado una ruta del archivo style.css que incluye una referencia al sitio web pero que esta almacenada localmente.

Archivo CSS almacenado localmente

 
Ahora ya podremos hacer las modificaciones al archivo .css del overrides, grabándolo y luego refrescando el navegador para ver los cambios.

Para guardar las modificaciones CSS en tu sitio web de manera permanente, puedes revisar: Agregar CSS en WordPress de manera correcta.

 

Overrides para código Javascript

El proceso es bastante similar a como viste anteriormente para los archivos .css, simplemente que en este caso buscaremos llevar al tab Sources un archivo javascript, podemos usar la opción de pages para buscar el archivo .js y luego grabarlo para overrides, tal como se muestra en la siguiente imagen.

Archivo javascript para overrides

 
Verás que se creará una ruta local al archivo .js que modificarás, tal como se muestra en la siguiente imagen, para ejecutar el código javascript guarda los cambios y luego refresca el navegador.

Overrides para agregar código javascript

Para guardar las modificaciones Javascript en tu sitio web de manera permanente, puedes revisar: Insertar Javascript en WordPress de manera correcta.

 
 

Conclusión

Si estas haciendo modificaciones a un sitio web que esta en producción y las modificaciones son de CSS o Javascript, puedes probar estas modificaciones con el inspector de código de tu navegador, y para no perder los cambios que vas haciendo puedes usar la funcionalidad de overrides.

Evidentemente una vez termines las modificaciones tienes que guardarlas en los archivos correspondientes en el servidor.

 
 
¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Qué debes tener en cuenta para modificar código en WordPressQué debes tener en cuenta para modificar código en WordPress
  • Inspector de código para modificar un theme WordPressUsar el Inspector de código para modificar un theme WordPress
  • Generar código para WordPressGenerar código para WordPress con GenerateWP
  • Hosting WordPress ventajas y desventajasHosting WordPress ventajas y desventajas
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

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

Campo de texto para escribir en productos WooCommerce

Modificar el mensaje de notificación de comentarios en WordPress

Cambiar el tipo de Taxonomía en WordPress

Centrar Logo en Menú Principal

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