Cómo crear un flujo de trabajo efectivo de WordPress para desarrolladores

WordPress es una gran plataforma, pero a veces también puede estar un poco desorganizado, al menos desde la perspectiva del código. Esto se debe a que el código ha pasado por muchas iteraciones y, a medida que se implementan las actualizaciones, a veces las cosas se codifican de la manera más eficiente posible.

El hecho de que el código pueda estar un poco por todas partes a veces no significa que su proceso de desarrollo deba seguir su ejemplo. Aunque el código desordenado a menudo se excusa debido a los rápidos cronogramas de producción, usted puede ganar más como desarrollador web al implementar un flujo de trabajo adecuado.

En este artículo, cubriremos algunos consejos para ayudarlo a desarrollar sitios de WordPress de la manera correcta con las herramientas adecuadas a mano. También proporcionaremos un recorrido paso a paso para ayudarlo a seguir estos consejos.

Siguiendo esta guía, puede evitar algunos de los problemas comunes que ocurren al desarrollar sitios de WordPress. Y también podrá crear un sitio que sea fácil de mantener y actualizar.

¡Entonces empecemos!

Atributos del código de alta calidad

Antes de profundizar en nuestra guía completa sobre la creación de un flujo de trabajo de desarrollo de WordPress, detengámonos un momento para discutir por qué el código de alta calidad es realmente importante. Mucho.

Al pensar en el código de su sitio, hay algunos atributos clave que debe tener en cuenta. Estos atributos ayudarán a garantizar que su código esté limpio, bien organizado y sea fácil de entender.

Estos son algunos atributos del código de alta calidad:

• aerodinámico
• Fácil de seguir
• Modular
• bien comentado
• Se puede reutilizar y mantener fácilmente.

Estos atributos pueden parecer mucho para tener en cuenta, pero no se preocupe. Cubriremos completamente cómo lograr cada uno en nuestra guía. Pero primero, debemos hablar sobre por qué su flujo de trabajo de desarrollo simplemente debe cumplir con estos estándares.

Por qué el desarrollo de WordPress necesita prácticas de codificación de primer nivel

Para que un sitio web de WordPress funcione correctamente, el código que lo compone debe ser de alta calidad. Esto es especialmente importante para los sitios web de WordPress porque a menudo son complejos, con muchas partes móviles diferentes.

Hay muchas razones por las que las prácticas de codificación son importantes para el desarrollo de WordPress:

1. Los sitios web de WordPress son complejos.
2. Una sola línea de código puede tener un gran impacto.
3. El código debe estar bien escrito y bien probado.
4. El código de alta calidad es más fácil de mantener.
5. El código de calidad puede ayudar a mejorar el rendimiento.

Tener en cuenta estos puntos a medida que avanza en el proceso de planificación del desarrollo puede ayudarlo a mantener la vista en el premio, por así decirlo.

Consejos para mejorar el flujo de trabajo de WordPress

Ahora que hemos hablado sobre por qué es importante tener un código bien escrito, repasemos algunos consejos para ayudarlo a mejorar su flujo de trabajo de WordPress para cada proyecto. Cada uno de los siguientes consejos ayudará a garantizar que su código de WordPress esté limpio y optimizado, que es su prioridad en 2022 y más allá.

utilizar puesta en escena

Un sitio de prueba es una copia de su sitio en vivo que puede usar para probar los cambios antes de realizarlos en su sitio en vivo. Esta es una herramienta valiosa porque le permite experimentar con cambios sin afectar su sitio en vivo.

Hay muchos beneficios de usar un sitio de ensayo:

1. Puede probar los cambios antes de realizarlos en su sitio en vivo.
2. Puede evitar posibles problemas probando en un sitio de ensayo.
3. Puede asegurarse de que sus cambios funcionen según lo previsto.
4. Puede evitar el tiempo de inactividad potencial en su sitio en vivo.
5. Puede reducir el riesgo de romper su sitio en vivo.

