Desarrollando con WordPress y sus cositas

Wordpress es una herramienta bien conocida en Internet, tanto por usuarios como por desarrolladores. En esta sesión veremos como desarrollar y mantener un proyecto con Wordpress de manera limpia y ordenada. Hablaremos de instalación, control de versiones, desarrollo de plugins/temas, actualizaciones y rendimiento entre otras cosas. Si eres desarrollador o usuario avanzado de Wordpress, esto te interesa.

1. Álvaro de la Mata González CTO y Scrum Master Intexdev SL Grupo Intexmedia @_alvaromg Desarrollando con Wordpress y sus cositas
2. http://helpdev.org/
3. Disclaimer • No soy experto en WordPress • Lo que os voy a contar es una forma más de gestionar proyectos con WordPress • Se aceptan sugerencias :) Desarrollando con Wordpress y sus cositas @_alvaromg
4. ¿Por qué utilizar Wordpress? Desarrollando con Wordpress y sus cositas @_alvaromg
5. ¿Por qué utilizar Wordpress? • Es gratis • Es fácil de usar • Se puede extender • Una gran comunidad activa Desarrollando con Wordpress y sus cositas @_alvaromg
6. ¿Por qué utilizar Wordpress? Producto mínimo viable Idea Desarrollo Lanzamiento Idea Desarrollo Lanzamiento Aprender + iterar Acortar tiempo desarrollo Validar pronto la idea Desarrollando con Wordpress y sus cositas @_alvaromg
7. Errores habituales al desarrollar con Wordpress Desarrollando con Wordpress y sus cositas @_alvaromg
8. Errores habituales al desarrollar con Wordpress • Escoger hosting de mala calidad • No actualizar Wordpress, plugins y/o temas • Descuidar los backups • Demasiados plugins instalados Desarrollando con Wordpress y sus cositas @_alvaromg
9. Errores habituales al desarrollar con Wordpress • Tocar los archivos de Wordpress • Tocar las plantillas y/o plugins de terceros • Empezar con cualquier nombre de host • Despliegues manuales Desarrollando con Wordpress y sus cositas @_alvaromg
10. Errores habituales al desarrollar con Wordpress Desarrollando con Wordpress y sus cositas @_alvaromg +
11. Desarrollando con Wordpress y sus cositas @_alvaromg
12. Empezando el proyecto Desarrollando con Wordpress y sus cositas @_alvaromg
13. Wordpress Datos dinámicos (BDD y archivos) Temas Plugins Elementos que deben convivir Desarrollando con Wordpress y sus cositas @_alvaromg
14. github.com/alvaromg/wp-demo-project Desarrollando con Wordpress y sus cositas @_alvaromg
15. Mantener el repositorio limpio Archivos de WordPress (git submodule) Nuestro plugin Nuestro tema Configuración Desarrollando con Wordpress y sus cositas @_alvaromg
16. Instalación completa (prod / dev) Sin control de versiones Sin control de versiones Desplegado automáticamente Sin control de versiones Desarrollando con Wordpress y sus cositas @_alvaromg
17. Primer paso mkdir wp-demo-project && cd wp-demo-project git init touch README.md git add README.md git commit -m "Initial commit." Desarrollando con Wordpress y sus cositas @_alvaromg
18. Añadiendo archivos de WordPress git submodule add git://github.com/WordPress/WordPress.git wp cd wp git checkout 4.2.2 Desarrollando con Wordpress y sus cositas @_alvaromg
19. Configuración de WordPress cp wp/wp-config-sample.php wp-config.php • Contiene configuraciones críticas • Depende del entorno (dev, prod, ...) • Despliegue automático Desarrollando con Wordpress y sus cositas @_alvaromg
20. Configuración de WordPress define('DB_NAME', 'helpdev'); define('DB_USER', 'helpdev'); define('DB_PASSWORD', 'helpdev'); define('DB_HOST', 'localhost'); define('WP_SITEURL', 'http://' . $_SERVER['SERVER_NAME'] . '/'); define('WP_HOME', 'http://' . $_SERVER['SERVER_NAME']); define('WP_CONTENT_DIR', $_SERVER['DOCUMENT_ROOT'] . '/../wp-content'); define('WP_CONTENT_URL', 'http://' . $_SERVER['SERVER_NAME'] . '/wp-content'); Desarrollando con Wordpress y sus cositas @_alvaromg
21. Configuración de WordPress git add wp-config.php git commit -m "Añadir wp-config.php tuneado" Desarrollando con Wordpress y sus cositas @_alvaromg
22. Servidor Web (Apache2) <VirtualHost *:80> ServerName helpdev-sandbox ServerAdmin webmaster@localhost DocumentRoot /var/www/html/wp Alias /wp-content /var/www/html/wp-content <Directory /var/www/html/wp> AllowOverride All </Directory> </VirtualHost> Desarrollando con Wordpress y sus cositas @_alvaromg
23. .gitignore *.log wp/.htaccess sitemap.xml sitemap.xml.gz wp-content/advanced-cache.php wp-content/backup-db/ wp-content/backups/ wp-content/blogs.dir/ wp-content/cache/ wp-content/upgrade/ wp-content/uploads/ wp-content/wp-cache-config.php wp-content/themes wp-content/plugins Desarrollando con Wordpress y sus cositas @_alvaromg
24. Instalación fresca del proyecto cd /var/www/html git clone https://github.com/alvaromg/wp-demo-project --recurse-submodules . cp wp-config.php wp/wp-config.php cp -r wp/wp-content . Desarrollando con Wordpress y sus cositas @_alvaromg
25. Instalación fresca del proyecto Desarrollando con Wordpress y sus cositas @_alvaromg
26. Extendiendo Wordpress: Temas Desarrollando con Wordpress y sus cositas @_alvaromg
27. ¿Como empezar con el tema? • Copiar y modificar un tema existente • Crear un tema desde cero • Utilizar temas hijos Desarrollando con Wordpress y sus cositas @_alvaromg
28. Utilizando temas hijos • Herencia de temas • Extender un tema existente con mínimo esfuerzo • Aprovechar las actualizaciones del tema padre helpdev.org/temas-hijos-en-wordpress/ Desarrollando con Wordpress y sus cositas @_alvaromg
29. Creando un tema hijo <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } /* Theme Name: Phpcaceres demo Author: Phpcaceres Author URI: http://www.meetup.com/es/phpcaceres/ Template: twentyfifteen Version: 1.0 */ // reglas que modifican el tema padre Desarrollando con Wordpress y sus cositas @_alvaromg
30. Ajustando .gitignore ... wp-content/themes/* !wp-content/themes/wp-demo-theme Desarrollando con Wordpress y sus cositas @_alvaromg
31. Activando el tema hijo Desarrollando con Wordpress y sus cositas @_alvaromg
32. Widgets codex.wordpress.org/es:API_de_Widget • Añaden contenido o funcionalidades a los sidebars Desarrollando con Wordpress y sus cositas @_alvaromg
33. Extendiendo Wordpress: Plugins Desarrollando con Wordpress y sus cositas @_alvaromg
34. Plugins • Modificar comportamientos sin tocar WordPress • Reutilizar funcionalidades entre proyectos • Encapsular librerías de terceros codex.wordpress.org/Writing_a_Plugin codex.wordpress.org/Plugin_API Desarrollando con Wordpress y sus cositas @_alvaromg
35. Creando un plugin <?php /* Plugin Name: Phpcaceres demo Description: Permite insertar vídeos de Youtube en contenido Version: 1.0 Author: Phpcaceres Author URI: http://www.meetup.com/es/phpcaceres/ Text Domain: wp-demo-plugin */ // actions & filters Desarrollando con Wordpress y sus cositas @_alvaromg
36. Ajustando .gitignore otra vez ... ... wp-content/plugins/* !wp-content/plugins/wp-demo-plugin Desarrollando con Wordpress y sus cositas @_alvaromg
37. Activando el plugin Desarrollando con Wordpress y sus cositas @_alvaromg
38. Hooks, Actions & Filters • Hooks: Son eventos predefinidos que ocurren en la ejecución de WordPress (modificar BDD, enviar mail, salida, ...) • Actions & Filters: Definimos en funciones qué debe hacer WordPress en esos momentos Desarrollando con Wordpress y sus cositas @_alvaromg
39. Insertar vídeos de Youtube // wp-content/plugins/wp-demo-plugin/wp-demo-plugin.php add_action ('the_content', 'render_videos'); function render_videos($content) { $pattern = '/\[youtube=([^\]]+)\]/'; $replacement = '<div style="text-align:center;display:block;">'; $replacement.= '<iframe width="560" height="315"' . ' src="https://www.youtube.com/embed/$1"' . ' frameborder="0" allowfullscreen></iframe>'; $replacement.= '</div>'; $content = preg_replace($pattern, $replacement, $content); return $content; } Desarrollando con Wordpress y sus cositas @_alvaromg
40. Insertar vídeos de Youtube [youtube=MQCPLUhIUew] Desarrollando con Wordpress y sus cositas @_alvaromg
41. Guardar / obtener información Desarrollando con Wordpress y sus cositas @_alvaromg add_option( $name, $value, $deprecated, $autoload ); get_option( $option ); update_option( $option_name, $newvalue ); delete_option( $option );
42. Extendiendo Wordpress: Composer Desarrollando con Wordpress y sus cositas @_alvaromg
43. Utilizando Composer { "require": { "php" : ">=5.3.2", "zenstruck/string": "dev-master" } } <?php // .. require_once(__DIR__ . '/../vendor/autoload.php'); Sin control de versiones Desarrollando con Wordpress y sus cositas @_alvaromg
44. Ajustando .gitignore otra vez ... ... composer.phar composer.lock vendor Desarrollando con Wordpress y sus cositas @_alvaromg
45. Utilizando componentes en plugins <?php add_action ('the_content', 'wp_demo_plugin_render_content'); function wp_demo_plugin_render_content($content) { if (is_page() || is_single()) { return wp_demo_plugin_render_videos($content); } else { return wp_demo_plugin_snippet($content); } } // ... function wp_demo_plugin_snippet ($content) { $content = strip_tags($content); $content = zenstruck\string\truncate_word($content, 150); return '<p>'.$content.'</p>'; } Desarrollando con Wordpress y sus cositas @_alvaromg
46. Utilizando componentes en plugins Desarrollando con Wordpress y sus cositas @_alvaromg
47. Instalación fresca del proyecto con Composer cd /var/www/html git clone https://github.com/alvaromg/wp-demo-project --recurse-submodules . cp wp-config.php wp/wp-config.php cp -r wp/wp-content . php composer.phar update -o Desarrollando con Wordpress y sus cositas @_alvaromg
48. Mejorando el rendimiento Desarrollando con Wordpress y sus cositas @_alvaromg
49. Mejorando el rendimiento • Utilizar plugins imprescindibles. Quitar el resto. • Plugins de caché • Proxy caché • Op Code Caching • Limpieza periódica de residuos Desarrollando con Wordpress y sus cositas @_alvaromg
50. Mejorando la seguridad Desarrollando con Wordpress y sus cositas @_alvaromg
51. Mejorando la seguridad • Blanco de hackers • Mantén Wordpress, temas y plugins actualizados • Hosting de calidad • Versiones actualizadas de Apache, PHP y MySQL • Quitar xmlrpc.php Desarrollando con Wordpress y sus cositas @_alvaromg
52. Mejorando la seguridad • Eliminar/cambiar usuario "admin" • Usar contraseñas seguras • Copias de seguridad periódicas (BDD y /wp-content) • Plugins para limitar logins fallidos Desarrollando con Wordpress y sus cositas @_alvaromg
53. Cuando Wordpress ya no es suficiente Desarrollando con Wordpress y sus cositas @_alvaromg
54. Cuando Wordpress ya no es suficiente • Mover funcionalidades a aplicaciones separadas • Wordpress puede convivir con otras aplicaciones Desarrollando con Wordpress y sus cositas @_alvaromg Wordpress Symfony2 plugin bundle proxy / vhost /blog / BDD BDD xml-rpc api
55. Gracias ;) Desarrollando con Wordpress y sus cositas @_alvaromg