0

Поделитесь опытом как правильно вызывать шорткоды сгенерированные плагинами,темой в Wordpress.

Зачем нужно: Имею Wordpress + плагин elementor + JupiterX тему. В elementor можно создавать шаблоны блоков/секций и получать их шорткод для вызова. Пример шорткода [elementor-template id="1824"]. По клику на кнопку хочу вызывать AJAX нужную секцию (секция содержит слайдеры, табы, посты) и вставить ее в тело страницы.

Читал кодекс wordpress https://codex.wordpress.org/AJAX_in_Plugins

Но до меня не дошло, как применить это здесь. Есть ли у кого-то подобный опыт? Можете ли выложить примеры кода с комментариями?

Как я пытался вызвать шорт код AJAX.

HTML

[SCode_ajax_footer]

PHP

<?php
/**
 * Plugin Name: Ajax Shortcode
 * Description: 
 * Plugin URI:  
 * Version:     16.02.2020
 * Author:      
 * Author URI:  
 * License:     GPLv3
 */


add_action('plugins_loaded',  'plugin_setup');


/**
* Plugin URL
*/
define('SRT_AJAX_SHORT_URL', plugin_dir_url(__FILE__));
$plugin_url = SRT_AJAX_SHORT_URL;



    /**
     * Regular plugin work
     */
    function plugin_setup()
    {

        #SCode_ajax_footer
        add_shortcode( 'SCode_ajax_footer', 'SCode_ajax_footer' );
        #ajax_srt_footer
        add_action( 'wp_ajax_ajax_footer','ajax_footer' );
        add_action( 'wp_ajax_nopriv_ajax_footer', 'ajax_footer' );    

    }



    /**
     * ACTION Enqueue scripts
     */
     function enqueue() 
    {
        # jQuery will be loaded as a dependency
        ## DO NOT use other version than the one bundled with WP
        ### Things will BREAK if you do so
        wp_enqueue_script( 
             'ajax-ft',
             SRT_AJAX_SHORT_URL."ajax.js",
             array( 'jquery' )
        );
        # Here we send PHP values to JS
        wp_localize_script( 
             'ajax-ft',
             'wp_ajax',
             array( 
                 'ajaxurl'      => admin_url( 'admin-ajax.php' ),
                 'ajaxnonce'   => wp_create_nonce( 'ajax_post_validation' )
            ) 
        );
    }


    /**
     * SHORTCODE AJAX Footer
     */
    function SCode_ajax_footer(  ) 
    {
       $output = '<div id="srtAjaxFooter"></div> ';
        return $output;
    }

    /**
     * AJAX query About block
     */
    function ajax_footer()
    {
        echo do_shortcode('[elementor-template id="16"]');
    }

JS

/* 
 * @plugin Ajax Shortcode
 */

jQuery( document ).ready( function( $ ) 
{ 

    $(window).load(function(e) {
        /*
        *callBack wpAjaxShortcode
        *@param shorcodeName, containerId
        *@return 
        */
        function ajaxCallBackShortcode(shorcodeName, containerId) {
            $.post( 
                wp_ajax.ajaxurl, 
                {action: shorcodeName},                   
                function( response )
                {
                    // ERROR HANDLING
                    if( !response.success )
                    {
                        // No data came back, maybe a security error
                        if( !response.data )
                            $( containerId ).html( 'AJAX ERROR: no response' );
                        else
                            $( containerId).html( response.data.error );
                    }
                    else
                        $( containerId).html( response.data );
                }
            ); // end post
        }

       let shorcodeName, containerId;


        //callBack Footer
        ajaxCallBackShortcode(shorcodeName = 'ajax_footer', containerId = '#srtAjaxFooter');
    }); // end click
});

По сути он шорткод не вызывает. Сам шорткод сгенерирован темой.

Если я напишу свой плагин.

И перепишу Функцию

PHP

  /**
     * AJAX query About block
     * Check for security and send proper responses back
     */
    function ajax_footer()
    {
        $footer= '<div>Это код футера</div>';
        wp_send_json_success( $footer);
    }

То такая функция, отработает конечно же. И вставит на фронтенде

<div>Это код футера</div>

Подскажите, что делаю неправильно. Как вызвать на фронтенд шорткод сгенерированный темой ? [elementor-template id="16"]

3
  • Люди одумайтесь! Будете юзать вордпресс, викс, и тд, Программисты будут НЕУЖНЫ! 16 фев 2020 в 7:29
  • Опыта такого у людей здесь полно, но код за вас никто писать не будет. Пробуйте шаг за шагом сами. вот более внятное руководство на русском: wp-kama.ru/id_2018/ajax-v-wordpress.html Приходите с вашим кодом, и конкретным описанием, что в нём не работает. 16 фев 2020 в 8:40
  • Да, прошу прощения, я обновил описание вопроса. Добавил свой код. 16 фев 2020 в 19:08

1 ответ 1

0
function ajax_footer() {
    wp_send_json_success( do_shortcode( '[elementor-template id="16"]' ) );
} 
7
  • Да, это помогло. Благодарю! Однако, если шорткод содержит статическую информацию HTML+СSS, то все хорошо отрабатывает. Но если шорткод содержит слайдеры, табы , аккордеоны (компоненты Elementor), то они не работают при ajax загрузке. Как бы быть? 17 фев 2020 в 6:35
  • А при использовании шорткода в тексте статьи через админку - всё работает? Возможно, что табы и аккордеоны не инициализируются Elementor в ajax режиме, и тут уж простыми мерами не обойтись. 17 фев 2020 в 7:57
  • Если ответ принят, его стоит отметить галочкой внизу. Если информация вответе полезна, можно нажать на стрелку вверх. Это поможет ориентироваться пользователям, которые ищут ответ на подобный вопрос. 17 фев 2020 в 8:06
  • Вы имеете ввиду, что будет если просто вставить шорткод [elementor-template id="16"] в тексте? Да, он загрузит контент и инициализирует js. Все будет работать как часы. Однако, вызвав шорткод через AJAX мы получим контент с неработающим js. 17 фев 2020 в 17:19
  • Галочку поставил, но со стрелкой беда. У меня репутация меньше 15. Публичное отображение рейтинга не изменится. Но голом мой учтется. 17 фев 2020 в 17:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.