Как создать плавающий футер бар. Это просто. В этой статье покажем вам, как создать липкий нижний колонтитул (плавающий бар) в 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, и поэтому решил написать помощь по WordPress, которая необходима для работы с данной cms.

WordPress – один из самых популярных движков. В нем все хорошо: простота, удобство и расширяемый функционал, а также, является одним из лучших движков для продвижения в поисковиках.

Вы встречались с предупреждением в Google инструментах для веб-мастеров ‘робот Googlebot не может получить доступ к файлам CSS и JS’ для вашего сайта WordPress? Сообщение содержит ссылки на инструкции о том, как исправить эту проблему, но этим инструкциям не очень легко следовать. В этой статье мы покажем вам, как исправить ошибку “робот Googlebot не может получить доступ к файлам CSS и JS” на вашем WordPress сайте.

Зачем Google требуется доступ к CSS и JS файлы?

Компания Google ориентирована на предоставление более высоких позиций для дружественных веб-сайтов – сайты, которые работают быстро, имеют хороший пользовательский опыт, и т. д. В целях определения пользователя опыта работы веб-сайта, Google необходимо открыть, чтобы иметь возможность посетить сайт в файлах CSS и в JavaScript.

По умолчанию WordPress не блокирует поисковые роботы для доступа к файлам CSS или JS. Однако некоторые владельцы сайтов могут случайно заблокировать их при попытке добавить дополнительные меры безопасности или безопасности WordPress с помощью плагина.

Это ограничивает роботу Googlebot индексировать CSS и JS файлы, которые могут повлиять на ваш сайт в поисковой оптимизации сайта.

Сказав это, давайте посмотрим, как мы можем найти эти файлы и разблокировать их.

Как предоставить Google доступ к файлам CSS и JS

Для начала нужно знать какие файлы Гугл не может открыть на вашем сайте.

Вы можете увидеть, как робот Google видит ваш сайт, нажав на Сканирование » Просмотреть как Googlebot в консоли Google (ранее инструменты для веб-мастеров). Далее, нажмите на кнопку «получить и отобразить» (вы можете сделать это как для настольных, так и мобильных).

Один раз нажали, результат появится в строке ниже. Нажатие на нее покажет вам то, что пользователь видит и то, что видит робот Google при загрузке вашего сайта.

Если вы заметили какую-либо разницу между двумя скриншотами, то это означает, что робот Googlebot не смог получить доступ к CSS/JS файлов. Он также покажет вам ссылку на файлы CSS и JS, которые он не смог открыть.

Вы также можете найти список этих блокированных ресурсов в индекс Google » заблокированные ресурсы.

Нажав на каждый ресурс, вам покажут ссылки на актуальные ресурсы, которые не могут быть доступны для робота Googlebot.

По большой части, это файлы стилей CSS и JS, добавленные в ваш WordPress плагины или темы.

Теперь вам надо будет отредактировать свой файл robots.txt который управляет тем, что Гугл бот видит.

Вы можете отредактировать его, подключив к вашему сайту с помощью FTP-клиента. Файл robots.txt находится в корневом каталоге вашего сайта.

Если вы используете СЕО плагин, то вы можете редактировать robots.txt файл в админке WordPress. Просто зайдите на СЕО » инструменты страницы и затем нажмите на редактор файла.

Вы скорее всего заметите, что ваш сайт запретил доступ к некоторым каталогам WordPress:

User-agent: *

Disallow: /wp-admin/

Disallow: /wp-includes/

Disallow: /wp-content/plugins/

Disallow: /wp-content/themes/

Теперь вам надо удалить строки, которые блокируют доступ Google к CSS или JS файлы на вашем сайте. Обычно эти файлы расположены в папке плагины или папок темы. Вам также может понадобиться снять WP-includes и многие темы WordPress и плагины могут вызвать скрипты, находящиеся в папке WP-includes, такие как jQuery.

Некоторые пользователи могут заметить, что их robots.txt файл либо пуст или не существует. Если робот Google не находит файл robots.txt, то он автоматически сканирует и индексирует все файлы.

