Хотите ли вы создать "липкую" плавающую панель нижнего колонтитула в WordPress?? Мы используем плавающий нижний колонтитул на нашем сайте уже много лет,...
Хотите ли вы создать «липкую» плавающую панель нижнего колонтитула в WordPress?? Мы используем плавающий нижний колонтитул на нашем сайте уже много лет, потому что он помогает нам снизить процент отказов и увеличить количество просматриваемых пользователями страниц. Многие из вас спрашивали нас, как создать подобную плавающую панель, так что вот она. В этой статье мы покажем вам, как создать липкую плавающую панель нижнего колонтитула в WordPress.
Липкая плавающая панель нижнего колонтитула позволяет вам наглядно демонстрировать пользователям ваш важный контент. Эта панель остается видимой для пользователей все время, поэтому они с большей вероятностью нажмут на нее и откроют для себя больше полезного контента.
Вы можете использовать плавающую панель нижнего колонтитула для:
Увеличение количества кликов на другие посты блога
Создать свой список адресов электронной почты
Привлечь внимание к специальным предложениям / распродаже
В этой статье мы покажем вам два метода добавления липкой плавающей панели нижнего колонтитула на ваш сайт WordPress. В одном случае используется плагин, а в другом — метод кода, который мы используем на WPBeginner. Вы можете выбрать тот, который вам удобнее использовать.
Метод 1: Вручную создайте липкую плавающую панель нижнего колонтитула в WordPress
Этот метод требует добавления кода в файлы WordPress. Если вы новичок в добавлении кода, ознакомьтесь с нашим руководством о том, как вставить фрагменты из Интернета в WordPress.
Во-первых, вам нужно подключиться к вашему сайту WordPress с помощью FTP-клиента или файлового менеджера в cPanel.
В вашем FTP-клиенте вам нужно найти нижний колонтитул.php файл в папке с темой WordPress и загрузите его на рабочий стол. Он будет расположен по следующему пути:
Далее вам нужно открыть нижний колонтитул.откройте файл php в обычном текстовом редакторе типа Блокнот и добавьте следующий код непосредственно перед строкой
тег.
Вы можете добавить столько элементов списка, сколько захотите. Мы покажем вам, как произвольно чередовать их при каждой загрузке страницы.
Следующим шагом будет добавление стилей CSS.
Вы можете добавить CSS в стиль вашей темы WordPress.css файл или используйте плагин Simple Custom CSS.
После добавления CSS вы можете не увидеть изменений на своем сайте. Это происходит потому, что мы установили отображение элементов в нашем списке на none.
Далее, мы будем использовать 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. Он будет находиться по такому пути:
Если в каталоге вашей темы нет папки js, то вам нужно создать ее.
Теперь вам нужно загрузить плавающую панель.js файл, который вы создали ранее, в папку js, которую вы только что создали.
Следующим шагом будет загрузка файла JavaScript в вашей теме WordPress.
Вставьте этот код в функции вашей темы.php-файл или плагин для конкретного сайта.
Вот и все, теперь вы можете посетить свой сайт, чтобы увидеть плавающую панель нижнего колонтитула в действии. Перезагрузите страницу несколько раз, чтобы увидеть, как панель нижнего колонтитула произвольно отображает различные элементы из вашего списка.
Преимущество использования этого метода заключается в том, что вы можете произвольно вращать несколько ссылок в плавающем футер-баре, как это делаем мы.
Однако сложность заключается в том, что вам нужно добавить код. Кроме того, вы не можете использовать эту плавающую панель для других вещей, не делая слишком много настроек CSS.
Метод 2: Использование OptinMontser для добавления плавающей панели нижнего колонтитула в WordPress
OptinMonster — это популярный плагин для генерации лидов, который работает на всех сайтах. Он поможет вам конвертировать посетителей сайта в подписчиков и клиентов.
Одной из особенностей OptinMonster является плавающая панель заголовка и нижнего колонтитула, которую вы можете использовать для отображения формы email optin, а также для продвижения отдельных ссылок / предложений.
Преимущество использования этого метода заключается в следующем:
Простой в настройке (без кода)
Вы можете показывать пользовательские плавающие панели на разных страницах / категориях вашего сайта.
Вы можете использовать его для создания списка адресов электронной почты, а также для продвижения предложений.
Единственным недостатком является то, что OptinMonster — это платная услуга. Но вы можете использовать наш купон OptinMonster: WPB10 получить 10% скидку на любой тарифный план OptinMonster.
После покупки OptinMonster (план Plus или Pro), вы можете использовать плагин OptinMonster WordPress API на своем сайте. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.
Этот плагин просто действует как соединитель между вашим WordPress сайтом и OptinMonster.
После активации плагин добавит новый пункт меню под названием OptinMonster в панель администратора WordPress. Нажав на него, вы перейдете на страницу настроек плагина.
Вам будет предложено указать имя пользователя и ключ API OptinMonster. Вы можете получить эти кнопки из вашей учетной записи OptinMonster.
Скопируйте и вставьте ключи в настройки плагина и нажмите на кнопку «Подключиться к OptinMonster». Теперь плагин подключит ваш сайт WordPress к вашей учетной записи OptinMonster.
Далее, вам нужно нажать на кнопку ‘Create New Optin’.
Это приведет вас на страницу ‘Create New Optin’ на сайте OptinMonster.
Сначала вам нужно дать название вашей кампании Optin Campaign и выбрать сайт, на котором вы будете использовать этот optin. Если вашего сайта нет в списке, нажмите на ссылку «Добавить новый сайт».
Далее вы можете нажать на Floating bar под ‘Select your optin type’, чтобы использовать шаблоны, доступные для использования в качестве плавающей панели.
Вы можете настроить все эти шаблоны по своему вкусу. Выберите тот, который наиболее близок к тому, что вы задумали.
Как только вы выберете шаблон, OptinMonster запустит их дизайн настройки. Это конструктор, где вы можете настроить внешний вид и параметры для вашего оптина.
Когда вы закончите настраивать внешний вид вашего оптина, не забудьте нажать на кнопку сохранения.
Хотя эти оптины и называются оптинами, они не всегда должны ими быть. Вы можете использовать функцию «Да / Нет», чтобы добавить кнопку для просмотра статьи в блоге или получения специальной скидки.
Когда вы впервые создаете плавающую панель, она по умолчанию приостанавливается.
Как только вы закончите настройку, наведите курсор на строку состояния в верхнем меню и выберите Начать кампанию.
Ваш плавающий бар теперь готов к добавлению на ваш сайт WordPress.
Вернитесь в административную область вашего WordPress сайта и зайдите на сайт OptinMonster » Оптины. Здесь вы увидите список ваших оптин. Если вы не видите его, то нажмите на кнопку Refresh Optins и плагин отобразит его.
Нажмите на ссылку ‘Редактировать настройки вывода’, чтобы продолжить.
На следующей странице установите флажок напротив опции ‘Включить оптин на сайте’, а затем нажмите на кнопку сохранения настроек.
Вы также можете использовать опцию Advanced, чтобы показывать плавающую панель только на определенных постах, страницах, категориях и других областях.
Вот и все, плавающая панель нижнего колонтитула теперь работает на вашем сайте WordPress.
Надеемся, эта статья помогла вам добавить плавающую панель нижнего колонтитула на ваш сайт WordPress. Вы также можете посмотреть эти практические советы по привлечению трафика на ваш сайт WordPress.
