Añadir un campo personalizado a una entrada de WordPress con functions.php

Dificultad Alta

Para agregar un campo personalizado a una entrada de WordPress a través del archivo functions.php, puedes seguir los siguientes pasos:

1. Abre el archivo functions.php de tu tema de WordPress en un editor de código. Puedes encontrar este archivo en la carpeta wp-content/themes/tu-tema/functions.php.
2. Agrega el siguiente código en el archivo functions.php para registrar el campo personalizado:

function agregar_campo_personalizado() {
    add_meta_box(
        'nombre_del_campo', // Nombre del campo personalizado
        'Nombre descriptivo del campo', // Título del campo personalizado
        'mostrar_campo_personalizado', // Función que mostrará el contenido del campo personalizado
        'post', // Tipo de publicación al que se agregará el campo personalizado
        'normal', // Ubicación del campo personalizado en el editor de publicaciones
        'high' // Prioridad del campo personalizado en relación con otros campos personalizados
    );
}
add_action('add_meta_boxes', 'agregar_campo_personalizado');

3. Después, agrega la siguiente función para mostrar el contenido del campo personalizado:

function mostrar_campo_personalizado($post) {
    $valor_del_campo = get_post_meta($post->ID, 'nombre_del_campo', true); // Obtiene el valor actual del campo personalizado
    ?>
    <label for="nombre_del_campo">Nombre del campo personalizado:</label>
    <input type="text" id="nombre_del_campo" name="nombre_del_campo" value="<?php echo esc_attr($valor_del_campo); ?>">
    <?php
}

4. Finalmente, agrega la siguiente función para guardar el valor del campo personalizado cuando se guarda la entrada:

function guardar_campo_personalizado($post_id) {
    if (isset($_POST['nombre_del_campo'])) {
        update_post_meta($post_id, 'nombre_del_campo', sanitize_text_field($_POST['nombre_del_campo']));
    }
}
add_action('save_post', 'guardar_campo_personalizado');

Reemplaza 'nombre_del_campo' con el nombre que deseas darle a tu campo personalizado.

Una vez que hayas agregado el código anterior al archivo functions.php y hayas guardado los cambios, verás el campo personalizado en la pantalla de edición de la entrada en WordPress. Puedes usar el valor del campo personalizado en tu plantilla de WordPress para mostrar información adicional o personalizada en tu sitio web.

¿Cómo incluir un campo personalizado a WordPress que sea un input de tipo select?

En nuestro caso, hemos utilizado esta función para incluir un valor que denominamos como «Nivel de dificultad» para mostrar en los artículos de Desarrollo Web cómo es de difícil el caso que os exponemos. En este caso hemos puesto varias opciones: «Post Informativo», «Baja», «Media», «Alta» y «Experto». Para ello debemos modificar la función mostrar_campo_personalizado por la que os exponemos a continuación:

function mostrar_campo_personalizado($post) {
    $valor_del_campo = get_post_meta($post->ID, 'dificultad', true); // Obtiene el valor actual del campo personalizado
    ?>
    <label for="dificultad">Nivel de dificultad:</label>
    <select name="dificultad" id="dificultad">
    	<option value="baja" <?php selected($valor_del_campo, '0'); ?>>Post Informativo</option>
        <option value="baja" <?php selected($valor_del_campo, 'baja'); ?>>Baja</option>
        <option value="media" <?php selected($valor_del_campo, 'media'); ?>>Media</option>
        <option value="alta" <?php selected($valor_del_campo, 'alta'); ?>>Alta</option>
        <option value="experto" <?php selected($valor_del_campo, 'experto'); ?>>Experto</option>
    </select>
    <?php
}

¿Cómo muestro el campo personalizado en el cuerpo de la entrada de Wordress?

Siguiendo con la edición de nuestro fichero functions.php incluiremos la siguiente función si queremos mostrar el campo antes de comenzar el cuerpo de texto del artículo:

