La mejor configuración para tu entorno de desarrollo local con WordPress

Ejecutar un entorno de desarrollo de WordPress para tus sitios es crucial para un flujo de trabajo productivo y seguro como desarrollador.

En esta publicación, te guiaré a través de varias formas de configurar el entorno de desarrollo, instalar WordPress localmente, organizar la base de datos, depurar y mucho más. Hay mucho que cubrir, así que aunque esta publicación tendrá una tonelada de información, también presenta una buena colección de enlaces a otros artículos que profundizan más el tema.

¿Sabías que WordPress 5.5 presenta una forma de establecer el tipo de entorno para un sitio? En el pasado, los desarrolladores tenían que desarrollar su propio método para configurar el entorno. Hemos usado nuestro propio conjunto de constantes antes y otros han usado la WP_ENV como variable de entorno.

Esto es necesario para cargar código condicionalmente en diferentes entornos. Por ejemplo, en lugar de enviar correos electrónicos a través de Mailgun en mi sitio de desarrollo, cargaré condicionalmente un pequeño complemento mu para desactivar el complemento Mailgun y probaré los correos electrónicos de forma segura con Mailtrap.

La mejor configuración para tu entorno de desarrollo local con WordPress

Con la versión 5.5 de WordPress, puede configurar el tipo de entorno usando una constante (generalmente en el archivo wp-config.php):

define( 'WP_ENVIRONMENT_TYPE', ‘development’ );

Luego puede usar la nueva wp_get_environment_type() función en el código condicional:

If ( ‘development’ === wp_get_environment_type() ) {
    // run some dev only code
}

Bien, entremos en esto. El mejor lugar para comenzar es con el entorno de desarrollo de WordPress. Es el primer lugar donde empiezo cuando construyo un sitio nuevo y es donde paso la mayor parte de mi tiempo desarrollando un sitio.

Entorno de desarrollo de WordPress

Como mencioné anteriormente, tener un entorno de desarrollo de WordPress es una parte vital del conjunto de herramientas de un desarrollador, por lo que pueden trabajar en los sitios y realizar cambios sin preocuparse por cometer errores directamente en el sitio en vivo. También es un gran lugar para probar complementos, temas y actualizaciones centrales de WordPress para verificar que no haya ningún problema antes de aplicarlos al sitio en vivo. Esta prueba es un proceso importante al actualizar un complemento de comercio electrónico como WooCoommerce.

Sin embargo, si nunca ha configurado un entorno de desarrollo, puede parecer una tarea abrumadora. Un entorno que se puede utilizar para ejecutar sitios de WordPress se compone de 3 partes: un servidor web (generalmente nginx o Apache), PHP y un sistema de administración de bases de datos (generalmente MySQL).

Te puede interesar: La guía completa de campos personalizados de WordPress

Cómo instalar un entorno de desarrollo de WordPress

Hay una gran cantidad de opciones de software disponibles para instalar y ejecutar un entorno en su computadora, independientemente de su sistema operativo. Hay entornos que se ejecutan en Mac OS, Windows y Linux. Recientemente pregunté en Twitter qué estaban usando los desarrolladores para su entorno de desarrollo de WordPress y los resultados fueron interesantes. Parece que hay muchos usuarios que usan las mismas cosas, pero también una gran cantidad de personas que usan sistemas a medida:

He desglosado todas las respuestas y votos de forma muy científica para mostrar los resultados:

Claramente, hay muchos desarrolladores que usan Local (anteriormente conocido como Local by Flywheel). Nuestro propio Pete Tasker incluso escribió sobre la creación de un complemento personalizado para Local. Algunas personas de Windows están usando Laragon (sobre el que Matt escribió), y algunas personas usan Devilbox de la misma manera que Jonesy.
Elegir el entorno de desarrollo adecuado es importante, por lo que hemos dedicado un tiempo a analizar unos pocos: comparamos MAMP, XAMPP, Local y DesktopServer, comparamos a Docker y Vagrant cara a cara y exploramos cómo se combinan Valet, VVV y Chassis. arriba.

