WP con Composer

17 de Nov, 2019

Composer es un gestor de dependencias para PHP, hoy en día es uno de los mas usados y que debemos tener en cuenta para agregar nuestros paquetes de terceros en cualquier proyecto que hagamos, una de las facilidades es que te ayuda a automatizar el despliege automatizado de nuestra Apps o Websites y poder usarlo a través de Pipelines para su despliegue.

Cuales serían sus ventajas:

Es muy Simple de Usar
Cuenta con un repositorio muy completo (Packagist)
Disminuye los problemas de despliegues en diferentes entornos y pruebas y test de funcionalidades.

No hablare de como instalarlo ya que existe suficiente documentación al respecto, podes bajarlo desde su web getcomposer.org

Lo primero que haremos es crear una carpeta para nuestro proyecto, puede ser wordpress-with-composer/ una vez creada nos vamos a ella y clonamos el siguiente repositorio https://github.com/k2klettern/wp-with-composer.

En ese repositorio podemos ver que tenemos los siguientes archivos:

Los archivos .env para nuestros entornos de trabajo
el gitignore para los archivos que no necesitamos en el repositorio
el htaccess de WordPress
el archivo README con la descripción del plugin
el archivo composer.json donde esta la información que necesitaremos para ejecutar nuestro composer
el archivo composer.lock generado por el composer.json
el index.php de WordPress
el wp-config.php de WordPress

Una vez clonado el repositorio ejecutamos $ composer install, y composer nos descargara automáticamente todas las dependencias del proyecto incluyendo el WordPress Core.

Ahora vemos los que tiene nuestro composer.json y como funciona

{
    "name"        : "zeidan/wp-with-composer",
    "description" : "Test project for WordPress stack via Composer",
    "authors"     : [
        {
            "name"    : "Eric Zeidan",
            "homepage": "https://zeidan.info/"
        }
    ],
    "type"        : "project",
    "repositories": [
        {
            "type": "composer",
            "url" : "https://wpackagist.org"
        },
        {
            "type": "vcs",
            "url" : "git@github.com:k2klettern/daily-nasa-photo.git"
        }
    ],
    "config"      : {
        "vendor-dir": "wp-content/vendor"
    },
    "require"     : {
        "johnpbloch/wordpress"            : "*",
        "vlucas/phpdotenv": "^4.0@dev"
    },
    "require-dev" : {
        "wpackagist-plugin/a-fresher-cache"           : "*",
        "wpackagist-plugin/core-control"              : "*",
        "wpackagist-plugin/monster-widget"            : "*",
        "wpackagist-plugin/theme-check"               : "*",
        "wpackagist-plugin/user-switching"            : "*",
        "wpackagist-plugin/wcm-user-language-switcher": "*",
        "zeidan/daily-nasa-photo" : "*",
        "wpackagist-theme/wp-bootstrap-starter":"3.3.2"
    },
    "extra"       : {
        "wordpress-install-dir": "wp",
        "installer-paths": {
          "wp-content/plugins/{$name}/": [
            "type:wordpress-plugin"
          ],
          "wp-content/themes/{$name}/": [
            "type:wordpress-theme"
          ]
          }
    },
    "minimum-stability": "dev"
}

Lo primero que tenemos es el nombre, descripción, autores y tipo de proyecto.

    "name"        : "zeidan/wp-with-composer",
    "description" : "Test project for WordPress stack via Composer",
    "authors"     : [
        {
            "name"    : "Eric Zeidan",
            "homepage": "https://zeidan.info/"
        }
    ],
    "type"        : "project",

Luego tenemos los repositorios, aquí hemos añadido a wpackagist donde se encuentran todos los plugins y temas de WordPress como dependencias de Composer.

Luego hemos añadido una dependencia a un repositorio de un plugin propio para que nos sirva de ejemplo, en este caso zeidan/nasa-daily-photo.

   "repositories": [
        {
            "type": "composer",
            "url" : "https://wpackagist.org"
        },
        {
            "type": "vcs",
            "url" : "git@github.com:k2klettern/daily-nasa-photo.git"
        }
    ],

En config, cambiaremos nuestro directorio vendor/, que es donde composer guarda todas las dependencias que agreguemos de terceros dentro de nuestro wp-content/.

    "config"      : {
        "vendor-dir": "wp-content/vendor"
    },

