1 Buenas prácticas para desarrollar un plugin David Navia @davidnaviaweb Webmaster en Vocento Media Lab Pablo López @desarrollowp WP Manager en VASS digital

2 1. Planteamiento Un plugin es una pieza de código que extiende o modifica las funcionalidades de WordPress, por lo tanto hemos de proceder de la misma manera que en cualquier otro proyecto de desarrollo. ¿Cual es el objetivo del plugin?  Plantea los requerimientos mínimos y especificaciones ¿Debo usar el modelo de datos de WordPress o necesito crear uno propio?  Planifica la persistencia de datos ¿Necesito opciones de configuración y/o administración del plugin?  Establece los flujos de información ¿Necesito agregar CSS y/o JS?  Diseña las interfaces y la experiencia de usuario ¿Cómo lo haré escalable por si el día de mañana necesito crecer?  Piensa a lo grande y empieza por lo básico

3 1. Planteamiento WordPress tiene un modelo de datos y pone a nuestra disposición una serie de APIs que nos van a facilitar la implementación de la mayor parte de las funcionalidades que necesitaremos para crear nuestro plugin: HTTP API => peticiones HTTP a URLs externas Metadata API => obtener o modificar datos de posts, usuarios, comentarios, taxonomías… Options API & Transients API => La manera sencilla de almacenar en BBDD información Settings API => administrar configuraciones generales Shortcode API => permite crear funciones para insertar funcionalidad dentro de nuestros post y páginas Theme Customization API => para crear opciones en el personalizador Hooks => Actions y Filters que permiten interactuar con funciones o puntos de ejecución Listado de APIs y lo que hacen: https://make.wordpress.org/core/handbook/best-practices/core-apis/

4 1. Planteamiento Conclusiones: ¡NO REINVENTES LA RUEDA!

5 2. Estilo del Código A la hora de escribir el código de nuestro plugin, es muy recomendable emplear técnicas de Programación Orientada a Objetos. Podemos partir del Boilerplate de Devin Vinson, que sigue una convención existente sobre la estructura de archivos y carpetas que debe contener un plugin POO para WP: https://github.com/DevinVinson/WordPress-Plugin-Boilerplate Además WordPress tiene una serie de guías de buenas prácticas de desarrollo de plugins: https://developer.wordpress.org/plugins/the-basics/best-practices/ Para PHP también podemos seguir los estándares PSR del FIG (Framework Interoperational Group): http://www.php-fig.org/psr/psr-1/ - Estándares de codificación básica http://www.php-fig.org/psr/psr-1/ http://www.php-fig.org/psr/psr-2/ - Guía de estilo de codificación POO http://www.php-fig.org/psr/psr-2/

6 2. Estilo del Código HTML Validación, atributos, indentación CSS Estructura, selectores, propiedades y valores Prefijos, mediaqueries y comentarios Nicolas Gallagher @necolas | https://github.com/necolas/idiomatic-csshttps://github.com/necolas/idiomatic-css JS Espaciado en objetos, arrays, funciones Puntuación, indentación y saltos de línea Declaración de variables, comprobación de tipos Yoda Style if ( true == $the_force ) { $victorious = you_will( $be ); }

7 PHP Uso de prefijos Indentación, llaves y espaciado Nomenclatura No usar short tags Acceso a BBDD No acceder directamente Formateo de queries Otras consideraciones Uso del operador ternario Yoda Style Control de errores Don’t EXTRACT Arquitectura: https://developer.wordpress.org/plugins/the-basics/best-practices/#architecture-patterns-explainedhttps://developer.wordpress.org/plugins/the-basics/best-practices/#architecture-patterns-explained Foo: Bar: New 1: New 2:

17 4. Integración con WordPress Menús De primer nivel https://developer.wordpress.org/plugins/administration-menus/top-level-menus/https://developer.wordpress.org/plugins/administration-menus/top-level-menus/ De segundo nivel https://developer.wordpress.org/plugins/administration-menus/sub-menus/https://developer.wordpress.org/plugins/administration-menus/sub-menus/ Options/Settings API Es muy recomendable utilizar estas dos APIs Consistencia visual Robustez y mantenibilidad ¡Menos trabajo! Maneja el envío de formularios Gestiona la persistencia de datos Nonces automáticos Sanitización https://developer.wordpress.org/plugins/settings/

