Como Carregar Conteúdo Dinamicamente com Ajax Usando Shortcodes e Popups no WordPress e Elementor Pro

Código do plugin:

<?php
/**
 * Plugin Name: Ajax Content Shortcode
 * Description: Plugin para carregar conteúdo via Ajax usando um shortcode com ID ou via popup.
 * Version: 1.0
 * Author: Ivon Filho
 */

// Enqueue o script com jQuery e passe a URL do Ajax
function acs_enqueue_scripts() {
    wp_enqueue_script('jquery');
    add_action('wp_footer', 'acs_inline_script');
}
add_action('wp_enqueue_scripts', 'acs_enqueue_scripts');

function acs_inline_script() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        function loadContent(postID, target) {
            $.ajax({
                url: "<?php echo admin_url('admin-ajax.php'); ?>",
                type: 'POST',
                data: {
                    action: 'acs_process_acf_content',
                    post_id: postID
                },
                success: function(data) {
                    $(target).html(data);
                },
                error: function(error) {
                    console.error("Erro ao fazer solicitação: ", error);
                }
            });
        }

        // Carregar conteúdo em um popup ao clicar no link
        $('a[href^="#"], a[id]').on('click', function(e) {
            e.preventDefault(); // Impede a ação padrão do link

            var postID = $(this).attr('id');
            if (!postID) {
                postID = $(this).attr('href').substring(1);
            }

            // Define o alvo onde o conteúdo será inserido
            var target = '.conteudo-que-deve-aparecer';

            loadContent(postID, target);
        });

        // Carregar conteúdo diretamente se houver data-id
        $('.ajax-content-shortcode').each(function() {
            var postID = $(this).data('id');
            loadContent(postID, this);
        });
    });
    </script>
    <?php
}

// Função para processar o conteúdo do ACF e Elementor
add_action('wp_ajax_acs_process_acf_content', 'acs_process_acf_content');
add_action('wp_ajax_nopriv_acs_process_acf_content', 'acs_process_acf_content');

function acs_process_acf_content() {
    $post_id = intval($_POST['post_id']);
    $post = get_post($post_id);
    if ($post) {
        setup_postdata($post);

        if ( did_action( 'elementor/loaded' ) && \Elementor\Plugin::$instance->documents->get( $post_id )->is_built_with_elementor() ) {
            // Obtenha o conteúdo do Elementor para o post
            $content = \Elementor\Plugin::instance()->frontend->get_builder_content_for_display( $post_id );
        } else {
            // Obtenha o conteúdo padrão do post
            $content = apply_filters('the_content', $post->post_content);
        }

        wp_reset_postdata();
    } else {
        $content = 'Nenhum conteúdo encontrado';
    }

    if ($content) {
        echo $content;
    } else {
        echo 'Nenhum conteúdo encontrado';
    }
    wp_die();
}

// Função para registrar o shortcode
function acs_register_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => ''
    ), $atts, 'ajax-content');

    ob_start();
    if (empty($atts['id'])) {
        ?>
        <div class="conteudo-que-deve-aparecer"></div>
        <?php
    } else {
        ?>
        <div class="ajax-content-shortcode" data-id="<?php echo esc_attr($atts['id']); ?>">
            <!-- O conteúdo carregado via Ajax será inserido aqui -->
        </div>
        <?php
    }
    return ob_get_clean();
}
add_shortcode('ajax-content', 'acs_register_shortcode');
?>

O objetivo é que o shortcode {ajax-content id="123"} carregue o conteúdo diretamente na página e que o link com a classe .open-popup carregue o conteúdo onde o shortcode {ajax-content} é usado.

Como Usar:

  1. Instalar o Plugin:
    • Coloque a pasta ajax-content-shortcode no diretório wp-content/plugins.
    • Ative o plugin no painel de administração do WordPress.
  2. Adicionar o Shortcode:
    • Para carregar conteúdo diretamente, insira o shortcode {ajax-content id="123"} na página ou post onde deseja que o conteúdo carregado via Ajax apareça. Substitua 123 pelo ID do post que deseja exibir.
    • Para carregar conteúdo em um popup, use o shortcode {ajax-content} sem o ID e adicione um link com a classe .open-popup.
  3. Botão de Ação para Popup:
    • Adicione um botão ou link com a classe .open-popup e um atributo id ou href correspondente ao ID do post que deseja carregar em um popup.

Exemplo de HTML para o botão de popup:

<a href="#" id="123" class="open-popup">Abrir Conteúdo</a>
<!-- ou -->
<a href="#123" class="open-popup">Abrir Conteúdo</a>
[ajax-content]

Neste exemplo, o shortcode {ajax-content id=”7128″} carrega o conteúdo diretamente na página, enquanto o link com a classe .open-popup abre um popup criado com elementor e dentro do popup foi inserido o shortcode {ajax-content} que carrega o ID definido no link.

Abrir Postagem cujo ID é 7128

Abrir Postagem cujo ID é 8752