Hoy en día wordpress ocupa una cuota de mercado nada despreciable en lo referente a webs basadas en gestores de contenidos (a Febrero de 2017 es entorno al 27%).

Tarde o temprano si nos dedicamos al mundo del desarrollo web, nos tocará trabajar con wordpress, y seguramente, retocar o crear algún plugin para que se ajuste a las necesidades de nuestro proyecto web. En este tutorial vamos a hacer el proceso completo, desde la instalación de XAMPP hasta el debug de nuestro plugin wordpress.

Y para qué necesitamos un entorno de debug?

A priori en proyectos web sencillos, donde el número de variables, funciones y elementos de la aplicación es limitado, puede que nunca hayas echado de menos un entorno de debug, y solucionaras los errores con echos, prints, y revisando el error.log del servidor (métodos cuestionables, pero eficaces para salir del paso).

Pero conforme vayas asumiendo proyectos de más envergadura, con cientos de archivos php, con sus respectivas clases y métodos…Cuando algo te falle, te vas a dar cuenta que es muy complicado encontrar el punto exacto dónde se produce el error en la aplicación. Aunque revisar el error.log y manejar el error_reporting es muy útil, utilizar un debug te va a simplificar las cosas muchísimo.

Además de estos beneficios, existe más derivados del poder montar este entorno en tus máquinas virtuales, haciéndolo portable y seguro, ya que todo lo tendremos en local.

Conceptos previos para montar el entorno

• No está de más recordar que wordpress funciona con php, así que todo el entorno estará montado para debugar el php de nuestros plugins.
• Para montar nuestro entorno vamos a utilizar Netbeans. Podéis descargarlo de aquí (seleccionar la opción que contiene todo, All), nosotros lo hemos montado sobre una versión de Netbeans 8.2
• Vamos a montarlo en un entorno windows, el que utilizamos nosotros es w10 v1607
• Vamos a utilizar Xdebug. Xdebug es una extensión de PHP para hacer debug con herramientas de depuración tradicionales,  igual que se hace en otros lenguajes de programación. En nuestro caso desde Netbeans.
• Podéis bajaros la misma dll que vamos a utilizar nosotros de Xdebug desde aquí.
• Por supuesto necesitáis bajaros la última versión de wordpress, en nuestro caso hemos utilizado la 4.7.3
• También es imprescindible descargar XAMPP, siempre recomendamos tener todas las actualizaciones al día, es por eso que nos descargaremos la última versión, en nuestro caso es la versión que incluye el intérprete de php 7.1.1.
• Vas a necesitar un theme propio de wordpress. El debug no funcionará si lo ejecutas con los themes que te vienen incluidos. No tienes uno? nosotros te lo facilitaremos!

Aseguraros de tener todo lo necesario y…comenzamos!

1- Instalación de XAMPP

1. Descarga el instalador de XAMPP a un sitio visible, dónde lo puedas ejecutar y borrar después.
2. Ejecuta el instalador, aquí no hay nada que destacar. Instala XAMPP en algún directorio que tengas controlado. Si quieres configura las instalación a tu gusto, como mínimo necesitarás instalar lo que necesita el wordpress, es decir, la base de datos (MariaDB), el apache y el intérprete de php. Nota: Me he encontrado situaciones en las que XAMPP da conflictos por no haberse instalado como administrador.
3. Cuando tengas todo instalado, abre los archivos de configuración desde el panel de control del propio XAMPP. Qúe configuraremos?

2- Configuración de Apache

Nota previa: dependiendo de tu entorno de instalación, xampp puede requerir permisos de administrador.

Los puertos de apache2 para que no haya conflictos en la ejecución de wordpress. En el panel de control, en Apache selecciona Config. Dentro del archivo httpd.conf cambiaremos el puerto 80 por el que más te guste, en mi caso he optado por el 8080. Allá dónde ponga 80, deberá poner 8080. En el archivo httpd-ssl.conf cambiaremos el puerto 443 por el que prefieras, en mi caso por 4433. Allá dónde ponga 443, deberá poner 4433. Nota: puede que tu sistema tenga en uso estos puertos, en este caso deberás seleccionar otros puertos o reconfigurar las aplicaciones que los usan.

3- Configuración de XDEBUG y php.ini

Tenemos que descargar la dll de XDebug y ponerla en la carpeta  /raíz-de-xampp/php/ext, en mi caso C:\xampp\php\ext.

Configuramos el php.ini para poder debugar con XDebug. En el panel de control de XAMPP, en la parte de apache, clicas en Config y seleccionas el php.ini y en la parte inferior añades esto:

[XDebug]

zend_extension = “c:\xampp\php\ext\php_xdebug-2.5.0-7.1-vc14.dll”

xdebug.remote_autostart = 1

xdebug.remote_connect_back = 1

xdebug.profiler_append = 0

xdebug.profiler_enable = 0

xdebug.profiler_enable_trigger = 0

xdebug.profiler_output_dir = “c:\xampp\tmp”

;xdebug.profiler_output_name = “cachegrind.out.%t-%s”

xdebug.remote_enable = 1

xdebug.remote_handler = “dbgp”

xdebug.remote_host = “127.0.0.1”

xdebug.remote_log=”c:\xampp\tmp\xdebug.txt”

xdebug.remote_port = 9000

xdebug.trace_output_dir = “c:\xampp\tmp”

; 3600 (1 hour), 36000 = 10h

xdebug.remote_cookie_expire_time = 36000

 

Añadiendo estas directivas estamos diciéndole al intérprete de php como utilizar el XDebug. Nota: en zend_extension tienes que colocar la ruta hacia dónde hayas colocado la dll de Xdebug, en mi caso es esa.