Y cuando usa el complemento Premium Staging Environment para Kinsta, puede crear automáticamente un entorno de prueba con cada uno de sus sitios de WordPress sin tener que realizar ninguna operación manual. Es un verdadero ahorro de tiempo.

Implementar control de versiones

El control de versiones es un sistema que realiza un seguimiento de los cambios en los archivos a lo largo del tiempo. Esto es valioso para el desarrollo de WordPress porque le permite realizar un seguimiento de los cambios y volver a versiones anteriores si es necesario.

Para la mayoría, esto significa usar Git, que es un popular sistema de control de versiones. Si no está familiarizado, Git es un sistema de control de versiones distribuido gratuito y de código abierto diseñado para manejar todo, desde proyectos pequeños hasta proyectos muy grandes, con rapidez y eficiencia.

Es especialmente útil cuando se trabaja con un gran equipo distribuido. Lo último que desea encontrar son múltiples versiones de su archivo functions.php , todas con un nombre ligeramente diferente, en su instalación de WordPress porque varias personas estaban haciendo cambios a la vez.

Git contra GitHub

Git es un sistema de control de versiones, una herramienta para administrar el historial de su código fuente. GitHub es una empresa que proporciona alojamiento para proyectos de desarrollo de software que utilizan Git.

Son dos cosas diferentes, pero la mayoría de la gente usa el término "Git" para referirse tanto a Git como a GitHub.

Programar copias de seguridad automatizadas

Uno de los aspectos más importantes del desarrollo de WordPress son las copias de seguridad. Las copias de seguridad son vitales porque le permiten restaurar su sitio si algo sale mal.

Hay muchas formas de automatizar las copias de seguridad, pero una de las más sencillas es utilizar un complemento de copia de seguridad de WordPress. Hay muchos complementos de copia de seguridad excelentes disponibles, pero recomendamos usar el complemento de copias de seguridad externas automatizadas de Kinsta.

Este complemento creará automáticamente copias de seguridad de su sitio de WordPress diariamente y las almacenará en un servidor externo.

Aproveche la pelusa

Linting es el proceso de verificar el código en busca de errores. Esto es valioso para el desarrollo de WordPress porque puede ayudarlo a encontrar y corregir errores en su código.

Muchos editores de código hacen esto automáticamente, pero si quiere estar seguro de que el suyo ofrece esta característica, considere usar uno de los siguientes editores de código y texto:

• Texto sublime: este editor de código tiene muchas características, incluida la pelusa.
• Atom: este editor de código también tiene linting incorporado.
• Vim: este editor de texto también ofrece pelusa y muchas otras funciones.
• Visual Studio Code: este editor de código tiene linting disponible de forma predeterminada.
• PHPStorm: este es un entorno de desarrollo pago que tiene linting disponible.

Usar un generador de código

Un generador de código es una herramienta que puede generar código automáticamente para usted. Esto es valioso para el desarrollo de WordPress porque puede ahorrarle tiempo y ayudarlo a evitar errores.

Hay muchos generadores de código disponibles, pero algunos de los más populares incluyen:

• GenerateWP: este generador de código puede generar código para tipos de publicaciones personalizadas, taxonomías, metaboxes y más.
• Hasty: este generador de código puede generar código para tipos de publicaciones, taxonomías y campos personalizados.
• Generador de código de temas de Nimbus: este generador de código puede generar código para tipos de publicaciones, taxonomías y campos personalizados.

Usar WP-CLI

WP-CLI es una interfaz de línea de comandos para WordPress. Esto es valioso para el desarrollo de WordPress porque le permite administrar su sitio de WordPress desde la línea de comandos.

Esto es especialmente útil cuando necesita realizar tareas repetitivas o que requieren muchos pasos. Por ejemplo, WP-CLI se puede usar para instalar WordPress, crear publicaciones y páginas, instalar complementos y temas, y mucho más. También es útil cuando necesita realizar cambios en varios sitios a la vez.

Utilice un marco de desarrollo de WordPress

