Как создать «липкую» плавающую панель нижнего колонтитула в WordPress

/

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

Панель плавающего нижнего колонтитула

Что такое панель плавающего нижнего колонтитула?

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

Панель нижнего колонтитула

Вы можете использовать плавающую панель нижнего колонтитула, чтобы:

  • Привлекайте больше кликов к другим сообщениям блога
  • Создайте свой список рассылки
  • Обратите внимание на специальные предложения / распродажи

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

Метод 1: вручную создать липкую плавающую панель нижнего колонтитула в WordPress

Этот метод требует, чтобы вы добавили код в файлы WordPress. Если вы новичок в добавлении кода, ознакомьтесь с нашим руководством о том, как вставлять фрагменты из Интернета в WordPress.

Во-первых, вам необходимо подключиться к своему сайту WordPress с помощью FTP-клиента или файлового менеджера в cPanel.

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

/ wp-content / themes / ваша-тема-папка /

Затем вам нужно открыть файл footer.php в текстовом редакторе, таком как Блокнот, и добавить следующий код непосредственно перед тегом </body>.

<div class="fixedbar">
    <div class="boxfloat">
        <ul id="tips">
            <li><a href="https://www.example.com/">Example 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 своей темы WordPress или использовать плагин Simple Custom CSS.

/*Footer Bar*/

.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 для случайного отображения одного элемента из нашего списка при каждой загрузке страницы.

Вам нужно открыть на своем компьютере текстовый редактор, например Блокнот, и добавить этот код в пустой файл:

<script>
(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 );

Как только вы закончите, вам нужно сохранить этот файл как плавающий bar.is на вашем рабочем столе.

Теперь откройте свой FTP-клиент и подключитесь к своему веб-серверу. Перейдите в папку своей темы и найдите папку js. Это было бы на таком пути:

/ wp-content / themes / ваша-тема-папка / js

Если в каталоге вашей темы нет папки js, вам необходимо ее создать.

Теперь вам нужно загрузить созданный ранее файл floatbar.js в только что созданную папку js.

Следующим шагом является постановка (загрузка) файла JavaScript в вашей теме WordPress.

Вставьте этот код в файл functions.php своей темы или в плагин для конкретного сайта.

<?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: использование OptinMontser для добавления плавающей панели нижнего колонтитула в WordPress

OptinMonster - популярный плагин для генерации лидов, который работает на всех веб-сайтах. Это помогает вам превращать посетителей сайта в подписчиков и клиентов.

Одной из функций OptinMonster является плавающий верхний и нижний колонтитулы, которые можно использовать для отображения формы подписки по электронной почте, а также для продвижения отдельных ссылок / предложений.

Преимущество использования этого метода:

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

Единственным недостатком является то, что OptinMonster - платный сервис. Но вы можете использовать наш купон OptinMonster: WPB10, чтобы получить скидку 10% на любой план OptinMonster.

После того, как вы приобрели OptinMonster (план Plus или Pro), вы можете использовать плагин OptinMonster WordPress API на своем сайте. Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.

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

После активации плагин добавит новый пункт меню с надписью OptinMonster на панель администратора WordPress. Нажав на нее, вы попадете на страницу настроек плагина.

Подключите свой сайт WordPress к OptinMonster

Вам будет предложено указать ваше имя пользователя и ключ OptinMonster API. Вы можете получить эти ключи в своей учетной записи OptinMonster.

Ключи API OptinMonster

Скопируйте и вставьте ключи в настройки плагина и нажмите кнопку «Подключиться к OptinMonster». Теперь плагин подключит ваш сайт WordPress к вашей учетной записи OptinMonster.

Затем вам нужно нажать кнопку «Создать новый вариант».

Создать новую подписку

Вы перейдете на страницу «Создать новый вариант» на веб-сайте OptinMonster.

Сначала вам нужно указать заголовок для своей кампании по включению и выбрать веб-сайт, на котором вы будете использовать эту опцию. Если вашего сайта нет в списке, нажмите ссылку «Добавить новый сайт».

Настройки подписки

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

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

Как только вы выберете шаблон, OptinMonster запустит настройщик своего дизайна. Это конструктор «укажи и щелкни», в котором вы можете настроить внешний вид и настройки для своей подписки.

Настройщик Optin

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

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

Когда вы впервые создаете плавающую панель, по умолчанию она приостановлена.

Закончив настройку, наведите указатель мыши на строку состояния в верхнем меню и выберите «Начать кампанию».

Теперь ваша плавающая панель готова к добавлению на ваш сайт WordPress.

Вернитесь в админку вашего сайта WordPress и зайдите в OptinMonster »Optins. Здесь вы увидите свою подписку. Если вы его не видите, нажмите кнопку «Обновить параметры», и плагин отобразит его.

Нажмите ссылку «Изменить настройки вывода», чтобы продолжить.

Настройки вывода Optin

На следующей странице установите флажок рядом с опцией «Включить подписку на сайте», а затем нажмите на настройки сохранения.

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

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

Плавающий бар добавлен с помощью OptinMonster

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как исправить ошибку при установлении соединения с базой данных в WordPress

Вы видите на своем веб-сайте WordPress сообщение «Ошибка при установлении соединения с базой данных»? Это фатальная ошибка, которая делает ваш сайт

Как легко перенести свой сайт с Joomla на WordPress (шаг за шагом)

Вы хотите перенести свой сайт с Joomla на WordPress? Хотя Joomla - хорошая система управления контентом, она НЕ такая мощная, гибкая и удобная, как WordPress. Часто

Как открыть всплывающую форму WordPress при нажатии на ссылку или изображение

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

Как установить WordPress - полное руководство по установке WordPress

WordPress известен как самый популярный конструктор сайтов в мире. Он обслуживает более 39% всех веб-сайтов в Интернете. Основная причина этого в том,