La guía definitiva para configurar su entorno de desarrollo de WordPress

WordPress es ampliamente reconocido por su experiencia de usuario sin complicaciones, pero los desarrolladores de sitios web, complementos o temas tienen requisitos diferentes a los de un usuario final. Muchos han escuchado el consejo de “nunca trabajar en un sitio en vivo”, y configurar un entorno de desarrollo de WordPress es una consideración clave que debe tener para mantener a la policía de WordPress alejada de su puerta.

En este artículo, exploraremos qué es un entorno de desarrollo de WordPress, por qué es vital para su flujo de trabajo y cómo configurar el suyo en cinco pasos. ¡Pongamos manos a la obra!

Qué es un entorno de desarrollo de WordPress (y por qué lo necesita)

Un ejemplo de un entorno de desarrollo de WordPress simple.

En pocas palabras, un entorno de desarrollo de WordPress es una colección de herramientas que le permiten probar sus proyectos de forma segura antes de que se pongan en marcha. Sin embargo, sus elecciones dependerán de sus necesidades únicas (¡y sus gustos!).

Casi siempre es una buena idea probar las funciones principales en un entorno de prueba antes de implementarlas, por las siguientes razones:

  1. Le permite probar sus cambios localmente y detectar cualquier problema, sin ningún riesgo.
  2. Puede configurar su entorno de prueba a su gusto. Esto le permitirá probar si algún tema o complemento que haya creado muestra errores de compatibilidad, por ejemplo.
  3. Confiar en un entorno de prueba local suele ser más rápido (¡y más económico!) que conectarse a un servidor remoto.
  4. Le permite trabajar en sus proyectos incluso cuando no tiene acceso a Internet.
  5. Según las herramientas que utilice, la implementación de un sitio local de WordPress puede llevar solo unos minutos.

Con eso en mente, repasemos el proceso de configuración de un entorno de desarrollo de WordPress con todas las funciones.

Cómo configurar su entorno de desarrollo de WordPress (en 5 pasos)

Como mencionamos anteriormente, no existe una solución única para todos cuando se trata de entornos de desarrollo, ni siquiera para WordPress.

Para cuando termine de seguir estos pasos, habrá configurado su propio entorno de desarrollo de WordPress. En el camino, también ofreceremos nuestra opinión sobre algunas de las mejores herramientas para sus necesidades. Sin embargo, comencemos con una de las opciones más difíciles: elegir una solución de servidor.

1. Elija una solución de servidor adecuada

En primer lugar, necesitará un servidor dedicado y hay dos opciones disponibles: virtual o local:

  1. Un  servidor virtual . Esto implica crear una ‘computadora dentro de una computadora’ compartimentada. Tanto el software que necesitará como WordPress están instalados dentro, y usted lo configura para acceder a él desde un navegador.
  2. Un servidor local. Esto implica configurar tanto el software del servidor como WordPress directamente en su computadora , como lo haría con cualquier otro software.

En general, los servidores locales son más fáciles de instalar y acceder, pero hay desventajas . Por ejemplo, la configuración puede ser complicada  sin una guía. Además, es posible que la solución elegida no sea específica de WordPress. Desinstalarlos también puede ser una molestia a menos que use una pila completa. Las soluciones como  XAMPP , MAMP  o  WampServer  a menudo agrupan todo lo que necesita en un solo paquete:

Los servidores virtuales también pueden ser complicados de configurar si no está familiarizado con ellos. Sin embargo, a diferencia de los servidores locales, puede crear tantos sistemas virtuales como lo permitan los recursos de su computadora sin tener problemas de compatibilidad. Además, una vez que haya terminado con una instalación en particular, puede eliminar su sistema virtual de forma limpia. Tome Vagrant , por ejemplo:

Esta es una herramienta que le permite crear entornos de desarrollo portátiles  (y sitios web de WordPress ) a través de la línea de comandos. Dos ventajas principales son sus entornos livianos y su amplia biblioteca de configuraciones de usuario. Algunas de las opciones más populares para los usuarios de WordPress incluyen Varying Vagrant Vagrants (VVV) y VIP Quickstart .

