Visual Composer + AJAX: выводим шорткоды

При работе с AJAX в WordPress есть один неприятный нюанс- если вам, необходимо вывести контент из стандартного текстового wordpress редактора, то в результате запроса вы получите сам контент от начала и до конца, но… без обработанных шорткодов (если таковые, вообще присутствуют в контенте). Естественно, если вы используете плагин Visual Composer, то проблема никуда не уйдет, поэтому в этом коротком посте я поделюсь своим универсальным решением этой проблемы…

Перед началом работы

В начале, предполагается, что у вас уже установлен и активирован WPBakery Page Builder плагин. Если нет, то купить и скачать его можно на ThemeForest или отправить соответствующий запрос в свободной форме мне в Telegram , где я вам просто предоставлю свежую лицензионную версию в ознакомительных целях к этой статье 😉 .

 

 

Также, я хочу посоветовать вам прочитать, еще один из моих постов, посвященному борьбе кастомизации/настройке Visual Composer — Visual Composer: добавляем новые иконки в шорткод vc_icon. Возможно, вам также будет интересна статья о Динамическом добавление постов в WordPress.

Моделируем ситуацию

Итак, для того что бы мне не писать огромные куски кода, давайте представим следующую довольно распространенную ситуацию:

  1. Имеется пользовательский тип записи — portfolio с текстовым редактором и подключенным там Visual Composer-ом;
  2. Кнопка, с data-id=’ID POST’ при нажатии на которую необходимо выполнить ajax запрос к WP и получить содержимое ID POST из CPT portfolio;
  3. Область на странице id=’content’, где будет выводиться результат.

Из пунктов выше я думаю все понятно и такая ситуация может быть у многих, но в любом случае концепция решения ниже, будет везде одинаково работать. 

Формируем AJAX запрос

Первое, что нужно сделать это написать легкий js скрипт, который бы отправлял все необходимое после щелчка по кнопке:

$(document).on('click','.button', function (e) {
                e.preventDefault();
                var $this = $(this),
                    postId = parseInt($this.data('id').replace( /^\D+/g, '')),
                    $maincontent = $('#content');

                if(postId) {
                    var data = {
                        action: 'modal-call',
                        post_id: postId
                    };
    
                    $.post(ajax.url, data, function (response) { // ajax.url - wp_localize_script объект

                        if (response) {
                            response = JSON.parse(response);

                            var content = response.content ? response.content : '',
                                css = response.css ? response.css : '';;

                            if(content) {
                                $maincontent.html(css+' '+content);
                            }
             
                        }
                    });
                }

            });

Думаю, код выше понятен и в излишних комментариях не нуждается. Теперь давайте перейдем к php коду:

if( defined('DOING_AJAX') && DOING_AJAX ) {
			add_action( 'wp_ajax_modal-call', array( &$this, 'get_modal_content' ) );
			add_action( 'wp_ajax_nopriv_modal-call', array( &$this, 'get_modal_content' ) );
		}

public function get_modal_content() {

		$post_id = isset( $_POST['post_id'] ) ? $_POST['post_id'] : '';

		if(!empty($post_id)) {
			$post = get_post($post_id);
			if($post) {
				$content = isset( $post->post_content ) ? $post->post_content : '';
				if ( ! empty( $content ) ) {
					
					WPBMap::addAllMappedShortcodes();

					$content = apply_filters( 'the_content', $content );

					$css = get_post_meta( $post_id, '_wpb_shortcodes_custom_css', true );

					echo wp_json_encode( array(
						'css'               => ! empty( $css ) ? '<style>'.$css.'</style>' : '',
						'content'           => do_shortcode( $content )
					) );
				}
			} else {
				echo '';
			}
		}

		wp_die();
	}

Метод get_modal_content аналогично не нуждается в комментариях за исключением пары строчек:

  1. WPBMap::addAllMappedShortcodes(); — именно эта строка отвечает за то, что бы шорткоды переинициализировались и срабатывали для функции do_shortcode();
  2. $css = get_post_meta( $post_id, '_wpb_shortcodes_custom_css', true ); — кладем в эту переменную весь css, который создает Visual Composer для своих элементов. В принципе без этой строчки можно обойтись, но тогда на выходе не будут срабатывать настройки из вкладки Design Options.

Итого, по сути добавив всего лишь эти две строчки выше вы заставите работать/отображать ваши Visual Composer шорткоды прямо в ajax полете.

Подписаться на новые статьи