function mostrar_campo_personalizado_en_blog($content) {
    global $post;
    if (is_single() && $post->post_type == 'post') {
        $valor_del_campo = get_post_meta($post->ID, 'dificultad', true);
        if($valor_del_campo!="post" && $valor_del_campo!=""){
        	$campo_personalizado_html = '<p><strong>Dificultad:</strong> ' . ucfirst($valor_del_campo) . '</p>';
        }else{
        	$campo_personalizado_html = '';
        }

        $content = $campo_personalizado_html . $content;
    }
    return $content;
}
add_filter('the_content', 'mostrar_campo_personalizado_en_blog');

Recuerda que nosotros estamos trabajando con el campo dificultad y que tú deberás cambiarlo por tu campo personalizado. Nosotros en concreto NO queremos que los artículos normales tengan visible este campo, por lo que utilizamos un «if» para comprobar que el valor del campo no sea ni «post» ni esté vacío. Puedes eliminar simplemente este condicional o editarlo a tu conveniencia.

Si lo que deseas es que el campo personalizado quede debajo del contenido, puedes utilizar la siguiente función donde no existe el condicional, tenlo en cuenta:

function agregar_informacion_a_listado_noticias($content) {
    global $post;
    if (is_home() && $post->post_type == 'post') {
        $valor_del_campo = get_post_meta($post->ID, 'dificultad', true);
        if ($valor_del_campo) {
            $content .= '<br><strong>Dificultad:</strong> ' . $valor_del_campo;
        }
    }
    return $content;
}
add_filter('the_date', 'agregar_informacion_a_listado_noticias');

Nosotros hemos empleado la primera función para nuestro desarrollo en WordPress.

¿Cómo muestro el campo personalizado en el listado de noticias del blog de WordPress?

Bueno, aquí tenemos un paso un poco más complicado, sobre todo si utilizas un template para WordPress que sea más avanzado que tenga funciones propias. Como hemos dicho unas cuantas veces, necesitarás un tema hijo de WordPress activo para realizar con seguridad estos cambios y solapar unas funciones con otras. Con un child theme es como podemos hacer cambios sobre la estructura y que todas nuestras ediciones se mantengan intactas al realizar una actualización del template.

En la actual página web utilizamos el tema «Blade» de WordPress. Para poder incluir esta información en la minificha de cada artículo en los listados de categorías y en la página de inicio, debemos modificar las funciones nativas que muestran esta información, ya que los hooks básicos y originales no funcionan y no nos muestran la información. En nuestro caso hemos localizado la función donde la información relacionada con el artículo es cargada:

if ( !function_exists('blade_grve_print_post_meta_top') ) {
    function blade_grve_print_post_meta_top() {

        $blog_style = blade_grve_option( 'blog_style', 'large' );
        $blog_item_style = blade_grve_option( 'blog_item_style', '1' );
        if ( '1' == $blog_item_style || ( 'masonry' != $blog_style && 'grid' != $blog_style ) ) {
?>
            <ul class="grve-post-meta grve-small-text grve-list-divider">
                <?php blade_grve_print_post_author_by( 'list'); ?>
                <?php blade_grve_print_post_date( 'list' ); ?>
                <?php blade_grve_print_post_dificultad( 'list'); ?>
                <?php blade_grve_print_post_loop_comments(); ?>
                <?php blade_grve_print_like_counter_overview(); ?>
            </ul>
<?php
        }
    }
}


if ( !function_exists('blade_grve_print_post_dificultad') ) {
    function blade_grve_print_post_dificultad( $mode = '') {
        $valor_del_campo = get_post_meta(get_the_ID(), 'dificultad', true);

  		if($valor_del_campo!="" && $valor_del_campo!="post"){
            if( 'list' == $mode ) {
                echo '<li class="grve-post-author">';
            } else {
                echo '<div class="grve-post-author">';
            }
?>
                <strong>Dificultad:</strong> <?php echo ucfirst($valor_del_campo); ?>
<?php
            if( 'list' == $mode ) {
                echo '</li>';
            } else {
                echo '</div>';
            }
  	  	}
    }
}

Recuerda que nosotros hemos utilizado condicionales para que no se muestre esta «etiqueta» en los artículos marcados como «Post Informativo» o que este campo se encuentra vacío (para los anteriores a esta modificación). El resultado lo podéis comprobar navegando a través de nuestro blog 😉