Publicar en WordPress desde un formulario externo con Advanced Custom Fields

En WordPress es posible publicar contenidos sin necesidad de entrar en el panel admin, por ejemplo, desde una página donde haya un formulario desde el que redactar el contenido.

Para ellos nos vamos a valer del plugin «Advanced Custom Fields«, con el que no solo podremos guardar el contenido básico (título, contenido…), si no que podremos añadir otros campos personalizados que también serán guardados por el formulario.

Artículo disponible en vídeo

Con Advanced Custom Fields instalado vamos a crear un template o página que será la que muestre el formulario.

Para ello recomiendo hacerlo sobre un child-theme, para no perder ningún cambio en caso de que el theme principal se actualice.

Una vez creado el child-theme creamos un nuevo archivo page-nuevo-post.php con el siguiente código:

<?php
    acf_form_head();
    get_header();
?>

<main id="site-content" role="main">
<div id="content">

    <?php
        acf_form(array(
            'post_id' => 'new_post',
            'post_title' => true,
            'post_content' => true,
        ));
    ?>

</div>
</main>

<?php get_footer(); ?>

La primera functión acf_form_head(), llama a los scripts necesarios de Advanced Custom Fields que deben cargarse en la cabecera de la página. Esta función no admite ningún parámetro, solo es necesario declararla.

La siguiente función acf_form(), si admite varios parámetros. Ahora mismo ha sido declarada de la forma más básica, con los parámetros mínimos, donde en post_id indicamos que será un new_post y vamos a guardar tanto el post_title como el post_content.

Al entrar en la página Nuevo Post veremos algo así: (dependiendo de vuestro theme):

Donde lo único que podemos hacer es indicar un título y redactar el contenido del post.

Al pulsar «Actualizar», el post será guardado de forma predeterminada como borrador.

Configurar el tipo de post y su estado

Con el siguiente parámetro podemos indicar el tipo de post que estamos guardando y su estado:

'new_post' => array(
                'post_type' => 'post',
                'post_status' => 'publish'
            ),

La función completa quedaría:

<?php
        acf_form(array(
            'post_id' => 'new_post',
            'post_title' => true,
            'post_content' => true,
            'new_post' => array(
                'post_type' => 'post',
                'post_status' => 'publish'
            ),
        ));
?>

Donde en post_type podemos indicar el tipo de post o CPT (custom post type): post, page, product, project… Y en post status, el estado en que se guardará:

• publish: Publicado.
• pending: Pendiente de revisión.
• draft: Borrador.

Personalizar el texto del botón de guardado

Con otro parámetro podemos personalizar el botón de publicar, ya que «Actualizar» no es lo más apropiado si lo que estamos es guardando un nuevo post:

'submit_value' => 'Publicar'

Mensaje de confirmación de guardado

Por defecto, al guardar el post se recargará la página con el formulario vacío, algo que puede despistar a nuestros usuarios pensando que hayan podido hacer algo mal. Podemos insertar un mensaje de confirmación con el parámetro:

'updated_message' => __("¡Tu post se ha publicado!", 'acf')

De este modo, tras guardar una publicación y recargar la página aparecerá el mensaje:

Redirigir a una página tras guardar el post

Si lo preferimos, podemos redirigirle una página de agradecimiento, similar a la página de «gracias» de un formulario de contacto.

'return' => home_url('gracias-por-tu-articulo')

Donde home_url() es una función que devuelve nuestro dominio actual. Solo tenemos que especificar en su interior el slug de la página destino.

Insertar custom fields en el formulario

Si queremos añadir información adicional a las publicaciones a través de campos personalizados (custom fields), estos también pueden ser llamados en el formulario.

Para ello, en primer lugar crearemos un nuevo grupo de campos con Advanced Custom Fields al que llamaremos «Info Post«.

Dentro crearemos 3 campos:

• Campo de texto: Información extra.
• Campo numérico: Año.
• Campo de imagen: Imagen destacada.

En las reglas de ubicación vamos a indicar que estos campos aparezcan solamente en los posts de tipo entrada. Aunque esto solo afectará al «backend» de WordPress, veremos un poco más adelante cómo mostrarlos en el formulario de ACF.

Para el campo de imagen vamos a especificar que nos devuelva solamente el ID de la imagen:

Para que los campos personalizados se muestren en el formulario (frontend), solo tenemos que añadir el siguiente parámetro:

'field_groups' => ['clave_grupo']

Donde la clave del grupo podemos encontrarla en nuestra lista de grupos de campos:

De forma que nuestra función general quedaría:

<?php
        acf_form(array(
            'post_id' => 'new_post',
            'post_title' => true,
            'post_content' => true,
            'new_post' => array(
                'post_type' => 'post',
                'post_status' => 'publish'
            ),
            'submit_value' => 'Publicar',
            'updated_message' => __("¡Tu post se ha publicado!", 'acf'),
            'field_groups' => ['group_60ffb5cfa3984']
        ));
?>

Ahora al acceder a la página «Nuevo Post», veremos nuestros nuevos campos:

Usar un campo personalizado para establecer la imagen destacada del post

acf_form() no dispone de parámetros para establecer la imagen destacada del post, algo que no se comprende muy bien, pues bastaría con asociar cualquier ID de imagen de nuestra biblioteca de medios con el _thumbnail_id del post.

Para ello tenemos que valernos de un pequeño truco, el cual consistirá en usar un campo personalizado para establecer la imagen destacada del post. Para ello ello hemos creado el campo personalizado «Imagen destacada».

Pues bien, solo tenemos que pegar este snippet en el archivo de funciones (functions.php) de nuestro child-theme:

function acf_set_featured_image( $value, $post_id, $field  ){
    
    if($value != ''){
	    //Add the value which is the image ID to the _thumbnail_id meta data for the current post
	    add_post_meta($post_id, '_thumbnail_id', $value);
    }
 
    return $value;
}

// acf/update_value/name={$field_name} - filter for a specific field based on it's name
add_filter('acf/update_value/name=campo_de_imagen', 'acf_set_featured_image', 10, 3);

Este snippet lo he extraído del foro de Advanced Custom Fields gracias al usuario Jonathan.

Básicamente lo que hace es tomar nuestro campo personalizado de imagen, el cual tenemos que especificar su value en el hook, y establecerlo como imagen destacada del post.

add_filter('acf/update_value/name=imagen_destacada', 'acf_set_featured_image', 10, 3);

Y al guardar o actualizar el post se establecerá como imagen destacada de este.

Y hasta aquí el post de hoy, podéis seguir practicando y aprendiendo nuevos parámetros y ajustes de acf_form() en:

DOCUMENTACIÓN ADVANCED CUSTOM FIELDS: acf_form()

Ahh, y todo esto lo hemos hecho usando la versión FREE de ACV. Nos vemos en el siguiente post 😉