2 formas de modificar una plantilla WordPress sin saber programar

Vista la gran aceptación de otro post referente a cómo instalar una plantilla WordPress de forma sencilla, esta vez vamos a hablar de cómo modificar  una plantilla WordPress sin saber programar, o teniendo muy pocos conocimientos del lenguaje de diseño web, html y css.

En este post  vamos a explicar brevemente cómo modificar una plantilla Wordpres. Existen dos formas de hacerlo. A continuación explicaremos cómo modificar una plantilla o theme de WordPress ya existente:

1- De forma sencilla, a través del panel de administración de WordPress: es muy fácil de hacer de esta forma, ya que simplemente hay que ir al menú principal (Dashboard), después click-ar sobre Apariencia y allí mismo nos aparecerá la forma de personalizar la plantilla que tengamos. Esto en el caso del WordPress gratuito (.org).

modificar plantilla wordpress

En el caso de tener una página o blog de WordPress de pago o alojado en un hosting, la misma plantilla que hemos comprado nos dirá cómo modificar algunos aspectos como colores, diferentes estilos para tablas, formularios, modificar los banners o pasarelas de fotos, el index.php, etc. sin saber programación.

2- De forma no tan sencilla, para esta opción necesitaremos tener conocimientos de html y css aunque sea mínimos para saber interpretar dónde se encuentra cada elemento y cada estilo concreto que queremos modificar.

Primero deberemos tener abierto el archivo style.css en Dreamweaver o cualquier otro programa para diseño de páginas web. Es recomendable ya que este programa de diseño si cometemos cualquier fallo como no cerrar un estilo, olvidarse de una coma, etc. nos aparecerá como error en la línea y podremos verlo mejor.

Segundo, deberemos abrir la página web tal y como se vería en el navegador en una pestaña. Si utilizamos Firefox, hay una herramienta muy útil que deberéis descargaros (solamente para Firefox): “Firebug”. En este enlace podréis descargaros la herramienta Firebug.

Una vez instalado en el navegador, aparecerá de la siguiente forma, en la parte superior derecha (aunque podréis personalizarlo y ponerlo en otra ubicación):

Firebug icon

Si tenemos abierta la página que ya está subida al servidor y tiene una url aunque sea de prueba (incluso con Apache sin subirla al hosting), abriremos la herramienta Firebug para click-ar sobre el elemento que queremos modificar. Por ejemplo imaginemos que quiero modificar el color de un banner de mi blog, clickaría con la herramienta Firebug para saber la ubicación que tiene en uno de los archivos de estilo css que tengo para mi plantilla de wordpress y saber dónde exactamente modificarlo. Click-aremos sobre el recuadro que se marca en rojo para que se active el seleccionar una parte concreta de la web:

firebug para modificar plantilla wordpress

Como vemos, hay una ventana que el propio Firebug nos ha abierto en la parte inferior del navegador Firefox para que sepamos qué elemento es en html el que seleccionamos. En la parte derecha nos indica cuál es la hoja de estilo que debemos de modificar (puede que haya varias), en qué línea del archivo está el estilo a modificar y los elementos que componen el estilo (color, tipo de letra, alineación, etc.).

Al seleccionar un elemento nos dirá exactamente cuál es. En este caso concreto he seleccionado el recuadro rojo que rodea el menú de lista de la parte superior de la web. En este caso querríamos cambiar el color rojo por otro. Por lo tanto lo seleccionaremos con la herramienta anteriormente indicada y miraremos con Firebug dónde está ubicada y en qué archivo de style.css:

modificar plantilla wordpress theme con css

Como vemos en el recuadro de la parte derecha, es un elemento de menú, en el “header” y es una lista “ul” y “li”. El “Background-color” es el color de fondo y al pasar por encima con el raton nos indicará qué color es el código hexadecimal indicado con la almohadilla #, en este caso rojo. Nos dice que está en la línea 2098 y para saber en qué hoja de estilo está, podemos click-ar sobre lo que aparece en color azul que es además donde nos indica la línea 2098.

Antes de ir a modificar el archivo css en Dreamweaver, haremos la prueba con Firebug. Para ello, hay que click-ar sobre CSS en la propia herramienta en la parte izquierda (antes estaba seleccionado el HTML), y modificaremos ahí el código hexadecimal para incluir otro color, en este caso lo modificamos directamente ahí y vemos el resultado:

modificar css con firebug en css

Por último haremos lo mismo buscando la línea 2098 en ese archivo de estilo CSS en Dreamweaver. Para que se materialice el cambio en nuestra página web o WordPress ahora deberemos subir de nuevo al “cpanel” de nuestro hosting ese archivo y reemplazarlo por el que existía antes con el mismo nombre y… ¡ya está!

¡Si te ha parecido interesante comparte este post!

