Урок 41 Постраничная навигация с помощью плагина WP Page Numbers

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

Пример такой навигации Вы можете видеть на моем блоге. Внизу страницы Вы найдете пронумерованные страницы, где, нажав, например, на “3”, Вы попадаете на третью страницу.

К сожалению, в WordPress по умолчанию такой функции нет. Изначально Ваша навигация будет выглядеть примерно так (будет видно, когда количество постов превысит 10):
Да, когда статей на блоге не так много, можно конечно переходить постоянно на “предыдущие записи”. Но, когда их количество перевалит хотя бы за 30, попасть на нужную страницу становится проблематично.

Именно поэтому, большинство блоггеров находит решение в плагинах для WordPress или “сами ручками” редактируют код. Так как этот блог, в первую очередь, рассчитан для новичков, не буду заморачивать Вам голову, покажу на примере плагина.

Плагин носит название WP Page Numbers. Этот плагин является аналогом популярного плагина WP Page Navi, но WP Page Numbers по функционалу мне нравится больше.

Так что, этот плагин нужно ставить обязательно. А какой выбрать, решать Вам. Я рассмотрю пример установки и настройки плагина WP Page Numbers.

Если у Вас в тему (шаблон) блога встроена постраничная навигация, Вам не нужно ставить плагин WP Page Numbers.

Установка и настройка плагина WP Page Numbers

1. Скачиваете плагин WP Page Numbers и активируете его в админке WordPress.
2. Далее нужно открыть файлы index.php, single.php, archive.php, search.php, categories.php, page.php и заменить в них следующий код (у Вас может немного отличаться):

   <!--?php posts_nav_link('<<', __('< предыдущие записи'), __('новые записи -->')); ?&gt;;

   на
   

   <!--?php if(function_exists('wp_page_numbers')) { wp_page_numbers(); } ?-->

3. Идем в админку WordPress -> Настройки –> Page Numbers и настраиваем данный плагин по вкусу:
   Из 5ти предоставленных тем я выбрал последнее:
   Перевел следующим образом:
   Не забудьте сохранить изменения, путем нажатия “Update Setting”.
4. Вот и все, наслаждаемся результатом:
   

P.s. Так как сине-голубой цвет не особо сочетается с цветовой схемой моего блога, я решил поменять цвета. Расскажу как это делается, может тоже кому-то пригодится.

Заходите в папку плагина wp-content/plugins/wp-page-numbers/название_темы (его Вы выбрали в третьем шаге и название можно посмотреть с левой стороны выбора темы для плагина.)

Находите там изображения и редактируете их в любом графическом редакторе (Adobe Photoshop, Paint и т.п.). И обновляете эти файлы. Вот мой результат:

Также я поменял цвет фона, при наведении. Для этого я открыл файл wp-page-numbers.css, который находится в той же папке, где и изображения. Чтобы поменять цвет, в этом файле нужно найти в моем случае 44-ую строку и поменять значение в #wp_page_numbers li a:hover background:. Я выбрал оранжевый цвет, поставил следующий код цвета: #FAD93E.
Если Вы вдруг не поняли каким образом я нашел эту строку, то настоятельно рекомендую Вам прочитать урок о полезном дополнении Firebug.

Думаю, результат получился неплохим. Плагин WP Page Numbers мне этим и нравится, что без знаний основ CSS можно сделать весьма симпатичную оболочку.

Удачи Вам!

____________________________________

Следующий урок: Урок 42 Доработки блога.