Guía para tocar el código de tu blog sin miedo

el código no muerde

El código no muerde

Estrenamos la semana con un post invitado sobre algo de lo que ya teníamos ganas de hablar en este blog, pero que está lejos de ser nuestro punto fuerte: el código y las posibilidades que ofrece para tunear nuestros blogs más allá de nuestros paneles de control. Siendo muy conscientes de nuestras limitaciones, nadie mejor que JaviEN, nuestro blogger-informático favorito, a quien seguramente ya conozcas porque es el autor del fantástico blog Monetizados, para guiarnos por las trastiendas de nuestros WordPress y conseguir vencer el miedo al código de una vez por todas.

Javi se ha enrollado hasta tal punto que, más que un post, este artículo es una guía en toda regla, de esas que merece la pena guardar para volver a consultar a lo largo del tiempo. Así que, sin más dilación, os dejamos con Javi, a ver si ya nos terminamos de convencer (nosotras las primeras) de que el código NO MUERDE. Mil gracias, Javi :)

6 opciones con las que perderás el miedo a meter mano a tu blog

Lo has oído en todos lados, últimamente no se habla de otra cosa, todo el mundo controla del tema menos tú, parece que si no estás en esa onda no eres nadie… Pues sí, es posible que haya llegado ese momento por el que han pasado cada vez más personas y parece que ha cambiado sus vidas. ¡¡Es el momento de crear un blog!!

Si te has planteado la posibilidad de empezar a adentrarte en el mundo del «estoy aquí y quiero expresarme» abriendo tu propio blog, seguramente te desborde la cantidad de información que encontrarás al respecto.

Lo primero será proponerte la cuestión de dónde tengo que crearlo, o lo que es lo mismo, ¿a través de qué plataforma?.

En ese momento, la búsqueda de información se acotará un poco más y verás que tienes varias opciones que se podrían resumir en lo siguiente:

  • ¿Quiero que sea totalmente gratis y todo mascadito para empezar a escribir?
  • ¿O quiero algo un poco más complejo pero a la vez más potente?

Si te has decidido por la última opción, ya que tienes en la cabeza la bonita idea de hacer de tu blog algo importante e ir mejorando con el tiempo hasta convertirlo en una referencia en tu temática (hay que soñar sí, pero con el tiempo ¡lo querrás con más ganas!), es posible que todos los caminos te lleven a Roma, o lo que es lo mismo, a WordPress.

Oirás muchos comentarios acerca de esta plataforma pero lo que más destaco yo de ella, y la razón por la que me tiene enamoradito, es porque no existen límites sobre lo que pretendas hacer, y ahora verás porqué.

Si bien es cierto que eligiendo la primera opción (con Blogger por ejemplo), tendrás tu blog gratuito y sin tener que configurar absolutamente nada, también lo es que cuando tu imaginación se ponga a volar pensando en cosas que te gustaría añadirle, es posible que esta tenga que frenar porque no esté del todo en tu mano el conseguir hacerlo.

Lo bueno de WordPress es que tendrás control absoluto sobre todos los elementos que componen tu blog y eso te permitirá llevar acabo cualquier cambio que se te ocurra. Principalmente la razón de esto es la gran comunidad que hay detrás desarrollando constantemente plugins con nuevas funcionalidades que podrás añadir, y lo más importante, que tendrás a tu disposición el código del propio blog, el cual podrás editar a tu antojo.

El código

¿El código de la web? Quita, ¡que no tengo ni idea!

Esa libertad de poder hacer lo que se quiera, también se puede encontrar acotada por la sensación (o la realidad) de que es posible que no hayas visto código en tu vida y que no te atrevas a tocarlo por nada del mundo para intentar hacer esos cambios que se te han ocurrido en una noche de ideas inspiradas.

Es cierto que si realmente no quieres tener un límite ninguno, tendrás que tener ciertos conocimientos de programación (o muchos según para qué), pero también es cierto que, aunque no te metas a mucho nivel, sí que hay cosas que podrás hacer por ti mismo o por lo menos ir investigando sobre ellas para ir familiarizándote poco a poco con la estructura de WordPress y cómo modificarla.

