crear formularios front-end con advanced custom fields

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

Upload: others

Post on 16-Oct-2021

6 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Crear formularios front-end con Advanced Custom Fields

Crear formularios front-end con Advanced Custom Fields

esther solà

Page 2: Crear formularios front-end con Advanced Custom Fields

Campos personalizados o custom fields nativos de WordPress

Page 3: Crear formularios front-end con Advanced Custom Fields

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

Page 4: Crear formularios front-end con Advanced Custom Fields

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...

Page 5: Crear formularios front-end con Advanced Custom Fields

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….

Page 6: Crear formularios front-end con Advanced Custom Fields

Formularios en ACF

acf_form_head();

Añade la funcionalidad necesaria al formulario: estilos, scripts, validación…

Se añade antes de get_header();

Page 7: Crear formularios front-end con Advanced Custom Fields

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

Page 8: Crear formularios front-end con Advanced Custom Fields

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.

Page 9: Crear formularios front-end con Advanced Custom Fields

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.

Page 10: Crear formularios front-end con Advanced Custom Fields
Page 11: Crear formularios front-end con Advanced Custom Fields
Page 12: Crear formularios front-end con Advanced Custom Fields

Formulario para nuevos registros

<?php

acf_form_head();

acf_form(array('post_id' => 'new_post','new_post' => array(

'post_type' => 'libro', 'post_status' => 'publish'

), )); ?>

Page 13: Crear formularios front-end con Advanced Custom Fields

Formularios en ACF

Page 14: Crear formularios front-end con Advanced Custom Fields

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'

Page 15: Crear formularios front-end con Advanced Custom Fields

Formularios en ACF

Page 16: Crear formularios front-end con Advanced Custom Fields

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' => 'libro', ),

));

?>

Page 17: Crear formularios front-end con Advanced Custom Fields

¿Cómo saber el nombre de cada campo?

Page 18: Crear formularios front-end con Advanced Custom Fields

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' )); ?>

Page 19: Crear formularios front-end con Advanced Custom Fields

Filtros & Acciones

acf/pre_submit_formFiltro que se ejecuta justo después que se envíe el formulario, y antes de que se guarden los datos.

acf/pre_save_postSe ejecuta justo después del filtro pre_submit_form y antes de guardar los datos.

acf/save_postEsta acción se ejecuta al guardar los datos del formulario.

acf/submit_formSe ejecuta justo después de guardar los datos.

Page 20: Crear formularios front-end con Advanced Custom Fields

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) !== 'clinica' ) {return;

} if( is_admin() ) {

return;}

wp_mail( '[email protected]', 'asunto', 'mensaje', $cabeceras

);}

?>

Page 21: Crear formularios front-end con Advanced Custom Fields

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

Page 22: Crear formularios front-end con Advanced Custom Fields

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');

Page 23: Crear formularios front-end con Advanced Custom Fields

add_filter('acf/prepare_field/name=_post_title', 'my_acf_prepare_field');

function my_acf_prepare_field( $field ) {

if ( is_page_template('editar-libro.php') ) { $field['label'] = "Título de la reseña"; } if ( $field ) { return $field; } else { exit; }}

?>

Page 24: Crear formularios front-end con Advanced Custom Fields

<?phpfunction 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

Page 25: Crear formularios front-end con Advanced Custom Fields

Resumiendo

Custom Post Types + Custom Fields + ACF forms

= Contenido generado por el usuario= Facilidad de uso= Muy potente para integrar filtros y acciones personalizadas.

Page 26: Crear formularios front-end con Advanced Custom Fields

Soy desarrolladora web especializada en WordPress, Genesis Framework y WooCommerce

Gracias.www.esthersola.com · www.tranquilidadwp.com · www.zonadpw.com

@esther_sola_