БЛОГ 2410

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

Как создать «липкую» плавающую панель нижнего колонтитула в WordPress
Обсудим ваш проект?

Предлагаем обсудить, чем мы можем вам помочь. Забронируйте 15-минутную консультацию.

Поделиться статьей

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

Панель плавающего нижнего колонтитула
Панель плавающего нижнего колонтитула Изображение с сайта wpbeginner.com

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

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

Панель нижнего колонтитула
Панель нижнего колонтитула Изображение с сайта wpbeginner.com

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

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

В этой статье мы покажем вам два метода добавления липкой плавающей панели нижнего колонтитула на ваш сайт 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
Подключите свой сайт WordPress к OptinMonster Изображение с сайта wpbeginner.com

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

Ключи API OptinMonster
Ключи API OptinMonster Изображение с сайта wpbeginner.com

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

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

Создать новую подписку
Создать новую подписку Изображение с сайта wpbeginner.com

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

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

Настройки подписки
Настройки подписки Изображение с сайта wpbeginner.com

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

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

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

Настройщик Optin
Настройщик Optin Изображение с сайта wpbeginner.com

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

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

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

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

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

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

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

Настройки вывода Optin
Настройки вывода Optin Изображение с сайта wpbeginner.com

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

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

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

Плавающий бар добавлен с помощью OptinMonster
Плавающий бар добавлен с помощью OptinMonster Изображение с сайта wpbeginner.com

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

Свяжитесь с нами.

Узнайте, чем мы можем быть для вас полезны.

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

Агентство веб разработки.

Услуги программирования и веб разработки по фиксированной цене. Специализация: WordPress, разработка B2B решений и создание кастомных скриптов.

WordPress

Разработка шаблонов, плагинов, интернет магазинов на WooCommerce, создание сайтов

Подробнее

B2B решения

CRM, ERP, внутренние системы, автоматизация, калькуляторы, SaaS и индивидуальные решения

Подробнее

Программирование

Разработка кастомных скриптов, API, интеграции, Zapier, Integromat, автоматизация

Подробнее

Подписка

Безлимитные услуги графического дизайна и веб разработки по фиксированной цене

Подробнее