En este tutorial vamos ver cómo crear custom post types y cómo crear custom fields en WordPress, con los cuales podrás personalizar entradas exclusivas para un fin concreto o tener campos de formulario a medida para recoger información útil en cada publicación.
1
¿QUÉ SON LOS Custom Post Types Y LOS Custom Fields?
Vamos a explicar de manera rápida la diferencia entre estos 2 términos.
Custom Post Types
Como sabrás WordPress tiene las Entradas o Post normales con las que escribimos nuestros artículos. Pero imagina que quisieras tener otro tipo de entradas especificas que solo sirvan para mostrar un tipo de contenido concreto, y separarlas del blog que nos otorga WordPress con las entradas normales. Bien, pues a este tipo de entradas personalizadas y distintas a las normales que trae WordPress, se les conoce como custom post types. Seguro que al instalar algún theme corporativo o plugin, has visto que te crea diversos apartados en el panel de administración, como por ejemplo: portfolios, testimonios, servicios,...Pues esos son claros ejemplos de un Custom Post Type.
Custom Fields
Los custom fields o campos personalizados, nos servirán para agregar en cada entrada, página o publicación de WordPress, datos e información adicional que nos pueda ser de utilidad. Esta información WordPress la almacena como metadatos, los cuales después podremos utilizar para diversos cometidos. Es por así decirlo, como si creases en cada entrada o página que vayas a publicar, un formulario previo a tu gusto, con el cual recoges datos y luego los muestras. WordPress por defecto ya trae un apartado para poder añadir estos campos a cada publicación, pero viene oculta. Para mostrarla, simplemente tendremos que activar la casilla de campos personalizados, en las opciones de pantalla cuando estemos añadiendo o editando una publicación:
Una vez que activemos la casilla, nos aparecerá un apartado nuevo llamado Campos personalizados debajo del editor donde solemos escribir nuestra publicación, en el cual podremos ya proceder a crear estos campos.
2
CÓMO CREAR Custom Post Types
Para crear un Custom Post Type, podemos hacerlo de manera manual mediante código o mediante plugins específicos que veremos más adelante.
La forma manual de crearlos mediante código será la siguiente:
- 1Abrimos el archivo functions.php de nuestro theme de WordPress
- 2Para crear por ejemplo un Custom Post Type llamado tutorial, añadimos al final del archivo functions.php la siguiente función:
<?php
/*
**** POST TYPE TUTORIALES ****
*/
function register_tutorial_posttype() {
$labels = array(
'name' => _x( 'Tutoriales', 'tutorialeswp' ),
'singular_name' => _x( 'Tutorial', 'tutorialeswp' ),
'add_new' => __( 'Añadir nuevo','tutorialeswp'),
'add_new_item' => __( 'Nuevo tutorial','tutorialeswp'),
'edit_item' => __( 'Editar tutorial','tutorialeswp' ),
'new_item' => __( 'Nuevo tutorial','tutorialeswp' ),
'all_items' => __( 'Todos los tutoriales','tutorialeswp' ),
'view_item' => __( 'Ver tutorial','tutorialeswp'),
'search_items' => __( 'Buscar tutorial','tutorialeswp'),
'not_found' => __( 'No encontrado!','tutorialeswp' ),
'not_found_in_trash' => __( 'No encontrado en la papelera','tutorialeswp' ),
'parent_item_colon' => '',
'menu_name' => __('TUTORIALES','tutorialeswp'));
$args = array(
'labels' => $labels,
'public' => true,
'show_ui' => true,
'publicly_queryable' => true,
'rewrite' => array( 'slug' => 'tutorial' ),
'has_archive' => true,
'capability_type' => 'post',
'menu_icon' => 'dashicons-welcome-learn-more',
'can_export' => true,
'menu_position' => 5,
'supports' => array('title','editor','author','thumbnail','excerpt','trackbacks','custom-fields','comments','revisions')
);
register_post_type( 'tutorial', $args );
}- 3Si quisiéramos añadirle una taxonomía de categorías y una taxonomía de tags, al custom post type tutorial creado anteriormente, lo haríamos con la siguientes funciones que añadiríamos también al archivo functions.php:
<?php
/*
**** TAXONOMY categorias-tutoriales ****
*/
function taxonomia_tutoriales_category() {
register_taxonomy( 'categorias-tutoriales',
array (0 => 'tutorial'),
array(
'hierarchical' => true,
'label' => __('Categorías de tutoriales','tutorialeswp'),
'show_ui' => true,
'query_var' => true,
'show_admin_column' => true,
'labels' => array (
'search_items' => __('Buscar categorías','tutorialeswp'),
'popular_items' => __('Más populares','tutorialeswp'),
'all_items' => __('Todas','tutorialeswp'),
'parent_item' => __('Superior','tutorialeswp'),
'parent_item_colon' => __('Categoría superior','tutorialeswp'),
'edit_item' => __('Editar categoría','tutorialeswp'),
'update_item' => __('Actualizar categoría','tutorialeswp'),
'add_new_item' => __('Añadir nueva categoría','tutorialeswp'),
'new_item_name' => __('Nueva categoría','tutorialeswp'),
'separate_items_with_commas' => __('Separar por comas','tutorialeswp'),
'add_or_remove_items' => __('Añadir o borrar','tutorialeswp'),
'choose_from_most_used' => __('Elegir de las más usadas','tutorialeswp'),
)
) );
}<?php
/*
**** TAXONOMY tags-tutoriales ****
*/
function taxonomia_tutoriales_tag() {
register_taxonomy( 'tags-tutoriales',
array (0 => 'tutorial'),
array( 'hierarchical' => false,
'label' => __('Categorías de tutoriales','tutorialeswp'),
'show_ui' => true,
'query_var' => true,
'show_admin_column' => true,
'update_count_callback' => '_update_post_term_count',
'labels' => array (
'name' => _x( 'Etiquetas', 'tutorialeswp' ),
'singular_name' => _x( 'Etiqueta', 'tutorialeswp' ),
'search_items' => __( 'Buscar Etiquetas', 'tutorialeswp' ),
'popular_items' => __( 'Etiquetas Populares', 'tutorialeswp' ),
'all_items' => __( 'Todas las Etiquetas', 'tutorialeswp' ),
'parent_item' => null,
'parent_item_colon' => null,
'edit_item' => __( 'Editar Etiqueta', 'tutorialeswp' ),
'update_item' => __( 'Actualizar Etiqueta', 'tutorialeswp' ),
'add_new_item' => __( 'Añadir Nueva Etiqueta', 'tutorialeswp' ),
'new_item_name' => __( 'Nombre de Nueva Etiqueta', 'tutorialeswp' ),
'separate_items_with_commas' => __( 'Separa las etiquetas con comas', 'tutorialeswp' ),
'add_or_remove_items' => __( 'Añadir o remover etiquetas', 'tutorialeswp' ),
'choose_from_most_used' => __( 'Elige entre las etiquetas más utilizadas', 'tutorialeswp' ),
'not_found' => __( 'Ninguna etiqueta encontrada.', 'tutorialeswp' ),
'menu_name' => __( 'Etiquetas', 'tutorialeswp' ),
)
) );
}- 4Ahora solo nos faltaría cargar estas funciones anteriores, con los hooks o ganchos de WordPress, en este caso con un action hook, añadiendo los siguientes códigos en el archivo functions.php:
<?php
/*
**** Action hooks para los custom post types ****
*/
add_action( 'init', 'register_tutorial_posttype' );
add_action( 'init', 'taxonomia_tutoriales_category');
add_action( 'init', 'taxonomia_tutoriales_tag');Una vez que hayamos añadido estos códigos al archivo functions.php, ya tendremos nuestro custom post type añadido al panel de administración de WordPress:
3
CÓMO CREAR Custom Fields
Los custom fields o campos personalizados, podemos crearlos de varios métodos que veremos a continuación...
MÉTODO 1: mediante los que trae por defecto WordPress
Como vimos anteriormente en el paso 1, WordPress ya tiene por defecto un apartado para crear campos personalizados a cada entrada o página. Solo teníamos que mostrar esa sección oculta en las opciones de pantalla. Una vez que la mostremos, tendremos algo parecido a esto:
En el botón Nuevo, podremos crear un nuevo campo, donde le daremos un nombre y un valor a ese campo y finalmente apretaremos el botón de Añadir un campo personalizado.
Por ejemplo, imagina que quieres dos campos para meter dos links de las referencias web que has usado para publicar ese artículo. Les damos un nombre web1 y web2 a cada campo y escribes en valor el link de la web de referencia que usaste para cada uno. Una vez añadidos, nos aparecerán arriba listados:
Podemos crear los campos que necesitemos para nuestra entrada o página.
MÉTODO 2: mediante código
Vamos a crear los dos campos del método 1 anterior, web1 y web2 para añadir páginas web de referencia a nuestro artículo, pero ahora mediante código. Para crearlos mediante código, lo haremos a través de la función de WordPress add_meta_box() y un action hook, junto a una función de display para mostrar los campos que necesitemos y que será un parámetro de la función add_meta_box(), y por último una función para guardar los metadatos que contengan esos campos y su action hook correspondiente. Cada código lo añadiríamos al archivo functions.php de nuestro theme:
<?php
/*
**** Register meta box(es) ****
*/
function twp_register_meta_boxes() {
add_meta_box( 'mi-meta-box-id', __( 'Mis Custom Fields', 'tutorialeswp' ), 'twp_mi_display_callback', 'post' );
}
add_action( 'add_meta_boxes', 'twp_register_meta_boxes' );<?php
/*
**** Meta box display callback ****
*/
function twp_mi_display_callback( $post ) {
$web1 = get_post_meta( $post->ID, 'web1', true );
$web2 = get_post_meta( $post->ID, 'web2', true );
// Usaremos este nonce field más adelante cuando guardemos en twp_save_meta_box()
wp_nonce_field( 'mi_meta_box_nonce', 'meta_box_nonce' );
echo '<p><label for="web1_label">Web de referencia 1</label> <input type="text" name="web1" id="web1" value="'. $web1 .'" /></p>';
echo '<p><label for="web2_label">Web de referencia 2</label> <input type="text" name="web2" id="web2" value="'. $web2 .'" /></p>';
}<?php
/*
**** Save meta box content ****
*/
function twp_save_meta_box( $post_id ) {
// Comprobamos si es auto guardado
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
// Comprobamos el valor nonce creado en twp_mi_display_callback()
if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'mi_meta_box_nonce' ) ) return;
// Comprobamos si el usuario actual no puede editar el post
if( !current_user_can( 'edit_post' ) ) return;
// Guardamos...
if( isset( $_POST['web1'] ) )
update_post_meta( $post_id, 'web1', $_POST['web1'] );
if( isset( $_POST['web2'] ) )
update_post_meta( $post_id, 'web2', $_POST['web2'] );
}
add_action( 'save_post', 'twp_save_meta_box' );El resultado de todo esto, nos creará la siguiente sección debajo del editor de nuestra entrada o post, para que podamos introducir los links de cada página web de referencia:
Como ves, hacerlo mediante código nos da muchas más posibilidades y personalización de secciones o apartados cuando creemos una entrada en WordPress, que si solo usamos el método 1 anterior expuesto con los campos personalizados por defecto que trae WordPress.
En este ejemplo hemos creado únicamente dos campos de tipo texto, pero podríamos crear los campos que quisiéramos de otros tipos comúnmente usados en formularios: desplegables, checkboxes, textareas, botones de selección,...¿El problema de todo esto cuál es?, pues que obviamente se necesitan conocimientos de los lenguajes HTML y PHP, para ir creando todos estos campos mediante código.
De todas formas, si tienes algunos conocimientos en estos lenguajes y no quisieses andar perdiendo tiempo en crear todos estos códigos, siempre podremos usar un framework o código ya creado opensource, donde únicamente tendríamos que incluirlo en nuestro archivo functions.php y modificarlo a nuestro gusto. Uno muy bueno que yo he usado más de una vez, es el que te comento en el método siguiente.
MÉTODO 3: mediante CMB2
CMB2, es una herramienta de desarrollo para crear Custom Fields y Metaboxes de una manera más fácil que tener que andar creando códigos de manera manual.
Esta herramienta la podremos conseguir de dos maneras:
- Descargando el código de su página web:
https://cmb2.io/
https://github.com/CMB2/CMB2
- Instalando el plugin que tienen en WordPress: https://wordpress.org/plugins/cmb2/
Para que veas el potencial de esta herramienta, puedes echarle un vistazo aquí a la lista de Custom Fields que tendriamos a nuestra disposición. O si lo prefieres verlo en un video de youtube:
4
CÓMO MOSTRAR Custom Fields
Anteriormente hemos visto cómo crear Custom Fields en nuestras publicaciones de WordPress. Como dije, estos Custom Fields o Campos Personalizados, lo que hacen es guardarnos unos metadatos para cada campo. Bien, pues ahora es la hora de usar estos metadatos guardados.
Para mostrarlos, podemos hacerlo de dos maneras incluyendo los siguientes códigos dentro del Loop de WordPress:
- 1Con la función the_meta() de WordPress incluyendo el código:
<?php the_meta(); ?>
Esto lo que hará es mostrarnos los metadatos que hayamos metido en los campos personalizados que hayamos creado. En nuestro ejemplo, si te acuerdas eran solo dos campos para meter el enlace de dos webs de referencia, y al mostrarlos, nos lo mostraría más o menos de esta forma cuando veamos el artículo:
Como ves, queda un poco cutre, sin apenas personalización, ni muestra el enlace a las webs de referencia, sino que únicamente nos lo muestra en versión texto. Esto se debe a que la función the_meta() es una función muy básica. Para hacerlo más personalizado, tendríamos que hacerlo con el punto 2 que te expongo a continuación.
- 2Con la función get_post_meta() de WordPress:
<?php echo get_post_meta($post->ID, 'clave_campo', true); ?>
Un posible código para mostrar los dos campos anteriores de webs de referencia que habíamos creado sería el siguiente:
<h2 style="border-bottom: 1px solid #a2a9b1;">Referencias</h2>
<p>Referencia 1: <a href="<?php echo get_post_meta($post->ID, 'web1', true); ?>" target="_blank"><?php echo get_post_meta($post->ID, 'web1', true); ?></a></p>
<p>Referencia 2: <a href="<?php echo get_post_meta($post->ID, 'web2', true); ?>" target="_blank"><?php echo get_post_meta($post->ID, 'web2', true); ?></a></p>Este código nos mostrará los datos de esta otra manera:
Como ves, ahora ya sí se muestra mucho más personalizado, ya que hemos podido incluirle una cabecera y que muestre los enlaces a cada web de referencia, muy del estilo a por ejemplo como lo muestra la WikiPedia.
5
CREARLOS CON PLUGINS
Si no quieres crear los Custom Post Types y los Custom Fields de manera manual con los métodos anteriormente vistos en este tutorial, siempre nos quedará crearlos mediante plugins.
Los plugins nos evitarán bastante trabajo y tiempo, ya que lo harán de manera automática por nosotros, y únicamente tendremos que aprender a usarlos y configurarlos.
A continuación voy a listar los que son en mi opinión, los mejores plugins para crear Custom Post Types y Custom Fields.
Custom Post Type UI
Custom Post Type UI, es otro maravilloso plugin para crear Custom Post Types. ¡Ojo!, no crea Custom Fields, solo Custom Post Types. Es de los mismos que han desarrollado la herramienta CMB2 que vimos anteriormente en el paso 3. Lo puedes descargar de:
Advanced Custom Fields
Advanced Custom Fields, es de los mejores plugins para crear Custom Fields y más completo que he visto. Aclaro que este plugin solo nos servirá para los Custom Fields, no para crear Custom Post Types. Puedes echarle un vistazo aquí al tutorial que he publicado para aprender a configurarlo y usarlo. El plugin, lo puedes descargar de:
Custom Post Types
Custom Post Fields, es un buen plugin para crear tanto Custom Types como Custom Fields. Suele ser un plugin no muy abandonado por sus desarrolladores y en continua actualización, y si se quiere algo sencillo para crear ambas opciones, nos puede ser suficiente. El plugin, lo puedes descargar de:
Toolset Types
Toolset Types, es el plugin más potente, avanzado y completo que he visto para crear Custom Post Types y Custom Fields. Trae de todo, para que puedas crear Custom Post Types, Custom Fields, Custom Taxonomies, podrás crear tus propios templates y custom archives,... Pero puede que sea algo más complicado de administrar debido a sus múltiples opciones. El plugin, ya únicamente es Premium, y se tendrá que comprar en su web oficial: https://toolset.com
Hola Javier, felicitaciones por el post, muy bueno.
Estoy utilizando Meta Box para mostrar una fecha.
He generado un código pero no logro mostrarlo en el Frontend de la pagina, no se cual es el el problema.
Que código debería usar para mostrar lo siguiente?:
function ideasdi_meta_box( $meta_boxes ) {
$prefix = 'ideasdi-';
$meta_boxes[] = array(
'id' => 'fechas',
'title' => esc_html__( 'Fechas y plazos para participar.', 'metabox-online-generator' ),
'post_types' => array('post' ),
'context' => 'advanced',
'priority' => 'default',
'autosave' => 'true',
'fields' => array(
array(
'id' => $prefix . 'limite',
'type' => 'date',
'name' => esc_html__( 'Cierre de inscripciones', 'metabox-online-generator' ),
),
),
);
return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'ideasdi_meta_box' );
Hola Julian.
Según veo estás usando el plugin Meta Box el cual tiene su propio framework, osea que para mostrar esos metas en tu FrontEnd, necesitarás aplicar la documentación de ese plugin para mostrarlos. Aquí te van diciendo más o menos cómo tienes que hacerlo:
https://docs.metabox.io/displaying-fields/
Un saludo.