Finalmente, existe una especie de término medio nuevo entre los enfoques local y virtual. Dos de nuestras herramientas favoritas en esta categoría son DesktopServer y Local by Flywheel . Ambos  le permiten crear una cantidad ilimitada de sitios web de WordPress, personalizar su elección de servidor y eliminar sus sitios limpiamente cuando haya terminado. En la práctica, este enfoque le brinda todos los beneficios de la virtualización combinados con los de las configuraciones locales, y es la opción que recomendamos.

2. Encuentre un editor de texto o IDE adecuado

Una vez que haya configurado su servidor, necesitará un buen editor de texto. Los desarrolladores experimentados a menudo tienen sus favoritos: ya saben que un buen editor de texto orientado al desarrollo y fácil de usar aumentará su eficiencia.

Atom es un buen editor de texto de código abierto adecuado para el desarrollo.

Hay muchos editores de texto disponibles, y las discusiones sobre sus diversos méritos tienden a ser acaloradas. En nuestro caso, somos grandes fans de Atom gracias a su variedad de paquetes (o extensiones) y sistema de autocompletado. Si elige seguir nuestros pasos, aquí hay una excelente introducción a la herramienta.

Si está buscando algo un poco más que un editor de texto, debe considerar un entorno de desarrollo integrado (IDE) . Estos combinan la funcionalidad de un editor de texto con otras funciones de desarrollo y gestión de proyectos. No son necesariamente mejores, pero pueden ser más eficientes si prefiere mantener al mínimo la cantidad de herramientas en su entorno.

En lo que respecta a los IDE, NetBeans es una de las mejores opciones para el desarrollo de WordPress:

Para empezar, está optimizado para la codificación PHP, ideal para nuestras necesidades particulares. Esta herramienta también puede ayudarlo a corregir errores en su código y ayuda a simplificar la búsqueda de secciones clave en archivos críticos.

Al igual que con los editores de texto, hay mucha competencia. Si está considerando un IDE, es importante revisar las  otras opciones disponibles  sin dejarse influir por la base de fanáticos de cada solución; asegúrese de probar cada una si es posible antes de elegir una solución.

3. Elija un navegador adecuado

La mayoría de los navegadores modernos vienen con su propio conjunto de herramientas de desarrollo, lo que los hace ideales para trabajar en sitios web de WordPress. Por ejemplo, tome Chrome DevTools . Le permiten depurar sitios y probar su capacidad de respuesta, todo sin salir de su navegador:

El conjunto de herramientas de desarrollo de cada navegador es diferente, pero algunos comparten algunas funciones importantes, como Chrome y Firefox . Este último incluso proporciona un navegador hecho a la medida de sus necesidades, llamado  Firefox Developer Edition :

Dado que realizará muchas pruebas desde su navegador, tiene sentido elegir una opción con el conjunto de herramientas con el que se sienta más cómodo. Después de probar tanto Chrome DevTools como Firefox Developer Edition , estamos seguros de recomendarlos a ambos.

Sin embargo, vale la pena señalar que esos no son los únicos navegadores que incluyen funciones relacionadas con el desarrollo. Safari también tiene su propio conjunto de herramientas de desarrollo, al igual que  Edge  y Opera .

4. Habilite la depuración para su instalación de WordPress

En esta etapa, debe tener una configuración de servidor en funcionamiento, un editor de texto o un IDE y un conjunto de herramientas de desarrollo de navegador. Si no ha instalado WordPress en su entorno (o configurado un nuevo sitio si está utilizando una herramienta como Local by Flywheel), hágalo ahora . Necesitamos habilitar la función de depuración de WordPress, que es un paso importante.

Esta función permite que WordPress muestre una lista de los errores generados. Puede ser un salvavidas durante el desarrollo, ya que le permitirá detectar cualquier error que surja mientras juega con su proyecto. Dependiendo de su configuración, puede guardar estos problemas en un registro o mostrarlos en su página principal.

