WordPress a medida con Custom Post Types y Custom Fields

WordPress, con un 37% de cuota de mercado sobre el total de Internet, es una forma muy potente y bastante sencilla de poner una web en marcha, con un ecosistema enorme detrás de la plataforma. Pero la realidad es que a la hora de trabajar con contenido, solo tenemos dos opciones: posts y páginas. Al menos de serie, ya que para eso se crearon los Custom Post Types, para poder crear diferentes tipos de contenido en nuestra instalación de WordPress.
Por otro lado, al crear una página o un post, tenemos una serie de campos preestablecidos que podemos rellenar con información. Esto también vamos a poder cambiarlo, con el uso de Custom Fields, campos personalizados que podremos agregar al tipo de post que queramos.

En este taller, aprenderás a crear y usar los CPTs, además de vitaminarlos con el uso de Custom Fields. Verás que es realmente sencillo y útil personalizar el tipo de contenido que gestionas en tu instalación de WordPress.

Transcript

1. imanolteran.com WORDPRESS A MEDIDA Con Custom Post Types y Custom Fields WordPress a medida con CPTs y CFs
2. WordPress a medida con CPTs y CFs imanolteran.com HOLA, SOY IMANOL DESARROLLADOR WEB CONSULTOR DE ESTRATEGIA DIGITAL FORMADOR EN NUEVAS TECNOLOGÍAS hola@imanolteran.com @imanolteran
3. WordPress a medida con CPTs y CFs imanolteran.com PODCAST SI DUDAS, HAZLO Spotify Apple Podcasts Google Podcasts imanolteran.com WordPress a medida con CPTs y CFs
4. WordPress a medida con CPTs y CFs imanolteran.com OTROS PROYECTOS DE FORMACIÓN REMOTEWORKTOOLS.ES 👉 PASATEAONLINE.COM 👈
5. imanolteran.com 1. Introducción 2. Estructura de WordPress 3. Post: contigo empezó todo 4. Cuándo usar CPTs 5. WordPress a medida con CPTs y CFs índice WordPress a medida con CPTs y CFs
6. imanolteran.com 6. Custom Post Types 7. Custom Fields 8. Alimenta tu web con contenido dinámico 9. Plantillas en Elementor 10. Práctica índice WordPress a medida con CPTs y CFs
7. imanolteran.com 01 Introducción Pongámonos en situación WordPress a medida con CPTs y CFs
8. WordPress a medida con CPTs y CFs imanolteran.com • WordPress es una plataforma estupenda para crear “casi” cualquier proyecto web: • Opciones de serie • Themes • Plugins • Comunidad Introducción 01 8
9. WordPress a medida con CPTs y CFs imanolteran.com • Para algunos proyectos puede quedarse un poco limitado. • Tipo de contenido que podemos crear se limita a: • Páginas • Posts Introducción 01 9
10. WordPress a medida con CPTs y CFs imanolteran.com 01 10 DE WEBS A NIVEL GLOBAL ESTÁN HECHAS EN WORDPRESS 41,2% https://w3techs.com/technologies/history_overview/content_management/all
11. WordPress a medida con CPTs y CFs imanolteran.com • Obviamente, podemos ampliar este comportamiento por defecto. • De hecho, vemos cómo determinados plugins lo hacen, de forma totalmente transparente al usuario. • WooCommerce • Seriously Simple Podcasting • The Events Calendar • Learndash Introducción 01 11
12. imanolteran.com 02Estructura De WordPress WordPress a medida con CPTs y CFs
14. WordPress a medida con CPTs y CFs imanolteran.com • https://wphierarchy.com • Cuando se lanzó WordPress en 2003, era una plataforma de blogging. • Solo existían los posts. • Al crecer y ver el potencial para crear sitios web completos, surge una necesidad: • Aparecen las páginas Estructura 02 14
15. WordPress a medida con CPTs y CFs imanolteran.com • Post: • Contenido en forma de lista, sujetos a una fecha de publicación. • Página • Contenido con estructura jerárquica, con relaciones “Padre > hijo”. Estructura 02 15
16. WordPress a medida con CPTs y CFs imanolteran.com • En esencia, una página es un ”tipo de post” —> Post Type • Son muy similares, solo que cuentan con características diferentes: • Fecha, tags, categorías, inserción en menús. Estructura 02 16
17. WordPress a medida con CPTs y CFs imanolteran.com • Otras diferencias: • Posts utilizan taxonomías. • Páginas hacen uso de plantillas de página. Estructura 02 17
18. WordPress a medida con CPTs y CFs imanolteran.com La Taxonomía es, en su sentido más general, la ciencia de la clasificación. Usualmente se emplea el término para designar a la taxonomía biológica, la ciencia de ordenar a los organismos en un sistema de clasificación compuesto por una jerarquía de taxones anidados. WIKIPEDIA
19. WordPress a medida con CPTs y CFs imanolteran.com • En esencia, una taxonomía es una forma de agrupar “cosas”. • En WordPress, una taxonomía es un medio para agrupar entradas o enlaces. • De hecho, las categorías, son un tipo de taxonomía. Estructura 02 19 TAXONOMÍAS
20. WordPress a medida con CPTs y CFs imanolteran.com • WordPress cuenta con una serie de taxonomías predeterminadas: • Categoría: • /category/nombre. Las categorías tienden a ser predefinidas y abarcar un amplio rango. • Etiqueta: • /tag/nombre. Las entradas tienden a tener muchas etiquetas, y generalmente se muestran cerca de las entradas o en forma de nubes de etiquetas. Estructura 02 20 TAXONOMÍAS
21. WordPress a medida con CPTs y CFs imanolteran.com • WordPress cuenta con una serie de taxonomías predeterminadas: • Categorías de links: • La taxonomía 'link_category' te permite categorizar tus enlaces. Tienden a ser usados sólo internamente, razones organizacionales, y no son usualmente expuestos en el sitio. Estructura 02 21 TAXONOMÍAS
22. WordPress a medida con CPTs y CFs imanolteran.com • También podemos tener taxonomías personalizadas. • Es muy útil para poder organizar información de varias formas diferentes. Estructura 02 22 TAXONOMÍAS PERSONALIZADAS
23. WordPress a medida con CPTs y CFs imanolteran.com • Código para crear una taxonomía personalizada Estructura 02 23 TAXONOMÍAS PERSONALIZADAS function gente_init() { // create a new taxonomy register_taxonomy( 'gente', 'post', array( 'label' => __('Gente'), 'sort' => true, 'args' => array('orderby' => 'term_order'), 'rewrite' => array('slug' => 'persona'), ) ); } add_action( 'init', 'gente_init' );
24. imanolteran.com 03Post Contigo empezó todo WordPress a medida con CPTs y CFs
25. WordPress a medida con CPTs y CFs imanolteran.com • La tabla wp_posts es una de las más importantes de nuestra BBDD. • Incluye información sobre diferentes entidades que están en nuestra página, no solo las entradas del blog. Post 03 25
26. WordPress a medida con CPTs y CFs imanolteran.com • Por defecto, WordPress viene con diferentes tipos de posts: • Post • Pagina • Adjunto • Revisión • Menú de navegación • CSS Personalizado Post 03 26
27. WordPress a medida con CPTs y CFs imanolteran.com • Los registros de diferencian por el campo “post_type” que indica el tipo de entidad • De igual forma, la info de nuestros CPTs también se almacenarán en esta tabla • Ver ejemplo BBDD phpmyadmin Post 03 27
29. WordPress a medida con CPTs y CFs imanolteran.com • https://wphierarchy.com • single-{slug}.php => para mostrar la página de un CPT en particular. • De no existir el fichero en nuestro tema usará el single.php, singular.php o en el último caso el index.php. Post 03 29 PLANTILLAS PARA CPTS
30. WordPress a medida con CPTs y CFs imanolteran.com • archive-{slug}.php => para mostrar la página con el listado de elementos del CPT. • De no existir el fichero usará el archive.php o en el último caso el index.php. Post 03 30 PLANTILLAS PARA CPTS
31. imanolteran.com 04Cuándo Usar CPTs WordPress a medida con CPTs y CFs
32. WordPress a medida con CPTs y CFs imanolteran.com • En cualquier momento, puedes crear tus propios CPTs, y nombrarlos como quieras. • Hay que ver la naturaleza del proyecto y analizar si tiene sentido crear tipos de post con entidad propia. Cuándo usar 04 32
33. WordPress a medida con CPTs y CFs imanolteran.com • A veces puede ser suficiente con trabajar con categorías o tags. • Si el contenido no cuadra en posts y páginas. • Hay que crear un CPT Cuándo usar 04 33
34. WordPress a medida con CPTs y CFs imanolteran.com • Plugins que proporcionan capacidades muy específicas a nuestra web, los incluyen. • Cuidado, si quitamos el plugin, perdemos el CPT Cuándo usar 04 34
35. WordPress a medida con CPTs y CFs imanolteran.com • Si tenemos claro el propósito de la web, y queremos mantener el CPT, crearlo nosotros mismos. • Independencia del plugin. • Si más adelante cambiamos de plugin, no perdemos nuestra info. • En cualquier caso, la información queda almacenada en la BBDD de WordPress. Cuándo usar 04 35
36. imanolteran.com 05WordPress a medida Con CPTs y CFs WordPress a medida con CPTs y CFs
37. WordPress a medida con CPTs y CFs imanolteran.com • Además, los CPTs que creemos, pueden incluir información específica. • Esto lo hacemos gracias a los Custom Fields. • De esta forma podemos crear sitios 100% personalizados. A medida 05 37
38. WordPress a medida con CPTs y CFs imanolteran.com • Página web sobre formación • CPT: Curso • CFs: Nombre, temática, vídeo de presentación, imagen, descripción, profesor • CPT: Lección • CFs: Número, descripción, duración, formato, realizada A medida 05 38 EJEMPLOS
39. WordPress a medida con CPTs y CFs imanolteran.com • Página web sobre inmobiliaria • CPT: Piso • CFs: Metros cuadrados, precio, dirección, descripción, amueblado/sin amueblar, piscina, ascensor, fotos, vídeo A medida 05 39 EJEMPLOS
40. WordPress a medida con CPTs y CFs imanolteran.com • Página web sobre eventos • CPT: Evento • CFs: Recinto, sala, fecha, ponentes, • CPT: Recinto • CFs: Dirección, descripción, imagen, número de salas, capacidad A medida 05 40 EJEMPLOS
41. WordPress a medida con CPTs y CFs imanolteran.com • Página web sobre eventos • CPT: Sala • CFs: Aforo, imagen, localización, descripción, nombre, equipamiento técnico • CPT: Ponente • CFs: Nombre, fotografía.profesión, Linkedin, email, descripción... A medida 05 41 EJEMPLOS
42. imanolteran.com 06CPTs Custom Post Types WordPress a medida con CPTs y CFs
43. WordPress a medida con CPTs y CFs imanolteran.com • Hemos visto que los CPTs son una de las mejores formas para personalizar al máximo nuestra web hecha en WordPress. • Ayudan a mantener una estructura de información coherente. CPTs 06 43
44. WordPress a medida con CPTs y CFs imanolteran.com • Como casi todo en WordPress, tenemos dos formas de hacerlo: • Mediante código. • Mediante plugins. CPTs 06 44 ¿CÓMO SE HACEN?
45. WordPress a medida con CPTs y CFs imanolteran.com • Podemos crear CPTs mediante código • Functions.php • Plugin • Existe la posibilidad de añadir diferentes opciones a nuestro CPT, puesto que el código puede variar. CPTs 06 45 ¿CÓMO SE HACEN?
46. WordPress a medida con CPTs y CFs imanolteran.com // Our custom post type function function create_posttype() {   register_post_type( 'movies' , // CPT Options array ( 'labels' => array ( 'name' => __( 'Movies' ) , 'singular_name' => __( 'Movie' ) ) , 'public' => true , 'has_archive' => true , 'rewrite' => array('slug' => 'movies') , 'show_in_rest' => true ,   ) ) ; } // Hooking up our function to theme setup add_action( 'init', 'create_posttype' ); CPTs 06 46 ¿CÓMO SE HACEN? > CÓDIGO https://www.wpbeginner.com/wp-tutorials/how-to-create-custom-post-types-in-wordpress/
47. WordPress a medida con CPTs y CFs imanolteran.com /* * Creating a function to create our CPT */   function custom_post_type() {   // Set UI labels for Custom Post Type $labels = array ( 'name' => _x( 'Movies', 'Post Type General Name', 'twentytwenty' ) , 'singular_name' => _x( 'Movie', 'Post Type Singular Name', 'twentytwenty' ) , 'menu_name' => __( 'Movies', 'twentytwenty' ) , 'parent_item_colon' => __( 'Parent Movie', 'twentytwenty' ) , 'all_items' => __( 'All Movies', 'twentytwenty' ) , 'view_item' => __( 'View Movie', 'twentytwenty' ) , 'add_new_item' => __( 'Add New Movie', 'twentytwenty' ) , 'add_new' => __( 'Add New', 'twentytwenty' ) , 'edit_item' => __( 'Edit Movie', 'twentytwenty' ) , 'update_item' => __( 'Update Movie', 'twentytwenty' ) , 'search_items' => __( 'Search Movie', 'twentytwenty' ) , 'not_found' => __( 'Not Found', 'twentytwenty' ) , 'not_found_in_trash' => __( 'Not found in Trash', 'twentytwenty' ) , ) ;   // Set other options for Custom Post Type   $args = array ( 'label' => __( 'movies', 'twentytwenty' ) , 'description' => __( 'Movie news and reviews', 'twentytwenty' ) , 'labels' => $labels , // Features this CPT supports in Post Editor 'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', ) , // You can associate this CPT with a taxonomy or custom taxonomy. 'taxonomies' => array( 'genres' ) , /* A hierarchical CPT is like Pages and can have * Parent and child items. A non-hierarchical CPT * is like Posts. */   'hierarchical' => false , 'public' => true , 'show_ui' => true , 'show_in_menu' => true , 'show_in_nav_menus' => true , 'show_in_admin_bar' => true , 'menu_position' => 5 , 'can_export' => true , 'has_archive' => true , 'exclude_from_search' => false , 'publicly_queryable' => true , 'capability_type' => 'post' , 'show_in_rest' => true ,   ) ;   // Registering your Custom Post Type register_post_type( 'movies', $args ) ;   CPTs 06 47 ¿CÓMO SE HACEN? > CÓDIGO
48. WordPress a medida con CPTs y CFs imanolteran.com • Hay varios plugins para crear CPTs en WordPress. • Sin duda, el más utilizado es CPT UI. • Custom Post Type UI – WordPress plugin • Podemos crear Custom Post Types y Taxonomías mediante una sencilla interfaz gráfica. CPTs 06 48 ¿CÓMO SE HACEN? > PLUGINS
49. WordPress a medida con CPTs y CFs imanolteran.com • Custom Post Types and Custom Fields creator – WCK – WordPress plugin • Pods – Custom Content Types and Fields – WordPress plugin • Toolset Types - WordPress Custom Fields and Post Types • Custom Post Type Maker – WordPress plugin CPTs 06 49 ¿CÓMO SE HACEN? > PLUGINS
50. imanolteran.com 07 CFs Custom Fields WordPress a medida con CPTs y CFs
51. WordPress a medida con CPTs y CFs imanolteran.com • WordPress permite asignar campos personalizados a un post. • También a un CPT. • Esta información se almacena en forma de metadatos. CFs 07 51
52. WordPress a medida con CPTs y CFs imanolteran.com • Metadatos se almacenan en pares “clave/valor”: • Clave: nombre de esa característica. • Valor: información específica de un elemento relativo a esa característica. CFs 07 52
53. WordPress a medida con CPTs y CFs imanolteran.com • De nuevo, al igual que los CPTs, tenemos dos formas de hacerlo • Mediante interfaz WordPress • Mediante plugins CFs 07 53 ¿CÓMO SE HACEN?
54. WordPress a medida con CPTs y CFs imanolteran.com • Panel Opciones • Preferencias • Paneles Adicionales • Campos Personalizados CFs 07 54 ¿CÓMO SE HACEN? > WORDPRESS UI
55. WordPress a medida con CPTs y CFs imanolteran.com • Código para mostrarlos <?php the_meta(); ?> • Código HTML generado <ul class='post-meta'> <li><span class='post-meta-key'>Actualmente leyendo:</span> Las mil y una noches</li> <li><span class='post-meta-key'>Humor de hoy:</span> Feliz y alegre</li> </ul> • Estilos CSS .post-meta {font-variant: small-caps; color: maroon; } .post-meta-key {color: green; font-weight: bold; font-size: 110%; } CFs 07 55 ¿CÓMO SE HACEN? > WORDPRESS UI
56. WordPress a medida con CPTs y CFs imanolteran.com • Elementor: CFs 07 56 ¿CÓMO SE HACEN? > WORDPRESS UI
57. WordPress a medida con CPTs y CFs imanolteran.com • El plugin por excelencia es ACF (Advanced Custom Fields) • Advanced Custom Fields – Plugin WordPress CFs 07 57 ¿CÓMO SE HACEN? > PLUGINS
58. WordPress a medida con CPTs y CFs imanolteran.com • Nos permite crear mediante una sencilla interfaz gráfica, todos los campos que queramos, y asignarlos a un tipo de post concreto. • Es gratuito. • Versión de pago: PRO • Se integra con un montón de plataformas de terceros • Awesome ACF - Resources for Advanced Custom Fields CFs 07 58 ¿CÓMO SE HACEN? > PLUGINS > ACF
59. WordPress a medida con CPTs y CFs imanolteran.com • Otros plugins: • https://codecanyon.net/item/advanced-custom- fields-for-woocommerce/18705467 • https://toolset.com • https://www.cozmoslabs.com/wck-custom- fields-custom-post-types-plugin/ • https://wordpress.org/plugins/custom-field- suite/ CFs 07 59 ¿CÓMO SE HACEN? > PLUGINS
60. imanolteran.com 08Alimenta tu web Con contenido dinámico WordPress a medida con CPTs y CFs
61. WordPress a medida con CPTs y CFs imanolteran.com • WordPress nació como plataforma de blogging. • En muchos casos se utiliza para crear páginas web estáticas. • Además de eso, podemos construir sitios web más versátiles y potentes. Contenido dinámico 08 61
62. WordPress a medida con CPTs y CFs imanolteran.com • Beneficios de poder crear webs dinámicas desde distintos puntos de vista: • Desarrollo • Cliente Contenido dinámico 08 62
63. WordPress a medida con CPTs y CFs imanolteran.com • Poder crear sitios más complejos. • Simplicidad al introducir cambios. • Acortar tiempos de desarrollo. • Posibilidad de aspirar a proyectos más potentes. • Diferenciarte de la competencia. Contenido dinámico 08 63 BENEFICIOS DESARROLLO
64. WordPress a medida con CPTs y CFs imanolteran.com • Sitios 100% a medida. • Interfaz más sencilla. • Huimos de la complejidad de los muchos themes. Contenido dinámico 08 64 BENEFICIOS CLIENTE
65. imanolteran.com 09Plantillas En Elementor WordPress a medida con CPTs y CFs
66. WordPress a medida con CPTs y CFs imanolteran.com • Podemos crear plantillas de página personalizadas para nuestros CPTs. • De esta forma, pueden tener un aspecto propio y cargar valores de campos CFs de forma dinámica. • Conseguimos diferenciarlos de los posts u otros CPTs. Plantillas 09 66
67. WordPress a medida con CPTs y CFs imanolteran.com • WordPress permite que predefinamos plantillas de bloques en su editor (aka Gutenberg). • Hay que hacerlo por código: • Templates | Block Editor Handbook | WordPress Developer Resources Plantillas 09 67
68. WordPress a medida con CPTs y CFs imanolteran.com • Si utilizamos Elementor como editor visual, esta funcionalidad es muy potente y sencilla. • Creamos la plantilla en Elementor. • Indicamos que se muestre para ese CPT • La carga de datos la hacemos desde el editor de WordPress. • - No es necesario trabajar con la interfaz de Elementor. Plantillas 09 68 ELEMENTOR
69. WordPress a medida con CPTs y CFs imanolteran.com 1. Crear un CPT Plantillas 09 69 ELEMENTOR > PASOS A SEGUIR
70. WordPress a medida con CPTs y CFs imanolteran.com 2. Añadir los CFs necesarios Podremos rellenar los valores desde el editor de WordPress Plantillas 09 70 ELEMENTOR > PASOS A SEGUIR
71. WordPress a medida con CPTs y CFs imanolteran.com 3. Para mostrar los datos, los cargamos de forma dinámica en la plantilla Plantillas 09 71 ELEMENTOR > PASOS A SEGUIR
72. WordPress a medida con CPTs y CFs imanolteran.com 4. Asignar la plantilla al CPT correspondiente Plantillas 09 72 ELEMENTOR > PASOS A SEGUIR
73. imanolteran.com 10 Práctica Proyecto WordPress WordPress a medida con CPTs y CFs
74. WordPress a medida con CPTs y CFs imanolteran.com 1.Crear sitio WordPress para formación 2.Utilizando Elementor 3.Crear 3 CPTs 4.Cada CPT con sus correspondientes CFs 5.Crear varios registros de cada CPT 6.Crear plantilla de página para cada CPT 7.Crear página de cada CPT 8.Listar los elementos de cada CPT Práctica 10 74 CREACIÓN DE WEB CON CPTS Y CFS
75. WordPress a medida con CPTs y CFs imanolteran.com •Crear en servidor propio. •Crear en local/servidor remoto. •Local | Local WordPress development made simple •Docker: Empowering App Development for Developers •Trinchera DEV Práctica 10 75 CREACIÓN DE WEB CON CPTS Y CFS
76. WordPress a medida con CPTs y CFs imanolteran.com •Instalar Elementor. •Repositorio oficial de WordPress. •Elementor Page Builder – Plugin WordPress Práctica 10 76 UTILIZAR ELEMENTOR
77. WordPress a medida con CPTs y CFs imanolteran.com •CPT Curso •CPT Formador •CPT Centro Práctica 10 77 CREAR CPTS
78. WordPress a medida con CPTs y CFs imanolteran.com •CPT Curso •Nombre •Imagen •Descripción •Temario •Disciplina •Tipo: presencial / online Práctica 10 78 CREAR CFS
79. WordPress a medida con CPTs y CFs imanolteran.com •CPT Formador •Nombre •Imagen •Email •Twitter •Linkedin Práctica 10 79 CREAR CFS
80. WordPress a medida con CPTs y CFs imanolteran.com •CPT Centro •Nombre •Imagen •Dirección •Email •Tfno Práctica 10 80 CREAR CFS
81. WordPress a medida con CPTs y CFs imanolteran.com •Crear 4 cursos •Crear 2 formadores •Crear 4 centros Práctica 10 81 CREAR REGISTROS
82. WordPress a medida con CPTs y CFs imanolteran.com •Crear 3 plantilla en Elementor: •Cursos •Formadores •Centros •Indicar en qué CPT se muestra cada una Práctica 10 82 CREAR PLANTILLAS DE PÁGINA
83. WordPress a medida con CPTs y CFs imanolteran.com •Crear 3 páginas: •Cursos •Formadores •Centros •Editar con Elementor. •Con bloque de posts, listar en cada una los elementos del CPT que corresponda. Práctica 10 83 CREAR PÁGINAS Y LISTAR POSTS
84. WordPress a medida con CPTs y CFs imanolteran.com RECURSOS DE APRENDIZAJE HOW TO CREATE CUSTOM POST TYPES IN WORDPRESS TAXONOMÍAS USING CUSTOM FIELDS ELEMENTOR INTEGRATION WITH ACF
85. WordPress a medida con CPTs y CFs imanolteran.com RECURSOS DE APRENDIZAJE OTROS CURSOS SOBRE WORDPRESS EN IMANOLTERAN.COM
86. WordPress a medida con CPTs y CFs imanolteran.com PRÓXIMOS CURSOS STRIPE NOTION ZOOM TELETRABAJO Y TELEFORMACIÓN
87. imanolteran.com WordPress a medida con CPTs y CFs hola@imanolteran.com Eskerrik asko