В этой небольшой статье я расскажу о нескольких скрытых возможностях темы WebPoint PRO, которые могут быть полезны при работе с сайтом.
Адаптивные вкладки (tabs)
В теме WebPoint PRO по умолчанию реализованы адаптивные вкладки (tabs), которые, как и сама тема, адаптируются под текущие размеры окна браузера.
Для создания адаптивных вкладок используйте следующий шаблон:
<div class="tabs"> <ul class="tabs-nav clearfix"> <li class="tab-1"> <a href="#1">Tab 1</a> </li> <li class="tab-2"> <a href="#2">Tab 2</a> </li> <li class="tab-3"> <a href="#3">Tab 3</a> </li> </ul> <section class="tabs-panel tab-1 clearfix" id="1"> Tab content 1. </section> <section class="tabs-panel tab-2 clearfix" id="2"> Tab content 2. </section> <section class="tabs-panel tab-3 clearfix" id="3"> Tab content 3. </section> </div><!-- .tabs -->
JavaScript ссылки
Так называемые JavaScript ссылки — это HTML элементы, при клике по которым пользователь будет перенаправлен на другой URL, как при клике по обычной ссылке, но при этом сами они не являются ссылками, поэтому не индексируются поисковыми системами.
Использование JavaScript ссылок бывает полезным при поисковой оптимизации сайтов, например, в целях лучшего распределения ссылочного веса.
Для использования JavaScript ссылок в теме WebPoint PRO достаточно создать HTML элемент с атрибутом data-href
, например, span
, img
или div
.
<span data-href="https://site.com">Текст ссылки</span>
Для открытия JavaScript ссылки в новом окне достаточно добавить атрибут data-target
со значением _blank
.
<span data-href="https://site.com" data-target="_blank">Текст ссылки</span>
При этом стоит сразу отметить, что некоторые браузеры могут блокировать создание новых вкладок при помощи JavaScript, поэтому рекомендую использовать данную функцию только в случае крайней необходимости.
Открытие JavaScript ссылок в новом окне также происходит при клике по ним средней кнопкой мыши (колесиком мыши) или при комбинации клавиши CTRL + ЛКМ (левая кнопка мыши).
JavaScript ссылки в меню
В теме WebPoint PRO реализована автоматическая система преобразования закрытых от индексации ссылок в меню в JavaScript ссылки. Таким образом, для полного скрытия ссылки в меню, достаточно в поле XFN пункта меню указать значение nofollow
.
После этого ссылка в меню будет преобразована в элемент span
с атрибутом data-href
.
Текстовые пункты меню
Тема WebPoint PRO также поддерживает создание текстовых пунктов меню. Для их создания достаточно удалить адрес ссылки в настройках пункта меню, после чего тема преобразует его в элемент span
.
Форма заказа обратного звонка
В теме WebPoint PRO также реализована форма заказа обратного звонка. Для ее вызова достаточно создать HTML элемент с классом callback
, например, кнопку button
.
<button class="button callback">Обратный звонок</button>
Сразу после клика по кнопке появится всплывающее окно заказа обратного звонка, которое будет иметь примерно следующий вид:
Наличие блока от Google reCAPTCHA в форме заказа обратного звонка зависит от текущих настроек темы оформления. При желании данный блок можно будет отключить (глобально для всех форм на сайте).