Mi objetivo de hoy es contarte unos truquitos, técnicas, o como lo quieras llamar, para poder enfrentarte tú solo al código de WordPress, e intentar modificarlo, sin tenerle ningún miedo ya que no habrá posibilidades de que te cargues nada si sigues mis consejos.

Vamos a ver 6 puntos que pueden serte de utilidad si te pica la curiosidad para adentrarte en tu blog más allá que  desde tu panel de control.

Sin enrollarme más, ¡Vamos a ello!

Si modificas tu blog con una copia en tu ordenador, nada podrá pasar

Para familiarizarnos un poco vamos a llamar «nuestro blog online» al cual tienes instalado en tu cuenta de hosting y al cual accedemos todos poniendo tu URL. Cualquier cambio sobre los archivos de tu blog en tu hosting, serán vistos directamente por los lectores. Si cualquier cosa que cambies sale mal, estos lo apreciarán si entran a él antes de que lo soluciones.

Normalmente accederemos a esos archivos por FTP (o por algún explorador de ficheros de nuestros hosting) ya que nos tenemos que conectar por Internet a otra máquina.

Al contrario tendremos «nuestro blog en local» que es una copia que tendremos del mismo en nuestro ordenador pero que será totalmente funcional. Eso nos permitirá tocar todo lo que queramos y ver en el momento los cambios que realicemos teniendo la tranquilidad de que nadie va a verse afectado si meto la pata en algún momento y me cargo algo.

Esta segunda opción es la más recomendada si vamos a hacer grandes cambios en el blog como podrían ser:

  • Intentar desarrollar nosotros mismos una nueva funcionalidad.
  • Instalar algún plugin nuevo que no tengamos muy claro si va a funcionar o si es lo que queremos.
  • Modificar algún tema a nuestro gusto sin que vayan viendo los lectores los cambios sobre la marcha, sino tenerlo totalmente preparado cuando lo subamos al hosting y lo vean todos.
  • Y La más importante en el tema de hoy, sería el poder toquetear, investigar e ir aprendiendo poco a poco sin miedo a que rompamos el blog. Quitarnos presiones de que romper algo puede tener una gran repercusión nos dará la calma para investigar y aprender más rápidamente.

En cualquier de estas opciones, y por algunas cuantas más, tener una copia de tu blog y trabajar sobre ella te traerá muchas ventajas.

No quiero enrollarme sobre este tema porque daría para un artículo muy largo el explicar detalladamente cómo puedes conseguir tu blog «en local», pero sí que resumiré que lo que necesitarías sería:

  • Tener un servidor en tu ordenador.
  • Tener una copia de los archivos de tu blog.
  • Tener la una copia de la base de datos.

No te preocupes que aunque pudiera parecer algo de altísimo nivel (tener un servidor en mi ordenador, ¡¡guau!!), no lo es tanto.

Como digo no quiero enrollarme más sobre este tema, pero podríais ver en este artículo donde se explica detalladamente cómo instalar un blog en local paso a paso.

Un cambio bien hecho es una victoria, y tener una copia ¡una salvación!

En el caso de que queramos hacer los cambios en local, no tendríamos tanto riesgo, pero en caso contrario (hacer los cambios directamente en los ficheros de tu hosting) o por cualquier cosa que pudiera pasar, hacer copias de respaldo de los componentes de tu blog es el mejor de los consejos.

Si te has planteado hacer algún pequeño cambio directamente en tu blog, de forma online, te quitarás de miedos y te dará más tranquilidad, el tener una copia que poder recuperar en caso de que algo fuera mal.

Al final, lo que necesitarás tener siempre a buen recaudo por si tuvieras que recuperarlo, sería:

  • Una copia de los ficheros de tu blog.
  • Una copia de tu base de datos.

Si tienes estos dos elementos en una copia de seguridad, cualquier cosa que salga mal con tu blog, podrás deshacerla y volver a la copia anterior que estaba funcionando correctamente.

