¿Le gustaría crear etiquetas inteligentes personalizadas basadas en campos generados con ACF (Advanced Custom Fields)? En este tutorial, le guiaremos a través del proceso de creación de estas etiquetas inteligentes especializadas utilizando un fragmento de código conciso.
Para ilustrar este tutorial, vamos a considerar un sitio WordPress que utiliza entradas como artículos de venta. Vamos a diseñar un único formulario que se mostrará en cada página del post, integrándolo perfectamente en la plantilla PHP.
Sin embargo, para que los autores puedan poner a la venta sus artículos, deberán introducir los precios correspondientes. Aprovechando el plugin ACF, hemos incorporado un campo Precio en la configuración de la entrada.
Este campo Precio se rellenará previamente en el formulario y se actualizará dinámicamente en función de la entrada que se esté viendo. Como el formulario se mantiene constante en todas las entradas, pero el precio varía, utilizaremos una etiqueta inteligente para este campo a fin de garantizar su adaptabilidad con la actualización de la información de cada entrada.
Creación del campo personalizado con ACF
En primer lugar, empezaremos creando nuestro campo personalizado con el plugin Advanced Custom Fields.
Siguiendo la documentación de ACF, hemos añadido un nuevo campo a nuestras entradas llamado portfolio_price.
Este tutorial asume que usted ya ha añadido su(s) campo(s) a su entrada. Si necesitas ayuda para añadir campos a las entradas de WordPress utilizando el plugin Advanced Custom Fields, consulta su documentación.
Creación de una etiqueta inteligente a partir del campo ACF
Normalmente crearíamos primero el formulario. Sin embargo, ya que sabemos que queremos utilizar esta nueva etiqueta inteligente dentro de nuestro constructor de formularios, vamos a añadir el fragmento antes de crear el formulario.
Si necesita ayuda para añadir fragmentos a su sitio, consulte este tutorial.
/**
* Register the Smart Tag so it will be available to select in the form builder.
*
* @link https://wpforms.com/developers/how-to-create-a-smart-tag-from-an-acf-field/
*/
function wpf_dev_register_smarttag( $tags ) {
// Key is the tag, item is the tag name.
$tags[ 'portfolio_price' ] = 'Portfolio Price';
return $tags;
}
add_filter( 'wpforms_smart_tags', 'wpf_dev_register_smarttag' );
/**
* Process the Smart Tag.
*
* @link https://wpforms.com/developers/how-to-create-a-smart-tag-from-an-acf-field/
*/
function wpf_dev_process_smarttag( $content, $tag ) {
// Only run if it is our desired tag.
if ( 'portfolio_price' === $tag ) {
//Get the field name from ACF
$my_acf_field = get_field( 'portfolio_price', get_the_ID() );
// Replace the tag with our link.
$content = str_replace( '{portfolio_price}', $my_acf_field, $content );
}
return $content;
}
add_filter( 'wpforms_smart_tag_process', 'wpf_dev_process_smarttag', 10, 2 );
Desglosemos estas dos funciones.
La primera función está creando una etiqueta inteligente vacía con el nombre 'Precio de la cartera'. Todavía no se asignará nada a esta etiqueta, sólo la estamos creando con esta función.
La siguiente función es donde definiremos la etiqueta inteligente y de dónde debe extraer la información.
Con la línea $my_acf_field = get_field( 'portfolio_price', get_the_ID() ); le estamos diciendo al código que necesita ir a Advance Custom Fields y obtener el valor de este campo. Tendrás que introducir el nombre del campo aquí. Para nuestro tutorial, hemos llamado a nuestro campo portfolio_price.
Si necesita ayuda para encontrar el nombre de su campo, simplemente edite el campo que creó en ACF y busque la etiqueta Nombre del campo.
Creación del formulario
Hemos creado nuestro formulario para que tenga los campos Nombre, Correo electrónico, Título del producto (Texto de una línea), Precio del producto (Texto de una línea) y Comentarios (Texto de párrafo).
Si necesita ayuda para crear un formulario, consulte este tutorial.
Añadir las etiquetas inteligentes
Para nuestro formulario, vamos a traer el título del producto, que es el título del post. Podemos utilizar un built-in Smart Tag que WPForms ya proporciona para esto.
Una vez que haya añadido el campo Texto de una línea para el Título del producto, haga clic en la pestaña Avanzado. En el Valor predeterminado del campo, haga clic en el enlace Mostrar etiquetas inteligentes y seleccione Título de la publicación/página incrustado para que el título de la publicación se rellene automáticamente en este campo de formulario.
A continuación, repetiremos este paso de nuevo para el campo Precio del producto.
En la pestaña Avanzado del campo Precio del producto, seleccione la etiqueta inteligente {portfolio_price} de entre las etiquetas inteligentes disponibles.
Añadir el shortcode WPForms a una plantilla PHP
Si necesita ayuda para añadir un shortcode a una plantilla PHP, por favor revise este tutorial.
Para este tutorial, hemos añadido nuestro shortcode a la parte inferior de la plantilla de página de entrada única.
Ahora puede ver que a medida que cambien sus entradas, también lo harán el Precio del producto y el Título del producto de su formulario.
¿Le gustaría crear más etiquetas inteligentes personalizadas? Eche un vistazo a nuestro tutorial sobre Cómo crear una etiqueta inteligente personalizada.