Тогда почему вы видите это предупреждение?

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

User-agent: *

Allow: /wp-includes/js/

Как только вы закончите, сохраните ваш robots.txt файл. Просмотрите как видит инструмент Googlebot, и нажмите на кнопку получить и отобразить. А теперь сравните свои результаты выборки, и вы увидите, что проблема большинства заблокированных ресурсов должна исчезнуть.

Мы надеемся, что эта статья помогла вам решить ошибку ‘робот Googlebot не может получить доступ к CSS и JS файлы’ на вашем WordPress сайте.

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

Последние посты с использованием  виджетов

В WordPress поставляется со встроенными по умолчанию виджетами для отображения последних постов в боковой панели вашего сайта или любой готовой для виджетов области. Внутри административной панели WordPress, просто посетите внешний вид » виджеты и добавьте виджет «Recent Posts» в боковой панели.

Встроенный виджет «Recent Posts» очень простой. Вы можете предоставить альтернативное название виджета, показывают дату, и добавить число записей, которые вы хотите отобразить. Далее нажмите на кнопку Сохранить, чтобы сохранить ваши настройки виджета.

Используя расширенный плагин виджета последних постов

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

Что делать, если вы хотите, отобразить миниатюры и отрывки с ваших последних постов? Что делать, если вы хотите ограничить их к определенным категориям или тегам?

Ну, вот тогда пригодится плагин расширенного виджета последних постов.

Первое, что нужно сделать, это установить и активировать в WordPress плагин Recent Posts Extended. При активации, просто перейдите внешний вид » виджеты и добавить виджет «Recent Posts Extended» для боковой панели.

Виджет «Recent Posts Extended» поставляется с множеством вариантов и дает полные возможности: как вы хотите отображать последние записи на вашем сайте на WordPress. Вы можете показать эскизы, отрывки, предельные категории и теги, игнорировать липкие записи, и многое другое. Вы даже можете использовать этот виджет для отображения последних записей из какой-либо другой страницы на вашем сайте.

Отображение последних записей в WordPress с помощью шорткода

Добавить последние записи в боковой панели довольно легко, но как сделать если вы хотите показать последние записи внутри поста или страницы в WordPress? Самый простой способ, чтобы отобразить последние посты или страницы в WordPress, используя шорткоды.

Для начала Вам надо установить и активировать плагин Отображение записей Шорткод. Он работает без настроек.

Просто редактируете пост или страницу, где вы хотите отображать последние записи. Далее используйте шорткод [display-posts] с вашими собственными параметрами внутри записи. Плагин предлагает целый ряд параметров, которые можно использовать с шорткодом. Вот несколько примеров:

Показывает 5 последних страниц с эскизами и текстом

[display-posts posts_per_page="3" image_size="thumbnail" include_excerpt="true"]

Отобразить последние страницы вместо постов

[display-posts posts_per_page="3" post_type="page"]

Изменить порядок в заголовке вместо даты.

[display-posts posts_per_page="3" orderby="title"]

Отобразить последние страницы под конкретной родительской страницы.

[display-posts posts_per_page="3" post_type="page" post_parent="5"]

Полный список параметров документации можно посмотреть посетив сайт плагина.

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

add_filter('widget_text', 'do_shortcode');

Отображение последних постов в WordPress вручную в файлах темы

Более продвинутые пользователи WordPress могут добавить последние посты прямо в файлы темы WordPress. Есть несколько способов сделать это, но самый простой — использовать встроенный класс WP_Query. Добавьте этот код там, где вы хотите отображать последние сообщения.

<ul>

// Определяем для WP Query параметры

<?php $the_query = new WP_Query( 'posts_per_page=4' ); ?>



// Начало WP Query

<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>



// Вывести Заголовок поста с гиперссылкой

<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>



// Отобразить отрывок поста

<li><?php the_excerpt(__('(далее…)')); ?></li>



// Повторяем процесс и сбрасываем, как только он достигаем предела

<?php

endwhile;

