Inspector Google Chrome: modifica tu sitio en WordPress

Inspector Google Chrome

Si buscas modificar una sección de tu sitio web, pero se dificulta entrarla en el código fuente, puedes utilizar el inspector Google Chrome para hacerlo. Con ayuda de esta increíble herramienta podemos evaluar el código de nuestro sitio y a su vez, modificarlo temporalmente.

Por qué usar el inspector Google Chrome

Inspector Google Chrome
Por qué usar el inspector Google Chrome
Google Adsense y WordPress: bloques de anuncios

En esta sesi√≥n 11 vamos a crear la √ļltima forma de monetizaci√≥n de nuestro blog y es Google Adsense. Con esta, podremos mostrar anuncios dentro de nuestro contenido y as√≠ ganar dinero por cada click o‚Ķ

Correo profesional Godaddy: email marketing mailchimp

En esta sesión 9 nos enfocaremos en el correo profesional godaddy y la creación de las listas de email marketing. Ambas nos permitirán mejorar el contacto con nuestros suscriptores, de forma directa, …

SEO WordPress: primer post indexado

En esta nueva sesión 9 vamos a configurar el SEO WordPress tanto del sitio en general como en cada post. Esto, para pasar como segundo punto la correcta indexación y publicación de cada post. Cada uno…

Si bien, no todos somos expertos en código pero queremos tener un sitio web con todas las posibilidades para ofrecer lo mejor a nuestros visitantes. Al mismo tiempo, queremos modificar algunas secciones específicas para que nuestro sitio se vea mas genial pero no encontramos cómo hacerlo. Es aquí cuando debemos utilizar el inspector Google Chrome.

Esta increíble herramienta, nos muestra el código fuente de nuestro sitio web y a su vez puede encontrar posibles advertencias o errores. Pero esto no es todo, cuenta con 2 increíbles características:

  • Adaptabilidad.
  • Inspeccionar secci√≥n con el rat√≥n.

La primera, nos permite ver nuestro sitio web en tiempo real desde diferentes dispositivos m√≥viles o resoluciones. Lo cual, nos ayuda a corregir posibles errores que tenga nuestro sitio. Por ejemplo, podemos ver c√≥mo se ve en un iPad Pro, el cual muestra el men√ļ general de un sitio web, y no un modo adaptable para tel√©fono, ocultando el men√ļ en un √≠cono. Este es un error com√ļn y puede agrandar la barra principal.

En la segunda característica, podremos utilizar el mouse para ver cualquier sección del sitio web, solo mueve el mouse y encuentra lo que deseas ver en código.

En conclusión, diferentes ventajas de utilizar esta increíble herramienta y a su vez, sacar provecho para modificar nuestro sitio web rápidamente.

Inspeccionar sitio web

Inspeccionar sitio web

Para iniciar, vamos a abrir nuestro sitio web desde Google Chrome. A continuación vamos a seguir estos pasos:

  • Busca una secci√≥n, t√≠tulo, tipograf√≠a, color o elemento que desees modificar en tu sitio web.
  • Cuando lo tengas listo, haz click derecho sobre la p√°gina y luego ¬ęinspeccionar¬Ľ.
  • En la parte superior izquierda el inspector Google Chrome, haz click en el √≠cono del mouse.
  • Con esta opci√≥n activada, haz click sobre lo que desees modificar en tu sitio web. En mi caso, quiero cambiar un color de la p√°gina de carrito, para que se vea m√°s claro.

Una vez seleccionada, busca el código en el inspector Google Chrome para poder modificar el sitio temporalmente. En mi caso, como quiero cambiar el color, busco el código CSS de esta sección del sitio web. A continuación, modifico el color que se encuentra actualmente a uno más claro, como el color blanco.

Si haces el cambio del color, tama√Īo u otro atributo y funciona temporalmente, haz concluido con la primera parte, sobre la detecci√≥n del elemento en tu sitio web con inspector Google Chrome.

Modificar sitio web con WordPress

Recuerda que los cambios que realizamos con el Inspector Google Chrome son temporales y si quieres que estos sean permanentes debes ingresar este nuevo código en tu sitio web. Para esto, hay dos formas de hacerlo:

  • Cambiar esto, en el codigo fuente del sitio web. Aunque es recomendable hacerlo en child theme.
  • Utilizar el plugin ¬ęFragmentos de c√≥digo¬Ľ.

En esta ocasión utilizaremos el plugin para realizar los cambios a nuestro sitio web.

Fragmentos de código

Si has visito mi contenido, recomiendo este plugin en la mayoría de los casos cuando se trata de ingresar código a nuestro sitio por diferentes razones. Para ver más a fondo información de este plugin, puedes hacer click aquí, o puedes ver el siguiente video para conocerlo más a fondo.