En lugar de ofrecerle instrucciones paso a paso, permítanos guiarlo hacia un artículo anterior dedicado al tema: contiene todo lo que necesita saber sobre cómo habilitar y configurar la depuración en WordPress.

5. Instale cualquier herramienta de desarrollo de WordPress opcional

A estas alturas, debería tener un conjunto completo de herramientas de desarrollo de WordPress y una forma de detectar errores. Eso debería ser todo lo que necesitas para comenzar, pero siempre hay espacio para más dependiendo de tus necesidades personales.

Por ejemplo, usar la herramienta de línea de comandos de WordPress (WP-CLI) puede ayudarlo a agilizar su proceso de desarrollo , y sus comandos son fáciles de memorizar. También hay muchas herramientas que pueden facilitarle la vida (incluidas en un práctico complemento llamado Developer ), como Query Monitor . Esto le permite depurar sus consultas de base de datos, enlaces, condicionales y solicitudes HTTP:

Si es un desarrollador de temas, es posible que también desee considerar el uso de Theme Check . Este complemento verifica automáticamente su tema activo para asegurarse de que cumpla con todos los últimos estándares de WordPress:

Finalmente, también debe considerar importar el kit de datos de prueba de unidad de tema oficial de WordPress si está probando en un sitio simple. Este archivo llenará automáticamente su sitio con los elementos que incluiría uno real, como publicaciones, páginas y comentarios, y una gran cantidad de formatos únicos.

La importación de estos datos le permitirá trabajar con contenido del mundo real y le permitirá detectar cualquier error antes de publicar su sitio y sin perder tiempo llenándolo con su propio contenido.

Qué hacer una vez que haya configurado su entorno de desarrollo de WordPress

Ahora que tiene un entorno completo de desarrollo de WordPress, necesita aprender a usarlo. A menudo, deberá implementar nuevas funciones, complementos o temas en su sitio web en vivo. Dado que es una mala práctica realizar cambios en vivo, la mejor opción es clonar su sitio usando un complemento como Duplicator :

Con este complemento, puede crear una copia al carbón de un sitio en vivo y configurarlo en su entorno de prueba. Esto le permitirá probar cualquier cambio de forma segura, antes de volver a cargarlo en su servidor en vivo.

Este proceso se conoce comúnmente como «puesta en escena» y es clave para un flujo de trabajo de desarrollo web seguro. Sin embargo, algunos hosts web como WP EngineFlywheel y SiteGround ofrecen opciones de preparación avanzadas dentro de sus planes, y recomendamos elegir esta opción si está disponible.

Finalmente, si es nuevo en el desarrollo de WordPress y desea profundizar en la creación de sus propios temas y complementos, le recomendamos que busque en la web tutoriales relevantes. Por ejemplo, Torque ha publicado recientemente una serie sobre  cómo desarrollar complementos de WordPress , y hay muchos recursos relacionados con  el desarrollo de temas  para aprender.

Conclusión

No mentiremos: configurar un entorno de desarrollo de WordPress lleva mucho tiempo. Sin embargo, esta pequeña inversión debería dar sus frutos a lo grande a medida que continúe usándolo. El entorno adecuado no solo aumentará su productividad, sino que le permitirá corregir cualquier error en su proyecto en el camino.

En este artículo, lo guiamos a través de cinco pasos para crear su propio entorno de desarrollo de WordPress. Recapitulemos rápidamente:

  1. Elija una solución de servidor adecuada.
  2. Encuentre un buen editor de texto o IDE.
  3. Elija un navegador adecuado.
  4. Habilite la depuración para su instalación de WordPress.
  5. Instale las herramientas opcionales de WordPress que necesite.

¿Con qué herramientas no puede vivir en su entorno de desarrollo de WordPress? ¡Suscríbete y cuéntanos por qué en la sección de comentarios a continuación!

Imagen en miniatura del artículo de BarsRsind / shutterstock.com