Para conseguir esto tienes dos opciones:

  • Hacer tu mismo la copia descargándote la base de datos y el código de tu blog desde tu hosting.
  • Usar algún servicio de terceros que realice esta función. Estos servicios funcionan muy bien pero suelen ser de pago.
  • Usar algún plugin de WordPress que te haga esa misión.

Personalmente hago una copia todos los días de mis blogs usando el plugin «WordPress Backup to Dropbox» de WordPress.

Está muy bien porque te realiza estas copias con la frecuencia que tú le indiques y además te guarda la copia en tu cuenta de Dropbox. De esa forma puedes disponer de ella en cualquier momento de necesidad y además no estarás ocupando espacio ni en tu hosting ni en tu ordenador.

Lo bueno además es que no te hace una copia de todo exactamente, sino llegaría un momento en el que todas las copias juntas ocuparían muchísimo, sino que te va copiando solo los ficheros que hayan sido modificados. De esa forma siempre tendrás la versión más reciente para poder recuperarla si algo te saliera mal intentando hacer algún cambio.

Yo veo y toco lo que quiero online, pero !tú no lo ves!

Si la idea de instalar tu blog en local, para tocarlo sin límites y sin preocupaciones, te parece un poco complicada o simplemente prefieres modificar lo que sea directamente de forma online, tienes otra opción muy buena que evitará que se vean afectados tus lectores antes cualquier cambio erróneo.

Se trata de una opción de definir un tema que solo verás tú, mientras los demás lectores del blog que entren verán el que usas siempre.

Eso te va a permitir modificar tu tema libremente: estilos, funciones, colocación de elementos, lo que sea; pero sin que tus lectores estén viendo los cambios.

Para ello podemos usar el plugin «Theme test drive» que lo único que hace es añadir una nueva opción en el menú de «Apariencia» de tu panel de control, y ahí podrás definir qué tema verás tú y qué tema verá el resto.

Esto es tremendamente útil si quieres cambiar de tema y quieres dejarlo totalmente a punto antes de lanzarlo al escenario para que disfruten de él tus lectores.

Otra opción es que hagas una copia del mismo blog que usas normalmente y sobre ella hagas las modificaciones que quieras sabiendo que cualquier cosa que hagas mal podrás volver atrás.

Otra opción es el «Plugin test drive» que te permitirá lo mismo pero con plugins, para probar alguno nuevo antes de que lo vea el resto de visitas en tu blog.

En cualquiera de las opciones, cuando tengas todo preparado, podrás decir que tus lectores también usen ese nuevo tema que has retocado.

Cambia los estilos en tu navegador sin que nadie lo aprecie

Muchas veces los cambios que nos planteamos simplemente afectan a los estilos. Por mucho que tengamos temas muy Premium de WordPress, no siempre es posible cambiar a nuestro antojo todos y cada uno de los estilos.

Imagínate que quieres hacer algo de esto:

  • Cambiar el tamaño, color, tipo de letra de un elemento en concreto.
  • Aumentar el tamaño de la columna de contenido o sidebar en tu blog.
  • Mover el logo un poco más hacía un lado.
  • Cambiar los títulos de cada uno de los widgets de tu sidebar.
  • y un largo etcétera.

Es muy posible que todas esas cosas no sean posibles desde tu panel de control y las opciones de tu tema. En ese momento no queda otra que tocar nosotros mismos el maravilloso fichero «style.css» donde estarán configurados todos los estilos de nuestro blog.

Pero claro, cambiar ese fichero muchas veces suele ser costoso y complicado al no tener muy claro dónde tenemos que tocar exactamente para conseguir el efecto deseado. Además, para ver el cambio tendremos que guardar el fichero y volver a cargar la página, lo que podrá hacer que alguien lo vea en caso de que lo hayamos hecho mal.

Incluso, como comentaba, puede ser difícil ver exactamente qué elemento es el que tenemos que cambiar.

¡Hay una solución para esto que a mi me encanta y uso muchísimo! ¡Usar FireBug! ¿No sabes qué es? Vamos a ello:

