Skip to content
40Q
Services
Industries
WP VIP
Case Studies
Blog
About
Free Consultation

Diseña el listado de Custom Post Types de WordPress a tu medida con extended-custom-post-types

José Debuchy

Aug 19, 2021 | 7 min to read |

Wordpress

La creación de Post Types en WordPress suele ser un proceso tedioso. Además de eso, muchas veces tenemos que recurrir a plugins o funcionalidades adicionales, dentro de nuestro panel de control, para poder tener control sobre las columnas o la forma en que se muestran estos post types.

Extended Custom Post Types es un paquete muy popular en Github que, como su nombre indica, extiende funcionalidades interesantes a la hora de crear Custom Post Types en WordPress.

Cómo instalarlo

Asumimos que estamos utilizando Sage 10, como lo hemos hecho a lo largo de la serie. Dentro de la carpeta del theme, instalamos la librería mediante composer.

composer require johnbillion/extended-cpts

Cómo utilizarlo

El paquete ofrece la posibilidad de crear tanto post types como taxonomías desde el código.

Post Types

En nuestro ejemplo, vamos a crear un post type para restaurants. De la misma manera que WordPress ofrece la función register_post_type() Extended CPTs propone un método bastante similar:

add_action('init', function () {
    register_extended_post_type('restaurant');
});

Ésta sería la forma más básica de utilización del paquete.

Taxonomías

Para crear taxonomías, se extiende la función register_taxonomy().

add_action('init', function () {
    register_extended_post_type('restaurant');
    register_extended_taxonomy( 'cuisine', 'restaurant' );
});

Estas son las opciones que el paquete toma como default en el tercer parámetro. Quizás la más destacada es la opción de hierarchical como true

'public'            => true,  
'show_ui'           => true,  
'hierarchical'      => true,  
'query_var'         => true,  
'exclusive'         => false, # Custom arg  // true means: just one can be selected  
'allow_hierarchy'   => false, # Custom arg  //  
'meta_box'          => null,  # Custom arg  // can be null, 'simple', 'radio', 'dropdown' -> 'radio' and 'dropdown' just allow exclusive choices (will overwrite the set choise), simple has exclusive and multi options  
'dashboard_glance'  => false, # Custom arg  // show or not on dashboard glance  
'checked_ontop'     => null,  # Custom arg  //   
'admin_cols'        => null,  # Custom arg  // added admin columns  
'required'          => false, # Custom arg  //

Labels

Si el idioma del proyecto es en inglés, las etiquetas (labels) singulares y plurales se generan de forma automática.

En este link podemos ver todas las etiquetas disponibles en WordPress.

Si quisiéramos agregar etiquetas a medida, tendríamos que utilizar el tercer argumento de la función en forma de array.

add_action('init', function () {
    register_extended_post_type('restaurant', 
        [],
        [
            'singular' => 'Restaurant',
            'plural'   => 'Restaurants',
        ]
    );
});

Columnas

Este quizás sea uno de los features más interesantes de la librería. Tenemos la posibilidad de mostrar las columnas que queremos visualizar en el administrador en el listado del custom post type.

Trabajaremos sobre el segundo argumento de la función, utilizando un array con key admin_cols

add_action('init', function () {
    register_extended_post_type('restaurant', 
        [
            'admin_cols' => [
                 ...
            ]
        ],
        ...
    );
});

Taxonomías

En el caso de la taxonomía de tipo de cocina que creamos, tenemos que indicar el nombre de la taxonomía y, opcionalmente, el título.

'admin_cols' => [
    'cuisine' => [
        'title' => 'Cuisine',
        'taxonomy' => 'cuisine'
    ],
    ...
]

Imagen destacada

Sobre featured_image especificamos el tamaño de la imagen destacada. Si se desea, se puede agregar el tamaño del ancho y alto.

'admin_cols' => [
    'featured_image' => [
        'title'          => 'Featured Image',
        'featured_image' => 'thumbnail',
        'width'          => 160,
	      'height'         => 90,
    ],
    ...
]

Campo de ACF y funciones a medida

Tanto para mostrar campos personalizados de ACF o hacer algún trabajo específico sobre lo que se desea mostrar, utilizamos lo siguiente:

'admin_cols' => [
    'address' => [
        'title'    => 'Address',
        'function' => function() {
            echo get_field('address');
        },
    ],
    ...
]

Fechas

Sobre el parámetro post_field podemos utilizar las opciones post_date, post_date_gmt, post_modified, y post_modified_gmt. También se pueden editar el formato en que se va a mostrar la fecha siguiendo estas reglas.

'admin_cols' => [
    'publish_date' => [
        'title'       => 'Publish Date',
        'post_field'  => 'post_date',
        'date_format' => 'D, d M Y',
    ],
    ...
]

Ejemplo

Partiendo de todos los ejemplos de arriba, observemos el resultado.

