Как создать плавающую панель

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

Что такое плавающая панель?

Плавающая панель позволяет вам показывать важный контент своим пользователям. Эта панель остается видимой на протяжении всего времени, поэтому вероятность, что человек щелкнет по ней, растет в геометрической прогрессии.

Вы можете использовать плавающую панель для следующих вещей:

— собрать больше просмотров
— создать список электронных адресов
— обратить внимание людей на специальное предложение или распродажу

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

Способ 1. Создаем плавающую панель вручную

В этом способе от вас потребует ввести код в файлы WordPress. Если вам такое в новинку, то советуем обратиться к руководству как вставлять код из Интернета в WordPress.

Первым делом вам потребуется FTP-клиент или файловый менеджер в cPanel. Найдите файл footer.php в папке с вашим шаблоном и скачайте его себе на компьютер. Путь к папке обычно выглядит таким образом:

/wp-content/themes/your-theme-folder/

Затем откройте скачанный файл в каком-нибудь редакторе вроде Блокнота и добавьте следующий код прямо перед тегом .

<div class="fixedBar">

<div class="boxfloat">


<ul id="tips">

<li><a href="https://coma.lv/">Coma Link is the First Item</a></li>


<li><a href="http://www.wordpress.org/">WordPress.org is the Second Item</a></li>

</ul>


</div>

</div>

Вы можете добавлять сколько угодно пунктов – мы вам покажем как потом их произвольно менять при каждой следующей загрузке страницы. Следующим действием будет добавление стилей CSS. Вы можете добавить CSS в файл style.css или использовать плагин вроде Simple Custom CSS.

.fixedbar {
background: #000; 
bottom: 0px; 
color:#fff; 
font-family: Arial, Helvetica, sans-serif; 
left:0; 
padding: 0px 0; 
position:fixed; 
font-size:16px; 
width:100%; 
z-index:99999; 
float:left; 
vertical-align:middle; 
margin: 0px 0 0; 
opacity: 0.95; 
font-weight: bold;
}
.boxfloat {
text-align:center; 
width:920px; 
margin:0 auto;
}

#tips, #tips li {
margin:0; 
padding:0; 
list-style:none
}
#tips {
width:920px; 
font-size:20px; 
line-height:120%;
}
#tips li {
padding: 15px 0; 
display:none;
}
#tips li a{
color: #fff;
}
#tips li a:hover {
text-decoration: none;
}

Добавив CSS, вы скорее всего не увидите изменений на сайте. Это потому, что мы отключили показ материала. Затем мы будем использовать jQuery для того, чтобы произвольно показывать один материал из нашего списка. Вам надо открыть редактор типа Блокнота и в пустой текстовый файл вставить следующий код:

(function($) {
this.randomtip = function(){
	var length = $("#tips li").length;
	var ran = Math.floor(Math.random()*length) + 1;
	$("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){	
	randomtip();
});
})( jQuery );

Как только дело будет сделано, сохраните файл как floatingbar.js у себя на компьютере. Теперь откройте свой FTP-клиент и подсоединитесь к серверу. Зайдите в папку со своим шаблоном и найдите папку js. Обычно путь будет следующим:

/wp-content/themes/your-theme-folder/js

Если этой папки нет, то вам придется ее создать. Затем вам нужно будет загрузить файл в эту папку. После этого вставьте в файл functions.php или свой плагин следующий код.

function wpb_floating_bar() {
    wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );

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

Способ 2. Использование OptionMonster для добавления плавающей панели в WordPress

OptionMоnster это популярный плагин, который помогает превратить посетителей вашего сайта в подписчиков и покупателей. Одна из функций этого плагина заключается в том, что в нем есть плавающая панель, которую вы можете использовать как формуляр для ввода e-mail’ов, так и для рекламы ссылок или предложений.

Преимущества данного способа заключаются в следующем:

— легкая настройка (никакого кода)
— можно показывать плавающие панели на разных страницах сайта
— помимо рекламы можно использовать эту панель также для сбора электронных адресов

Единственный недостаток заключается в платности этого сервиса. Как только вы приобретете его, вы можете использовать плагин OptinMonster WordPress API для своего сайта. Для больших деталей советуем обратиться к статье о том, как установить плагин WordPress.

Этот плагин является своего рода мостом между вашим сайтом на WordPress и OptinMonster. Помимо активации плагин добавит новый пункт в меню под названием OptinMonster в админпанели WordPress.

От вас потребуют ввести ваше имя пользователя и ключ, который вы можете получить у себя в аккаунте на OptionMonster.

Скопируйте и вставьте ключ, затем щелкните по кнопке Connect to OptinMonster. Плагин подсоединится к вашему аккаунту в OptinMonster.

Затем вам нужно щелкнуть по кнопке Create New Optin.

Вас направит на страницу сайта, где будет нужно сперва указать Optin Campaign Title и выбрать сайт, где вы будете этим пользоваться. Для этого щелкните по ссылке Add a new website.

Затем щелкните по плавающей панели под Select your optin type, чтобы выбрать шаблон для своей панели. Выбрав шаблон, у вас запустится конструктор, позволяющий настроить дизайн и прочие вещи.

Настроив все по своему усмотрению, не забудьте щелкнуть по кнопке сохранения. Как только вы закончите с настройкой, выберите Start Campaign и ваша панель будет готова, чтобы добавить её на сайт WordPress.

Вернитесь в админпанель вашего сайта на WordPress и зайдите в OptinMonster » Optins. Если не увидите свою функцию, то просто обновите страничку. Затем нажмите Edit output settings.

На следующей странице отметьте ячейку Enable optin on site и сохраните настройки. Используя расширенные настройки, вы можете сделать так, чтобы панель появлялась на специфических страницах. Вот и все, плавающая панель теперь у вас на сайте.

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520