Firebug es una extensión que existe prácticamente en todos los navegadores. Se puede instalar como extensión de nuestro navegador. Después nos aparecerá un icono en el mismo de una especie de bicho, y al abrirlo veremos su potencial.

Lo que nos permite esta herramienta es muchísimo y supone una gran ayuda para los desarrolladores web (vital diría yo), pero en lo que nos vamos a centrar es en la posibilidad de poder saber exactamente qué tocar de nuestro fichero de estilos, modificarlo en ese momento, y ver los resultados en tiempo real sin que nadie más lo vea.

Vamos a ver qué pinta tiene FireBug y cómo podemos usarlo ayudados de la siguiente imagen:

ejemplo-uso-firebug

(pulsando sobre la imagen la podréis ver en más detalle)

Una vez pulsado sobre el bicho de Firebug y estando en la página que queremos modificar (en este caso una de este blog), veremos que nos aparece una pantalla extra en la parte inferior, tal y como vemos en la imagen anterior.

Vamos a repasar los elementos que he querido destacar:

  1. Pulsando sobre el botón «Inspect» (o inspeccionar según el idioma que tengas instalado) podrás seleccionar cualquier elemento de la web. Según te vayas moviendo por ella se irán iluminando los elementos que la componen. Cuando llegues al que quieras, haces click y verás toda la información sobre el mismo.
  2. En este caso he pulsado sobre el título de uno de los widgets de la sidebar. En concreto, sobre «Suscríbete a nuestro blog«.
  3. Al pulsar sobre ese elemento, vemos en el número 3 que aparece la parte de estilos que lo está definiendo. Como también podéis ver, sin tener el código del blog ni acceso a sus archivos del FTP, he podido modificar su color, simplemente modificando la etiqueta «color» dentro de los estilos, poniendo «yellow». También se puede ver que podríais modificar el tamaño o cualquier cosa de ese título. Del mismo modo con cualquier elemento de la web. Además, una vez que estés a gusto con el cambio que has hecho, para hacerlo de una forma definitiva y que lo vean tus lectores, tendrás que modificarlo finalmente en el archivo CSS de tu blog. La gran ayuda es que podemos ver en qué línea del mismo está justo lo que queremos cambiar, tal y como hemos hecho de prueba en Firebug (lo veis con letras azules un poco más arriba del 3).

Daría para mucho hablar sobre todo lo que es capaz Firebug, pero creo que con esto os habrá quedado más o menos la idea. Lo demás es ponerse a trapichear hasta conseguir lo que se quiera, con la total seguridad de que no romperás nada, y con la comodidad de que estás viendo en ese mismo momento el efecto de los cambios que estás realizando.

Conoce cómo se mueve tu «Enemigo»

Así es, si queremos modificar algo de WordPress, tendremos que saber más o menos de qué archivos está compuesto y así sabremos directamente donde ir si queremos hacer algún cambio sobre algo en concreto.

He de decir que esto puede cambiar mucho en función del tema que se use, pero generalmente suelen cumplir con la estructura que os comentaré. De hecho, como alguno de vosotros sabéis, me gustan más los temas que son más sencillos en código que no los que te dan miles de opciones en le panel de control pero luego es más complicado bucear en su código para intentar tocar alguna cosa.

