Постраничная навигация комментариев

Настройки плагина WP-Pagenavi

Как я уже писал выше — PageNavi — является самым «ходовым» плагином для решения вопроса с постраничной навигацией на блоге.

Да, он прост и удобен.

А некоторые мои читатели уже, наверное, скачали себе пару вариантов дизайна для этого плагина.

Поэтому я решил с ним провести отдельную беседу и рассказать о том как его можно использовать.

Так вот, установили и заходим на страницу настроек, как показано на скрине.

1 — Этого пункта у меня нет на блоге. Он есть по умолчанию, когда вы только установили плагин. Так вот, по умолчанию у вас будет этот пункт выглядеть вот так:

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

12 — Здесь нужно выбрать НЕТ, потому что если будет стоять «ДА» — навигация страниц будет стоять даже тогда когда она не нужна (т.е. когда страниц меньше чем на одну страницу). Но зачем?

13 — Количество страниц для показа, с учетом текущей страницы (по середине списка).

14 — Диапазон страниц для показа. Если поставите цифру «5» — то будет список : 1,2,3,4,5 и потом перечисление диапазонами 10,20,30 и т.д.

15 — Коэффициент диапазона — через сколько прыгает диапазон (предыдущий пункт)

Вот в пункте 13 — могут быть проблемы у некоторых. Если здесь стоит большое число, скажем «10» — то вы сможете видеть на своём блоге нечто подобное.

Изменение внешнего вида панели постраничной навигации

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

Правда для того, чтобы она приняла вид, показанный на приведенных в этой статье скриншотах, я добавил дополнительные свойства не в файл CSS плагина ( /wp-content/plugins/wp-pagenavi/pagenavi-css.css ), а в файл используемой мною темы оформления (wp-content/themes/название папки с темой оформления/style.css).

В этом файле свойства CSS, задающие внешний вид панели WP-PageNavi, выглядят так:

Обращаю ваше внимание, что названия классов и ID (тут читайте про эти селекторы подробнее), которые используются здесь, относятся именно к моему шаблону. Поясню назначение некоторых правил и свойств CSS

задает внешние и внутренние отступы (margin и padding — тут про них смотрите) для кнопок панели (фактически для ссылок с этих кнопок, т.к. эти свойства будут применены именно к ссылкам задаваемым тегом A и размещенным в контейнере wp-pagenav ).

