Blog de Estrategia y Marketing Digital

Cómo utilizar "inspeccionar elemento" para ayudarte a modificar tu web | Comunicando Va | Marketing y Social Media para autónomos y pequeñas empresas

El maravilloso mundo de “inspeccionar elemento”

Otra de las cosas que descubres cuando empiezas con WordPress.org es que tienes que ir actualizando ciertas cosas: el propio wordpress, plugins o el tema que tengas instalado.

Este momento suele ser un tanto traumático. ¿Por qué? Pues porque es bastante posible que algún plugin deje de funcionar o se te desconfigure algo.

El momento “desconfiguración” suele pasar cuando actualizas el tema, ya que lo normal es que hayas cambiado cosas en los archivos (más adelante os iré contando las cosillas que he ido descubriendo) y que, cuando actualizas el tema, vuelvan a su estado original. No tiene por qué cambiar todo, pero sí puedes llevarte algunas sorpresas.

Cómo utilizar "inspeccionar elemento" para ayudarte a modificar tu web | Comunicando Va | Marketing y Social Media para autónomos y pequeñas empresas

Esto mismo me pasó antes de ayer, que me tocó actualizar mi tema de Eventos Bambú. Menos mal que una cuando descubre algo, lo apunta, y no fue demasiado lioso. Tuve que volver a modificar código para quitar los títulos de las páginas, el tipo de letra…

Sin embargo, me salió algo que nunca antes había tenido.

(Por favor no hagas caso de la fealdad de la web, esta duró cosa de un mes, después fue mucho más bonica).

site-menu

Sí, justo encima del menú ponía “Site Menu”. No me había pasado antes y además se quedaba horroroso. Más que horroroso, es que no tiene ningún sentido que esté eso ahí.

Me puse a buscar como una loca cómo quitar eso y nada, que no encontraba en ningún archivo nada que hiciera referencia. Así que busqué por internet y tampoco vi a nadie que le hubiera pasado lo mismo.

Estrés, mucho estrés.

Hasta que al final, en un tema que no tenía nada que ver con lo mío, vi que alguien decía que “sólo hacía falta darle a inspeccionar elemento para ver dónde estaba el problema”.

Pues nada, que si hay que inspeccionar, se inspecciona.

inspeccionar elemento

Me fui a la web, puse el ratón encima de “site menu”, le di a botón derecho y a inspeccionar elemento.

En ese momento la pantalla cambió a esto:

codigo

Ahí se podía ver marcado la parte exacta del código que corresponde a esa parte, además de poder modificar cosas para ver cómo se quedaría en la web. Pero lo mejor es que puedes hacerlo sin ningún miedo ya que esos cambios no se guardan, simplemente te permiten ver cómo afectan a la web.

Una vez que ves cómo quedan los cambios que le quieres hacer tienes que irte a los archivos de tu wordpress y cambiar esa parte del código tal y como lo has hecho aquí.

Lo que yo quería cambiar estaba en la cabecera, así que me fui a apariencia -> editor -> header.php y busqué una línea exactamente igual a esa. Por supuesto, ahí estaba, así que sólo me tocaba hacer lo mismo que había hecho en “inspeccionar elemento”, que era borrar las palabras “site menu”.

modificar cabecera

Y arreglado, borré esas 2 palabras, le di a guardar y ya desapareció de la web.

Más o menos tienes que tener controlado a qué archivo corresponde cada parte de tu web, pero con la cantidad de códigos que hay en cada uno viene muy bien saber la línea exacta que tienes que buscar y haber podido comprobar antes como se queda.

