0

Есть сайт на Wordpress с плагином Visual Composer. На главной странице есть блок Post Grid, который выводит два последних поста (простой блок с 3 элементами: post title, post excerpt и button). На странице блога, соответственно, выводятся все посты из категории в отдельной сетке 3х3 с такими же тремя элементами.

Вопрос: как сделать так, чтобы при нажатии на button открывался modal popup с содержимым поста?

В grid builder при редактировании шаблона сетки нет возможности добавления VC-блока modal. Контент записи должен выводиться в модельном окне при клике на кнопку под каждым постом как на главной, так и на странице постов, т.к. отдельной страницы для поста и не должно быть по задумке, только modal popup со всем содержимым записи.

2
  • 1
    В чистом VC модальных окон не сделать. Вам понадобится плагин Easy Fancybox, знание html, php, и функций WordPress. Если это не пугает, завтра смогу описать, как реализацию. 3 мар 2017 в 22:37
  • @KAGGDesign не пугает! Жду! И спасибо заранее
    – Merkelst
    3 мар 2017 в 22:39

1 ответ 1

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');

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

4
  • Спасибо! Но есть еще вопрос - как вставить эту всю конструкци в готовый шаблон сетки в Grid Buider. Там ведь нет возможности добавлять htmlконструкции
    – Merkelst
    4 мар 2017 в 9:21
  • 1
    Это уже отдельный вопрос. 4 мар 2017 в 10:21
  • Это тот же вопрос, перечитайте. Все посты выводятся через шаблон в Grid Builder. Как на главной, так и на странице всех постов.
    – Merkelst
    4 мар 2017 в 10:46
  • @Mikhail звучит как отдельный вопрос, который является логичным продолжением этого. Рекомендую вам опубликовать новый вопрос и дать ссылку на этот для понимания контекста.
    – Nick Volynkin
    6 мар 2017 в 4:24

Ваш ответ

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

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