Estos serían los ficheros de un tema normal de WordPress (empezamos de arriba a abajo):

  • Header.php: Este archivo definirá lo que aparece en la cabecera del blog. Muchas veces se usa para añadir scripts del tipo de Google Analytics o cualquier herramienta que uses ya que será lo primero que se carga del blog.
  • Index.php: Como en cualquier web, este será uno de los más importante y definirán lo que llaman el «Loop» de WordPress. Ahí estará definido lo que se va a mostrar en la home de tu blog en la parte del «cuerpo del blog». Podrás cambiar la forma en la que aparecen los artículos en la portada, o lo que quieras (en algunos temas puede venir como «home.php»).
  • Single.php: Esta también es muy importante y define lo que verás cuando entres en algún artículo en concreto. Podrás tocar si quieres que aparezca algo al final de los artículos, o al principio, o donde quieras. Es muy útil por ejemplo si quieres poner algún banner, Adsense u otra cosa similar en alguna parte de tu post.
  • Sidebar.php: Este artículo, como no podría ser de otra manera, afecta al sidebar de tu blog. Normalmente esta se carga dinámicamente en función de lo  que definas en los Widgets de tu panel de control, pero también puede darte juego añadir algo en el código en algunas ocasiones.
  • Footer.php: Por último, en cuanto a estructura se refiere, tendríamos el footer, que definirá lo que verás en el pie de página del blog. Útil también para añadir algunos scripts que no quieres que ralenticen la carga de los elementos de la página pero los necesitas para alguna herramienta, como por ejemplo de estadísticas.
  • Function.php: Este es muy importante también ya que ahí añadirás funciones que se van a usar en todo el tema. Algunas que uso concretamente pueden ser las de averiguar el país de la visita, obtener la primera imagen de algún post, etc, y con ellas hacer algo o mostrarlas dentro del contenido del blog. Básicamente sustituyo algunos plugins con código propio para aliviar la carga del servidor y aumentar la velocidad de carga. Todo ello iría en este archivo.
  • Style.css: Cómo ya hemos adelantado con Firebug, aquí encontraremos los estilos de nuestro blog y será donde atacaremos para modificar esas cosillas en el diseño del mismo.

Todos estos archivos se encuentran dentro de la carpeta:

wp-content/themes/<nombre_de_tu_tema>

Como digo hay mucho más, pero teniendo claro estos, ya podrás ir trapicheando y yendo de una forma directa a uno de ellos en función de lo que quieras intentar tocar en tu código.

Los Editores molan, el de WordPress no tanto… ¡No lo uses!

Si tienes un poco de experiencia con WordPress, o conoces algo la herramienta, verás que en el menú de «Apariencia» tienes la opción de «Editor».

Ahí verás el código de los ficheros de los que os he hablado en el apartado anterior y tendrás la opción de modificarlos «al vuelo».

Totalmente no es algo que recomiende. Te diría que, aunque estés 100% seguro de lo que vas a cambiar o tengas una extrema urgencia por hacerlo, nunca modifiques tus ficheros desde el editor de WordPress. 

La razón es sencilla y te la resumo en estos puntos:

  • Aunque puedas tener algún plugin que te ayude con esto, el código suele mostrarse al estilo «Blog de notas» de Windows por lo que no te aparecerá bien colocado y con sus colores en función de los elementos del código. Esto te podría dificultar la tarea de modificarlo.
  • Aunque la anterior no sea una razón tan importante, lo peor de usar este editor es que si haces algo mal, no podrás usar la salvadora opción de «Deshacer». Una vez que has hecho un cambio y lo guardas, la página se recargará y no tendrás opción de deshacer de forma rápida el código salvo que recuerdes exactamente lo que has cambiado y lo vuelvas a modificar. Fíjate que un cambio erróneo cerrando alguna etiqueta del código, podría hacer que este dejara el blog inconsistente y no pudieras ni volver a entrar en el panel de control para dejarlo como estaba.

Por la segunda razón sobre todo, lo mejor es usar un editor externo que los hay muy buenos. Puedes echar un vistazo a Ultraedit, Sublime, TextWrapper o muchos más.

Lo bueno de estos es que si haces algo mal, darás a deshacer, guardarás de nuevo y todo solucionado y además podrás ver el código de una forma más clara facilitándote su modificación. Incluso si dejaras tu blog inconsistente, podrías recuperarlo simplemente con «control-Z» :-) .

Si has llegado hasta aquí ¡tienes un valor increíble!

Espero que viendo las opciones que hay para no meter la pata, venzas el miedo que te pueda llegar a producir el plantearte cambiar algo del código de tu blog por tu cuenta. Verás que poco a poco vas cogiendo soltura y te encantará no tener límites para añadir cualquier cosa.

