Курилка.co.ua
Orphus RSS kurilka.co.ua

Category

Archives

Плагин WP-PageNavi для WordPress 2.x

Author wmas wmas | Category Category Блоггинг, Дизайн

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

В данной заметке я хотел бы поговорить о скролерах страниц, пагинаторах, навигаторах… в общем х.з. как его еще назвать. Как таковой поговорим о «навигаторе страниц». В стандартном комплекте движка для этих целей предлагаются функции next_posts_link() и previous_posts_link, которые очень просты в использовании, но иногда хочется чего более солидного что ли.

На свое блоге Курилка.co.ua я решил использовать плагин WP-PageNavi автором которогоя является Lester ‘GaMerZ’ Chan. По мимо ссылок «следующей» и «предыдущей» страницы здесь выводятся ссылки на «начальную» и «конечную» страницы, а также часть страниц в виде цифр, что весьма удобно.

Установка плгина WP-PageNavi

Установка плагина WP-PageNavi достаточно простой процесс и состоит из следующих шагов:

  1. Скачайте сам архив плагина, если что, берите последнюю версию.
  2. В архиве будет папка wp-pagenavi/, а уже в ней pagenavi/ именно ее нужно скопировать в папку плагинов Вашего блога (по умолчанию: wp-content/plugins).
  3. Далее заходив в админ панель, переходим на страницу Плагины(Plugins), где активируем(activate) интересующий нас плагин WP-PageNavi.
  4. Для настройки внешнего вида «навигатора страниц», в админ панеле переходим на страницу Настройки(Options) и в подменю выбираем пункт PageNavi, далее ориентируйтесь, так сказать, на местности и в соответствии с Вашими пожеланиями.
  5. Однако чтобы «навигатор страниц» отображался, его необходимо разместить в используемой Вами теме(шаблоне). Как таковой, автор плагина предлагает просто в Подвале(Footer) вашего шаблона разместить следующий код:
    <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

    Для меня было достаточным разместить этот код в index.php, т.е. главный шаблон(main index template) и archive.php, т.е. архив(archives). Так или иначе, вам придется избавиться от выше упомянутых стандартных функций навигации, если вы не хотите дублирования «навигаторов страниц».

Оформление WP-PageNavi

Как я уже говорил, настройка некоторый параметров «навигатора страниц» можно произвести из админ панели: Настройки(Options) -> PageNavi, но ко всему прочему есть и отдельный CSS, который находится в папке с плагином wp-content/plugins/pagenavi/pagenavi-css.css. Перед тем же как предложить свой вариант CSS давайте разберем HTML-код генерируемый нашим плагином, а он может иметь, как пример, следующий вид (естественно по умолчанию):

<div class="wp-pagenavi">
<span class="pages">Page 1 of 22</span>
<span class="current">1</span>
<a href="/page/2/" title="2">2</a>
<a href="/page/3/" title="3">3</a>

<a href="/page/2/">&raquo;</a>
<span class="extend">...</span>
<a href="/page/22/" title="Last
&raquo;">Last »</a>
</div>

И так, жирным я выделил те объекты, которые нас могут заинтересовать при создании своего CSS и теперь вот мой вариант:

.wp-pagenavi { color: #555555; }
.wp-pagenavi .pages {
  color: #E60000;
  padding-right: 5px;
}
.wp-pagenavi .current {
  color: #FFFFFF;
  padding-left: 5px;
  padding-right: 5px;
  background: #5E9C04;
}
.wp-pagenavi .extend {}
.wp-pagenavi a {
  padding-left: 5px;
  padding-right: 5px;
}
.wp-pagenavi a:hover {
  background: #F5F5F5;
}

Как видите, я сделал несколько упрощенный вариант. Т.к. использовался span, т.е. не блоковый объект, я просто дал отступы по бокам. Для ссылок сделал легкое затемнение при наведении, а текущая страница выводится на зеленом(салатовом, называйте как угодно) фоне белыми цифрами. Ну и красным выделил Page 1 of 22, чтоб пользователь не искал мой «навигатор страниц» :) а сразу усидел его.

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

Publish: Четверг Янв 17, 2008

46 Responses for "Плагин WP-PageNavi для WordPress 2.x"