Fragmentos de código WordPress.

Ahora, para iniciar, vamos directo a wordpress > fragmentos de c√≥digo > a√Īadir nuevo. Una vez dentro, ingresa la estructura de c√≥digo para el plugin. En mi caso, es un c√≥digo CSS entonces ingresar√© la siguiente secci√≥n de c√≥digo:

add_action( 'wp_head', function () { ?>
<style>

	/*escribe tu código CSS aquí */
	
</style>
<?php } );

Luego, vuelve al inspector de Google y copia la sección de código que contiene la modificación que deseas hacer. A continuación:

  • Pega esta secci√≥n debajo de la l√≠nea ¬ęescribe tu c√≥digo CSS aqu√≠¬Ľ.
  • Una vez finalizado, escribe un t√≠tulo para este fragmento.
  • Haz click en guardar y activar.

Si todo se encuentra bien, el plugin activará correctamente este fragmento de código sin crear problemas al sitio web.

Comprobar cambios

Para poder ver los cambios activos, vuelve a ingresar a tu sitio desde el navegador Google Chrome, luego haz click derecho en inspeccionar y ve a la secci√≥n. A continuaci√≥n, eval√ļa 2 cosas:

  • Primero, que el cambio est√© funcionando. En mi caso, que el color blanco est√© activo.
  • Que el fragmento de c√≥digo aparezca en la secci√≥n CSS, en mi caso.

Si todo est√° en orden, ya tienes tu sitio funcionando correctamente. Re cuerda que si quieres cambiar esto, solo debes ir al plugin e inactivar este fragmento o o bien, eliminarlo.

Contenido de ayuda

Hice este video para ayudarte en el proceso de modificación del sitio web con inspector Google Chrome. Si te sirve, no olvides dar like y suscribirte para nuevos videos!

Inspector Google Chrome – Youtube

Contenido sugerido

Si al igual que yo, pasas demasiado tiempo en un pc, puede que este producto te ayude, como yo a cuidar mis manos y a su vez, optimizar mis horas de digitalizaci√≥n. Te recomiendo totalmente este teclado mec√°nico Keychron k6. Si quieres ver la rese√Īa completa puedes hacerlo aqu√≠.

Keychron K6
keychron k6 – 490 valoraciones

Keychron K6 65% compacto teclado mecánico inalámbrico para Mac, retroiluminación blanca, Bluetooth, multitarea, tipo C con cable teclado para Windows con interruptor marrón Gateron

  • El Keychron K6 es un teclado mec√°nico inal√°mbrico Bluetooth compacto de 65 % con retroiluminaci√≥n blanca hecha para Mac y Windows. El K6 est√° dise√Īado para maximizar tu espacio de trabajo y mejorar la productividad.
  • Con un dise√Īo √ļnico de Mac, compatibilidad con Windows y teclas de flecha dedicadas, el K6 ofrece una c√≥moda accesibilidad a todas las teclas multimedia y funciones esenciales a trav√©s de la combinaci√≥n de pulsaciones de teclas, pero lo suficientemente compacto para que puedas llegar a tu rat√≥n m√°s f√°cilmente. Teclas adicionales para sistemas operativos Windows y Mac est√°n incluidas.
  • Se conecta con hasta 3 dispositivos a trav√©s del fiable chipset Broadcom Bluetooth 5.1 y cambia entre ellos f√°cilmente para necesidades multitarea. El K6 es mejor para adaptarse al hogar, la oficina y el uso de juegos ligeros mientras se conecta con tu smartphone, port√°til y iPad. Tambi√©n tiene modo con cable con conexi√≥n USB tipo C.

69.99 $

Conclusión

Contar con las herramientas adecuadas para modificar nuestro sitio web es clave para el éxito digital. En este caso, el inspector Google Chrome cuenta con todo lo necesario para encontrar, modificar y verificar cualquier sección de nuestro sitio web. Sin duda alguna una de las mejores herramientas para este trabajo!

¬ŅDe cu√°nta utilidad te ha parecido este contenido?

¬°Haz clic en una estrella para puntuar!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Ya que has encontrado √ļtil este contenido...

¡Sígueme en los medios sociales!

Resumen
Inspector google chrome ūüöÄ | Modifica tu sitio | Wordpress Plugin ‚úÖ
Nombre del artículo
Inspector google chrome ūüöÄ | Modifica tu sitio | Wordpress Plugin ‚úÖ
Descripción
Si buscas modificar una sección de tu sitio web puedes utilizar el inspector Google Chrome para hacerlo. Conócelo aquí ✅
Autor
Publisher Name
Eduardo Arias
Publisher Logo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *