«Модальное окно кнопка шорткод wordpress», «Ссылка на модальное окно кнопка wordpress», «Как сделать из шорткода ссылку», «Открыть всплывающее окно кнопкой», «Как поместить шорткод в кнопку». Такие и ещё много-много подобных запросов было отправлено с моей стороны в интернет. Поисковые системы наверное одуревали от моего энтузиазма.
Сразу следует оговориться — я не «спец по тайникам». Программист из меня совсем ни какой. И звёзд на поприще вёрстки сайтов тоже не хватаю, даже близко не стою. Нуб, короче. Поэтому и поясняшки будут на корявом бытовом языке.
Тем не менее, как говорится, дорогу осилит идущий.
А вопрос вдруг возник для меня следующий: Как сделать так чтобы на сайте сделанном на WordPress открыть всплывающее окно кнопкой? Речь здесь в частности идёт о форме обратной связи на базе плагина Contact Form 7.
Представьте себе, когда вдруг стал актуальным вопрос о вызове модального окна кнопкой, признаюсь, с ходу легко и просто я не смог решить данную задачу.
То есть, понятно, да — шорткод для размещения стандартной формы обратной связи, такой как: contact-form-7 id=»4289″ title=»контакт тест», не нужен. Но требуется красивая, отвечающая требованиям к общему дизайну страницы (или сайта) кнопка после нажатия на которую появлялось наше модальное окно.
Поэтому и появились запросы к поисковикам подобные следующему:
Модальное окно кнопка шорткод
Вернее, если быть более точным, то собственно сам вопрос как вызвать модальное окно кнопкой решается довольно несложным способом. Информации по этому поводу в интернете великое множество. И после не продолжительного тестирования и обкатки нескольких вариантов, лучшим для меня оказалась связка плагинов Contact Form 7 и Easy Modal.
Саму процедуру настройки и проведения всех необходимых операций здесь сейчас приводить не буду. Таких алгоритмов в сети выложено по самое не балуйся, их вам вполне хватит. Достаточно лишь вбить запросы типа: «Модальное окно кнопка шорткод wordpress» или «Всплывающее окно обратная связь», и т.п. А там уже разберётесь. Не сложно.
Кстати, вот пример того что получается от союза Contact Form 7 и Easy Modal:
Всё вроде бы ничего, но тут, ни размер кнопки не изменить, ни цвет, ни форму. Только так как есть, и больше ни как. И саму кнопку можно вставить только посредством размещения кода (<button class=»eModal-1″>Open Modal</button>) в какой-либо конкретной части страницы. И уж тем более не вставить в кнопку шорткод чтобы открыть модальное окно кнопкой.
Я вполне допускаю, многие профи лишь посмеются над данными высказываниями. И вполне вероятно существует вполне действенное и адекватное решение подобных проблем. Но мне они на глаза не попались. Поиски в сети ничего толкового не принесли.
И вот, то как сделать так, чтобы сочетание слов: модальное окно кнопка (желательно, красивая) wordpress, родило из себя кнопки подобные тем что ниже. При чём, работающие кнопки (можете проверить). Так вот, такого решения я сразу ни где не нашёл.
(Повторюсь, вёрстка и правка кода HTML или владение CSS, это, мягко говоря, совсем-совсем не моя специализация. И голову себе заморачивать разбором файлов темы на предмет их редактирования, мне уж точно не хочется вовсе. Мне подай такое решение, чтобы там кликнул, а тут раз и всё произошло что хотелось бы.)
Открыть всплывающее окно кнопкой
Ну, хватит уже балаболить, возможно скажете вы. И пора бы уже поведать о том как открыть всплывающее окно кнопкой без использования шорткода.
И вновь оговорюсь, предлагаемый вариант не является одним из самых простейших. Но мне показалось, что лучше сделать так, чем разбираться в коде шаблона, без малейших гарантий того, что при очередном обновлении этой самой темы со стороны разработчика, все внесённые мной изменения благополучно будут ликвидированы.
Visual Composer для WordPress
Начнём с того, что желающему открывать модальное окно кнопкой, придётся установить плагин Visual Composer для WordPress. Не пугайтесь работы в данном плагине. Не так он страшен как выглядит на первый взгляд.
Хотя по началу, когда он первый раз был установлен в WordPress, меня охватило некоторое уныние касательно того смогу ли я работать в нём или нет. Какие-то крестики, вкладочки, дополнительные окна и кнопки. Жуть какая то. Вполне естественно, этот плагин первоначально тут же был удалён из системы.
В последствии, когда вольно или не вольно в YouTube пришлось просмотреть пару роликов демонстрирующих работу данного плагина, я всё-таки решил попробовать поработать на нём. И как оказалось, в действительности очень уж сложного там нет ничего. Зато дополнительных возможностей, облегчающих наполнение страниц и заметок в WordPress, оказалось впечатляюще много.
Впрочем, дифирамбам Visual Composer сейчас время посвящать не стану. Основам работы с ним, тоже. Где скачать, как работать, на что обратить внимание — сами разыщете в сети. Информации по этому поводу в сети масса.
Теперь, что касаемо нашего случая. А именно, как реализовать функцию открытия модального окна кнопкой, или — как вставить шорткод в кнопку так, чтобы всплывала форма обратной связи от Contact Form 7.
Шорткод, модальное окно и кнопка
Немного освоившись в Visual Composer, я наконец-то добрался до кнопок. Пробую их вставлять туда, сюда; «играюсь» с размерами и формами; экспериментирую с анимацией и т.п. Всё, вроде бы как замечательно! Всё устраивает. Красиво, доступно, практично.
Теперь пора уже вставить шорткод в кнопку и получить наше всплывающее окно формы обратной связи. Сделать и радоваться жизни. Но не тут то было. Дело в том, что как и в других случаях, к кнопкам можно прикрутить только непосредственно ссылку на внутренние страницы или внешние ресурсы. А места для вставки шорткода там нет.
Всё, приехали. Было интересно, но результата — нет. Что делать?
И чем я потом только не занимался: вставлял шорткод в место для ссылки, «резал» шорткод на части, оборачивал в теги, пытался связывать с ссылками… В общем, задница какая-то, причём полная.
Интернет же, со своей стороны, мне выдавал кучу всяческих советов о том, как прописывать в файлах стилей шаблона те или правки, вставлять дополнения в код и прочее, и прочее, и прочее. Но это уже совсем дремучий лес.
Напоминаю, речь идёт о дилетанте, совершенно не сведущем в основах вёрстки сайтов.
Потом вдруг, что меня сподвигло поместить значение класса шорткода от Easy Modal в соответствующее поле Visual Composer, я уже не помню. Но это случилось и всё заработало.
Хотя, если честно, мог бы и сразу догадаться что, к чему и почему приложить нужно.
Для большего понимания процесса, ниже прилагаю краткое видео демонстрации данной процедуры. Комментарии в видео отсутствуют, но здесь кратко опишу сам алгоритм:
1. создаём в Visual Composer новый Ряд
2. переходим к вставке шорткода кнопки и создаём саму кнопку (так как нужно нам)
3. находим в редакторе кнопки соответствующее поле для помещения туда имеющегося класса
4. берём название класса для модального окна в Easy Modal вставляем в поле; сохраняем
5. пользуемся и получаем удовольствие.
Как видите, ответ на вопрос о том, как могут работать вместе модальное окно кнопка и шорткод, получен. Естественно, это лишь один из вариантов. То на сколько он приемлем для вас, решать не мне. Но он решён, и меня пока устраивает.
Дополнительно, ниже кнопка формы обратной связи созданная в представленном выше видео.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column][vc_btn title=»ЭТО НАША СУПЕР КНОПКА» style=»3d» color=»warning» align=»center» css_animation=»rotateIn» el_class=»eModal-1″][vc_raw_html]JTNDc2NyaXB0JTIwYXN5bmMlMjBzcmMlM0QlMjIlMkYlMkZwYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbSUyRnBhZ2VhZCUyRmpzJTJGYWRzYnlnb29nbGUuanMlMjIlM0UlM0MlMkZzY3JpcHQlM0UlMEElM0MlMjEtLSUyMCVEMCVBNCVEMCVCNSVEMCVCMiVEMSU4MCVEMCVCMCVEMCVCQiVEMSU4QyUyMDIwMTclMjAtLSUzRSUwQSUzQ2lucyUyMGNsYXNzJTNEJTIyYWRzYnlnb29nbGUlMjIlMEElMjAlMjAlMjAlMjAlMjBzdHlsZSUzRCUyMmRpc3BsYXklM0FibG9jayUyMiUwQSUyMCUyMCUyMCUyMCUyMGRhdGEtYWQtY2xpZW50JTNEJTIyY2EtcHViLTczNzQzMTMyOTU0OTM2MDIlMjIlMEElMjAlMjAlMjAlMjAlMjBkYXRhLWFkLXNsb3QlM0QlMjI3MzI3MTI0MTczJTIyJTBBJTIwJTIwJTIwJTIwJTIwZGF0YS1hZC1mb3JtYXQlM0QlMjJhdXRvJTIyJTNFJTNDJTJGaW5zJTNFJTBBJTNDc2NyaXB0JTNFJTBBJTI4YWRzYnlnb29nbGUlMjAlM0QlMjB3aW5kb3cuYWRzYnlnb29nbGUlMjAlN0MlN0MlMjAlNUIlNUQlMjkucHVzaCUyOCU3QiU3RCUyOSUzQiUwQSUzQyUyRnNjcmlwdCUzRQ==[/vc_raw_html][/vc_column][/vc_row]
