Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wordpress: El Framework desconocido

66 views

Published on

Presentación para dar a conocer a WordPress como framework PHP para desarrollo de software de forma ágil y rápida.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Wordpress: El Framework desconocido

  1. 1. WordPress EL FRAMEWORK DESCONOCIDO
  2. 2. ¿Quien soy? Samuel Rocha - @sjrocha ● Usuario de WordPress desde 2007 ● Cofundador de Maanju Studio en 2010 ● Director de Proyectos ● Consultor de WordPress ● Consultor SEO ● Plugin Developer en WordPress.org
  3. 3. WordPress ¿CMS o FrameWork?
  4. 4. Definición de Framework En el desarrollo de software, un entorno de trabajo es una estructura conceptual y tecnológica de asistencia definida, normalmente, con artefactos o módulos concretos de software, que puede servir de base para la organización y desarrollo de software. Típicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado, entre otras herramientas, para así ayudar a desarrollar y unir los diferentes componentes de un proyecto. Extraido de https://es.wikipedia.org/wiki/Framework
  5. 5. Definición de CMS Un sistema de gestión de contenidos (en inglés: Content Management System, más conocido por sus siglas CMS) es un programa informático que permite crear una estructura de soporte (framework) para la creación y administración de contenidos, principalmente en páginas web, por parte de los administradores, editores, participantes y demás usuarios. Extraido de https://es.wikipedia.org/wiki/Sistema_de_gesti%C3%B3n_de_contenidos
  6. 6. ¿DESCONOCIDO?
  7. 7. Primeros resultados de google para “framework php” Posición 1: - Aura - FuelPHP - Slim - Phalcon - CakePHP - Zend Framework - Yii - Codeigniter - Symfony2 - Laravel
  8. 8. Primeros resultados de google para “framework php” Posición 2: - Laravel - Symfony - codeigniter - Yii 2 - Phalcon - CakePHP - Zend Framework - Slim - FuelPHP - PHPixie - Zikula - Kohana - Flight - Fat-Free - PHP Mini - Simple PHP framework
  9. 9. Primeros resultados de google para “framework php” Posición 3: - Laravel - Phalcon - Symphony - CodeIgniter - CakePHP - Zend - FuelPHP - Slim - Phpixie - Fat-Free - Aura - Yii 2
  10. 10. Primeros resultados de google para “framework php” Posición 4: - CodeIgniter - Laravel
  11. 11. Primeros resultados de google para “framework php” Posición 5: - Laravel - Phalcon - Symfony - CodeIgniter - Yii
  12. 12. Primeros resultados de google para “framework php” Posición 6: - Laravel - CodeIgniter - Yii - CakePHP - Zend Framework 2
  13. 13. Primeros resultados de google para “framework php” Posición 6: - Laravel - CodeIgniter - Yii - CakePHP - Zend Framework 2
  14. 14. Primeros resultados de google para “framework php” Posición 6: - Laravel - CodeIgniter - Yii - CakePHP - Zend Framework 2
  15. 15. Primeros resultados de google para “framework php” Posición 8: - Laravel - CodeIgniter - Yii - CakePHP - Zend Framework 2
  16. 16. Primeros resultados de google para “framework php” Posición 9: - Laravel - Symfony - CodeIgniter - Yii 2 - Phalcon - CakePHP - Zend Framework - Slim - FuelPHP - PHPixie
  17. 17. Estructura de WordPress
  18. 18. SISTEMA DE ARCHIVOS DE WORDPRESS Archivo de configuración: - conexión a la base de datos - activación del modo “debug” - definición de constantes Contenido del proyecto: - Diseño - Funcionalidades extra - Archivos multimedia
  19. 19. SISTEMA DE ARCHIVOS DE WORDPRESS Núcleo de WordPress
  20. 20. BASE DE DATOS WORDPRESS
  21. 21. BASE DE DATOS WORDPRESS TABLA CONFIGURACIÓN: - wp_options - URL del sitio - Título del sitio - Descripción del sitio - Email del admin - Formato de la fecha - Formato de URL - Codificación - Idiomas - Configuraciones de plugins - ....
  22. 22. BASE DE DATOS WORDPRESS TABLAS USUARIOS: - wp_users (entidad base) - nickname - password - email - fecha registro - display name - wp_usermeta (campos extra) - Nombre - Apellidos - Descripción - Permisos - Enlaces redes sociales - Datos de configuración - ...
  23. 23. BASE DE DATOS WORDPRESS TABLA DE POST - “ENTIDADES”: - wp_posts Entradas, Páginas, Medios, +Custom Post - Título - Contenido - Slug - Autor - Fecha publicación - Fecha actualización - Post Type - Comentarios abiertos - ... - wp_postmeta otros valores como: - plantilla - subtítulo - (lo que quieras)
  24. 24. BASE DE DATOS WORDPRESS TABLA DE TERM - “RELACIONES”: - wp_terms Para agrupar contenidos - id - nombre - slug - wp_term_taxonomy Definición del term con el tipo de taxonomía: Categorías, Etiquetas, Menú, +custom - tipo de taxonomía - descripción - id del padre - wp_termmeta información extra como: - título y descripciones seo - imagen - wp_term_relationships Relación del taxonomía con los wp_posts “ENTIDADES”
  25. 25. BASE DE DATOS WORDPRESS TABLA DE COMENTARIOS: - wp_comments - entidad a la que pertenece - autor - email - comentario - IP autor - fecha publicación - ... - wp_commentmeta para añadir más valores - valoraciones - notas internas
  26. 26. WP-CONTENT: Plugins, Theme y Uploads - Plugins: Carpeta donde se añaden nuevas funcionalidades a wordpress - Ejemplos: Formularios de contacto, Sistemas Anti Spam, Tiendas Online, Sistema para mejorar el SEO, importadores de contenido, sistemas de slider de imágenes, sistemas de pago, y un largo etcétera. - Themes: Carpeta donde colocamos el diseño de nuestra web. - Hay gratuitos, de pago y el que te hagas tu mismo :D - Uploads: Carpeta donde se suben todos los ficheros usando el sistema multimedia de WordPress. - Ejemplos. Imágenes, Documentos, Vídeos, PDF.
  27. 27. Paso a paso: Desarrollando un proyecto
  28. 28. Diagrama de la base de datos para un proyecto (SIMPLIFICADO). Sin campos: id, nombre, ... EVENTOS USUARIOS TIPO EVENTOS LUGARES NOTICIAS CATEGORÍAROLES CONTENIDO ESTÁTICO Diagrama de la base de datos
  29. 29. ● Creación de la base de datos con los campos (nombre, definición del valor) ● Creación del CRUD con la BBDD ● Creación del MVC ● Crear la administración para usuarios ○ Pantalla de login ○ Dashboard ○ Acceso a datos (multiplicar por cada entidad y relación). ● + HTML, CSS, JavaScript ○ Librería bootstrap Programando (lo básico) ● Creación vista pública ● Mostrar contenidos ● Crear la navegación ● Crear el diseño de la web ○ CSS (Hoja de estilos) ○ Librerías javascript ○ Imágenes ● Control de errores 404
  30. 30. ¿Cuánto tiempo y dinero llevaría desarrollar todo esto? (con los framework php)
  31. 31. Más de lo que la mayoría puede permitirse. (En tiempo y dinero)
  32. 32. Y no entramos en lo siguiente: ● Validación de datos. ● Gestión de permisos. ● Notificaciones por email. ● Acceso y registro de usuarios. ● Formularios de contacto. ● Sistema de comentario. ● Subida y gestión de archivos multimedia. ● Actualización de librerías: jQuery, Bootstrap, OwlCarousel ● URL amigables. ● SEO. ● Diseño. ● Previsualización del contenido. ● Actualizaciones de seguridad. ● Control de SPAM. ● Funciones de compartir en redes sociales. ● Programación de contenido en el futuro. ● Multi-idiomas. ● etc.
  33. 33. Conociendo WordPress La administración
  34. 34. Déjate de rollos, ¡QUEREMOS CÓDIGO!
  35. 35. Creando “ENTIDADES” En WordPress Custom Post Type (CPT)
  36. 36. Creando un plugin para las entidades - Nombre del plugin (carpeta y fichero) - Encabezado, definición del plugin - Creando los Custom Post Types - Creando las Custom Taxonomies - Vista en la administración - Vista en el Front-page
  37. 37. Diagrama de la base de datos para un proyecto (SIMPLIFICADO). Sin campos: id, nombre, ... EVENTOS USUARIOS TIPO EVENTOS LUGARES NOTICIAS CATEGORÍAROLES CONTENIDO ESTÁTICO Diagrama de una base de datos
  38. 38. EXPLICACIÓN DE LOS HOOKS En WordPress tenemos dos tipos de hooks. Y podemos definirlos de la siguiente forma: Action Hooks: Estos te permiten añadir o quitar código en distintos puntos de WordPress. add_action( ‘init’, ‘nombre_de_la_funcion’); Filter Hooks: Estos te permiten modificar datos que hay dentro del código. add_filter( 'the_content', 'my_the_content_filter', 20 );
  39. 39. Diagrama de la base de datos para un proyecto (SIMPLIFICADO). Sin campos: id, nombre, ... EVENTOS USUARIOS TIPO EVENTOS LUGARES NOTICIAS CATEGORÍAROLES CONTENIDO ESTÁTICO Diagrama de una base de datos
  40. 40. Diagrama de la base de datos para un proyecto (SIMPLIFICADO). Sin campos: id, nombre, ... EVENTOS USUARIOS TIPO EVENTOS LUGARES NOTICIAS CATEGORÍAROLES CONTENIDO ESTÁTICO Diagrama de una base de datos
  41. 41. TIPS - Generar los CPT https://generatewp.com/post-type/
  42. 42. Creando los “Campos”
  43. 43. Añadiendo las variables desde WordPress 1. Sin plugins: desde la administración de Wordpress - Añadimos una “key” y su “value”. - Contenido de texto plano. - Poco intuitivo. 2. Con plugins: Advanced Custom Fields - Variedad de tipo de campos: fechas, mapa, select. - Campos condicionales. - Muy intuitivo y visual.
  44. 44. 1. Campos Personalizados
  45. 45. 1. Campos Personalizados
  46. 46. 2. Plugin Advanced Custom Fields (ACF)
  47. 47. 2. Plugin Advanced Custom Fields (ACF)
  48. 48. ¿Y esto cómo lo ven los usuarios?
  49. 49. Creando nuestro theme
  50. 50. Sistema de Plantillas - Jerarquía de las plantillas - Child Theme - Accediendo a los datos del ACF Más info: https://developer.wordpress.org/themes/basics/template-hierarchy/
  51. 51. Child Themes Un "tema hijo" en WordPress es un tema que hereda la funcionalidad de otro tema, llamado "tema padre". Los temas hijos permiten modificar o añadir las funcionalidades del tema padre. Un tema hijo es la forma más segura y fácil de modificar un tema existente, tanto si se quiere hacer pequeños cambios como otros más amplios. Más info: https://codex.wordpress.org/es:Temas_hijos
  52. 52. ¿CUÁNTO HAS TARDADO EN DESARROLLARLO?
  53. 53. 15 HORAS Y SE VE ASÍ
  54. 54. Web de la feriadesanlucas.com
  55. 55. Todo lo que se ha utilizado GRATUITO ● Plugins propio (visto en la charla) ● Advanced Custom Fields ● Yoast SEO DE PAGO ● HOSTING Y DOMINIO ● ORBITAL THEME
  56. 56. WordPress es mucho más...
  57. 57. ● Sistema de shortcodes ● Tiene una API REST en json ● Interfaz de línea de comandos (WP-CLI) ● Editor Gutenberg (Contenido Drag&Drop) ● Documentación y comunidad ● Directorio de plugins y themes
  58. 58. UN REGALO
  59. 59. https://samuelrocha.es/orbital
  60. 60. ¿Alguna pregunta?
  61. 61. ¡MUCHAS GRACIAS! @sjrocha

×