Paso 1: Instalar Visual Studio Code
- Descarga e instala Visual Studio Code desde el sitio oficial de Visual Studio Code. Aquí: Visual Studio Code – Code Editing. Redefined
Paso 2: Instalar Docker
- Descarga e instala Docker Desktop desde Docker.
- Una vez instalado, abre Docker Desktop y asegúrate de que esté corriendo.
¿Qué es Docker?
Docker es una plataforma que permite empaquetar aplicaciones y sus dependencias en contenedores, asegurando que se ejecuten de forma consistente en cualquier entorno. Estos contenedores comparten el sistema operativo del host, siendo más ligeros y eficientes que las máquinas virtuales. Facilita el desarrollo, la implementación y la gestión de aplicaciones, mejorando la portabilidad y la escalabilidad.
Paso 3: Crear la carpeta donde se guardará el proyecto de WordPress
- Crea una carpeta por ejemplo en el escritorio de tu ordenador llamada, por ejemplo: Mi web de prueba
- En la carpeta del proyecto, crea un archivo llamado
docker-compose.yml
y añade el siguiente contenido y guarda el archivo. Puedes crear un archivo de texto simple para añadir el texto y luego cambiarle la extensión.
version: ‘3.7’
services:
wordpress:
image: wordpress:latest
ports:
– «8000:80»
environment:
WORDPRESS_DB_HOST: db
WORDPRESS_DB_USER: user
WORDPRESS_DB_PASSWORD: password
WORDPRESS_DB_NAME: wordpress
volumes:
– ./wordpress:/var/www/htmldb:
image: mysql:5.7
environment:
MYSQL_ROOT_PASSWORD: example
MYSQL_DATABASE: wordpress
MYSQL_USER: user
MYSQL_PASSWORD: password
volumes:
– db_data:/var/lib/mysqlvolumes:
db_data: {}
Paso 4: Levantar los Contenedores de Docker
- Abre la terminal en VS Code (
Ver -> Terminal
). - Navega hasta la carpeta del proyecto usando con el siguiente comando:
cd ruta/a/tu/carpeta/proyecto
. - Ejecuta el comando
docker-compose up -d
.
Paso 5: Configurar WordPress
- Abre tu navegador y ve a
http://localhost:8000
. - Deberías ver la pantalla de instalación de WordPress. Sigue las instrucciones para completar la instalación.
Paso 6: Configurar Extensiones en VS Code
- Abre la vista de extensiones (
Ver -> Extensiones
oCtrl+Shift+X
). - Instala extensiones útiles como:
- PHP IntelliSense
- PHP Intelephense
- WordPress Snippets
Paso 7: Conectar VS Code con el Contenedor de WordPress
- Instala la extensión Remote – Containers desde la vista de extensiones.
- Abre la carpeta de WordPress desde el contenedor (
Ctrl+Shift+P
y escribeRemote-Containers: Open Folder in Container...
).
¡Y eso es todo! Ahora deberías tener tu entorno de desarrollo de WordPress corriendo en Docker y configurado en VS Code.
¿Para que sirven las extensiones?
PHP IntelliSense: Esta extensión proporciona funciones de autocompletado y sugerencias para el código PHP. Esto facilita la escritura de código, ya que te sugiere funciones, variables y métodos mientras escribes, ahorrándote tiempo y minimizando errores.
PHP Intelephense: Esta extensión ofrece características avanzadas de autocompletado, diagnóstico de errores, y navegación de código. Es similar a PHP IntelliSense, pero con más funcionalidades, como análisis de código estático y soporte para múltiples proyectos.
WordPress Snippets: Esta extensión añade fragmentos de código predefinidos y plantillas específicas para WordPress. Por ejemplo, puedes insertar rápidamente una estructura de bucle de WordPress o una función personalizada con solo unos pocos clics, lo que acelera el desarrollo.
¿Cómo ver los archivos de wordpress?
En la barra lateral izquierda de VS Code, deberías ver el explorador de archivos.
Dentro del explorador de archivos, navega a la ruta donde están los archivos de WordPress. Normalmente, estos archivos estarán en /var/www/html
dentro del contenedor.
Sino, busca esto directamente en el buscado de Visual Studio Code: /var/www/html
¿Tienes alguna duda? Déjala en los comentarios para que te podamos ayudar.