feed for comments on this post

  • Комментарий #902 author: dig Reply
    publish: Суббота Янв 19, 2008 at 6:28 пп

    А я вот использую плагин попроще, Pagebar

  • Комментарий #903 author: wmas Reply
    publish: Суббота Янв 19, 2008 at 6:40 пп

    2dig: Как я и говорил: «подобных плагинов достаточно много» — есть широкий выбор. Как таковой здесь проще или сложнее для меня заключается лишь в том полезу ли я в их код, или нет :mrgreen:

  • Комментарий #935 author: maximum Reply
    publish: Понедельник Янв 21, 2008 at 8:39 пп

    Блогерам ничего и не остаётся, как ставить различные плагины. Разработчики движка могли бы уже давно встроить продвинутую навигацию, но видимо дело не в популярности той или иной функции. (Мысль выходит за рамки данного комментария)

  • Комментарий #937 author: wmas Reply
    publish: Понедельник Янв 21, 2008 at 8:47 пп

    2maximum: имхо, разработчики делают акцент на другие технические особенности движка, к примеру таже модульность в виде плагинов и виджетов. Как таковой правильно предлагать самое простое, а все навороты уже дело вкуса… Вот к примеру dig использует Pagebar, тоже вариант и все такое ;-)

  • Комментарий #1211 author: Крымский бомж Reply
    publish: Понедельник Фев 4, 2008 at 11:22 дп

    Отличный плагин, спасибо за подробное описание. ;-)

  • Комментарий #1214 author: wmas Reply
    publish: Понедельник Фев 4, 2008 at 1:05 пп

    2Крымский бомж: рад если заметка была полезной и плагин пригодился ;-)

  • Комментарий #1460 author: matt Reply
    publish: Понедельник Мар 10, 2008 at 1:02 дп

    Почти не знаю языка php.
    Ребят подскажите чего она не хочет в центре тусоваться.

  • Комментарий #1461 author: wmas Reply
    publish: Понедельник Мар 10, 2008 at 3:19 дп

    2matt: hi! если я правильно понял тебя интересует центрирование? Если — да, то тут php не имеет значения, просто в css добавь или исбользуй тег, ну скажем <center>…</center>

  • Комментарий #1514 author: Maxim Reply
    publish: Вторник Мар 25, 2008 at 1:22 пп

    Такой вопрос, как изменить/менять title на страницах 2,3,4…
    (т.е. …./page/4/ …./page/2/ стоит тайтл блога, что не есть хорошо)?

  • Комментарий #1515 author: wmas Reply
    publish: Вторник Мар 25, 2008 at 2:03 пп

    2Maxim: hi! Ты имеешь ввиду, как в title впихивать что-то типа «страница 2 — Название блога»? Если да, то наверное стоит обратить на $pagenavi_options = get_option('pagenavi_options');, то что тебе нужно это: $pagenavi_options['current_text']. Хотя, кажется, есть и что-то попроще, но сейчас не вспомню… :roll:

  • Комментарий #1585 author: Maxim Reply
    publish: Понедельник Апр 28, 2008 at 11:02 дп

    На самом деле все решилось так, достаточно скачать плагин AllinSEOPACK последней версии, который сам все сделает. 8-)

  • Комментарий #1586 author: wmas Reply
    publish: Понедельник Апр 28, 2008 at 1:42 пп

    2Maxim: ну, это на «вкус и цвет фламастеров». Я лично больше предпочитаю простые более-менее простые вещи, которые можно понять и самому по мере возможности максимально редактировать ;-)

  • Комментарий #1656 author: Stalbox Reply (subscribed to comments)
    publish: Воскресенье Июн 1, 2008 at 9:52 пп

    А где сам код который нужно вставить чтобы навигатор отображался?

  • Комментарий #1657 author: wmas Reply
    publish: Воскресенье Июн 1, 2008 at 10:06 пп

    2Stalbox: hi! О, действительно — затёрлось. Теперь поправил. Спасибо что заметил эту деталь ;-)

  • Комментарий #1746 author: Блогер MNone Reply
    publish: Пятница Июл 11, 2008 at 8:11 пп

    Отличный гайд, спасиб))

  • Комментарий #1801 author: CrashOver Reply
    publish: Среда Авг 20, 2008 at 10:33 пп

    Спасибо :) Всё настроил, работает. Теперь есть нормальная навигация по страницам.

  • Комментарий #1829 author: Ник Reply
    publish: Вторник Сен 2, 2008 at 3:10 пп

    Плагин супер. Оцените мои изменения стиля данного плагина :-D
    Вот два сайтика, где за часик работы смог добиться вполне приличного результата :-)
    womencat.ru
    oknavsovetah.ru
    … кстати, ссылки для перехода между страничками самого движка вордпресс я удалял, так намного красивее… зачем повторяться.

  • Комментарий #1916 author: Футбольный маньяк Reply (subscribed to comments)
    publish: Понедельник Окт 6, 2008 at 11:30 дп

    Добрый день! У меня вопрос следующего плана.С этим плагином работаю давно,проблем не возникало.Но сейчас на горизонте появилась одна.
    дело в том,что я хочу иметь много страниц 2-го уровня,поэтому число в настройках выставил максимальное.Это приводит к тому,что указатели страниц растягиваются на всю шируну страницы (пример в подписи).Вопрос:можно ли сделать так,чтобы нумерация страниц,скажем после 10 переходила на второй уровень,т.е.чтобы получалась вторая строка.Примерно такого вида :
    1 2 3 4 5 6 7 8 9 10 — превая строка
    11 12 13 14 15 16 17 18 19 20 — вторая под ней итд..Если можно,подскажите что и где править.Спс

  • Комментарий #1917 author: wmas Reply
    publish: Понедельник Окт 6, 2008 at 6:07 пп

    2Футбольный маньяк: hi! Ну, по сути, можно использовать псевдоэлемент .wp-pagenavi а:after { content: " "; } для вставки пробела после каждой ссылки, но эта фишка не работает в IE до 8й версии. Лучше всего заглянуть в код плагина и прописать там этот пробел ;-)

  • Комментарий #1923 author: Футбольный маньяк Reply (subscribed to comments)
    publish: Понедельник Окт 13, 2008 at 4:23 пп

    wmas, а как именно этот пробел прописывать в коде? буквально можете здесь черкнуть?

  • Комментарий #1925 author: wmas Reply
    publish: Понедельник Окт 13, 2008 at 6:48 пп

    2Футбольный маньяк: ну, это надо смотреть код плагина (pagenavi.php). Думаю, там не ложно найти то место где надо вставить пробел. А показать на пальцах проблематично, т.к. там несколько таких мест. Возможно, всё таки существуют варианты когда ещё как-то может помочь CSS, но так на вскидку сказать затрудняюсь :oops:

  • Комментарий #1926 author: Футбольный маньяк Reply (subscribed to comments)
    publish: Понедельник Окт 13, 2008 at 7:40 пп

    CSS не поможет,уже пробовал :-(
    Ну тогда может быть напишите как должен выглядеть это пробел,а я уже методом тыка буду эксперементировать,а?

  • Комментарий #2136 author: примерно сик Reply (subscribed to comments)
    publish: Понедельник Фев 2, 2009 at 10:08 пп

    :mrgreen: «я буду рад, если моя заметка станет Вам полезна.»
    была полезна. Спасибо.
    ;-)

  • Комментарий #2137 author: wmas Reply
    publish: Вторник Фев 3, 2009 at 12:19 дп

    2примерно сик: hi! ну, если уж была, то это уже плюс ;-)

  • Комментарий #2142 author: Alin Reply
    publish: Вторник Фев 3, 2009 at 3:48 пп

    Здравствуйте, помогите мне чайнику с настройками :oops:
    Вы пишете, что там все просто, но вот у меня такая проблема:

    Текст для количества страниц: Страница %CURRENT_PAGE% из %TOTAL_PAGES%

    и что это? Мне нужно вписать числовые значения значения какие-то вместо CURRENT_PAGE и TOTAL_PAGES?

    Запуталась вообщем )))

    Заранее спасибо!

  • Комментарий #2143 author: wmas Reply
    publish: Вторник Фев 3, 2009 at 4:20 пп

    2Alin: hi! Честно говоря, в заметке, я не касаюсь вопросов настроек плагина, толь установки и оформления.

    Однако, не вижу проблем и в вашем вопросе. На странице: Options->PageNavi админ-панели WordPress, есть такое пояснение:

    %CURRENT_PAGE% — The current page number.
    %TOTAL_PAGES% — The total number of pages.

    Поясню: это шаблонные переменные плагина. Плагин автоматически подставляет вместо них нужные данные. В настройках «Text For Number Of Pages», как и другие поля, предоставлены лишь с целью более гибкой настройки html-кода, генерируемого при работе плагина.

    Оставьте всё по умолчанию и наслаждайтесь работой плагина.

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

  • Комментарий #2144 author: Alin Reply
    publish: Вторник Фев 3, 2009 at 4:30 пп

    2wmas: Спасибо большое за ответ! Уже понятно. Дело в том, что у меня не был прописан код в индекс и архив php. Добавила код и навигация появилась ) Теперь буду осваивать оформление. Спасибо большое еще раз!

  • Комментарий #2145 author: wmas Reply
    publish: Вторник Фев 3, 2009 at 6:37 пп

    2Alin: рад, что если не мытьём, так катанием — проблема таки решилась. Успехов вам! ;-)

  • Комментарий #2214 author: Andrey Reply
    publish: Воскресенье Мар 22, 2009 at 12:58 пп

    Спасибо, мучался достаточно большое время статья ваша помогла

  • Комментарий #2217 author: wmas Reply
    publish: Понедельник Мар 23, 2009 at 10:50 дп

    2Andrey: hi! Ну, особо там не с чем мучится :oops: Однако, если заметка рад, что заметка смогла быть вам полезна :-)

  • Комментарий #2316 author: arturlion Reply
    publish: Среда Июн 17, 2009 at 7:50 дп

    У меня такой вопрос: сделал все правильно, скачал плагин, активировал, захожу в настройки в админке а там:

    Fatal error: Call to undefined function screen_icon() in /home/beybit/public_html/wp-content/plugins/wp-pagenavi/pagenavi-options.php on line 109

    Что бы это значило?

    после всех этих манипуляций у меня даже родная навигация пропала!

  • Комментарий #2318 author: wmas Reply
    publish: Среда Июн 17, 2009 at 11:14 дп

    2arturlion: hi! Имеющийся на wordpress.com плагин: Requires WordPress Version: 2.8 or higher — у вас же WordPress 2.6.5. Нужно искать более старую версию плагина (имхо) или обновить движок. Ну а чтобы восстановить старую навигацию, просто отключите плагин, должно вроде сработать ;-)

  • Комментарий #2355 author: Бизнесмен Reply
    publish: Суббота Июл 18, 2009 at 4:05 пп

    я пользуюсь этим плагином — все четко и супер

  • Комментарий #2453 author: Bogdkad Reply (subscribed to comments)
    publish: Воскресенье Окт 18, 2009 at 9:51 пп

    Спасибо, сейчас поставлю себе на блог, давно хотел сделать!

  • Комментарий #2558 author: Everouge Reply
    publish: Четверг Янв 28, 2010 at 5:39 пп

    Установил,активировал,захожу в настройки — пишет:

    WARNING:
    Once uninstalled, this cannot be undone. You should use a Database Backup plugin of WordPress to back up all the data first.
    И не дает сохранить изменения.С чем это может быть связано?

  • Комментарий #2563 author: wmas Reply
    publish: Воскресенье Янв 31, 2010 at 11:15 пп

    2Everouge: hi! Дословно это переводится как: «Удаление модуля необратимо. Для сохранения ваших данных и резервного копирования БД WordPress используйте модуль Database Backup» — это просто сообщение для удаления плагина, если ты не хочешь его удалять — просто не обращай внимание, вот сабж на официальном форуме плагина.

  • Комментарий #2598 author: Светлана Reply (subscribed to comments)
    publish: Четверг Мар 4, 2010 at 6:22 пп

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

  • Комментарий #2599 author: wmas Reply
    publish: Четверг Мар 4, 2010 at 11:27 пп

    2Светлана: Здравствуйте, Светлана. Сказать что-то однозначно не возьмусь. Но в некоторых ситуациях такая ошибка возникает в случае использования плагином функций более старших версий PHP. Другими словами, проверьте какая у вас на хостинге версия PHP, если 4.x то ошибка может крыться именно в этом. Отсюда и делайте соответствующие выводы… Если нет, надо искать дальше :roll:

  • Комментарий #2601 author: Светлана Reply (subscribed to comments)
    publish: Суббота Мар 6, 2010 at 8:53 дп

    спасибо за ответ. да, действительно, версия php на хосте 4.5. и что делать с этим?

  • Комментарий #2602 author: wmas Reply
    publish: Суббота Мар 6, 2010 at 3:37 пп

    2Светлана: самый очевидный вариант — сменить хостинг провайдера :mrgreen: Но как по мне, проще поискать альтернативный плагин. Например, есть вот такой вариант основанный на стандартных функциях вордпреса.

  • Комментарий #2699 author: Allpa Reply (subscribed to comments)
    publish: Суббота Июл 3, 2010 at 4:07 дп

    Здравствуйте :)

    Вижу, Вы дока в кодах и CSS, так, позвольте, я попытаю у Вас ответов на волнующих вопросов касательно плагина wp-pagenavi, а?

    Я меняю шаблон на блоге, в процессе заметила, что цифры и значки на кнопках плагина жёстко начинаются с середины кнопки и уходят вправо (можно глянуть по ссылке: рубрика «Блог», посмотрите, окажите любезность, вниз, на кнопку с цифрой «10″ — allpa.ru/category/blog/ ).

    Я тут подумала.. пока количество страниц не перевалило за 100, ещё ничего. Немного некрасиво смотрится «10″, съехавшее вбок, но кагбе не очень и страшно.

    Но что будет, когда числа на кнопках станут трёхзначными? Отож бо! Слева мы будем иметь пустое пространство, а справа — вылезающее за границу кнопки число! Имхо, ужас-ужас.. 8-O

    Покопалась в CSS плагина — не нашла (лох я), где писать и чего. Да и нет там ничего похожего на определение положения содержимого относительно кнопки..

    Я к чему много (пардон) всего написала: может быть, Вы в курсе, куда рыть? И, не исключено, у Вас найдётся минутка пнуть меня в нужном направлении?…

    Простите и спасибо :)

  • Комментарий #2702 author: wmas Reply
    publish: Воскресенье Июл 4, 2010 at 2:20 дп

    2Allpa: Если я правильно понял, вас интересует ширина кнопки, на которой циферка странички? Если да, то причина в фоновой картинке, которая лепится к правому краю и просто не закрашивает всего пространства кнопки.

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

    В вашем случае я рекомендовал бы такой CSS:


    .wp-pagenavi { position: relative; text-align: left; padding: 33px 55px 33px 0px; }
    .wp-pagenavi a { background: #EFF1F2 !important; padding: 10px !important; margin: 2px; color:#383737 !important; border: 1px solid #C7CED1 !important; text-shadow: 1px 1px 1px #ffffff; font-size: 14px; }
    .wp-pagenavi span.pages { padding: 5px 7px 5px !important; margin: 2px !important; color: #989898 !important; border:none !important; color: #413f36; background: none !important; }
    .wp-pagenavi a:hover, .wp-pagenavi span.current, .wp-pagenavi span.extend { background: #323232 !important; padding:10px !important; margin: 2px; color:#FFFFFF !important; border: 1px solid #000000 !important; text-shadow: -1px -1px 1px #000000; color: #ffffff !important; font-size: 14px !important; font-weight: normal !important; }

    Это в файл wp-content/themes/MyProduct/style.css для секции [PAGE NAVI], просто замените выше указанным все строки начинающиеся с .wp-pagenavi, там они кучкой.

  • Комментарий #2703 author: Allpa Reply (subscribed to comments)
    publish: Воскресенье Июл 4, 2010 at 5:23 пп

    2wmas: Вы меня просто СПАСЛИ!!! Получилось!

    Огромное, огромнющее просто спасибо! Иду пиарить Вас в Твиттере :)

    Вот: twitter.com/Allpa/status/17723436353
    Есть ли Вы в Тви? Я б на Вас подписалась.. Подписчицей же блога стала сию минуту :)

  • Комментарий #2705 author: wmas Reply
    publish: Понедельник Июл 5, 2010 at 12:39 дп

    2Allpa: Пожалуйста. Рад, что смог помочь. Спасибо за пиарчик ;-)

    Ещё наверно стоит уточнить — сюда я уже давно не пишу… :oops:
    Сейчас занимаюсь солянкой, это на счет подписки.

    Спасибо.

  • Комментарий #2868 author: Ризван Reply (subscribed to comments)
    publish: Воскресенье Ноя 6, 2011 at 3:22 дп

    Что за папка плагин ЭТо системная папка или его нужно создовать самому?

  • Комментарий #2869 author: wmas Reply
    publish: Воскресенье Ноя 6, 2011 at 1:03 пп

    О какой именно папке идет речь? Так сложно ориентироваться, там папок много :)


Popular links

Copyright © since 2006 Курилка.co.ua,
powered by WordPress