0
33
2019-08-18

Search and Navigation Popup и полезные снипеты и переводы плагина

В свете последнего обновления плагина Search and Navigation Popup, решил сохранить полезные сниппеты кода для усовершенствования мной любимого плагина всплывающих окон поиска и ссылок для меню. Так же прикрепил "самодельные" переводы на UK,RU и EN языках.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Описание плагина

Внешний вид плагина в репозитарии WordPress

Скачать плагин:

https://wordpress.org/plugins/search-and-navigation-popup/

При помощи данного плагина Вы можете без проблем отобразить окно поиска или всплывающее окно навигации по ссылкам, нажав на кнопки в меню. Итог работы плагина выглядит очень приятно. Особенно мне приятен плагин реализацией попап окна поиска, которое отрабатывает просто прекрасно. Посмотреть DEMO для более подробной информации.

Плагин содержит 2 шорткода

[menu-popup]
<?php echo do_shortcode('[menu-popup]'); ?>
[serach-popup]
<?php echo do_shortcode('[serach-popup]'); ?>

Этот плагин также регистрирует местоположение меню в вашей теме, т.е. «Popup Menu». Если вы хотите отобразить меню во всплывающем окне, выберите это местоположение меню.

CSS для наведения "своей" красоты

Как бы плагин не отрабатывал классно, все равно каждый проект требует своей уникальности и соответственно свой уникальный внешний вид. Сниппет стилей ниже поможет Вам привести всплывающие окна плагина к требуемому виду.

/* Указываем шрифт */
.custombox-content.custombox-fullscreen form#searchform,
.custombox-content.custombox-fullscreen input#s  {
    font-family: Alegreya Sans !important;
}

/* Оформление кнопки */
.custombox-content.custombox-fullscreen button.search-btn {
    font-family: Alegreya Sans;
    font-size: 25px;
    background-color: rgb(35,64,130) !Important;
    padding: 10px 25px 10px 25px !Important;
    border:2px solid  rgb(35,64,130) !Important;
}

.custombox-content.custombox-fullscreen button.search-btn:hover {
    background-color: rgb(255, 255, 255) !Important;
    color:rgb(35,64,130) !Important;
    padding: 10px 25px 10px 25px !Important;
    border:2px solid  rgb(35,64,130) !Important;
}

/* Запрещяем скрытие скрола во время открытия попапа */
.custombox-lock {
    overflow: inherit !important;
}

/* Затемняем фон оверлея */
.sanpop-modal {
    background: rgba(11, 22, 49, 0.88) !important;
}

Скрипт JS для скрытия окна поиска при клике на его оверлей (фон)

В общем я тут немного заморочился и написал свою реализацию для скрытия всплывающего окна по клику на его фон. Ну мне так кажется что данная реализация более удобнее чем возможность закрытия окна только по кнопке крестика.

// ========================================================================================
// search-and-navigation-popup - При клике на овердей скрываем попап окно поиска
// START
// ========================================================================================
jQuery(document).ready(function($) {
$('body').bind('click', '.custombox-content.custombox-fullscreen:not(.sanpop-search-box)',function(event) {
    // Для того чтобы исключить скрытие формы при клике по Input'у
    // Вычисляем ID родителя при клике на оверлей (Ну и он отличается от ID родителя при клике в Input или кнопку отправки)
    //  console.log(event.target.id);
    var ParrentOverley = event.target.id;
    if (ParrentOverley == 'sanpop-modal-1'){
        // console.log('👍 Да был клик по оверлею, можно скрывать окно поиска');
        // Юзаем функцию закрытия попап окна от самого плагина
        Custombox.modal.close();
    }
});
});
// ========================================================================================
// END
// search-and-navigation-popup - При клике на оверлей скрываем попап окно поиска
// ========================================================================================

Переводы плагина на Украинский, Русский и Английский языки

Да, и не смотря на то что плагин был обновлен и его автор все таки добавил домен для реализации переводов... Сами переводы в последней (1.0.1) версии мной найдены не были. Я психанул и перевел все сам. Ниже ссылка на архив со всеми переводами.