Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
entradilla

Cómo agregar un campo personalizado debajo del título de una entrada

En ocasiones puede resultar útil agregar un campo personalizado adicional justo debajo del título de una entrada o página, por cuestiones de usabilidad y experiencia de usuario.

Por ejemplo, si tenemos entradas de tipo noticias, es interesante agregar un campo adicional a modo de «entradilla» o «subtítulo«, para poder definir un texto concreto que luego en el front-end destacaremos con clases estilos de alguna manera para diferenciarlo del cuerpo del contenido.

Lo diferencio del extracto de WordPress, ya que de esta manera podemos usar el extracto para lo que es, es decir, en listados de noticias mostraremos el extracto con su botón leer más correspondiente, pero a la entradilla la daremos un uso diferente, será un breve resumen destacado del contenido.

Volviendo al back-end, como comentábamos anteriormente, por cuestiones de usabilidad y experiencia de usuario, es más fácil, intuitivo y cómodo encontrarnos con éste campo personalizado debajo del campo título, justo por encima del editor de texto.

entradilla

Esto lo conseguimos añadiendo el html correspondiente en el action edit_form_after_title. Creamos una función en nuestro functions.php con un condicional para mostrar ese campo sólo en el caso de que estemos editando entradas (post). En un primer lugar obtendremos el valor del campo personalizado o custom field si lo tienen, y a continuación pintamos el html:

<?php function add_custom_subtitle() { global $post; if ($post->post_type == "post") { //si existen se recuperan los valores de los metadatos $subtitle_post = get_post_meta( $post->ID, 'subtitle_post', true ); // Se añade un campo nonce para probarlo más adelante cuando validemos wp_nonce_field( 'subtitle_metabox', 'subtitle_metabox_nonce' );?> <textarea id="subtitle_post" name="subtitle_post" rows="5" style="width: 100%;" placeholder="Introduce una entradilla aquí"><?php echo sanitize_text_field($subtitle_post);?></textarea> <?php } } add_action( 'edit_form_after_title', 'add_custom_subtitle');?>

El siguiente paso es guardar la información del campo personalizado cuando actualicemos nuestra entrada. Para ello crearemos a continuación en nuestro functions.php la siguiente función:

<?php function my_custom_subtitle_save_data($post_id) { // Comprobamos si se ha definido el nonce. if ( ! isset( $_POST['subtitle_metabox_nonce'] ) ) { return $post_id; } $nonce = $_POST['subtitle_metabox_nonce']; // Verificamos que el nonce es válido. if ( !wp_verify_nonce( $nonce, 'subtitle_metabox' ) ) { return $post_id; } // Si es un autoguardado nuestro formulario no se enviará, ya que aún no queremos hacer nada. if ( defined( 'DOING_AUTOSAVE') && DOING_AUTOSAVE ) { return $post_id; } // Comprobamos los permisos de usuario. if ( $_POST['post_type'] == 'page' ) { if ( !current_user_can( 'edit_page', $post_id ) ) return $post_id; } else { if ( !current_user_can( 'edit_post', $post_id ) ) return $post_id; } // Vale, ya es seguro que guardemos los datos. // Si existen entradas antiguas las recuperamos $old_subtitle_post = get_post_meta( $post_id, 'subtitle_post', true ); // Saneamos lo introducido por el usuario. $subtitle_post = sanitize_text_field( $_POST['subtitle_post'] ); // Actualizamos el campo meta en la base de datos. update_post_meta( $post_id, 'subtitle_post', $subtitle_post, $old_subtitle_post ); } add_action( 'save_post', 'my_custom_subtitle_save_data' );?>

Por último en la plantilla donde quieras hacer uso del campo personalizado haz la llamada a través de la función get_post_meta():

<?php get_post_meta( get_the_ID(), 'subtitle_post', true ); ?>

Puede que también te interese

Porqué y cómo cambiar el permalink de Autor en WordPress
Porqué y cómo cambiar el permalink de Autor en WordPress
WordPress posee una estructura de enlaces amigables optimizada para el SEO. De este modo nos permite tener enlaces del tipo www.misitio.com/quienes-somos/ en lugar de www.misitio.com/?id=7.…
Carga condicional de JS y CSS para mejorar el rendimiento y la velocidad de carga
Carga condicional de JS y CSS para mejorar el rendimiento y la velocidad de carga
En esta entrada vamos a ver una técnica de WPO muy importante dentro de la estrategia de optimización y mejora de rendimiento y velocidad de…
Cómo crear una puerta trasera para entrar en WordPress
Cómo crear una puerta trasera para entrar en WordPress
En esta entrada vamos a ver cómo crear una puerta trasera o backdoor en WordPress. Reitero, vamos a ver el cómo, el porqué hacerlo es…
Creando un plugin para WordPress parte 3: Escribiendo el plugin
Creando un plugin para WordPress parte 3: Escribiendo el plugin
1. Creando un plugin para WordPress: Planificación y planteamiento 2. Creando un plugin para WordPress: Estilo del Código 3. Creando un plugin para WordPress: Escribiendo…