Как создать плавающий “липкий” футер в WordPress

Как создать плавающий футер бар. Это просто. В этой статье покажем вам, как создать липкий нижний колонтитул (плавающий бар) в WordPress.

Примечание: это не плагин. Это базовый учебник по HTML и CSS. Вы должны иметь некоторое понимание того, как работают темы WordPress для того, чтобы читать этот учебник.

Как работает плавающий Колонтитул бар?

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

Зачем использовать плавающий Колонтитул бар?

Вы можете использовать его, чтобы получить больше внимания, чтобы ваши лучшие сообщения, популярные сообщения, Электронная почта или как там еще вам нравится. Наверняка есть плагины, такие как HelloBar и многие другие реплики HelloBar. Панели инструментов Wibiya. Плагин всплывающий Лайтбокс Pippity имеет свою собственную версию футер бара.

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

Как создать плавающий бар футер в WordPress

Хотя мы говорим в названии, что это для WordPress, понятие колонтитула бар может быть использован на любом сайте. Все, что мы делаем, – это создать div с помощью CSS свойства position: фиксированный; которое означает “магия” плавающий. Тогда мы имеем простую математику с помощью кода jQuery, который поворачивает количество элементов.

Открыть свой файл footer.php и добавьте следующие коды прямо перед закрытием выше всех скриптов.

<div class="fixedBar">
<div class="boxfloat">

<ul id="tips">

<li><a href="http://AndreyEx.ru/">AndreyEx ссылка будет первой</a></li>

<li><a href="http://drevodel.org/">drevodel.org будет второй</a></li>
</ul>

</div>
</div>

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

/*AndreyEx 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;}

Поэтому у нас главный фиксированный бар. Мы задаем цветовую схему и другие основные для дизайна. Самое главное в том, что класс является положение: фиксированный элемент. У нас есть Z-индекс набора свойств очень высокий просто так этот Нижний колонтитул бар не получить показать. Единственное, что перекрывает футере бар, так это встроенный YouTube.

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

Потому что в ширину div .fixedBar является 100%, нам нужно создать обертку, иначе содержимое будет выравнено по левому краю. Вот почему у нас есть элемент div .boxfloat. Думаю о том как обруч класса. Не стесняйтесь регулировать ширину. В #tips элемент списка отображается: по умолчанию-none. Но мы будем использовать jQuery, чтобы показать один элемент списка в случайном порядке на каждой странице загрузки.

Теперь давайте добавим наш небольшой jQuery-код. Открыть свой файл footer.php и добавить этот скрипт к концу. Этот маленький фрагмент покажет один элемент списка на каждой странице нагрузки из всех элементов списка, добавить.

<script type="text/javascript">
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();
});
</script>

Примечание: вы должны убедиться, что у вас загружается библиотека jQuery. Наиболее популярные темы WordPress имеют по крайней мере одну функцию, которая использует jQuery, поэтому мы довольно уверены, что ваш сайт уже будет иметь его. Если нет, то вам нужно будет загрузить jQuery в заголовке.

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

Если вы хотите показать только один элемент, а не вращать несколько элементов, то вам не нужно добавлять этот скрипта. Просто снимите Дисплей: нет в свойстве CSS tag.

Теперь что?

Ну, нет бэкэнда. Редактировать файл footer.php для добавления/удаления элементов списка. Если вы хотите подойти к вопросу творчески, вы можете создать повторяющийся пост. Показать посты из определенной категории. Эхо заголовка и ссылку как элементы списка. Это позволит вам автоматизировать процесс. Вы также можете создать панель настроек в серверной части и хранить идентификаторы пост там, если надо.

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

Поддержка: мы не оказываем бесплатную поддержку на учебники, как эти. Поэтому, пожалуйста, не оставляйте вопросы в комментариях. Если есть ошибка, то не стесняйтесь комментировать. Также, если вы используете фреймворк, как основу, и т. д., тогда вам нужно будет ознакомиться с их крюками и фильтрами. Потому что это единственный способ заставить эту штуку работать. Мы рекомендуем задавать в рамках конкретные вопросы в их форуме поддержки.

Читайте также

WordPress – Общие настройки

7 лет назад

WordPress – Библиотека мультимедиа

7 лет назад

WordPress – Удаление ссылки

7 лет назад