4- Instalación de WordPress

Dirígete a phpmyadmin. Ahora debes tener xampp instalado en http://localhost:8080 (sustituye 8080 por el puerto que hayas puesto). Te redirigirá a http://localhost:8080/dashboard. Desde aquí puedes clicar en la esquina superior derecha en phpmyadmin y podrás empezar con la siguiente parte. En otra ocasión puedes entrar desde http://localhost:8080/phpmyadmin.

Una vez dentro de phpmyadmin, entrar con las credenciales predefinidas que son usuario: root y…no hay password, déjalo en blanco.

Aquí dentro suponiendo que conozcas el funcionamiento de phpmyadmin, crea una nueva base de datos. Sinó, en el apartado base de datos, crea una, no toques nada y solo pon el nombre de la base de datos. Yo la llamaré wordpress (igual que el directorio dónde descomprimiré el wordpress luego). Te recuerdo que lo más recomendable es que crees un usuario y le des los permisos correspondientes para no utilizar root en la conexión de wordpress a la base de datos, pero si no tienes experiencia déjalo así y no hagas usuarios.

Ahora coge el archivo comprimido de wordpress y descomprímelo en el directorio de xampp de htdocs, en mi caso es C:\xampp\htdocs\ .

Una vez hecho esto dirígete al directorio donde está instalado wordpress y deja que el solito siga con la instalación. Como yo puse wordpress en C:\xampp\htdocs\wordpress mi wordpress estará ubicado en http://localhost:8080/wordpress.

Crea tus credenciales en la instalación wordpress y acuérdate de ellas, porque luego será con las que accederás al panel de administración en http://localhost:8080/wordpress/wp-admin. WordPress también te pedirá las credenciales de la base de datos y te pedirá permiso para utilizar la que creamos antes.

5 – Configuración de Netbeans

Suponiendo que tienes instalado el NetBeans, ábrelo y ves a Tools>Options>PHP>Debugging

Debes tener el puerto de debug configurado en 9000, recuerda en el php.ini lo pusimos así xdebug.remote_port = 9000, y activada la opción de Watches and Balloon Evaluation.

Nota: Si te acabas de bajar Netbeans y lo estás ejecutando sin usuario administrador, puede que te encuentres con que se reinicia sin parar, esto es porque quiere actualizarse y no tiene permisos. Ejecuta Netbeans como administrador y se solucionará este bug.

6 – Implementación de nuestro theme

Crea tu propio theme para poder debugar en wordpress. Es interesante que sepas como crear themes de wordpress y hay infinitos tutoriales en internet. En caso de que te corra prisa, te dejo aquí un theme hecho con bootstrap para que lo modifiques como quieras. Descomprímelo y mételo dentro de la carpeta de C:\xampp\htdocs\wordpress\ wp-content\themes

Una vez descomprimido, métete en el directorio de administración de wordpress y en Apariencia>Temas activa este tema.

Coge el plugin que quieras debugar, descomprímelo y colócalo en la carpeta C:\xampp\htdocs\wordpress\ wp-content\plugins, no te olvides de activarlo desde el panel de administración en Plugins>Plugins instalados.

7 – Abriendo el proyecto en Netbeans (por fin!)

Abre el netbeans y selecciona crear un nuevo proyecto. Elige un proyecto php, y de entre las opciones elige “PHP Application with Existing Sources”. Ahora en Name and Location, selecciona en el source Folder tu carpeta de wordpress, en mi caso C:\xampp\htdocs\wordpress, en el siguiente paso, Run Configuration, en project url recuerda poner el puerto en el localhost, netbeans te recomendará que la dirección sea http://localhost/wordpress/. Es muy importante que la corrijas y pongas http://localhost:8080/wordpress . Si quieres puedes elegir copiar los archivos en otro directorio. Es recomendable así no trabajaremos directamente con el directorio de wordpress, sinó con una copia.

8 – Debugando nuestro WordPress

Ahora con el proyecto creado, ya solo te queda debugarlo. Debugaremos el index.php para que veas como funciona. Luego podrás extrapolar estos pasos a tu plugin.

A la izquierda en el árbol de directorios de tu proyecto dirígete hacia source files>wp-content>themes>NombreDeTuTheme>index.php y marca un break point en cualquiera de las líneas seleccionado el número de línea en la parte izquierda.

Lanza el debug con el botón que hay al lado del play, seleccionando Debug Project. Tu navegador se abrirá y se quedará parado, esperando que desde el Netbeans vayas indicando el procedimiento que quieres seguir. También tendrás que ir interactuando con el navegador. Las acciones básicas de debug son los siguientes:

1. Continue: seguir con el debug hacia la siguiente línea
2. Step-Over: Saltar a la siguiente línea de código
3. Step-into: Introducirse en la función que se está llamando en esta línea de código (si es que está llamando alguna) y seguir con el debug aquí.
4. Step-out: Volver hacia atrás, a una capa superior (si con step-into vamos dentro, con step-out volvemos a salir hacia la función donde vinimos)
5. En window>debugging recuerda activar las opciones para que se visualicen las variables, que por defecto se visualizarán en la parte inferior.

9 – Apuntes finales

Debugar es una herramienta fundamental, que te facilita el trabajo y que agiliza el proceso de producción. Una vez tengas montado el entorno de debug y sea estable, te recomiendo que montes uno portable, para VirtualBox o VMWare y lo tengas siempre localizado. No olvides ir actualizando el entorno periódicamente para que sea lo más real posible, y por supuesto generar todas las copias de seguridad que necesites.