add_action('init', function () {
    register_extended_post_type(
        'restaurant',
        [
            'admin_cols' => [
                'cuisine' => [
                    'title' => 'Cuisine',
                    'taxonomy' => 'cuisine'
                ],
                'address' => [
                    'title'    => 'Address',
                    'function' => function () {
                        echo get_field('address');
                    },
                ],
                'featured_image' => [
                    'title'          => 'Featured Image',
                    'featured_image' => 'thumbnail',
                    'width'          => 60,
                    'height'         => 60,
                ],
                'publish_date' => [
                    'title'      => 'Publish Date',
                    'post_field' => 'post_date',
                    'date_format' => 'd M',
                ],
            ],
        ],
        [
            'singular' => 'Restaurant',
            'plural'   => 'Restaurants',
        ]
    );
});

Observándose este resultado:

Filtros

A través del parámetro admin_filters podemos controlar ciertos filtros de las columnas, permitiendo mayor control y flexibilidad sobre los listados de post types en el admin.

Taxonomías

Similar al filtro de columnas. Se puede especificar el título, de manera opcional.

'admin_filters' => [
    'cuisine' => [
        'title'    => 'Cuisine',
        'taxonomy' => 'cuisine',
    ],
    ...
]

Campos de ACF

Para campos de ACF suele utilizarse estos filtros en campos del tipo Boolean o campos Select, donde las opciones son limitadas. También pueden ser muy útiles los campos de búsqueda.

'admin_filters' => [
    'gluten_free' => [
        'title'    => 'Gluten Free',
        'meta_key' => 'gluten_free',
    ],
    'status' => [
        'title'    => 'Status',
        'meta_key' => 'status',
        'options'  => [
            'open'   => 'Open',
            'close'   => 'Close',
        ]
    ],
    'address' => [
        'title'           => 'Address',
        'meta_search_key' => 'address',
    ],
    ...
]

Fechas

Se pueden buscar post types después o antes de ciertas fechas, indicando la columna que se va a tener en cuenta.

'admin_filters' => [
    'post_after' => [
        'post_date'  => 'after',
        'date_query' => [
            'column' => 'post_date',
        ],
    ],
    'post_before' => [
        'post_date'  => 'before',
        'date_query' => [
            'column' => 'post_date',
        ],
    ],
    ...
]

Ejemplo

Tomando algunas de las opciones de arriba vamos a generar unos filtros adicionales.

add_action('init', function () {
    register_extended_post_type(
        'restaurant',
        [
            'admin_cols' => [
                'cuisine' => [
                    'title' => 'Cuisine',
                    'taxonomy' => 'cuisine'
                ],
                'address' => [
                    'title'    => 'Address',
                    'function' => function () {
                        echo get_field('address');
                    },
                ],
                'featured_image' => [
                    'title'          => 'Featured Image',
                    'featured_image' => 'thumbnail',
                    'width'          => 60,
                    'height'         => 60,
                ],
                'publish_date' => [
                    'title'      => 'Publish Date',
                    'post_field' => 'post_date',
                    'date_format' => 'd M',
                ],
            ],
            'admin_filters' => [
                'cuisine' => [
                    'title'    => 'Cuisine',
                    'taxonomy' => 'cuisine',
                ],
                'address' => [
                    'title'           => 'Address',
                    'meta_search_key' => 'address',
                ],
            ],
        ],
        [
            'singular' => 'Restaurant',
            'plural'   => 'Restaurants',
        ],
    );
});

Así quedan reflejados los filtros en la pantalla del admin. Aparte de las opciones por defecto de WordPress, sumamos el tipo de cocina y la dirección.

Gutenberg

En algunos casos, puede ser que sea necesario el custom post type muestre el editor de Gutenberg cuando se crea o se edita.

En estos casos, tenemos que agregar el parámetro show_in_rest

add_action('init', function () {
    register_extended_post_type('restaurant', [
        ...
        'show_in_rest' => true,
        'admin_cols' => [
           ...
        ],
        'admin_filters' => ]
           ...
        ],
    ],
    register_extended_taxonomy( 'cuisine', 'restaurant', [
        'show_in_rest' => true,
    ]);
});

Órden

Con el parámetro default podemos especificar la columna que será la encargada de ordenar los posts. Si no está este parámetro en ninguna opción de columa los post types se ordenarán en forma alfabética.

En este ejemplo, estamos definiendo el meta field start_date como el default, y en orden descendente:

'admin_cols' => [
    'publish_date' => [
        'title'       => 'Publish Date',
        'post_field'  => 'post_date',
        'date_format' => 'D, d M Y',
        'default'     => 'DESC',
    ],
    ...
]

Resumen

Como hemos visto, la librería permite gestionar las columnas y los filtros que se mostrarán en el listado de Post Types en el panel administrador de manera muy sencilla y flexible. Esto puede ser muy útil para sitios con mucho contenido, en donde el administrador de contenidos tendrá más facilidad para acceder a contenido específico gracias a estas ayudas.

Además de la posibilidad de agregar columnas y filtros, también cuenta con otros features que, por cuestiones de longitud del post y utilidad decidimos evitar, pero se pueden consultar en la documentación del paquete: https://github.com/johnbillion/extended-cpts/wiki

Principalmente quedan por describir features de Front-End como:

  • Posibilidad de editar los permalinks en estructuras a medida
  • Posibilidad de agregar query vars, tanto para ordenar como para filtrar.
Share on:

Author

José Debuchy