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

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

Перед началом поста я хочу посоветовать вам прочитать, еще один из моих постов, посвященному борьбе кастомизации/настройке 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 скрипт, который бы отправлял все необходимое после щелчка по кнопке:

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

Метод 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 полете.

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