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

1. WordPress
EL FRAMEWORK DESCONOCIDO

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. WordPress ¿CMS o FrameWork?

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. 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. ¿DESCONOCIDO?

7. Primeros resultados de google para “framework php”
Posición 1:
- Aura
- FuelPHP
- Slim
- Phalcon
- CakePHP
- Zend Framework
- Yii
- Codeigniter
- Symfony2
- Laravel

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. 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. Primeros resultados de google para “framework php”
Posición 4:
- CodeIgniter
- Laravel

11. Primeros resultados de google para “framework php”
Posición 5:
- Laravel
- Phalcon
- Symfony
- CodeIgniter
- Yii

12. Primeros resultados de google para “framework php”
Posición 6:
- Laravel
- CodeIgniter
- Yii
- CakePHP
- Zend Framework 2

13. Primeros resultados de google para “framework php”
Posición 6:
- Laravel
- CodeIgniter
- Yii
- CakePHP
- Zend Framework 2

14. Primeros resultados de google para “framework php”
Posición 6:
- Laravel
- CodeIgniter
- Yii
- CakePHP
- Zend Framework 2

15. Primeros resultados de google para “framework php”
Posición 8:
- Laravel
- CodeIgniter
- Yii
- CakePHP
- Zend Framework 2

16. Primeros resultados de google para “framework php”
Posición 9:
- Laravel
- Symfony
- CodeIgniter
- Yii 2
- Phalcon
- CakePHP
- Zend Framework
- Slim
- FuelPHP
- PHPixie

17. Estructura de WordPress

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. SISTEMA DE ARCHIVOS DE WORDPRESS
Núcleo de
WordPress

20. BASE DE DATOS WORDPRESS

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. 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. 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. 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. 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. 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. Paso a paso:
Desarrollando un proyecto

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. ● 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. ¿Cuánto tiempo y dinero llevaría
desarrollar todo esto?
(con los framework php)

31. Más de lo que la mayoría
puede permitirse.
(En tiempo y dinero)

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. Conociendo WordPress
La administración

37. Déjate de rollos,
¡QUEREMOS CÓDIGO!

38. Creando “ENTIDADES”
En WordPress Custom Post Type (CPT)

39. 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

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

48. 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 );

60. 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

67. 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

68. TIPS - Generar los CPT
https://generatewp.com/post-type/

69. Creando los “Campos”

70. 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.

71. 1. Campos Personalizados

72. 1. Campos Personalizados

73. 2. Plugin Advanced Custom Fields (ACF)

74. 2. Plugin Advanced Custom Fields (ACF)

79. ¿Y esto cómo lo ven los usuarios?

80. Creando nuestro theme

81. 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/

83. 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

87. ¿CUÁNTO HAS TARDADO EN
DESARROLLARLO?

88. 15 HORAS
Y SE VE ASÍ

89. Web de la feriadesanlucas.com

90. 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

91. WordPress es mucho más...

92. ● 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

93. UN REGALO

94. https://samuelrocha.es/orbital

95. ¿Alguna pregunta?

96. ¡MUCHAS GRACIAS!
@sjrocha