Un marco de desarrollo de WordPress es una herramienta que puede ayudarlo a optimizar su flujo de trabajo. Esto es valioso para el desarrollo de WordPress porque puede ahorrarle tiempo y ayudarlo a evitar errores.

Hay muchos marcos de desarrollo de WordPress disponibles, pero algunos de los más populares incluyen:

• Génesis: este marco de StudioPress está diseñado para ayudarlo a crear sitios de WordPress más rápido.
• Guiones bajos: este marco de Automattic está diseñado para ayudarlo a comenzar a desarrollar temas de WordPress rápidamente.
• Fundación: este marco de Zurb está diseñado para ayudarlo a crear sitios de WordPress receptivos.
• Bootstrap: este marco de Twitter es una forma muy útil de crear diseños receptivos para sitios web de WordPress.

Usar ejecutores de tareas

Un ejecutor de tareas es una herramienta que puede automatizar tareas. Esto es valioso para el desarrollo de WordPress porque puede ahorrarle tiempo y ayudarlo a evitar errores. También le permite ejecutar múltiples tareas simultáneamente.

Hay muchos ejecutores de tareas disponibles, pero algunos de los más populares incluyen:

• Gulp: este ejecutor de tareas se puede usar para automatizar tareas como el preprocesamiento de CSS, el linting de JavaScript y más.
• Grunt: Grunt es un ejecutor de tareas de Javascript que ayuda a automatizar muchas de sus tareas más repetitivas.
• Paquete web: este ejecutor de tareas se puede usar para automatizar tareas como agrupar archivos JavaScript y más.

Familiarícese con Vue.js o Reaccione ahora

Aunque es posible que no esté usando Vue.js o React de inmediato, es importante familiarizarse con estos marcos ahora. Esto es valioso para el desarrollo de WordPress porque se están volviendo más populares y se usan cada vez más a medida que pasa el tiempo.

Vue.js es un marco de JavaScript que le permite crear interfaces de usuario reactivas. React es una biblioteca de JavaScript para crear interfaces de usuario.

Tanto Vue.js como React son opciones populares para el desarrollo de WordPress porque son rápidos, livianos y fáciles de usar, y son esenciales para convertir WordPress en un CMS autónomo.

Por qué es vital dedicar tiempo a la planificación del flujo de trabajo de WordPress

Los sitios web de WordPress son complejos y es importante tener un flujo de trabajo bien planificado antes de comenzar cualquier proyecto. Al tomarse el tiempo para planificar su flujo de trabajo, puede ahorrar tiempo y evitar posibles problemas en el futuro.

Hay muchos beneficios al planificar su flujo de trabajo de WordPress:

• Puede ahorrar tiempo sabiendo lo que hay que hacer.
• Puede evitar posibles problemas planificando con anticipación.
• Puede asegurarse de que se completen todas las tareas necesarias.
• Puede asegurarse de que su flujo de trabajo sea eficiente y eficaz.
• Puede evitar problemas al entregar proyectos a colaboradores o clientes

Dedicar tiempo a la planificación del flujo de trabajo de WordPress es vital porque puede ahorrarle tiempo y ayudarlo a evitar posibles problemas. Al tomarse el tiempo para planificar su flujo de trabajo, puede asegurarse de que se completen todas las tareas necesarias y que su flujo de trabajo sea eficiente y efectivo.

El flujo de trabajo ideal de WordPress para el desarrollo

Hay muchas formas de abordar el flujo de trabajo de WordPress, pero hay algunos pasos esenciales que deben incluirse en su proceso de desarrollo.

Paso 1: configurar un entorno de desarrollo local

El primer paso en cualquier flujo de trabajo de WordPress debería ser configurar un entorno de desarrollo local. Esto es importante porque le permite trabajar en su sitio de WordPress sin conexión, lo que puede ahorrar tiempo y evitar errores.

Hay muchas formas de configurar un entorno de desarrollo local, solo depende de la configuración que prefiera usar. Recomendamos DevKinsta para esto.

