Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Desarrollando con WordPress y sus cositas

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.

0ef2c8342089d8f3e79d7b6cc9ab4b19?s=128

alvaromg

May 26, 2015
Tweet

More Decks by alvaromg

Other Decks in Technology

Transcript

  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