• Skip to primary navigation
  • Skip to main content
logo nuevo estudio 27
  • Inicio
  • Nosotros
  • Diseño Web
  • Páginas Web
    • Hosting Web
    • Mantenimiento Web
    • Fotografía Web
    • Formación Web
  • Marketing Digital
    • Google Ads – SEM
    • Posicionamiento Web
    • Community Manager
    • Email Marketing
  • Trabajos
Kit Digital Presupuesto

Cómo editar el código de WordPress con la extensión SFTP de Visual Studio Code

Inicio » Cómo editar el código de WordPress con la extensión SFTP de Visual Studio Code

noviembre 14, 2019 Por Pablo Marti

A medida que vamos adquiriendo conocimientos en el mundo del diseño y desarrollo de páginas web, nos pueden surgir diferentes inconvenientes que deberíamos subsanar. Uno de ellos podría ser cómo editar código interno de WordPress, es decir, modificar nuestra aplicación web de manera más avanzada sin la utilización de ningún plugin.

WordPress, una de las aplicaciones más utilizadas para la creación y gestión de aplicaciones web, dispone de un amplio mercado de plugins, muchos de ellos desarrollados por la comunidad. Pero en ocasiones, estos complementos no son suficientes, o debemos modificarlos para ajustarlos a nuestras necesidades. De aquí surge un problema bastante común. ¿De cuál hablamos?

Hoy vamos a dedicarle el artículo a Visual Studio Code y a una de las utilidades que integra esta aplicación en su ‘Marketplace’. Es un software open source, es decir, de código abierto; disponible para Windows, Linux, y Mac OS; desarrollado por Microsoft.




Visual Studio Code (de manera abreviada VS code) dispone de una terminal integrada, control de versiones con Git, resaltado de sintaxis, snippets, refactorización de código y muchas otras utilidades. En su Marketplace podemos encontrar multitud de complementos y utilidades de manera gratuita con las que personalizar y mejorar nuestro VS code.

Daremos a conocer el complemento SFTP, el cual nos facilitará la tarea del desarrollo web con los ficheros ubicados en un servidor remoto.

Usando esta extensión, al mismo tiempo que estamos desarrollando nuestro código, este se puede ir sincronizando con el contenido del servidor, con lo que podemos estar visualizando los cambios remotos en tiempo real.

Características del plugin SFTP:

• Explorador de archivos remoto

• Diff local y remoto, es decir comparación de ficheros
• Directorio de sincronización
• Subida/Descarga
• Subida automática al guardar progres



1. Cómo instalar SFTP en Visual Studio Code:

Una vez instalado Visual Studio Code, lo ejecutamos y nos dirigimos al icono de extensiones en la parte superior izquierda del programa. En la barra de búsqueda escribe: ‘sftp’, con lo que podrás visualizar las coincidencias de búsqueda.

Visual Studio Code 1

En la lista que nos aparece, seleccionamos la primera opción, desarrollada por el autor liximomo, donde haremos clic en el botón de instalar.

Visual Studio Code 2



2. Como usar la extensión SFTP en Visual Studio Code:

 

Después de instalar la extensión, a continuación, veremos como configurarla correctamente para poder sacarle el máximo partido. Abre el directorio del proyecto desde el menú archivo de Visual Studio Code.





Presiona Ctrl+Shift+P si utilizas Windows/Linux ó Cmd+Shift+P si estás usando Mac, lo que abrirá la paleta de comandos. Escribe SFTP y selecciona la opción ‘SFTP:config’.

Visual Studio Code 3

 

Esto abrirá el archivo sftp.json en el editor. Podrás visualizar un contenido similar al que te mostramos a continuación:

Visual Studio Code 5

Debes sustituir los campos que vienen ya definidos como demostración por los parámetros de configuración de tu servidor. Nombre, host, nombre de usuario, remotePath ó ubicación, etc. El puerto por defecto es el 22. Puedes cambiarlo si estás utilizando otro puerto.

 

Te recomiendo dejar la opción “uploadOnSave” con el valor true, lo que permitirá a la aplicación sincronizar automáticamente los archivos modificados nada más guardar el progreso. Es importante que revises si el proyecto local y el remoto tiene la misma estructura de ficheros y directorios, para evitar posibles errores en la sincronización.

 

Una vez hayas modificado los campos necesarios puedes guardar el archivo, sin modificar la ubicación por defecto. Este fichero de configuración es para cada proyecto, es decir, si necesitas configurar otro directorio remoto, tendrías que crear otro fichero como éste.

 

A continuación, la extensión nos solicita la contraseña de FTP, si no has configurado ninguna puedes dejarlo en blanco. La contraseña solamente será solicitada la primera vez que intentemos acceder al servidor.

 

Comenzamos abriendo uno de los archivos situados en nuestro servidor remoto. Con el clic derecho podremos ver la opción ‘Subir archivos’ y ‘Descargar’, haz clic en cualquiera de las dos y la aplicación nos solicitará la contraseña.

Visual Studio Code 6

Introduce la contraseña y presiona Enter. La extensión sftp guardará de manera segura tu contraseña y no será requerida de nuevo mientras el editor siga abierto. Si no deseas que el plugin te solicite la contraseña cada vez que lo inicies puedes añadir la siguiente línea al archivo sftp.json.

Esta extensión dispone de un explorador remoto de archivos, con el que podemos visualizar la estructura de archivos y directorios de nuestro servidor.

Visual Studio Code 7

Otra característica propia de la extensión es la Sincronización local a remota y vice-versa. Para hacer esto necesitas abrir la paleta de comandos e introducir ‘Sync’, con lo que podrás ver: “Sincronización Local -> Remota” and “Sincronización Remota -> Local”.

 

Espero que sirva os de ayuda. Si tenéis alguna duda, poneros en contacto con nosotros.

Filed Under: General

Contacta con nosotros

Solicita presupuesto gratuito y sin compromiso a través de cualquiera de los medios de contacto y te atenderemos en nuestra oficina o vía streaming.

Contactar

Copyright © 2013 - 2023 Diseño web: estudio-27.com
Blog · Aviso Legal · Política de Privacidad · Política de Cookies · Diseño web · Posicionamiento Web · Agencia SEO · Community Manager

  • Facebook
  • Instagram
  • LinkedIn

Utilizamos cookies para ofrecerte la mejor experiencia en nuestra web.

Puedes aprender más sobre qué cookies utilizamos o desactivarlas en los .

Estudio 27
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles. Para más información visite la siguiente página 

Cookies del sitio

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Para ver las cookies, pinche aquí

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.