Recomendamos usar Kinsta Staging y el complemento Premium Staging Environments. Esto le brinda un entorno de desarrollo completo de WordPress con un solo clic para activarlo.

También puede trabajar en varios proyectos al mismo tiempo y fusionar los cambios antes de publicarlos. También viene con pruebas A/B integradas, pruebas de compatibilidad de complementos y pruebas de uso intensivo de recursos para ayudar a garantizar que sus compilaciones estén estructuradas de manera adecuada.

Para comenzar con el complemento Premium Staging Environments, simplemente necesita comprarlo a través de su cuenta de Kinsta. Para activar el entorno de ensayo, vaya a MyKinsta, luego haga clic en Entorno > Crear nuevo entorno en la parte superior de la pantalla.

Paso 2: configurar el control de versiones

El segundo paso en cualquier flujo de trabajo de WordPress debería ser configurar el control de versiones. Esto es importante porque le permite realizar un seguimiento de los cambios en su código y volver a las versiones anteriores si es necesario.

Para hacer esto, puedes usar una herramienta como Git. Ese proceso se parece al siguiente

1. Crea un Repositorio en GitHub

Para crear un repositorio en GitHub, puede seguir los siguientes pasos:

1. Inicie sesión en su cuenta de GitHub y haga clic en el signo + en la esquina superior derecha.
2. Seleccione Nuevo repositorio en el menú desplegable.
3. Ingrese un nombre para su repositorio y una descripción, luego haga clic en Crear repositorio .

2. Clone el repositorio en su entorno de desarrollo local

En nuestro caso, usaremos DevKinsta para nuestro ejemplo.

1. En la página de GitHub de su repositorio, haga clic en el botón Clonar o descargar .
2. En la sección Clonar con HTTPs , copie la URL de su repositorio.
3. En su entorno de desarrollo, abra una terminal y cambie al directorio donde desea clonar su repositorio.
4. Escribe el siguiente comando, sustituyendo la URL que copiaste de Github:

 git clone https://github.com/YOUR_USERNAME/YOUR_REPOSITORY.git

Esto clonará su repositorio en su entorno de desarrollo local.

3. Agregar archivos y confirmar cambios

1. Agregue los archivos que desea rastrear con Git al directorio del repositorio en su computadora.
2. Escribe git add seguido del nombre del archivo, o usa git add . para agregar todos los archivos en el directorio.
3. Escriba git commit -m seguido de un mensaje que describa los cambios que ha realizado.
4. Para enviar sus cambios a Github, escriba git push .

Ahora puede continuar realizando cambios en los archivos de su computadora y enviarlos a GitHub. Cuando desee recuperar la última versión de los archivos de Github, puede usar el comando git pull .

Si no usa GitHub, también puede usar Bitbucket de manera similar.

Paso 3: desarrollar localmente

Una vez que haya configurado su entorno de desarrollo local y el control de versiones, es hora de comenzar a desarrollar su sitio de WordPress localmente sin conexión.

Al desarrollar localmente, puede probar los cambios en su sitio de prueba antes de publicarlos. Esto es importante porque le permite detectar errores o fallas antes de que afecten su sitio en vivo.

Para enviar cambios desde su entorno de desarrollo local a su sitio de prueba, puede usar una herramienta como DevKinsta. Esta herramienta facilita la transferencia de cambios desde su entorno de desarrollo local a su sitio de prueba con solo unos pocos clics.

Paso 4: Utilice WP-CLI

WP-CLI es una interfaz de línea de comandos para WordPress que le permite administrar su sitio de WordPress desde la terminal. Esto puede ser útil para tareas como crear y administrar usuarios, instalar y actualizar complementos y mucho más.

Para instalar WP-CLI, siga estos pasos:

1. Descargue el archivo phar de WP-CLI .
2. Mueva el archivo a un directorio en su RUTA (por ejemplo, /usr/local/bin ).
3. Cambie el nombre del archivo a wp .
4. Haga que el archivo sea ejecutable (por ejemplo, chmod +x /usr/local/bin/wp ).
5. Pruebe que WP-CLI está instalado ejecutando wp –version .