28 comentarios en “2 formas de modificar una plantilla WordPress sin saber programar

  1. hola, has dejado de publicar? sigues ahi? estoy como loca intentando crear web en wp. ya tengo hosting, dominio y un thema gratis descargado… ahora como se modifica esa plantilla? que es lo que se puede modificar? solo me deja el titulo y el lema…. y resto menus, fotos no encuentro la opcion…. sorry por mi precariedad de conocimientos pero esto no es TAN facil… gracias

    • Buenas Marta,

      Sigo aquí (publico menos a menudo pero no lo he dejado), a veces respondo tarde pero es por mi frenético ritmo de trabajo y vida, pero siempre respondo no te preocupes. En cuanto a tu duda, para saber modificar la plantilla gratuita necesitarás saber php, html y css (unos conocimientos mínimos). En las plantillas de WordPress que compras, normalmente te dan varias opciones de cambiar por ejemplo los colores, los menús, etc. de forma sencilla pero al ser una plantilla gratuita digamos que tienes que “buscarte un poco la vida”.

      De todas formas te recomendaría hacer un curso de WordPress aunque fuera básico y uno de html y css (porque de lo contrario te faltaran conocimientos para poder modificar plantillas aunque explico cómo hacerlo en este post).

      Espero haberte ayudado,

      Un saludo,

      Beatriz Prado

  2. Hola ! te escribo por lo siguiente:
    Cuando hago una pagina nueva en mi sitio de wordpress todo marcha bien, pero al publicarla, solo usa un espacio de la ventana (la parte del centro) , no por completo, me gustaría usar toda la ventana (la parte verde limón) ¿donde puedo modificar esto? Te dejo mi web para que le eches un ojo, agradezco mucho tu ayuda.
    Saludosventana (la parte verde limón) ¿donde puedo modificar esto? Te dejo mi web para que le eches un ojo, agradezco mucho tu ayuda.
    Saludos

    • Buenas Néstor, seguramente se deba a la propia configuración que tengas de la web, eso si tienes nociones de HTML lo podrías mirar, sino es como si te hablo en chino. Respecto a WordPress podrías mirarlo en la propia plantilla porque algunas plantillas o páginas de plantillas están configuradas de esa forma pero no sé cómo explicártelo si no controlas de código. No sé si te habrá ayudado esta respuesta pero a veces parece más sencillo de lo que es. Yo consultaría con alguien que tengas cerca o haciendo un cursillo.

      Gracias por tu comentario,

      Saludos,

      Beatriz Prado

    • Busca con la herramienta que comento a lo largo de todo el cuerpo, tendrás que estar atento para encontrarlo. No te puedo ayudar más porque no puedo acceder a la dirección que me pones pero seguramente no sea ese el archivo donde debes modificarlo porque header.php es una archivo que solamente se refiere a la cabecera. Usa la herramienta que comento y con paciencia posicionate bien donde aparezca la palabra y te dirá en qué documento está.

      Saludos,

      Beatriz Prado

  3. Hola buenos dias!!!!
    El caso es que yo habia modificado toda la plantilla wordpress, pero al actualizarse a la nueva version todos esos cambios en colores y diseño me han desaparecido.
    Como podria solucionar este inconveniente?
    Un saludo y muchas gracias

    • Buenas Jose Miguel, una pregunta antes de nada, ¿la plantilla es comprada? Lo pregunto porque puede que hayas comprado una plantilla para una versión específica de WordPress y explicándoles el caso a los de la página donde lo hayas la comprado podrían facilitarte esa plantilla para la versión superior. Si tienes más dudas coméntame sin problemas. Fíjate siempre en las especificaciones de las plantiillas aunque sean gratuitas y en la versión que tienes de WordPress porque de lo contrario suceden problemas de incompatibilidades. En este enlace podrás ver cómo especifican las versiones de WordPress para las que valen:
      http://themeforest.net/category/wordpress
      Saludos

      • Jose Miguel, entonces ponte em contacto con la empresa o página a quien le hayas conprado la plantilla para ver si te pueden dar la misma plantilla para la versión que necesitas aunque revisa las especificaciones que ponía en la compra porque puede que ahí lo ponga y no re hagan el favor. Espero haberte ayudado, por lo menos con las dudas que tenías. Saludos

  4. Muy buenas, yo tambien estoy intentando modificar mi plantilla..he podido en cierto modo cambiar algunas cosas (como traducir palabras) pero quisiera que entrarais y si algun sabio puede decirme que lineas debo añadir o quitar a la plantilla para que no me aparezca tan grande la imagen de la pizarra de futbol, o ponerla mas arriba en los cachos en blanco (ahi habia 2 imagenes de Cristiano Ronaldo que tuve que quitar). Muchas gracias de antemano

    cdagoncillo.esy.es

    • Buenas,

      Haz como comento en el post, seleccionar la herramienta Firebug en Firefox, yo lo he hecho y dice que debes de modificar el código de la página llamada: top-b-10 en la línea del CSS número 48, ahí tienes las medidas de ese

      De todas formas como es un elemento que has introducido en un post, debes seleccionar ese post y click-ar sobre la imagen, ahí encontrarás la opción: herramientas avanzadas y ahí das otro tamaño a la imagen o seleccionas la imagen y manualmente la haces más pequeña si es lo que quieres.

      Espero haberte ayudado.

      Saludos,

  5. Hola muy buenas!

    He compartido por Twitter el articulo, muy interesante para los que no conocen el FireBug o el F12 en Chrome.

    ¿Te puedo hacer pregunta, a que si? Yo entiendo cual CSS se debe editar, pero por ejemplo si tienes que editar un HTML por ejemplo para poner un ID en una lista, para luego ir al CSS correspondiente y editarlo…. como haces para saber cual es el HTML que debes editar con FireBug o F12 de Chrome?.

    Gracias por tu respuesta

    • Buenas Beto,
      En principio si pones un tema y el blog está integrado dentro de esa página (siendo una página más de la web) con la plantilla Photographer esa plantilla actuará como corresponda con toda la página por lo que si la plantilla tiene establecido que el blog sea mostrando las fotos aparecerá de esa forma. Para que no actue así deberías modificarlo en el código, o que el blog que fuera otra página web con otra plantilla y lo metas en la web con un iframe. Espero haberte ayudado. Un saludo,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s