También me interesó ver a un puñado de personas diciendo que usan un VPS para sus sitios de desarrollo. Entonces, en lugar de tener un entorno de desarrollo local en su máquina, tienen un entorno de desarrollo en un servidor remoto.

Hemos escuchado de los clientes de SpinupWP que lo usan para hacer lo mismo, e incluso a nuestros propios desarrolladores a veces les resulta más rápido crear un nuevo sitio de WordPress en un servidor DigitalOcean, para que puedan probar funciones en las últimas versiones de PHP y MySQL.

Crear un sitio

Una vez que haya configurado su entorno de desarrollo de WordPress, deberá instalar WordPress localmente. Este puede ser un sitio nuevo con el que está comenzando desde cero o un sitio que es una copia de un sitio en vivo existente que le permitirá realizar cambios en él.

De cualquier manera, existen varias opciones para crear sitios de WordPress. Puede lanzar su propio script de configuración del sitio de WordPress, usar WP-CLI o usar Composer . Utilizo la configuración basada en Composer para SpinupWP como punto de partida en estos días.

Podría decirse que la parte más importante de un sitio de WordPress es la base de datos. Sin embargo, la base de datos de WordPress no funciona bien con diferentes entornos, en gran parte porque almacena URL y rutas de archivo en la base de datos en lugar de mantener todo relativo.

Esto hace que mover bases de datos entre entornos sea un desafío. Pero lo tenemos cubierto.

Mover bases de datos entre entornos

Si está configurando un sitio desde cero localmente en su entorno de desarrollo, probablemente haya instalado la base de datos de nuevo y, cuando se trata de poner el sitio en vivo, deberá mover esa base de datos al servidor en vivo.

Hay formas manuales de mover bases de datos de WordPress entre entornos, como exportar y luego importar a través de PhpMyAdmin. Sin embargo, las URL y las rutas deben cambiarse en el archivo de exportación .sql, y hacer esto con una búsqueda y reemplazo probablemente romperá las matrices de datos serializadas.

Si ha exportado e importado la base de datos de un entorno a otro, puede cambiar de forma segura las URL y las rutas utilizando un par de métodos:

1. Usando el comando de búsqueda-reemplazo de WP-CLI
2. Uso de un complemento con una función de búsqueda y reemplazo como WP Migrate DB

Para eliminar los pasos manuales de exportación e importación de la ecuación y ahorrar algo de tiempo, le recomiendo usar un complemento como WP Migrate DB Pro que le permitirá empujar y extraer sus bases de datos entre entornos.

Por ejemplo, acaba de dar los toques finales a un sitio en su entorno de desarrollo local y quiere ponerlo en vivo. Puede «enviar» su base de datos local al sitio en vivo con unos pocos clics.

Lo mismo ocurre cuando necesita realizar cambios en un sitio activo que se ha estado ejecutando durante un tiempo. Despliegue la última versión de la base de datos en vivo en su sitio local para que pueda trabajar en una copia exacta que es excelente para rastrear errores o trabajar en nuevas funciones.

Hacer cambios en la base de datos localmente y hacer que se transfieran al sitio en vivo es un juego de pelota completamente diferente. Versión corta: intente evitarlo. Versión larga: lea cómo manejamos la fusión de bases de datos de WordPress.

Consejo profesional: utilice el complemento CLI para WP Migrate DB Pro para potenciar su flujo de trabajo y nunca salga de la línea de comandos.

Media Library

Hemos hablado de mover bases de datos entre entornos, pero ¿qué pasa con la biblioteca multimedia? El contenido de la carpeta de cargas de su sitio es una parte igualmente importante de un sitio de WordPress. Ejecutar una versión local de un sitio sin imágenes no será útil al realizar cambios de diseño o frontend.

SFTP es siempre una opción: conéctese a su servidor en vivo y copie el directorio wp-content / uploads del sitio. O incluso usando SSH para conectar y sincronizar los archivos con rsync . Esta es probablemente la forma más manual de hacerlo. Escribí sobre diferentes enfoques a este problema en 2015 y algunos de los trucos ingeniosos como htaccess y add_filter rewrites siguen siendo relevantes hoy en día. Pero creo que mi enfoque favorito es usar el complemento Media Files para WP Migrate DB Pro, que le permite empujar y extraer los medios de sus sitios junto con la base de datos.