14 comentarios

  1. maxi dalmon
    13/02/2014

    Hola Idoia Chacartegui queria hacerte una consulta, hay algun lugar exacto donde especifique el archivo donde se encuentran las lineas de codigo, porque no lo gro encontrar en ninguno de mis themes lo que hay que modificar, veo que a todos les resulta facil, y yo no lo logro (no se nada de programación, quizas eso influya) desde ya muchas gracias y saludos

    Responder
    • Idoia Chacartegui
      13/02/2014

      ¡Hola Maxi!

      Pues si te digo la verdad, no sé muy bien dónde puedes encontrarlo… más bien tienes que conocer un poco la estructura que tiene tu web.

      Por ejemplo, si lo que quieres cambiar es el tipo de letra será en style.css, si es algo del menú debe ser en wp-content -> menu.css

      Si quieres déjame tu web y lo que quieres cambiar, ¡a ver si lo descubrimos!

      Responder
        • Idoia Chacartegui
          13/02/2014

          Si no me equivoco eso debería estar en los archivos “content”, imagino que en content-page.

          Lo he mirado y, por ejemplo, para traducir los textos típicos de los posts (fecha, autor…) hay que hacerlo en content-single.

          Así que mira en content-page y me vas contando.

          Responder
  2. Mariana
    22/10/2014

    Hola, me sirvió mucho el tutorial, yo quiero eliminar el botón “Compartir” de Facebook pero no entiendo qué WordPress debo abrir, ¡ayudaaa!

    Responder
    • Idoia Chacartegui
      22/10/2014

      ¡Hola Mariana!
      No entiendo muy bien a qué te refieres con qué WordPress debes abrir… si quieres déjame un enlace a tu web para así ver mejor qué quieres exactamente.
      Un saludo y muchas gracias por pasarte!

      Responder
  3. Matías Rosofsky
    27/06/2015

    Hola Idoia tengo una consulta, como se hace para revertir cuando uno pone inspeccionar elemento en una pagina, luego crear y se pone la pantalla en gris ? Gracias

    Responder
    • Idoia Chacartegui
      29/06/2015

      Hola Matías!

      La verdad es que nunca me ha pasado eso… así que no sabría decirte. ¿No te aparece una cruz en la esquina superior?

      Saludos!

      Responder
  4. Valeria
    13/07/2015

    Hola! A ver si me puedes ayudar con una cosa de esta web http://escolalarrabassada.cat
    Necesito eliminar los dos botones a Facebook y Twiter que salen a la derecha del menú.
    He trasteado por todos lados y no se dónde están para desactivarlos.
    Gracias!

    Responder
    • Idoia Chacartegui
      15/07/2015

      Hola Valeria!

      Parece que los botones están en head.php, en la sección de menú, pero imagino que desde apariencia>menús o bien desde apariencia>widgets tiene que haber una opción mucho más sencilla para eliminarlos, que no suponga modificar código.

      Ya me cuentas.

      Un saludo y muchas gracias por pasarte!

      Responder
  5. mauricio
    23/07/2015

    hola idoia no se si me puedas ayudar de entrada no se nada de programacion pero he visto varios trukos que puedes hacer con inspeccionar elemento hace unos dias hice un comentario en una de las publicaciones que aparecen a diario en el inicio de facebook y al siguiente dia en vez de que apareciera mi foto y mi nombre que tengo en f.b en el comentario que hice aparecio la foto de una señora y su nombre de f.b podrias explicar paso a paso como volver a poner mi nombre en el comentario que hice.. si puedes enviar resp a correo mejor gracias .

    Responder
    • Idoia Chacartegui
      27/07/2015

      Hola Mauricio,

      La verdad es que no entiendo muy bien lo que te ha pasado… de todas maneras creo que me estás preguntando por el uso de Facebook de modo personal (no como página de empresa) y en eso no te puedo ayudar.

      Saludos!

      Responder
  6. joss
    23/08/2015

    Gracias por tu aporte, me gustaria pedir ayuda, resulta que no se como termine cambiando algunas cosas en google docs, y ahora todas las pantallas aparecen en versión gigante, la barra de menús, el chat, etc. no se nada del tema, pero se que dentro del css que dices que aparece al abrir inspeccionar elementos, me parecen 14 errores y como 6 advertencias, quisiera saber como resolver esto o volverlo a un estado inicial. Gracias de antemano. 🙂

    Responder
  7. Nicolas
    28/09/2015

    Disculpa, le di inspeccionar elementos a un juego online, y a algo de eso le di delete si querer, y ya no puedo jugar. Hay una forma de rehacer eso? o regresar a como estaba antes?

    Responder

Deja tu comentario

Tu correo electónico no será publicado. Los campos obligatorios estan marcados con un *