Create WhatsApp URL dynamically using ACF Pro from different fields

admin管理员组

文章数量:1125802

WhatsApp has a feature that allows you to start a conversation from a link.

This link will be built like this:

Where 1XXXXXXXXXX must be replaced by the phone number to be spoken to and message%20here by the message that will be sent by default.

Using ACF Pro, I would like to create two fields:

• whatsapp_phone for phone number. This field is universal and will only be populated once on an ACF Pro options page
• whatsapp_message for the message, a different one for each post.

With these two fields, I intend to generate a third hidden and dynamic URL field associated with each post and which will be used in the contact button on the front end: whatsapp_link

This way, the site admin would only need to fill in the number in the site options and the message in the post and I could display the generated link in the front end, for example, using the shortcode [acf field="whatsapp_link" post_id="123" ].

I can create the two fields to be filled in, but I need code that solves two challenges:

1. Message field needs to be URL encoded before use
2. The whatsapp_link field needs to be dynamically populated whenever the post is saved or if the number changes in the theme options

Can anyone help me?

WhatsApp has a feature that allows you to start a conversation from a link.

This link will be built like this:

https://wa.me/1XXXXXXXXXX?text=message%20here

Where 1XXXXXXXXXX must be replaced by the phone number to be spoken to and message%20here by the message that will be sent by default.

Using ACF Pro, I would like to create two fields:

• whatsapp_phone for phone number. This field is universal and will only be populated once on an ACF Pro options page
• whatsapp_message for the message, a different one for each post.

With these two fields, I intend to generate a third hidden and dynamic URL field associated with each post and which will be used in the contact button on the front end: whatsapp_link

This way, the site admin would only need to fill in the number in the site options and the message in the post and I could display the generated link in the front end, for example, using the shortcode [acf field="whatsapp_link" post_id="123" ].

I can create the two fields to be filled in, but I need code that solves two challenges:

1. Message field needs to be URL encoded before use
2. The whatsapp_link field needs to be dynamically populated whenever the post is saved or if the number changes in the theme options

Can anyone help me?

• advanced-custom-fields

Share Improve this question asked Feb 5, 2024 at 11:20 Wiliam Jose KoesterWiliam Jose Koester 333 bronze badges 3

• Unless the acf shortcode supports an 'encoding' parameter I'd guess you'll need to make your own shortcode to assemble the URL instead. – Rup Commented Feb 5, 2024 at 11:26
• For 2 you don't need to save the computed value in a field, you can compute it cheaply when the page is rendered. – Rup Commented Feb 5, 2024 at 11:27
• I would like to store the value in a field to ensure compatibility with all features of the theme which is very well integrated with ACF. This way I am sure that the theme will be able to use the data as if it were a simple ACF field. Of course, in other usage situations, this would probably not be necessary. – Wiliam Jose Koester Commented Feb 5, 2024 at 11:51

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

You can used ACF Pro and adding some custom code to your theme's functions.php file.

// Add ACF fields
if( function_exists('acf_field_group') ):

acf_field_group(array(
    'key' => 'group_60aaf3a3f3d4a',
    'title' => 'WhatsApp Fields',
    'fields' => array(
        array(
            'key' => 'field_60aaf3aaf3d4b',
            'label' => 'WhatsApp Phone',
            'name' => 'whatsapp_phone',
            'type' => 'text',
            'instructions' => 'Enter the WhatsApp phone number',
            'required' => 1,
            'default_value' => '',
        ),
        array(
            'key' => 'field_60aaf3b9f3d4c',
            'label' => 'WhatsApp Message',
            'name' => 'whatsapp_message',
            'type' => 'text',
            'instructions' => 'Enter the default WhatsApp message',
            'required' => 1,
            'default_value' => '',
        ),
        array(
            'key' => 'field_60aaf3d7f3d4d',
            'label' => 'WhatsApp Link',
            'name' => 'whatsapp_link',
            'type' => 'text',
            'instructions' => 'This field will be dynamically populated',
            'required' => 0,
            'default_value' => '',
            'readonly' => 1,
            'hidden' => 1,
        ),
    ),
    'location' => array(
        array(
            array(
                'param' => 'post_type',
                'operator' => '==',
                'value' => 'post', // Change this to your post type to your post_type_slug
            ),
        ),
    ),
));

endif;

// Function to dynamically generate WhatsApp link
function generate_whatsapp_link($post_id) {
    // Get phone number from theme options
    $whatsapp_phone = get_field('whatsapp_phone', 'option');

    // Get message from post
    $whatsapp_message = get_field('whatsapp_message', $post_id);

    // Encode message
    $encoded_message = urlencode($whatsapp_message);

    // Generate WhatsApp link
    $whatsapp_link = "https://wa.me/{$whatsapp_phone}?text={$encoded_message}";

    // Update the whatsapp_link field value
    update_field('whatsapp_link', $whatsapp_link, $post_id);
}

// Hook to update WhatsApp link when post is saved
add_action('acf/save_post', 'generate_whatsapp_link', 20);

// Shortcode to display WhatsApp link in the frontend
function whatsapp_link_shortcode($atts) {
    $post_id = isset($atts['post_id']) ? intval($atts['post_id']) : get_the_ID();
    return get_field('whatsapp_link', $post_id);
}

add_shortcode('acf_whatsapp_link', 'whatsapp_link_shortcode');

本文标签：