Контент записи в модальном окне (Wordpress + Visual Composer)

511

05 марта 2017, 09:00

Есть сайт на Wordpress с плагином Visual Composer. На главной странице есть блок Post Grid, который выводит два последних поста (простой блок с 3 элементами: post title, post excerpt и button) , на странице блога соответственно выводятся все посты из категории в отдельной сетке 3х3 с такими же тремя элементами. Вопрос: как сделать так, чтобы при нажатии на button открывался modal popup с содержимым поста? В grid builder при редактировании шаблона сетки нет возможности добавления VC-блока modal. Контент записи должен выводиться в модельном окне при клике на кнопку под каждым постом как на главной, так и на странице постов, т.к. отдельной страницы для поста и не должно быть по задумке, только modal popup со всем содержимым записи.

Answer 1

Для вывода содержимого записи в модальном окне понадобится установить плагин Easy Fancybox, некоторые знания html, php и функций WordPress. Порядок действий описан ниже.

Устанавливаем плагин Easy Fancybox.

Создаем в Visual Composer (VC) кнопку, стилизуем ее, сохраняем страницу и смотрим код кнопки в инспекторе браузера:

Поскольку VC добавляет класс к блоку vc_btn3_container, а не к тегу <a>, нам это не подходит. Копируем тег <a>, удаляем кнопку в VC и создаем вместо нее html-блок. Вставляем туда тег <a>, скопированный их браузера, не забывая добавить класс fancybox и ссылку на якорь #read_post_popup.

Страница в VC должна иметь примерно такой вид:

В самом низу страницы добавлен ряд #popups, который должен быть скрыт в css:

#popups {
  display: none;
}

Это заготовка под попапы (их может быть много). Ряд содержит текстовый блок с таким содержимым для одного попапа:

Если попапов несколько, то код в этом блоке надо клонировать несколько раз, меняя текст внутри. Само собой, тогда и кнопок должно быть несколько. Связь кнопка-попап происходит через якорь (в примере #read_post_popup).

Показанный выше блок не может быть html, потому что в нем используется шорткод (о котором речь ниже), а шорткоды в html блоках не обрабатываются. Редактировать этот блок можно только в текстовом, а не в визуальном режиме.

На этом этапе уже можно попробовать сохранить страницу и кликнуть на кнопку - появится модальное окно (с неправильным пока содержимым).

Чтобы выводилось нужное содержимое, надо написать свой шорткод. Это довольно просто. В function.php вашей темы надо вставить следующий код:

function read_post_shortcode( $atts ) {
    $p = get_page_by_title($atts['title'], 'OBJECT', 'post');
    if ($p)
        return do_shortcode($p->post_content);
    else
        return '';
}
add_shortcode('read_post', 'read_post_shortcode');

На этом все. Работающий пример можно посмотреть на моем тестовом сайте.