Ahora en require incluiremos nuestro WP Core que bajamos desde el repositorio johnpbloch/wordpress, e indicamos que baje la ultima versión con el *, aqui podeis poner la versión de WP con la que quereís trabajar, o inclusive decir que quereís la ultima de una verison mayor con 5.* también incluiremos la librería de vlucas/phpdotenv para leer los archivos dotenv con nuestras variables de entorno

 "require"     : {
        "johnpbloch/wordpress"            : "*",
        "vlucas/phpdotenv": "^4.0@dev"
    },

En nuestros requerimientos para desarrollo solo incluiremos aquellas dependencias que usaremos solo para nuestro entorno dev, en este caso e incluido varios plugins desde wppackagist para ver como se comportan en este entorno, hay que notar que al realizar un composer install –no-dev, composer nos instalará solo nuestros requerimientos principales, por lo tanto aquí podemos poner tools de desarrollo como por ejemplo php-unit

    "require-dev" : {
        "wpackagist-plugin/a-fresher-cache"           : "*",
        "wpackagist-plugin/core-control"              : "*",
        "wpackagist-plugin/monster-widget"            : "*",
        "wpackagist-plugin/theme-check"               : "*",
        "wpackagist-plugin/user-switching"            : "*",
        "wpackagist-plugin/wcm-user-language-switcher": "*",
        "zeidan/daily-nasa-photo" : "*",
        "wpackagist-theme/wp-bootstrap-starter":"3.3.2"
    },

cómo os darás cuenta he agregado también la dependencia zeidan/daily-nasa-photo y para ella hemos indicado a composer el repositorio de dónde será descargada más arriba.

Ahora solo nos queda indicarle a Composer donde instalar nuestro WP Core, Plugins y Themes. Para ello usamos el extra donde le indicaremos que las dependecias tipo wordpress-plugin deben ir en wp-content/plugin y wordpress-themes en wp-content/themes asi como el Core en el directorio wp/

    "extra"       : {
        "wordpress-install-dir": "wp",
        "installer-paths": {
          "wp-content/plugins/{$name}/": [
            "type:wordpress-plugin"
          ],
          "wp-content/themes/{$name}/": [
            "type:wordpress-theme"
          ]
          }
    },

Por ultimos indicamos el requerimiento minimo para su ejecución

"minimum-stability": "dev"

Al finalizar la ejecución del composer install tendremos los siguientes directorios y archivos creados:

Archivos luego de ejecutar el composer install

Muy bien, podemos observar que Composer nos ha creado un directorio wp/ donde se encuentra todo el Core, fuera del Core hemos creado el directorio wp-content/ donde tenemos los plugins/ themes/ y la carpeta vendor/ con el archivo autoload.php que se encarga de cargar todas las clases y métodos que allí se encuentran.

Lo primero que haremos es cambiar nuestros datos de entorno, esto lo haremos en .env.local que luego copiaremos y nombraremos .env al final se debe ver algo así

DB_NAME=wordpressdb
DB_USER=root
DB_PASSWORD=root
DB_HOST=localhost
DB_PREFIX=wp_
WP_DEBUG=true
WP_URL=http://localhost/wp-with-composer

Ahora solo debemos indicar a WordPress que hemos cambiado de sitio sus directorios y archivos, esto esta soportado por WordPress

Giving WordPress Its Own Directory

Editing wp-config.php

Lo haremos directamente en wp-config.php

define('WP_SITEURL', getenv('WP_URL') . '/wp');
define('WP_HOME',    getenv('WP_URL'));
define('WP_CONTENT_DIR', dirname(__FILE__) . '/wp-content');
define('WP_CONTENT_URL', getenv('WP_URL') . '/wp-content');

con getenv() estamos llamando las variables establecidas en nuestro archivo de entorno .env

Debemos asegurarnos también que en nuestro index.php llamemos correctamente a wp-blog-header.php que ahora esta dentro de nuestro directorio wp/

require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );

Con todo esto y nuestra base de datos, ya podemos llamar a nuestra URL e instalar nuestro proyecto.

Instalador de WordPress desde nuestro entorno local

Nuestro proyecto estará disponible en http://localhost/wp-with-composer y nuestro admin en http://localhost/wp-with-composer/wp, añadiendo con esto una característica de seguridad adicional.

Vamos a entrar para activar nuestro Tema y nuestro Plugin. Podemos ver como se encuentran ya listos para activar todos nuestros plugins incluidos en composer.json

Al activar nuestro plugin ya podemos ver que funciona correctamente.

Ya no nos queda más que trabajar en nuestro WordPress y mejorar la formar en que realizamos los despliegues en nuestros entornos automáticamente. Podemos comenzar a trabajar con Pipelines dentro de nuestro control de versiones.

WP con Composer

Entradas Recientes