Desde allí, puede usar WP-CLI para administrar su sitio de WordPress desde la línea de comandos. Para obtener una lista completa de comandos, puede consultar nuestra guía detallada de WP-CLI v2.

Paso 5: Automatice su flujo de trabajo con Gulp

Gulp es un ejecutor de tareas que le permite automatizar tareas como minimizar archivos CSS y JavaScript, compilar archivos Sass y mucho más.

Para usar Gulp, primero debe instalarlo globalmente en su sistema. Para hacer esto, necesitará Node.js, npm y, por supuesto, Gulp. Ejecute el siguiente comando en Node.js:

 npm install gulp-cli -g

Una vez que Gulp esté instalado, puede crear un archivo gulpfile.js en la raíz de su proyecto. Este archivo contiene el código para sus tareas de Gulp.

Por ejemplo, el siguiente archivo gulpfile.js contiene una tarea para minimizar archivos CSS:

 var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); gulp.task('minify-css', function() { return gulp.src('src/*.css') .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(gulp.dest('dist')); });

Para ejecutar esta tarea, puede utilizar el siguiente comando:

 gulp minify-css

Paso 6: usa pelusa

Las herramientas de Linting son herramientas de análisis de código estático que lo ayudan a encontrar errores en su código. Para nuestros propósitos aquí, estamos usando Atom.io con los siguientes paquetes de linting:

• átomo-embellecer
• atom-ternjs
• pelusa
• linter-eslint
• linter-php
• linter-sass-lint

En su terminal, navegue hasta el directorio que desea eliminar y ejecute el siguiente comando:

 find . -name "*.js" -o -name "*.scss" | xargs eslint --fix

Esto eliminará todos los archivos JavaScript y Sass de su proyecto.

Si desea eliminar un archivo específico, puede ejecutar el siguiente comando:

 eslint --fix file-name.js

Reemplace file-name.js con el nombre del archivo que desea eliminar.

Paso 7: use un preprocesador CSS

Un preprocesador de CSS es una herramienta que le permite escribir CSS en un idioma diferente y luego compilarlo en CSS. Los dos preprocesadores CSS más populares son Sass y Less.

En este tutorial, usaremos Sass. Para usar Sass, primero debe instalar la herramienta de línea de comandos de Sass. Para hacer esto, ejecute el siguiente comando:

 gem install sass

Una vez que Sass está instalado, puede usar el siguiente comando para compilar un archivo Sass en CSS:

 sass input.scss output.css

Reemplace input.scss con el nombre de su archivo Sass y output.css con el nombre del archivo CSS que desea crear.

Si desea ver sus archivos Sass en busca de cambios y compilarlos automáticamente en CSS, puede usar el siguiente comando:

 sass --watch input.scss:output.css

Reemplace input.scss con el nombre de su archivo Sass y output.css con el nombre del archivo CSS que desea crear.

Paso 8: use un complemento de implementación

Un complemento de implementación es una herramienta que le permite implementar fácilmente su sitio de WordPress desde un entorno de desarrollo local a un servidor en vivo.

Hay varias herramientas diferentes que puede usar para este propósito, pero recomendamos usar WP Pusher. WP Pusher es un complemento de implementación gratuito que puede usar con su sitio de WordPress.

Para instalar WP Pusher, primero descargue el archivo ZIP del sitio web de WP Pusher. Luego, inicie sesión en su sitio de WordPress y vaya a Complementos > Agregar nuevo . Haga clic en el botón Cargar complemento y seleccione el archivo ZIP que acaba de descargar. Una vez que el complemento esté instalado y activado, puede ir a Configuración> WP Pusher para configurarlo.

Una vez que WP Pusher está configurado, puede implementar complementos y temas de WordPress en su servidor en vivo sin tener que interactuar con la interfaz FTP o jugar con su base de datos de WordPress.

Paso 9: Hacer uso de la API Rest de WordPress