Si quisierais más detalles sobre alguno de los puntos o que os ayude con algún tema, estaré encantado de leer vuestros comentarios :-) . También se aceptan tiradas de piedras por enrollarme tanto!! 😛

A romper el miedo todos al código, que al final será vuestro amigo! ¿Te has planteado alguna vez hacerlo y no te has atrevido? ¿tendrías más ganas de intentarlo ahora? ¡Dime que sí!! jejej.

 

¿Te ha gustado este artículo?

¿Sí? Entonces te recomendamos una cosa...

Regístrate a nuestro blog y recibirás:

Nuestros post sobre Marketing Online directamente en tu buzón de entrada y todas las novedades que vayamos desarrollando desde Enredando por la Red. Somos las primeras que odiamos el spam, así que no tienes que preocuparte. ¡Prometido! Suscribirte solo te llevará unos segundos y estaremos encantadas de darte la bienvenida.

Subscribe to our mailing list

* indicates required Dirección de Email * Nombre Apellidos

O si lo prefieres ...

Nos ayudaría mucho si compartes este artículo.
Los Tweets, Likes y +1s ayudan a que Google tome en serio este artículo y lo posicione... ¿nos echas un cable?? :) Mil gracias por adelantado.

Comentarios

    • Paula Guzman dice

      ¿Has visto, Manuel? Javi es un lujo de blogger invitado como la copa de un pino :)

      Coincido 100 por cien: pedazo de post de utilidad y bien explicado y pedazo de currada que se ha pegado Javi, que encima es generoso y no sólo comparte lo mucho que sabe sino que además nos ha regalado el post

      Un abrazo, Manuel, me alegro mucho de que te haya gustado el post :)

    • Paula Guzman dice

      Gracias, Adrián :)

      Todo el mérito es del amigo Javi, de Monetizados. Yo también soy de las que tiene que ponerse las pilas con el código para no liarla parda a las primeras de cambio, así que nos toca guardar esta guía-post como oro en paño! Cuando te lo cuentan tan fácil como lo cuenta Javi parece coser y cantar!

    • Paula Guzman dice

      Estamos contigo, Mariana. Nosotras tampoco podemos de dejar de dar las gracias a Javi por no sólo currarse este pedazo de post tan útil sino por encima habérnoslo regalado :)

  1. dice

    Peazo post, confieso que no lo he leído todo, eso sí como la biblia pasa al archivo para cuando me vea en la necesidad de hacer reformas más en profundidad en mi «casa». Tú sí que sabes! 😉

    • dice

      Muchas gracias Patricia, Paula y a todos!
      Siguen alegrándome muchísimo estos comentarios! :-) Para cuándo publico el siguiente aquí??? jejeje, así da gusto hacerlo.
      Habéis conseguido entre todos los que habéis comentado por aquí que me vaya unos días de descanso mu contento!
      Un abrazo a todos y todas!

  2. Matti dice

    Me guardó este post en favoritos. Una genial guía
    Enhorabuena Javier por tu colaboración y por aportar luz a los que siempre andamos en tinieblas con esto del código

  3. dice

    Gracias chicas!!!
    Todo un honor tener un poco de mi rollo en vuestro pedazo de blog! 😉 Así que muchísimas gracias por la oportunidad y por las palabras dedicadas.
    Un besazooo!
    PD: Al final los Lunes valen también para llevarse alegrones y todo 😀

    • Paula Guzman dice

      Gracias a nosotras??? Gracias a ti! Que menudo regalazo nos has hecho y menuda currada te has pegado!

      A ver si la próxima vez que nos veamos podemos decirte que definitivamente el código no nos ha mordido :)

      PD Con este regalo, por mi parte, ya casi has salido de la zona de la «penalización» jajajaja

      Un besazo Javi!

      • dice

        jajajaja, ya tuve yo una visión de futuro y sabía que tenía que dejar algo preparado antes del finde!! 😛
        A ver si voy a tener que escribir otras 3000 palabras para salir del «casi»…. jejej

Deja un comentario

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