18 4. Integración con WordPress Metadata Añade campos adicionales a los post types Mejor con MetaBoxes Custom Post Types A veces puede ser muy útil generar nuestros propios post types Extiende o restringe funcionalidades Usa siempre MetaBoxes Custom Taxonomies Internacionalización Localización de cadenas y scripts PoMo y PoEdit https://poedit.net/https://poedit.net/ /* * Plugin Name: My Plugin * Author: Plugin Author * Text Domain: my-plugin * Domain Path: /languages */ ########################### __( 'Blog Options', 'my-plugin' ); _e( 'WordPress is the best!', 'my-plugin' ); printf( /* translators: %s: Name of a city */ __( 'Your city is %s.', 'my-plugin' ), $city );

19 4. Integración con WordPress Shortcodes [cheers msg= " Ahoy! " ] Son básicamente filtros, por lo que siempre se debe retornar la salida Añade prefijos para evitar colisiones con otros shortcodes Sanitiza siempre el input Documentación https://generatewp.com/shortcodes/ Gestión de usuarios Controla siempre lo que pueden y no pueden hacer Ponte en su lugar Detalles Action Links Plugin Row Meta

20 5. Subiendo el Plugin al repositorio Necesitamos un archivo readme.txt que contendrá la información de nuestro plugin. El archivo readme.txt tiene un marcado específico, debemos seguir las reglas y formato para que nuestro plugin se visualice correctamente en WordPress. Éste marcado lo podemos ver en: https://wordpress.org/plugins/about/readme.txthttps://wordpress.org/plugins/about/readme.txt Lo podemos validar en: https://wordpress.org/plugins/about/validator/https://wordpress.org/plugins/about/validator/ === Plugin Name === Contributors: (this should be a list of wordpress.org userid's) Donate link: http://example.com/ Tags: comments, spam Requires at least: 3.0.1 Tested up to: 3.4 Stable tag: 4.3 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Here is a short description of the plugin. This should be no more than 150 characters. No markup here.

21 5. Subiendo el Plugin al repositorio == Description == This is the long description. No limit, and you can use Markdown (as well as in the following sections). == Installation == This section describes how to install the plugin and get it working. == Screenshots == 1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif) 2. This screen shot description corresponds to screenshot-2.(png|jpg|jpeg|gif) == Changelog == = 1.0 = * First public release == Frequently Asked Questions == = A question that someone might have = An answer to that question.

22 5. Subiendo el Plugin al repositorio Para dar de alta nuestro plugin nos dirigimos a https://wordpress.org/plugins/add/ y rellenamos el formulariohttps://wordpress.org/plugins/add/

23 5. Subiendo el Plugin al repositorio Si nos aprueban el plugin nos envían un mail y nos dan acceso al repositorio de Subversion, concretamente a una carpeta con el nombre del plugin. Ahí podremos subir los archivos del plugin con nuestro usuario y contraseña de WordPress.org

24 5. Subiendo el Plugin al repositorio En assets/ subiremos las imágenes de cabecera, iconos y pantallazos de nuestro plugin: banner-772x250.(jpg|png) banner-1544x500.(jpg|png) (alta resolución, retina) icon-128x128.(jpg|png) icon-256x256.(jpg|png) (alta resolución, retina) screenshot-(1, 2...N).png

25 5. Subiendo el Plugin al repositorio En trunk/ subiremos todos los archivos de nuestro plugin, y lo enviaremos al repositorio: 1.Abre un Terminal 2.Crea en local una carpeta para tus plugins $ mkdir my-plugin 3.Enlaza con tu repositorio $ svn co https://plugins.svn.wordpress.org/my-plugin my-plugin 4.Añade todos los archivos de tu plugin a la carpeta trunk/ y las imágenes a la carpeta assets/ 5.Añade los archivos al repositorio $ cd my-plugin/ $ svn add trunk/* $ svn add assets/* $ svn ci -m 'Subiendo la primera versión de my-plugin'

26 6. Fin ¡ESTO ES TODO AMIGOS! David Navia @davidnaviaweb Webmaster en Vocento Media Lab Pablo López @desarrollowp WP Manager en VASS digital