Так же в этом правиле задается цвет текста ссылок (белый цвет задается в свойстве color: #fff; — здесь читайте про Color и background в CSS).

Рамка вокруг ссылок будет отсутствовать (свойство border: 0px ), а фоновый цвет для контейнеров с этими ссылками будет определяться свойством background-color: #2b99ff; . Именно этот цвет вы можете видеть на скриншотах расположенных выше для неактивных кнопок панели постраничной навигации.

задает цвет для текста и фона контейнера (кнопки) с ссылкой, к которой в данный момент подведен курсор мыши (CSS свойства ссылки при наведении — a:hover — здесь описаны hover и другие селекторы псевдоклассов).

Цвет текста ссылки по прежнему остается белым, а вот цвет фона (фактически цвет кнопки) меняется на более темный ( background-color: #154b7d; ). Т.е. посетитель, подводя курсор мыши к кнопкам панели навигации, будет видеть изменение цвета этой кнопки, что создает ощущение интерактивности.

Задает внешний вид кнопки с номером, открытой в данный момент странички блога (в коде у этой ссылки будет прописан тег SPAN с классом CURRENT). Такая кнопка будет выглядеть так же, как кнопка с цифрой один, на приведенном ниже рисунке:

В этом CSS правиле задается изменение цвета фона этой активной кнопки (свойство background:#26343c ), цвета текста ссылки на этой кнопке (свойство color: #add352 ), а кроме этого шрифт текста ссылки будет жирным в силу этого CSS свойства — font-weight: bold (тут описаны все возможные комбинации Font (Weight, Family, Size, Style) и Line Height).

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

Например, для того, чтобы получить панель такого вида:

Вам нужно будет скачать этот архив, распаковать его и скопировать папку IMAGES в папку с плагином WP-PageNavi, которую вы сможете найти по следующему пути:

ktonanovenkogo.ru

Где и как искать функции next_posts_link и previous_posts_link

Добавить постраничную навигацию на сайт WordPress

Если поиск из консоли не приносит быстрых результатов, а попросту вы не видите эти функции, делаем следующее:

Через FTP соединение, копируем файлы рабочей темы к себе на компьютер.
Открываем все скачанные файлы в текстовом редакторе, например Notepadd++.
Далее, используем поиск редактора «Найти во всех файлах» ищем названия наших функций: next_posts_link и previous_posts_link .

Найдя их, заменяем на:

После замены, отредактированный файл заливаем обратно в каталог сайта и проверяем появление кнопок постраничной навигации на сайте.

Как вставить постраничную навигацию в шаблон?

Как удалить стандартные надписи «Предыдущие записи – Следующие записи»? Как установить вместо них код вызова плагина?

В шаблоне Twenty Eleven нужно открыть на редактирование файл functions.php (Функции темы).

Найдите строки:

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyeleven' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></div>

Вместо них пропишите:

<?php wp_pagenavi(); ?>

В некоторых шаблонах нужно отредактировать 3 файла: archive.php, search.php и index.php (если у вас не статичная главная страница).

Ищете строчки вроде:

<div class="navigation">
<div class="navleft"><?php next_posts_link('« Предыдущие записи') ?></div>
<div class="navright"><?php previous_posts_link('Следующие записи »') ?></div>

И вставляйте вместо них:

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

Не забудьте отредактировать все 3 файла.

Теперь на вашем сайте есть удобная и аккуратная постраничная навигация. Вот только плагин wp pagenavi не может придать навигации привлекательный вид.

Самое время добавить навигации ярких красок. В этом вам поможет статья «Готовые стили для панельки постраничной навигации».

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

Кстати, а вы уже убрали лишние заголовки из шаблона сайта? Бытует мнение, что заголовки должны использоваться только в тексте статьи, а h2 и h3 в элементах дизайна ухудшают оптимизацию сайта.

Вместе с этим читают

Регистрация хостинга

Как установить шаблон на сайт WordPress?

Готовые стили для панельки постраничной навигации

Готовый файл robots.txt для WordPress

Тренды дизайна и юзабилити на сайтах eCommerce

Как защитить контент сайта от копирования?

Навигация в комментариях

Идем Панель администрирования – Параметры – Обсуждение и ставим галочку в строке Разбивать комментарии верхнего уровня на страницы.

Обратите внимание, ключевые слова в этом названии – это КОММЕНТАРИИ ВЕРХНЕГО УРОВНЯ. Я долго пытался вкурить, почему у меня не отображается навигация

Потом до меня дошло, что считаются только те комментарии, которые находятся в самом начале, то есть в верхнем уровне

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

Поэтому, когда в настройках по умолчанию стоит отображать 50 штук комментариев, то естественно, что навигация не будет отображаться. Так что, для отображения страниц необходимо ставить не более 10 штук комментариев., а если у вас на блоге не много комментариев, то и вовсе штуки 3-4.

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

А получилось не очень удобно (это еще мягко говоря). Проявляться просто две ссылки – следующие комментарии и предыдущие комментарии.

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

Есть вариант плагина для навигации, очень не плохой, но о нем я расскажу ниже.

А сейчас нам потребуется код, который я нашел на блоге небезызвестного веб-мастера Димокса. Но при использовании этого кода у меня возникла проблема кривого отображения стилей страниц. Все номера съезжали вкривь и вкось, так что я позволил немного вмешаться в код Димокса и вот что у меня получилось:

function wp_corenavi() {
global $wp_query;
$pages = '';
$max = $wp_query->max_num_pages;
if (!$current = get_query_var('paged')) $current = 1;
$a = str_replace(999999999, '%#%', get_pagenum_link(999999999));
$a = $max;
$a = $current;

$total = 1; //1 - выводить текст "Страница N из N", 0 - не выводить
$a = 3; //сколько ссылок показывать слева и справа от текущей
$a = 1; //сколько ссылок показывать в начале и в конце
$a = '&laquo;'; //текст ссылки "Предыдущая страница"
$a = '&raquo;'; //текст ссылки "Следующая страница"

if ($max > 1) echo '<div class="wp-pagenavi">';
if ($total == 1 && $max > 1) $pages = '<span class="pages">Страница ' . $current . ' из ' . $max . '</span>'."\r\n";
echo $pages . paginate_links($a);
if ($max > 1) echo '</div>';
}

Сам код я не менял, а только изменил название контейнера div. Для того, чтобы не возиться со стилями.

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

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

А дальше, все как обычно, вышеуказанный код вставляем в файл functions.php, а вот такой код:

< ?php wp_list_comments(); ?>< ?php if(function_exists('wp_comments_corenavi')) wp_comments_corenavi(); ?>

необходимо вставить в файле comments.php сразу после строки wp_list_comments()

Таким образом, кнопки навигации появятся на формой комментариев. Если вы хотите чтобы кнопки были видны и в начале комментариев, то код в файле comments.php вставьте перед строкой wp_list_comments()

Вся прелесть методы в том, что не понадобиться возиться со стилями оформления. Один раз настроили при установке стилей навигации постов и при установке навигации комментариев стили оформления настроятся автоматом.

Вообще, все эти вставки кода надо проводить методом тыка, так вставили – не работает, а через строчку – работает. Как говориться, метод научного тыка — рулит!

Вот и все. Осталось только подвести некоторые итоги и послушать музыку.

Superfly Responsive Premium WordPress Menu Plugin

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

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

Меню полностью настраиваемо, имеет неограниченный выбор цветов, множество значков, возможность выбора шрифта и его размера. Если вы хотите добавить кнопки социальных сетей в меню, Superfly поддерживает Twitter, Facebook и Google+.

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

Установка темы с поддержкой пагинации

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

Чтобы добавить тему, поддерживающую пагинацию:

В поле поиска введите «pagination

». WordPress
автоматически фильтрует темы и находит те, в описании, которых присутствует данный термин.

Найдите тему, которая вам нравится, установите и активируйте ее. Если не уверены, подходит ли она, нажмите на кнопку «Предварительный просмотр
».

Примечание

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

Настройки плагина WP-PageNavi для блога на WordPress

Для того, чтобы в них попасть, вам нужно будет в админке выбрать из левого меню, в области «Параметры», пункт «Список страниц». Откроется окно с активной вкладкой «Шаблоны списка страниц»:

В поле «Шаблон общего списка страниц», на приведенном выше рисунке, задано отображение текущей странички и общего количества страниц. При таком варианте заполнения этого поля, панель WP-PageNavi будет выглядеть так:

Можно добавить слово «Страница» в это поле, если вам так больше нравится:

Страница %CURRENT_PAGE% из %TOTAL_PAGES%

А при желании можно вообще его очистить. В графах «Элемент «Текущая страница»» и «Элемент «Страница»» оставляйте все как есть. Здесь задается отображение надписи для текущей и всех остальных вебстраниц в виде порядкового номера. Получится примерно так:

В полях «Text For First Page» и «Text For Last Page» вы можете задать текст для кнопок перехода к первой и последней:

Вместо текста в графе «Text For First Page» вы можете написать единицу, а поле «Text For Last Page» — %TOTAL_PAGES% (вместо этой надписи будет отображаться число всех вебстраниц):

В полях «Text For Next Post» и «Text For Previous Post» прописываются знаки стрелочек для отображения на кнопках перехода на следующую и предыдущую:

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

Переходим к дальнейшим настройкам под названием «Настройки списка»:

Галочка в «Use pagenavi-css.css» позволяет отключить или подключить файл каскадных таблиц стилей (CSS), идущий в комплекте с плагином. В поле «Стиль списка» можете выбрать из выпадающего списка один из двух CSS стилей.

«Обычный» вы видели на предыдущих скриншотах, а при выборе стиля «Drop-down List» вы получите, примерно, такой вид панели WP-PageNavi в WordPress:

Если вы поставите галочку в поле «Always Show Page Navigation», то даже для вебстраниц, у которых пока не требуется вводить нумерацию (допустим, что на главной еще не достаточно постов, чтобы осуществилось разбиение), все равно будет отображаться навигация примерно в таком виде:

В «Number Of Pages To Show» вы можете задать, сколько страничек будет отображаться в виде непрерывного (последовательного) ряда чисел. Переход на остальные будет возможен с помощью кнопок следующей и предыдущей, а так же кнопок перехода на первую и последнюю. Я поставил там пятерку, в результате чего получил:

В «Number Of Larger Page Numbers To Show» можете задать, сколько далеких номеров вебстраниц (большего, чем текущие отображаемые номера численного значения) будет показано после кнопки перехода на следующую.

А в поле «Show Larger Page Numbers In Multiples Of» можете задать шаг, с которым будут отображаться номера далеких вебстраниц. Допустим, что в первом поле я поставлю тройку, а во втором двойку:

В результате панель PageNavi будет выглядеть так:

Т.е. выводятся номера всего трех далеких вебстраниц с интервалом (шагом) равным двойке (6, 8, 10). Для того, чтобы не использовать показ далеких номеров, вам достаточно будет поставить ноль в графе «Number Of Larger Page Numbers To Show».

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

WP PageNavi – плагин для удобства читателей

В рунете наиболее распространены два плагина постраничной навигации – WP Page Numbers
и WP
PageNavi
. Они очень похожи, поэтому что ставить на свой блог – решайте сами..ru я поставлю PageNavi. Просто сообщение администрации на официальной странице плагина не вселяет большого оптимизма:

Кто так же, как и я не силен в английском – сообщение примерно следующее: «Плагин не обновлялся уже 2 года, поэтому могут возникнуть проблемы его совместимости с новыми версиями WordPress».

Вообще во многих сборках WordPress уже стоит плагин ПейджНави, только он не настроен, поэтому не работает. Посмотрите у себя в в плагинах строчку с названием «Список страниц»

Как устанавливать (не путать с «активировать») плагины, я писал в статье . Единственный момент: если будете скачивать плагин сначала на свой компьютер (мало ли, может, решите предварительно его на вирусы проверить или еще что), перед установкой на WP не распаковывайте плагин, а оставьте в папке архива.zip. – то многие распакованные плагины через админку не устанавливаются.

Можно, конечно, пойти другим путем. Через файловый менеджер забросить на сервер в соответствующую папку вашего блога распаковаванный архив плагина (папку).

Кстати, FileZilla – прекрасный файловый менеджер, сам пользуюсь и обязательно расскажу о ней в ближайших статьях. Подписывайтесь на обновления моего блога – будете в курсе всех полезностей.

Меню навигации WordPress

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

Меню может располагаться вверху/внизу и справа/слева на странице сайта.

Создание меню WordPress

Вы можете добавить меню из панели администратора WordPress — Внешний вид — Меню.

На экране появится новое окно «Создать меню», состоящее из двух областей. В левой области находятся ваши страницы, произвольные ссылки и рубрики. А в правой – настраиваемые пункты меню.

Давайте создадим ваше первое меню.

Укажите имя для вашего меню, например. «Мое первое меню», а затем нажмите кнопку «Создать меню».

Перед вами появятся настройки меню:

Как вы можете заметить, тема сайта Azbuka WordPress предлагает 3 варианта расположения меню: main, secondary, footer.

Названия и местоположения меню зависит от выбранной темы и могут отличаться.

Затем выберите страницы, которые вы хотите добавить — отметьте страницы, перечисленные в левой области, и нажмите «Добавить в меню».

Затем выберите местоположение вашего меню и сохраните.

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

Размещение элементов меню

Вы заметили, что каждый добавленный пункт меню стоит в том порядке, в котором вы его добавили. Например, страница «Обо мне» отображается в конце, а «Товары» — в начале.

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

Так вы можете создавать необходимое количество меню для разных областей сайта.

Создание выпадающего меню навигации WordPress

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

С помощью выпадающего меню
вы можете создать правильно структурированную навигационную систему.

Теперь добавим пункт подменю для вашего нового меню.

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

Так вы можете создать несколько уровней подменю. Но, к сожалению, не все темы поддерживают создание таких многоуровневых меню — большинство дают возможность сделать только 2 уровня.

Добавление рубрик в меню

Для создания выпадающего меню в блоге используются рубрики. И добавляются по такому же принципу, что и страницы. Разверните вкладку «Рубрики», выберите нужные и добавьте в меню.

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

На примере ниже я сделала так, что все рубрики стали дочерними элементами страницы с блогом.

Редактирование пункта меню

Когда вы добавляете страницы или рубрику, WordPress автоматически использует название страницы или название рубрики в качестве текста ссылки.

Это не означает, что вы не можете его изменить.

Разверните элемент и отредактируйте так, как вам нужно.

Здесь можно изменить заголовок, текст ссылки и добавить атрибут title к ссылке. Сохраните меню, чтобы не потерять все изменения.

Также разверните элемент меню и внизу вы увидите красный текст «Удалить».

Области размещения навигационных меню

Каждая тема предлагает свои виды расположения навигационного меню.

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

Добавление навигационного меню в сайдбаре

Помимо стандартных областей вы можете добавлять меню в сайдбар и другие области с виджетами.

В админке выберите пункт «Внешний вид» — «Виджеты» и добавьте виджет «Произвольное меню» в сайдбар.

Затем вам нужно озаглавить виджет и выбрать одно из своих настроенных меню из списка. Нажмите кнопку сохранения.

Теперь перейдите на сайт и проверьте, как отображается меню в сайдбаре.

Что касается социальных кнопок в меню, некоторые темы предлагают встроенные кнопки социальных сетей.

Если их нет в вашей теме, вы можете установить плагин, например, Menu Social Icons , чтобы добавить кнопки самостоятельно.

Вам может быть интересно:

И подписывайтесь на нас в

Навигация в темах для WordPress чаще всего реализованя стандартным путём — ссылка на предыдущие записи и ссылка на следующие записи. Этого хватает в большинстве случаев, но иногда необходимо сделать именно постраничную навигацию в WordPress, в чём нам поможет бесплатный плагин WP-PageNavi.

Использование темы

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

Чтобы узнать, поддерживает ли тема эту функцию, перейдите в раздел «Внешний вид
» панели администрирования WordPress
.

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

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

A-Feed

Первым в списке не случайно встал плагин A-Feed. Этот плагин заточен на автопубликацию статей из неограниченного числа RSS-лент на любом WordPress-сайте. После сравнительно несложной настройки, все действия плагин осуществляет в полностью автоматическом режиме с заданной периодичностью. А это ни много ни мало:

сбор статей из лент

Здесь важно то, что количество этих лент не ограничено;

систематизация и категоризация статей;

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

загрузка и публикация изображений;

гибкие настройки работы со ссылками

Можно как добавлять ссылки на источник, так и, например, чистить все ссылки внутри публикуемого материала, оставляя чистый текст;

перевод с любых языков на любые. Функция осуществляется через систему Яндекс Cloud, что с одной стороны дает высокий результат и качество перевода, с другой – требует пусть и небольшой, но оплаты этого сервиса;

уникализация текстов, которая в настройках плагина называется «гиперперевод». Этот термин обозначает двойной перевод опять-таки в любых направлениях. Вы можете найти статью-источник, например, на французском, перевести ее на английский, а потом уже перевести на русский. Полученный текст будет гладким и иметь высокий процент уникальности.

Плагин существует в двух видах: бесплатной, функционал которой прилично урезан. Хотя все основное делать он все-равно может. И про-версия, у которой нет ограничений. На момент написания этой статьи, цена плагина для одного сайта – 2900 рублей. Можно и сэкономить, покупая версии на 3 или 5 сайтов. Для 3 сайтов цена будет 6900, а для 5 – 11500 рублей. Символическая плата, если сравнить с работой копирайтера.