Edita sitios web WordPress ya publicados con Sublime Text

por

Hoy quiero compartir contigo un simple truco para poder modificar temas de WordPress que están siendo utilizados en producción (sitios web ya publicados en el servidor).

Si sueles trabajar con el editor de código Coda 2 ya conocerás su funcionalidad Publishing que te permite hacer lo que hoy voy a contarte. No obstante voy a centrarme en cómo hacerlo desde Sublime Text 3, ya que esta funcionalidad no se contempla por defecto.

¿Qué vas a aprender en este mini tutorial?

  • Aprenderás que es posible instalar plugins en Sublime Text para extender sus funcionalidades.
  • Nos descargaremos los archivos de un tema que esté siendo utilizado en un sitio web.
  • Te mostraré como instalar el plugin Sublime SFTP.
  • Utilizando el plugin anterior podrás modificar los archivos del tema y ver los cambios producidos directamente en la versión del servidor.

[intro]Nota: Con este tutorial no pretendo que creas que esta es la mejor manera de trabajar sobre un tema. Lo cierto es que jugar a hacer pruebas con la versión de producción no es precisamente algo recomendado. Lo más acertado sería trabajar con un control de versiones del tipo Git.[/intro]

¿En qué escenario te va a resultar esto útil?

Personalmente sólo utilizo este método en pocos escenarios:

Realizar últimos retoques de un tema

Imagínate el siguiente caso: estás realizando un sitio web WordPress para un cliente, y lo estás haciendo en local, es decir, con algún servidor del tipo MAMP. Además, resulta que estás desarrollando un tema hijo, no diseñando y desarrollando un tema desde cero.

Una vez has acabado las modificaciones, lo subes a un servidor de pruebas y muestras el resultado al cliente. Para ello has tenido que hacer una migración de local a tu servidor.

Una vez el cliente comprueba la web, te propone algunos pequeños cambios y desea poder volver a ver los resultados. Es aquí donde este tutorial cobra sentido. En lugar de hacer los cambios en local y luego modificar los mismos archivos en el servidor de pruebas, resultará más eficiente que conforme hagas cambios en Sublime Text, estos también se apliquen en el servidor.

Realizar pequeños cambios de tu sitio web habitual

Pongamos de ejemplo SiliCodeValley, si necesito hacer algún pequeño retoque de mi tema de WordPress, me da bastante pereza tener que buscar donde tengo la versión local, arrancar MAMP, hacer los cambios y subirlos a producción.

Si se trata de cambios muy simples prefiero usar esta solución.

Realizar pequeños cambios en la web de un cliente que tú no has desarrollado

Este es el escenario más delicado, pero quizás el más útil, si los cambios que te pide son muy simples (el típico cambio que pruebas desde el Inspector del Navegador y logras solucionar el problema) debido al ahorro de tiempo que implica.

Por ejemplo, si un cliente te pide que le aumentes la fuente del título un pixel y asignarle un cierto margen tienes varias opciones:

  • Hacer una migración total del sitio web (código + BBDD) a un entorno local, realizar el cambio y subirlo a producción con algún cliente FTP.
  • Ir directamente al Editor del tema de WordPress desde el panel de administración, con riesgo a que te sangren los ojos de lo poco usable que es. Aunque depende de qué archivos no los encontrarás aquí.
  • Utilizar Sublime Text, analizar en un entorno amigable cómo es el tema, realizar el cambio y guardar para que se suban los cambios automáticamente.

Instalando plugins en Sublime Text

Bien ahora que ya has visto algunos casos donde podría resultar esto útil, vamos a ver ahora cómo instalar el Package Control en Sublime Text, que te permitirá instalar plugins de forma muy sencilla.  ¡Empezamos!

  1. Entra en el sitio web de Package Control.
  2. Te aparecerá un código en Python, elige y copia todo el código de la versión de Sublime Text que tengas instalada:
  3. Abre Sublime Text y dirígete hacia su consola (View > Show Console).
  4. Pega el código que acabas de copiar en el formulario que te aparecerá y pulsa intro:
  5. ¡Perfecto! Ya has instalado Package Control, ahora reinicia Sublime Text.
  6. Dirígete hacia (Sublime Text > Preferences > Package Control) y te aparecerá el siguiente desplegable:
  7. Escribe Install y selecciona la opción «Package Control: Install Packages».
  8. Ahora escribe el nombre del plugin que queremos instalar: SFTP y haz clic en él para instalarlo:
  9. Una vez instalado, se abrirá un readme que puedes cerrar.

¿Cómo utilizar el plugin SFTP?

  1. Primero deberemos descargarnos del servidor el directorio del tema que queramos editar. Para ello puedes hacerlo desde el Administrador de Archivos (File Manager) de cPanel o desde cualquier cliente FTP (FileZilla, Cyberduck, FireFTP…). Recuerda que encontrarás los temas en la ruta /public_html/wp-content/themes:
  2. Una vez descargado, arrastra el directorio del tema hasta Sublime Text.
  3. Ahora, haz clic con el botón derecho en la carpeta del tema y dirígete a (SFTP/FTP > Map to Remote):
  4. Se abrirá el archivo de configuración sftp-config.json donde tendrás que indicar los valores de tu cuenta FTP. Los parámetros que debes configurar son:
    • «type»: «ftp» (si deseas conectarte mediante FTP en lugar de SFTP).
    • «upload_on_save»: true (para que al guardar se suban los cambios al servidor).
    • «host»: «tuDominio-o-IP» (indica aquí tu dominio o IP de tu servidor).
    • «user»: «nombreUsuario» (indica el nombre de usuario de tu cuenta FTP).
    • «password»: «tuPassword» (indica la contraseña de tu cuenta FTP).
    • «port»: «21» (indica el puerto mediante el cual se conecta tu cuenta de FTP).
    • «remote_path»: «/public_html/wp-content/themes/silicodevalley» (indica la ruta real del servidor donde se encuentra el directorio de tu tema de WordPress. Asegúrate de que no acaba con «/» y que la ruta es correcta).
  5. Si tienes alguna duda sobre qué valores toman los anteriores parámetros, ponte en contacto con tu proveedor de hosting o con tu cliente.
  6. Guarda este archivo y ya puedes cerrarlo.
  7. ¡Genial! Ya lo tenemos todo listo. Ahora sólo debes abrir el fichero del tema que deseas modificar, por ejemplo «footer.php«, hacer los cambios necesarios y en el momento en que guardes, te aparecerá la consola de Sublime Text, que básicamente te mostrará un mensaje de éxito, indicando que los cambios se han subido al servidor.
  8. Actualiza tu web y verás que los cambios se han producido.
  9. Es posible que conforme vayas guardando, te aparezca algún aviso para que compres la licencia del plugin. Aunque no es obligatorio, puedes adquirirla aquí por $30.

Conclusión

Tal vez estés pensando que no vale la pena realizar todos estos pasos para hacer simples cambios. Pero ten en cuenta que el Package Control sólo se instala una vez, del mismo modo que el plugin y siempre partirás a partir de la descarga del directorio del tema.

Además, su principal ventaja es que si estás realizando varios cambios en distintos días, no es necesario tener que volver a configurar nada y sólo con guardar, los cambios se subirán.

Espero que te haya parecido útil y si deseas aportar algo, deja tu comentario 🙂

¡Te mando un abrazo!

Deja un comentario