Cómo aprender a estructurar datos de WordPress con los Custom post types

Un primer paso para desarrollar un WordPress sin cabeza es aprender a implementar y configurar Custom Post Types (tipos de datos personalizados o CPT, por sus siglas en inglés) en un sitio web de WordPress. Eso te permitirá estructurar datos y contruir todo tipo de páginas web.

Pero aprender a usar los CPT en tu WordPress no solo es útil para desarrollar un sitio web con Frontity, como veremos en próximos posts, sino para añadir tipos de datos distintos a los que estamos acostumbrados a manejar por defecto; esto es posts y páginas. Con el theme Blogpocket Nineteen tienes la posibilidad de crear un sitio web con un miniblog y los miniposts son un tipo de datos que se añade a los posts y las páginas simplemente instalando un plugin. Pero podrías tener productos, libros, cursos o lo que quieras.

Configurar Custom Post Types con código

El primer paso sería acercarte a la creación de CPTs mediante código, con este artículo: Tutorial Custom Post Types con código.

Aquí puedes profundizar en la codificación en PHP, y dentro del archivo functions.php (o creando el plugin correspondiente) para crear CPTs: Ultimate Guide to Custom Post Types in WordPress.

Y si eres usuario de Genesis Framework (algo recomendable), un buen sitio de membresía y con muchos snippets es Código Genesis.

Una herramienta muy interesante para generar automáticamente el código necesario para implementar CPTs es GenerateWP.

Configurar Custom Post Types con plugins

En Ahora puedes crear Custom Post Types mejor y con menos esfuerzo explicamos cómo funcionaban los plugins Toolset y Toolset View para crear CPTs, aplicar taxonomías, relaciones entre ellos y cómo mostrarlos en el front-end. Sin embargo, lamentablmente, estos plugins se ha retirado.

Hay otros plugins con ese propósito como Pods pero quizá son demasiado complicados para la mayoría de los mortales.

En Revolucionar tu web de WordPress con el Método Blogpocket y 5 herramientas que te ayudarán a construir sitios web más rápido se detalla el toolkit recomendado en Blogpocket para desarrollar un sitio web profesional eficiente. En cuanto a CPTs, ahí se recomiendan los dos plugins muy sencillos y fáciles de configurar: CPT UI para crear los CPTs y ACF para añadir campos personalizados a tus CPTs.

Un inconveniente detectado en nuestro laboratorio respecto a a CPT UI es que no se pueden relacionar los CPTs. Así que esa parte hay que hacerla con código, añadiendo un metabox en el CPT hijo para relacionarlo con el CPT padre. El siguiente snippet, obtenido de Código Genesis, relaciona una lección con su curso en una supuesta estructura de datos de cursos y lecciones.

// Añadir metabox para relacionar lecciones con el curso padre
function cg_parent_meta_box() {
	add_meta_box( 'lesson-parent', 'Curso', 'cg_lesson_parent_meta_box', 'leccion', 'side', 'high' );
}
add_action( 'add_meta_boxes', 'cg_parent_meta_box' );
function cg_lesson_parent_meta_box( $post ) {
	$post_type_object = get_post_type_object( $post->post_type );
	$pages = wp_dropdown_pages( array( 'post_type' => 'curso', 'selected' => $post->post_parent, 'name' => 'parent_id', 'show_option_none' => __( '(no parent)' ), 'sort_column'=> 'menu_order, post_title', 'echo' => 0 ) );
	if ( ! empty( $pages ) ) {
		echo $pages;
	}
}

Pero ten en cuenta que algunas estructuras de datos no requieren dos CPTs sino definir qué instancia de un único CPT es el padre. Es el caso, por ejemplo, de cursos y lecciones. Esta estructura jerárquica se puede implementar de dos formas distintas: con un único CPT o con dos CPTs diferentes relacionados.

Si elegimos la opción de un único CPT, hay que definir el parámetro hierarchical a true en el CPT y usar el metabox de atributos de entrada. Es decir:

Primero definimos el CPT como jerárquico:

1. Mostrar en REST API. Pon este valor a verdadero para que la REST API pueda servir los valores del CPT y además los CPTs se puedan editar con Gutenberg.
2. Para crear un archivo con todas las instancias del CPT.
3. Jerárquico. Este valor debe ponerse a true con el fin de conseguir que los elementos del CPT puedan tener una relación jerárquica o, incluso, para que dos CPTs distintos la tengan. En este último caso, solo el CPT padre deberá tener este valor a “verdadero”.

Después, en todos los elementos “hijos” definimos quién el el elemento “padre”. Así relacionamos una jerarquía de elementos dentro de un mismo CPT.

Eso es diferente a relacionar dos CPTs distintos mediante el snippet, que vimos un poco más arriba, para añadir un metabox para relacionar elementos de un CPT hijo con elementos de otro CPT padre. Por el hecho de codificar ese snippet, tendremos un nuevo metabox en todas los items del CPT hijo y podremos ligarlo al CPT padre. Así;

Así que un buen método, para no codificar, sería utilizar CPT UI para definir CTPs y sus taxonomías; ACF para añadir campos personalizados y el snippet anterior para relacionar CTPs. Con eso tenemos todos los ingredientes para cocinar CTPs sin codificar (a excepción de ese pequeño snippet que añade un metabox para relacionar dos CPTs).

Hay dos cosas que debemos recordar a la hora de configurar Custom Post Types:

• Hay que poner el parámetro show_in_rest a true. Eso resuelve dos cuestiones importantes: permitirá que la REST API entregue el contenido de los CPTs y, además, activará el editor Gutenberg para los CPTs. Ver Permitir Gutenberg en Custom Post Types.
• Para la REST API pueda también entregar los campos personalizados añadidos a los CPTs (bien con ACF o mediante código) es preciso instalar y activar este plugin: ACF to REST API.

En el próximo post documentaremos la creación de un blog de prueba de WordPress y su conexión con Frontity. Veremos los fundamentos de la creación de una aplicación web con WordPress y ReactJS usando Frontity. Montaremos un caso sencillo (un simple blog) , sin CPTs, para aprender lo básico de la creación de una aplicación como backend y ReactJS como frontend, gracias al framework Frontity.