La API REST de WordPress es una herramienta poderosa que le permite interactuar con su sitio de WordPress desde fuera de la interfaz de administración de WordPress.

La API REST de WordPress se puede utilizar para crear soluciones personalizadas para su sitio de WordPress. Por ejemplo, podría usar la API REST de WordPress para crear una aplicación móvil para su sitio de WordPress o para crear un tablero personalizado.

Para comenzar con la API REST de WordPress, deberá interactuar con ella a través de la interfaz de línea de comandos de WordPress. Recientemente publicamos un tutorial sobre cómo configurar la API REST de WordPress que puede guiarlo a través de cada paso.

Paso 10: crea y sigue una guía de estilo

Una guía de estilo es un conjunto de pautas para codificar y diseñar su sitio de WordPress. Una guía de estilo ayuda a garantizar que su código sea consistente y fácil de leer.

Hay una serie de guías de estilo diferentes que puede usar para su proyecto de WordPress. Recomendamos usar los Estándares de codificación de WordPress como punto de partida. Sin embargo, es probable que realice numerosas modificaciones y adiciones a medida que pasa el tiempo.

Es probable que cualquier guía de estilo que cree cambie todo el tiempo. Pero el punto importante es que proporciona una colección definida de pasos a seguir y pautas a seguir para todos los desarrolladores de su equipo.

Esencialmente, su guía de estilo debe ser su flujo de trabajo de WordPress en forma escrita.

Paso 11: Impulse su sitio en vivo

Una vez que haya completado todos los pasos anteriores, su sitio de WordPress estará listo para publicarse. Si está utilizando un complemento de implementación como WP Pusher, este proceso es tan simple como enviar su código a su repositorio Git remoto.

También puede hacer esto directamente dentro de Kinsta, yendo a MyKinsta > Sitios , seleccionando su sitio y luego haciendo clic en Acciones ambientales . Desde allí, haga clic en Push to Live .

A continuación, marque la casilla junto a Archivos o Base de datos (para marcar ambos), escriba el nombre del sitio y luego haga clic en Push to Live .

Si no está utilizando un complemento de implementación o Git, simplemente puede exportar su base de datos de WordPress desde su entorno de desarrollo local e importarla a su servidor en vivo. Puede hacer esto yendo a Herramientas> Exportar en su panel de administración de WordPress.

Luego, seleccione Todo el contenido de las opciones de exportación y haga clic en el botón Descargar archivo de exportación . Una vez que tenga su archivo de base de datos, puede importarlo a su servidor en vivo yendo a Herramientas> Importar en su panel de administración de WordPress. Seleccione el archivo de la base de datos que acaba de exportar y haga clic en el botón Cargar archivo e importar .

También puede transferir manualmente sus archivos de WordPress desde su entorno de desarrollo local a su servidor en vivo usando un cliente FTP como FileZilla. Simplemente conéctese a su servidor en vivo usando FTP, luego arrastre y suelte sus archivos de WordPress en el directorio public_html .

Una vez que haya puesto en marcha su sitio de WordPress, puede tomarse su tiempo para probar todo y asegurarse de que todo funcione como debería.

Este también sería un buen momento para asegurarse de que Kinsta AMP esté funcionando correctamente. Esta herramienta de monitoreo de rendimiento vigilará el rendimiento de su servidor y se asegurará de que su sitio se ejecute lo más rápido posible.

Resumen

Como puede ver, se necesita mucho para crear correctamente un flujo de trabajo de desarrollo de WordPress. Pero seguir estos pasos ayudará a garantizar que su sitio de WordPress esté bien organizado, sea fácil de administrar y funcione sin problemas.

Y no puede equivocarse apoyándose en productos Kinsta como DevKinsta, el complemento Premium Staging Environments y Kinsta AMP. Estas herramientas harán que su flujo de trabajo de desarrollo de WordPress sea aún más fácil y eficiente.

¿Tiene alguna pregunta sobre cómo crear un flujo de trabajo de desarrollo de WordPress? ¡Háganos saber en los comentarios a continuación!