0
27
2019-02-03

WP Post Popup - Отличный плагин для отображения контента страниц и записей в всплывающем окне

Предлагаю Вам ознакомиться с отличным плагином, который может стать не заменимым помошником при реализации линого кабинета на сайте под управлением WordPress. Он реализует всплывающие окна с контентом записеей, включая и кастомного типа.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Описание плагина WP Post Popup

2019-02-03_2-42-24.jpg

Загрузить плагин

Загрузить пплагин можно по ссылке ниже:

https://wordpress.org/plugins/wp-post-modal/

Превратите любую страницу, пост, пользовательский тип записей во всплывающее окно!

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

Характеристики

  • Загружает только поле the_content() - исключая заголовок / нижний колонтитул / боковые панели / и т. Д.
  • При желании можно загрузить пользовательские поля с помощью пользовательского шаблона страницы.

  • Вызов всплывающего окна при загрузке страницы с использованием параметра URL
  • Показать внешние страницы во всплывающем окне на Вашем сайте
  • Позволяет показывать только определенный div с внешней страницы
  • Работает с шорт кодами и различными плагинами, такими как Contact Form 7 и BuddyPress
  • Динамически изменить URL-адрес в адресной строке на адрес всплывающей страницы
  • Поддерживает подключение стилей отображения
  • Визуальный редактор - кнопка для легкого создания всплывающей ссылки
  • Установите точку брекпоинта, ниже которой будет загружаться страница вместо всплывающего окна.

Полезные ссылки

Избавляемся от ошибки "Uncaught ReferenceError: wp is not defined wp-post-modal-public.js:70"

По сути этот баг связан с кастомизацией заданной на страниц настроек плагина в админке.
Данная ошибка выглядит следующим образом:

Error Uncaught ReferenceError: wp is not defined wp-post-modal-public.js:70

И если Вам позволяет опыт, Вы можете задать внешний вид всплывающих окон при помощи CSS и jQuery без использования настроек на стороне админки. По этому просто отключим обработчик.

Первое что нужно сделать это за комментировать по данному пути:

/wp-content/plugins/wp-post-modal/public/js/wp-post-modal-public.js

Cтроку:

modalCustomizer();

То есть в коде данного файла строка должна выглядеть так:

    // Window load
    $(window).on('load', function () {
        // modalCustomizer();
    });

Мои настройки WP Post Popup

Ниже я "заскринил" страницу с настройками которые я всегда устанавливаю для данного плагина.

Страница настроек плагина WP Post Popup

jQuery пример реализации "умного" прилоадера

Задача прилоадера - отображаться до тех пор пока контент записи не будет загружен. Когда контент был загружен успешно прилоадер будет удален.

Для работы прилоадер должен быть подключен скрипт jquery-watch.

Загрузить скрипт jquery-watch

https://github.com/RickStrahl/jquery-watch

Переделываем код под себя

CSS

/* Preloader */
.modal-wrapper.styled .modal {
    min-height: 385px;
/*    background: transparent url(/wp-content/uploads/2018/02/dollar-glass.gif) center center/cover no-repeat scroll;*/
    background-color: white;
    background-size: inherit;
}

div#modal-content {
    background-color: white;
}

.modal-wrapper.styled .modal{ 
background: white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll;
}

#single-post-meta-manager{
     opacity: 0;
}
div.modal-content-post-wrapped.load {
    opacity: 1;
}

JS код

<script type="text/javascript">
    jQuery(document).ready(function($){
            // Плавное появление контента в модальном окне
            $("div#single-post-meta-manager").animate({ 'opacity':'1' }).fadeIn('slow');

            // Добавляем класс информер - "Контент загружен поехали дальше!".
            $("div.modal-content-post-wrapped").addClass("load");

            //$('.modal-wrapper.styled .modal').css('background','none');
            // Отслеживаем модальное окно
            $(".modal-wrapper").watch({
                    properties: "top,left,opacity,display,attr_class",
                    watchChildren: true,
                    callback: function (data, i) {
                        //         console.log("Класс был изменен");
                        //     Ставим прилоадер как изображение бекграунда
                        $('.modal-wrapper.styled .modal').css('background','white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll');
                        //     Если контент загружен убиваем прилоадер
                        if ($('.modal-content-post-wrapped').is('.load')) {
                            $('.modal.show').css('background','white');
                            //             console.log("Контент загружен");
                        }
                    }
                });
        });
</script>

CSS стили для реализации всплывающих окон WP Post Popup

/*Google Recapcha V2 for WP Recall*/
/* START */

@media screen and (min-width:338px){

    .panel_lk_recall .form-tab-rcl{
        min-width: 338px;
    }

}
/* END */
/*Google Recapcha V2 for WP Recall*/

/* Модальное окно ЛК
START
*/
.modal.show {
    max-width: 650px;
}
.modal.show .kk-star-ratings.bottom-right.rgt{
    display: none;
}

/*Table*/
.modal.show table{
    border-collapse: separate;
    max-width: 100%;
    overflow: auto;
    table-layout: fixed;
    border: none;
    width: auto;
}

.modal.show table th{
    background: #F8F0F8;
    padding: 17px 10px;
    vertical-align: middle;
    color: #7F617E;
    font-size: 12px;
    text-align: left;
}
.modal.show table th:first-child{
    -webkit-border-radius: 5px 0 0 5px;
            border-radius: 5px 0 0 5px;
}
.modal.show table th:last-child{
    -webkit-border-radius: 0 5px 5px 0;
            border-radius: 0 5px 5px 0;
}
.modal.show table th.th-border{
    border-left: 1px solid #ECE1EC;
}

.modal.show table td{
    color: #424242;
    font-size: 13px;
    border-bottom: 1px dashed #E5E5E5;
/*  padding: 10px 5px 5px 10px;*/
    padding: 10px 5px 5px 4px;
    text-align: left;
}
.modal.show table tr:last-child td{
    border-bottom: none;
    padding-bottom: 20px;
}
.modal.show table td{
    border-right: 1px solid #F7F7F7;
}
.modal.show table td:last-child{
    border-right: none;
}
.modal.show table tr:first-child td{
    padding-top: 20px;
}
/* Модальное окно ЛК
END
*/