wp_reset_postdata();

?>

</ul>

Этот код просто отображает пять последних сообщений с их названиями и отрывком поста. Класс WP_Query имеет массу параметров, что позволяет настроить его любым способом, как вам нравится. Для получения дополнительной информации, пожалуйста, ознакомьтесь с документацией.

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

Если вам понравилась данная статья, то, пожалуйста, подпишитесь на наш канал. Вы также можете найти нас на Твиттере и Facebook.

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

Знали ли вы, что частой причиной взлома сайтов на WordPress являются вредоносные темы и плагины? Читайте подробности: Учебное пособие по безопасности WordPress.

Обновление: версия 4.1 вышла 18 декабря.

В WordPress версии 4.1 появятся несколько новых функций для упрощения навигации в темах: the_post_navigation, the_posts_navigation и функция пагинации the_posts_pagination.

Для постраничной навигации многие темы для WordPress внедряют поддержку таких плагинов, как WP-PageNavi, а начиная с темы Twenty Fourteen, некоторые авторы последовали примеру стандартной темы и стали выполнять пагинацию с помощью встроенной функции ядра paginate_links.

Использование этой функции часто требует большое количество кода и иногда включает логику для работы с постоянными ссылками модуля WP_Rewrite, данными о запросе WP_Query и прочее. Начиная с WordPress версии 4.1 разработчики ядра обернули эту логику в одну простую функцию.

the_posts_pagination()

Функция the_posts_pagination() вставляет блок пагинации в тему WordPress:

<?php paginate_links(); ?>

В качестве единственного параметра функция the_posts_pagination() принимает массив, который передается в функцию paginate_links(). Это значит, что весь функционал который мы ранее выполняли с помощью paginate_links(), также легко реализовать и с помощью новой упрощенной функции the_posts_pagination().

Например, можно добавить символ № перед каждым номером страницы:

the_posts_pagination( array( 

    'before_page_number' => '№', 

) );

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

• show_all — показывать все страницы
• end_size — количество страниц в начале и конце списка
• mid_size — количество страниц слева и справа от текущей страницы

Например:

the_posts_pagination( array(

    'end_size' => 2,

    'mid_size' => 2,

) );

Данный код будет отображать первую, вторую, предпоследнюю и последнюю страницы, независимо от текущей. А вокруг текущей страницы будет по две страницы с каждой стороны. На примере темы Twenty Fifteen это будет выглядеть следующим образом:

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

the_posts_navigation

Функция the_posts_navigation() является менее привлекательной альтернативой функции the_posts_pagination(). Она выводит лишь ссылки на следующую и предыдущую страницы относительно текущей.

До WordPress 4.1 данные ссылки можно получить с помощью функций get_next_posts_link() и get_previous_posts_link(), которыми на сегодняшний день пользуются большинство авторов тем для WordPress. Начиная с версии 4.1 авторы могут существенно упростить вывод подобных ссылок:

<?php the_posts_navigation(); ?>

С помощью ключей prev_text и next_text передаваемого массива, можно изменить текст ссылок. По умолчанию используется «Старые записи» и «Новые записи», что подойдет для большинства случаев.

the_post_navigation

Функцию the_post_navigation() можно использовать в шаблоне вывода одной записи. Данная функция отображает ссылки на следующую и предыдущую записи относительно текущей. Она также хорошо подходит для использования в шаблонах прикрепленных файлов.

<?php the_post_navigation(); ?>

Аргументами prev_text и next_text можно изменить текст, куда строкой %title можно вставить заголовок следующей или предыдущей статьи:

the_post_navigation( array(

    'next_text' => 'Следующая запись: %title',

    'prev_text' => 'Предыдущая запись: %title',

) );

Заключение

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

Следует отметить, что все три функции выводят результат сразу на экран. Если вы хотите записать результат в переменную, сделать это можно добавив префикс get_ к любой из них, например get_the_posts_pagination().

Напоминаем, что WordPress версии 4.1 выйдет в декабре 2014 года вместе с новой стандартной темой Twenty Fifteen.