Cambiar color de logo para una página WordPress

Para cambiar el color del logo en una de las páginas de nuestra página WordPress, lo primero que necesitamos es localizar el archivo php en el que está incluido el src de la imagen del logotipo. Es decir, si tenemos lo siguiente:

<img width="225" height="56" src="https://jmewebs.es/wp-content/uploads/logo.jpg">

Necesitaremos encontrar el archivo php donde está escrito el src. (Si no localizas el archivo, más abajo explico una alternativa).

Cambiar logo página wordpress modificando archivo php

Para ello vamos a hacer uso de mi plugin favorito: String locator.

Lo que hace este plugin es buscar cadenas de caracteres (texto) en todos los archivos de nuestro wordpress. Para hacer una búsqueda vamos al menú de wordpress > Herramientas > String Locator

String locator en menú wordpress

Para localizar el «src», debemos probar diferentes búsquedas hasta dar con ello, utilizando algún id o clase que tenga el elemento img o algún elemento padre. En mi caso, busqué por la clase del primer elemento padre.

Al entrar a modificar el archivo, vemos que tiene el siguiente aspecto:

A continuación necesitamos conocer el id de la página en la que queremos cambiar el color del logo. Para ello vamos al listado de páginas de wordpress, y al colocar el ratón encima de la página nos revelará el id en la parte de abajo como se ve en la siguiente imagen.

Id de una página wordpress
El id en este caso es 2

Ahora dentro del src, tendremos que sustituir el código entre las llaves de php (<?php … ?>). Quedaría de esta manera.

Modificar src logotipo wordpress

El número 2 dentro de «is_page()» equivale al id de la página, localizado más arriba.

Cambiar logogotipo con Javascript

Para ello necesitaremos el selector de la imagen logotipo. Para obtenerlo visualizamos nuestra página, hacemos click derecho sobre la imagen y a continuación Inspeccionar.

Ahora, en la ventana que se abre: click derecho sobre el elemento img > Copy > Copy selector

Con el selector copiado, editamos la página a la que le queremos cambiar el logo y añadimos un bloque de html al final.

Y por último en ese bloque añadimos el siguiente código, con vuestro selector y vuestra url de imagen.

<script>window.addEventListener('load', logo, false); function logo(){document.querySelector('AQUÍ EL SELECTOR').src = "AQUÍ LA URL";}</script>

¡No olvides dejar tu comentario!

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