SSL local

En 2017, Chrome comenzó a redirigir todos los dominios .dev a HTTPS , lo que afectó a una gran cantidad de desarrolladores que usaban ese TLD para sus sitios de host local. Firefox siguió su ejemplo en 2018. De repente, los desarrolladores necesitaron crear certificados SSL para sus sitios locales.

Pero esa no es la única razón para tener un certificado localmente. Replicar su sitio de producción lo más cerca posible es una buena idea para asegurarse de que puede solucionar completamente los problemas. Por ejemplo, las advertencias de contenido mixto no serán evidentes hasta que el sitio se implemente con SSL. Otra razón para SSL local es la integración con servicios de terceros, como webhooks o integraciones de oAuth que requieren HTTPS.

Hay varias formas de obtener un certificado SSL local, y puede depender de lo que elija usar para su entorno de desarrollo. Si está usando Valet, entonces puede usar el comando CLI valet secure para activar SSL para el sitio. Local y MAMP Pro tienen la capacidad de generar y usar un certificado para el host, directamente en la interfaz de usuario. Si desea tener un poco más de experiencia, consulte nuestra guía para generar certificados SSL y crear una autoridad de certificación.

Depuración

En mi opinión, uno de los mayores beneficios de tener un entorno de desarrollo de WordPress para un sitio es facilitar la depuración de problemas. Si alguna vez ha intentado resolver un problema en un sitio en vivo armado solo con acceso FTP y error_log líneas, sabrá lo tedioso y complicado que puede ser.

La herramienta esencial en la caja de herramientas de los desarrolladores de WordPress para la depuración es WP_DEBUG. Activar esto en su wp-config.php archivo local, junto con WP_DEBUG_LOG, escribirá todos los errores, avisos y advertencias de PHP en el wp-content/debug.log archivo del sitio:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Aunque WP_DEBUG está desactivado de forma predeterminada y, por lo general, no está activado para los sitios en vivo, en realidad recomiendo usar el mismo código en los sitios de producción para detectar errores que ocurren de verdad, y usar un servicio como Papertrail para brindarle una mejor visibilidad de los registros.

Tener un sitio que se ejecute localmente, con una nueva sincronización de la base de datos en vivo y WP_DEBUG activado, hace que el proceso de depuración sea mucho más fácil y seguro. Junto con el uso de una herramienta de depuración como Xdebug, está mucho mejor equipado para recrear y rastrear errores.

Xdebug le permite establecer puntos de interrupción en líneas específicas de código, de modo que cuando esas líneas de código se ejecutan mediante una solicitud, la ejecución se detiene y obtiene una idea de todas las variables y globales, lo que lo ayuda a descubrir lo que no es set, qué matriz es en realidad un objeto, o cualquier fragmento de código que esté roto.

Otros consejos

Al ejecutar un entorno de desarrollo de WordPress, hay algunas otras cosas que debe considerar que mejorarán su flujo de trabajo.

Email

Para los sitios en vivo, recomiendo usar un complemento de servicio de correo electrónico transaccional para manejar el envío de correos electrónicos, pero no desea enviar correos electrónicos desde su sitio local a través de este servicio. Aparte de un aumento en el costo al agregar a su uso, no desea enviar correos electrónicos accidentalmente a los clientes si un correo electrónico se envía accidentalmente desde su sitio local.

Soy un gran admirador de Mailtrap, que proporciona un entorno de correo electrónico seguro para sus sitios de desarrollo y prueba. Tiene un plan gratuito para proyectos personales y le permite enviar sus correos electrónicos a través de su servidor SMTP a su propia bandeja de entrada de correo electrónico protegida.

En todos mis sitios agrego este complemento mu para deshabilitar el complemento de correo electrónico transaccional y le digo a WordPress que envíe correos electrónicos a través de Mailtrap cuando el sitio se esté ejecutando en un entorno que no sea de producción:

<?php

If ( ‘production’ === wp_get_environment_type() ) {
    return;
}

add_filter( 'option_active_plugins', function ( $plugins ) {
    if ( ! is_array( $plugins ) || empty( $plugins ) ) {
        return $plugins;
    }
    foreach ( $plugins as $key => $plugin ) {
        if ( 'mailgun/mailgun.php' === $plugin ) {
            unset( $plugins[ $key ] );
        }
    }

    return $plugins;
} );

add_action( 'phpmailer_init', 'mailtrap' );
function mailtrap( $phpmailer ) {
    $phpmailer->isSMTP();
    $phpmailer->Host     = 'smtp.mailtrap.io';
    $phpmailer->SMTPAuth = true;
    $phpmailer->Port     = 2525;
    $phpmailer->Username = 'ab95cde091e150';
    $phpmailer->Password = '3ce83627dc3dd2';
}

Complementos

Hay algunos complementos de WordPress que siempre instalaré en mis sitios locales de WordPress:

1. Query Monitor : mi complemento de referencia para depurar sitios lentos de WordPress, encontrar consultas SQL lentas o duplicadas e investigar cuellos de botella en el código.
2. Barra de depuración : excelente para obtener información sobre solicitudes, caché y otra información del sitio de WordPress directamente desde la barra de administración.
3. WP Crontol : le brinda información sobre el sistema de programación cron de WordPress, para que pueda comprender los problemas con los eventos programados.

Debido a que mis sitios se administran con Composer (núcleo y complementos de WordPress), los instalo como dependencias de desarrollo para que no lleguen al sitio en vivo. Por ejemplo:

composer require --dev wpackagist-plugin/query-monitor

Luego habilito la configuración «No migrar los ‘active_plugins'» en mis perfiles de WP Migrate DB Pro, de modo que cada vez que recupere la base de datos del sitio en vivo en mi ubicación local, estos complementos de desarrollo no se desactivarán.

WP-CLI

WP-CLI es una herramienta extremadamente útil. Hace la vida más fácil al permitirle administrar sitios de WordPress en la línea de comandos. Hay una serie de comandos que pueden resultar útiles en su entorno de desarrollo de WordPress:

• wp core install : instala WordPress en un comando
• wp site empty : trunca las tablas de publicaciones, términos y comentarios, pero deja la tabla de opciones intacta
• wp db reset : elimina todas las tablas de la base de datos, lo que le permite realizar una nueva instalación
• wp server : inicie el servidor web incorporado de PHP para una instalación específica de WordPress.

Vamos

Hablo con muchos autónomos en la reunión de WordPress que dirijo. Muchos creen que no necesitan aprender y usar Git porque están trabajando por su cuenta, en lugar de en equipo. Ven el control de versiones como algo solo útil o necesario para la colaboración. Sin embargo, los beneficios de usar git para sus sitios también se aplican a los desarrolladores individuales.

Mantener la versión del proyecto de su sitio controlada y almacenada en un sistema distribuido como GitHub o Bitbucket significa que obtiene copias de seguridad de su código. ¿Implementó algunos cambios en el sitio en vivo que necesita revertir? Si el sitio solo vive en su sistema de archivos, entonces eso es mucho CMD + Z’ing para deshacer sus cambios. Con la versión de código controlada con Git, puede revertir sus confirmaciones recientes o ver fácilmente una diferencia de cambios recientes para sus archivos.

Eche un vistazo a otros recursos que WordPress recomienda para configurar un entorno de desarrollo.

Terminando

Con suerte, esta ha sido una guía completa para los entornos de desarrollo de WordPress y la ejecución de WordPress localmente. Trabajaré en guías de las mejores prácticas para ejecutar tanto un entorno de ensayo como un entorno de producción, así que esté atento a ellas.

¿Cuál es tu entorno de desarrollo favorito? ¿Algún consejo o truco para el desarrollo local que me haya perdido? Déjame saber abajo en los comentarios.

Artículo traducido del inglés.