Personalización de WordPress para usuarios de bricolaje

¿Alguna vez ha querido editar temporalmente una página web para ver cómo se vería con colores, fuentes, estilo, etc.? específico. Esto es posible con una herramienta que ya existe en su navegador llamada Inspeccionar artículo. Es un sueño hecho realidad para todos los usuarios de bricolaje cuando se enteran. En este artículo, le mostraremos los conceptos básicos de la inspección de artículos y cómo usarlo con su sitio de WordPress.

¿Qué es Inspect Element o Developer Tools?

Los navegadores web modernos como Google Chrome y Mozilla Firefox tienen herramientas integradas que permiten a los desarrolladores web depurar errores. Estas herramientas muestran el código HTML, CSS y JavaScript de una página y cómo el navegador ejecuta el código. Con la herramienta Inspeccionar elementos, puede editar HTML, CSS o JavaSCript para cualquier página web y ver sus ediciones en vivo (solo en su computadora). Para el propietario de un sitio web de bricolaje, estas herramientas pueden ayudarlo a obtener una vista previa de cómo se vería el diseño de un sitio sin hacer los cambios para todos. Para los escritores, estas herramientas son excelentes porque puede cambiar fácilmente las credenciales personales mientras toma sus capturas de pantalla, eliminando la necesidad de codificar elementos por completo. Para los agentes de soporte, esta es una excelente manera de identificar el error que podría evitar que sus galerías se carguen o que sus controles deslizantes no funcionen correctamente. Solo estamos rascando la superficie de los casos de uso. El elemento Inspeccionar es realmente poderoso. En este artículo, nos centraremos en Inspect Element en Google Chrome, ya que es nuestro navegador preferido. Firefox tiene sus propias herramientas de desarrollo que también se pueden activar seleccionando inspeccionar elemento en el menú del navegador. ¿Listo? Empecemos.

Video tutorial

Suscríbase a MundoCMS Si no le gusta el video o necesita más instrucciones, siga leyendo.

Lanzamiento del elemento Inspect y localización del código

Puede iniciar la herramienta de inspección de elementos presionando CTRL + Shift + I en su teclado. También puede hacer clic en cualquier lugar de una página web y seleccionar Inspeccionar elemento en el menú del navegador.

La ventana de su navegador se dividirá por la mitad y la ventana inferior mostrará el código fuente de la página web. La ventana de la herramienta del desarrollador se divide en dos ventanas. A su izquierda, verá el código HTML de la página. En el panel derecho, verá las reglas de CSS.

Cuando mueva el mouse sobre la fuente HTML, verá el área afectada resaltada en la página web. También notará que las reglas de CSS cambian para mostrar el CSS del elemento que está viendo.

También puede colocar el puntero del mouse sobre un elemento de la página web, hacer clic con el botón derecho y seleccionar Inspeccionar elemento. El elemento que señaló se resaltará en el código fuente.

Edición y depuración de código en el elemento Inspect

El HTML y CSS de los elementos de la ventana Inspeccionar son editables. Puede hacer doble clic en cualquier parte del código fuente HTML y modificar el código como desee.

También puede hacer doble clic y editar atributos y estilos en el panel CSS. Para agregar una regla de estilo personalizada, haga clic en el icono + en la parte superior del panel CSS.

A medida que realice cambios en CSS o HTML, esos cambios se reflejarán instantáneamente en el navegador.

Tenga en cuenta que los cambios que realice aquí no se guardan en ningún lugar. El elemento Inspeccionar es una herramienta de depuración y no escribe sus cambios en los archivos de su servidor. Esto significa que si actualiza la página, se eliminarán todos sus cambios. Para realizar los cambios, deberá editar la hoja de estilo de su tema de WordPress o la plantilla relevante para agregar los cambios que desea guardar. Antes de comenzar a modificar su tema de WordPress existente con la herramienta Inspeccionar elementos, asegúrese de guardar todos sus cambios creando un tema hijo.

Encuentra errores fácilmente en tu sitio

El elemento Inspeccionar tiene un área llamada Consola que muestra todos los errores que existen en su sitio web. Al intentar depurar un error o buscar ayuda de los autores de complementos, siempre vale la pena mirar aquí para ver cuáles son los errores.

Por ejemplo, si usted era un cliente de OptinMonster y se preguntaba por qué su opción no se carga, puede encontrar fácilmente el problema "la babosa de su página no coincide". Si su barra compartida no funcionaba correctamente, puede ver que hay un error de JavaScript. Herramientas como Inspect Element Console y SupportAlly lo ayudan a obtener un mejor soporte al cliente porque el equipo de soporte técnico ama a los clientes que toman la iniciativa para brindar comentarios detallados sobre el problema. Esperamos que este artículo le haya ayudado a aprender los conceptos básicos de la inspección de artículos y cómo usarlo con su sitio de WordPres. También puede consultar la hoja de trucos CSS predeterminada generada por WordPress para acelerar sus habilidades de desarrollo de temas. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Google+.