Ponencia en la WordCamp España Online 2020 sobre crear formularios en front-end con Advanced Custom Fields

1. Crear formularios
front-end con
Advanced Custom
Fields
esther solà

2. Campos personalizados o custom fields
nativos de WordPress

3. Advanced Custom Fields permite añadir
multitud de campos personalizados
avanzados

4. Tipos de campo:
● De contenido:
texto, número, área de texto, url, web, imagen, archivo….
● De selección:
select, radio, checkbox..
● De relación:
enlace a página, objeto post, relación, taxonomía...
● De layout:
mensaje, pestaña, acordeón...

5. Asociados a:
● Entrada, tipo de entrada,
plantilla, estado, formato…
● Página, tipo o plantilla de página
● Categorías o etiqueta
● Usuarios, Widgets, Menús,
Adjuntos….

6. Custom Fields + Custom Post Type
La combinación ideal para crear sitios en
WordPress avanzados, 100% adaptados a
la arquitectura de la información necesaria.

7. Formularios en ACF
acf_form_head();
Añade la funcionalidad necesaria al formulario: estilos, scripts,
validación…
Se añade antes de get_header();

8. acf_form();
Crea un formulario en el front-end de la web, para añadir o editar registros.
acf_register_form();
Registra un formulario que puede utilizarse en distintos lugares de la web

9. Ejemplo: reseñas de libros
● Tipo de entrada personalizada: reseñas
● Taxonomía personalizada: género
● Campos personalizados para datos de la reseña, del autor y del
libro.

12. Formulario para nuevos registros
<?php
acf_form_head();
acf_form(array(
'post_id' => 'new_post',
'new_post' => array(
'post_type' => 'review',
'post_status' => 'publish'
),
)); ?>

13. Formularios en ACF

14. acf_form( $settings);
'post_id'
'new_post'
'field_groups'
'fields'
'post_title'
'post_content'
'form'
'form_attributes'
'return'
'html_before_fields'
'html_after_fields'
'submit_value'
'updated_message'
'label_placement'
'instruction_placement'
'field_el'
'uploader'
'honeypot'
'html_updated_message'
'html_submit_button'
'html_submit_spinner'
'kses'

15. Formularios en ACF

16. acf_form(): Mostrar sólo algunos campos
<?php
acf_form(array(
'post_id' => 'new_post',
'post_title' => true,
'fields' => array( 'field_5ea3b4f2575c3','field_5ea3b500575c4'),
'new_post' => array(
'post_type' => 'review',
),
));
?>

17. ¿Cómo saber el nombre de cada campo?

18. Formulario para editar registros
<?php
acf_form_head();
acf_form(array(
'post_id' => $postid,
'post_title' => false,
'post_content' => false,
'updated_message' => 'Se ha actualizado
correctamente',
'submit_value' => 'Guardar Cambios'
));
?>

19. Filtros & Acciones
acf/pre_submit_form
Filtro que se ejecuta justo después que se envíe el formulario, y antes de que se guarden los datos.
acf/pre_save_post
Se ejecuta justo después del filtro pre_submit_form y antes de guardar los datos.
acf/save_post
Esta acción se ejecuta al guardar los datos del formulario.
acf/submit_form
Se ejecuta justo después de guardar los datos.

20. Enviar un email al crear un nuevo registro
add_action('acf/save_post', 'my_save_post');
function my_save_post( $post_id ) {
if( get_post_type($post_id) !== 'review' ) {
return;
}
if( is_admin() ) {
return;
}
wp_mail( 'destinatario@destino.com', 'asunto', 'mensaje', $cabeceras
);
}

21. Otros filtros ACF
acf/prepare_field
acf/validate_value
acf/update_field
…. todos los filtros en https://www.advancedcustomfields.com/resources/#filters
acf/update_value
acf/load_field
acf/load_value

22. Modificar etiqueta del título o contenido
add_filter('acf/prepare_field/name=_post_title', 'my_acf_prepare_field');
add_filter('acf/prepare_field/name=_post_content', 'my_acf_prepare_field');

23. add_filter('acf/prepare_field/name=_post_title', 'my_acf_prepare_field');
function my_acf_prepare_field( $field ) {
if ( is_page_template('editar-review.php') ) {
$field['label'] = "Título de la reseña";
}
if ( $field ) {
return $field;
} else {
exit;
}
}

24. <?php
function my_acf_update_value( $value, $post_id, $field ) {
if( is_string($value) ) {
$value = str_replace( 'Old Company Name', 'New Company Name',
$value );
}
return $value;
}
add_filter('acf/update_value', 'my_acf_update_value', 10, 3);
?>
Reemplazar texto o caracter

25. Resumiendo
Custom Post Types + Custom Fields + ACF forms
= Contenido generado por el usuario
= Facilidad de uso
= Muy potente para integrar filtros y acciones personalizadas.

26. Soy desarrolladora web
especializada en WordPress,
Genesis Framework y
WooCommerce
Gracias.
www.esthersola.com · www.tranquilidadwp.com · www.zonadpw.com
@esther_sola_