мая 23

8. Создаем блог: плагины: постраничная навигация


постраничная навигацияКак я и обещал в прошлой статье про плагины, не требующие настройки, сегодня мы установим одно очень полезное расширение для блога. Занимается оно тем, что включает постраничную навигацию на блоге. Это очень полезная функция, поскольку со временем количество статей на блоге будет только расти, что приведет к долгой его загрузке. Как результат, случайный посетитель просто не дождется полной загрузки страницы и уйдет на другой сайт. К тому же, разбивка постов способствует лучшему восприятию и навигации по блогу. Ну и еще одна причина – это уменьшение количества внешних ссылок на главной странице сайта, что способствует хорошим показателям тИЦ.

Существует множество плагинов, которые включают постраничную навигацию. До недавнего времени я пользовался WP-PageNavi.  Это очень простой и функциональный плагин, который я всем рекомендую. Правда, со временем я перешел на WP Page Numbers. Причина немножко банальная – навигация у него имеет свои скины и один из них просто идеально подходил под мою тему на текущем блоге. Приступим к его установке.

Скачиваем и распаковываем архив в папку с плагинами на нашем локальном сервере. Теперь заходим в админку блога в раздел «Плагины» и активируем нужное нам расширение. Правда для начала нам нужно совершить одно действие не связанное непосредственно с плагином. Переходим в админпанели в «Настройки»«Чтение» и выставляем в «На страницах блога отображать не более» нужное нам количество записей. Пока мы тестируем плагин, то значение ставим поменьше, к примеру, 1–3 (надеюсь у Вас уже есть пару тестовых записей на блоге).
Теперь нужно проделать некоторые манипуляции с файлом темы. Многие не любят плагины, после которых нужно еще копаться в коде, но я считаю, что так человек быстрее научиться разбираться в html и css.

Итак, переходим на локальном сервере в папку с нашей темой и ищем файл index.php. Открываем его в редакторе и ищем следующие строчки previous_post () и next_post (). Если такого кода нет, тогда вставляем следующую строчку <?php if (function_exists ('wp_page_numbers')) : wp_page_numbers (); endif; ?> между endwhile; and endif;
В моем случае я нашел похожий код
wp-page-numbers
Я его полностью удалил, а вместо него вставил следующий код
wp-page-numbers

Теперь переходим в настройки плагина: «Натройки»«Page Numbers»
Page Number Themes
Если мы хотим использовать темы оформления, тогда отмечаем галочкой Include theme stylesheet for page numbers, а потом отмечаем понравившуюся нам темку.
Settings — Text
Тут мы немножко переведем нужный нам текст
Напротив Default text: Page пишем Страница
Default text: ofиз
Остальное оставляем без изменений.
Settings — show / hide
Можно ничего не менять
Settings — Misc
Сколько номеров страниц показывать. Я ставлю 10.
Жмем Update Settings
Смотрим, что получилось.
wp-page-numbers
Как видим, в моем случае опять из-за особенностей темы постраничная навигация куда-то уехала.
Поэтому поправим немножко файлы.
Заходим в папку с темой плагина и открываем файл wp-page-numbers.css
wp-page-numbers
Это таблица стилей. На первый взгляд тут абсолютно ничего непонятно. Я советую сделать копию данного файла и немножко проиграться с разными значениями, даже если вы ничего в этом не понимаете. Все изменения можно будет сразу увидеть на блоге. Я на своем примере покажу, что нужно поправить, а вы уже смотрите по аналогии. Проблем возникнуть не должно, да и со временем будете разбираться, что к чему.

Итак. Я открыл свою таблицу стилей.
Для начала нужно исправить ширину навигации. Ищем знакомые слова. Я нашел такой блок
wp-page-numbers
Для начала поменяем ширину width: со 100% на 80%. Сохраняем результат (не забываем преобразовать кодировку в UTF-8 без BOM). Что получилось.
wp-page-numbers
В принципе, можно еще уменьшить, а можно это сделать потом, когда будут все 10 страниц навигации.
Смотрим дальше. Очень кидается в глаза непонятная синяя рамка. Нужно ее убрать.
В том же блоке уберем строку кода, которая отвечает за рамки border:
wp-page-numbers
Теперь вышеуказанный блок выглядит так
wp-page-numbers
Сохраняем и смотрим на результат.
wp-page-numbers
То, что нужно. Цветовое оформление, правда, совсем не в тему, но я специально его выбрал, поскольку на нем хорошо видно все косяки. Я же для будущего блога выберу другое.
Для этого опять возвращаемся в настройки Page Numbers и выберем тему Panther. Сохраняем результат и смотрим, что получилось.
wp-page-numbers
Вполне ожидаемые косяки. Будем исправлять. Для этого, по аналогии с предыдущей темой оформления, открываем файл стилей нужной темы плагина.
Уменьшаем ширину со 100% на 50%
wp-page-numbers
Результат
wp-page-numbers
Теперь меняем серый фон навигации на черный. Для подбора цвета есть очень хорошая и маленькая программка – pixie. Вкючаем ее и наводим курсором на то место, цвет которого хотим использовать. В моем случае я наведу на фон моей темы. Нажимаем сочетание CTRL+ALT+C. Теперь код цвета скопирован. Возвращаемся в таблицу стилей и меняем background c #4f4f4f на скопированный код #000000 (если все цифри и буквы одинаковы, то можно писать не шесть, а только три знака).
wp-page-numbers
Сохраняем в нужной кодировке и смотрим на результат.
wp-page-numbers
Я еще немножко поколдовал с файлом стилей и вот конечный результат
wp-page-numbers
Весь процесс изменений описывать не буду, поскольку для этого лучше подходит формат видеоурока. В одной из статей я расскажу про один чудесный плагин для Мозиллы, с которым процесс редактирования файлов темы пойдет намного проще, поскольку он показывает, какая строка за какой элемент блога отвечает. Пока же Вы можете потренироваться в оформлении блока постраничной навигации, редактируя у себя таблицу стиля выбранной темы плагина. На этом все. До скорой встречи.


Если вам понравилась статья, вы можете подписаться на RSS, чтобы следить за новыми публикациями!

Вы также можете добавить статью в следующие социальные сервисы:

Написал DCDanton \\ теги: ,


17 комментариев к “8. Создаем блог: плагины: постраничная навигация”

  1. 1. Александр пишет:

    Доброго времени суток. У меня вот какая проблема – не могу перейти на предыдущие страницы блога. Щелкая по “предыдущая страница” у меня выскакивает сообщение “к сожалению по вашему запросу ничего не найдено” и так во всех категориях блога, хотя, на главной странице, если щелкать «предыдущая страница» все в порядке . Попробовал установить плагин WP Page Numbers, но не помогло. Подскажите, что делать.

  2. 2. DCDanton пишет:

    Не совсем понятно, где Вы именно щелкали: в браузере или на самом блоге?

    Если в блоге, тогда возможно, что плагин просто не перехватил кнопки навигации самой темы. У меня подобное было на одной из первых тем. Поскольку в html я как первокурсник, то просто перешел на другую тему. Где-то на форуме также читал, что часто новые плагины плохо встают на темы со старой версткой. Как вариант, можете попробовать поискать новую версию вашей темы или потестировать какой-то другой аналогичный плагин.

  3. 3. Копирайтер пишет:

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

  4. 4. Дмитрий пишет:

    Надо мне тоже подредактировать, ни один из вариантов не подходит.

  5. 5. Алексей Н. пишет:

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

  6. 6. Krish84 пишет:

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

  7. 7. Slava пишет:

    Не работает навигация, если в настройках WP->Постоянные ссылки выбрать «произвольное»

  8. 8. Aleks пишет:

    Slava, у меня такая же проблема, Вы не разобрались, что делать?

  9. 9. Ирина пишет:

    Здравствуйте, Владимир.

    Спасибо за это замечательную статью. Так трудно(особенно женщине) разбираться во всех тонкостях интернетостроения.

    Я к Вам с просьбой: я тему для блога делала сама с помощью программы Artister. И у меня в файлах index.php, search.php, page.php, single.php, archive.php — нет тех кодов, о которых Вы пишите. Единственное упоминание next_posts_link и previous_posts_link я нашла в файле (functions.php). Однако после замены кодов в этом файле я чуть не потеряла блог. Едва все восстановила... Может быть Вы подскажите, как мне правильно установить этот плагин на блоге.

    С уважением, Ирина

  10. 10. Ирина пишет:

    Владимир, спасибо за надежную, профессиональную и бескорыстную помощь.

    Все Вам благ, жизненных удач и успеха в бизнесе!

  11. 11. Ирина пишет:

    А у меня как интересно вышло )) установила этот плагин и наверно с пол часа копалась в коде в поисках того где можно слова page и of на русский перевести. а как всё оказывается просто ))))) как говорится «а слона-то я и не заметил» ))))))))))))

  12. 12. Ирина пишет:

    Здравствуйте, Владимир

    Большое спасибо за полезную статью и за ваш бескорыстный ТРУД для нас новичков.

    Когда-то я обращалась к Вам с вопросом по навигации и Вы мне очень помогли. Сегодня опять к Вам за помощью.

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

    Я установила себе на блог Free-Template. Это такая штука, которая позволяет делать страницу независимо от темы. Просто при создании новой страницы появляется возможность выбора. Все бы ничего, но ширина страницы ограничена 680 пикселей. Я поменяла в файле Style в строчках width по очереди и все вместе значения ширины на большее. НО УВЫ либо ничего не происходит, либо ширина меняется, но после обновления все опять возвращается на место. Не могли бы Вы подсказать, что мне надо поменять в этом файле и чтобы при этом все не поехало как попало.

    С уважением, ваша читательница, Ирина

  13. 13. DCDanton пишет:

    Спасибо за обращение. Правда, как я уже упоминал, я владею лишь базовыми знаниями, необходимыми для создания блога. Дальше на первое место выходит контент, а не разные «фичи» на блоге. Не совсем понял, зачем Вам нужен плагин (в сети так и не нашел), который может создавать страницы с иным оформлением, чем общая стилистика блога. Это лишний код и ненужная загрузка на сайт. Все стилистическое оформление блога задается в файле style.css. Относительно ширины страницы — подраздел #page. Эти параметры актуальны для всего блога. При установке отдельного плагина у Вас возможно имеет место конфликт общих правил из style.css и таблицы стилей самого плагина, которая задает оформление отдельных страниц. Это первое, что приходит в голову. В таком случае, лучше всего связаться с создателем Free-Template и описать возникшую проблему. Также не стоит забывать, что ширина картинки (если она есть) из шапки блога также задает и ширину самой страницы.

  14. 14. Ирина пишет:

    Большое спасибо за подробный ответ.

    Буду разбираться дальше

    Ирина

  15. 15. DCDanton пишет:

    Попробуйте еще FireBug'ом проинспектировать страницу. Возможно, получится узнать, из какого файла стилей задается ширина страницы. Как ним пользоваться, я немножко описывал тут invest-diary.ru/wordpress...dpress-temu.html

  16. 16. Анна пишет:

    После установки плагина WP Page Numbers перестала работать навигация в рубриках, т.е. если захожу в нужную запись с главной страницы, то все хорошо, а если иду в меню и навожу на нужную рубрику, чтобы открыть запись, открывается пустая белая страница, не знаю, как исправить. И еще вопросы: 1. постраничная навигация есть только на главной странице в записях на других страницах ее нет; 2. как установить постраничную навигацию в записи, когда текст длинный и его надо разбить на страницы. Последнее: интересная вещь произошла также со слайдером — на 2 posta работает, а на 5 пропадает. Может сможете подсказать, что делать со всеми этими проблемами.

  17. 17. DCDanton пишет:

    К сожалению, плагин не обновлялся (и вряд ли будет) с июля 2009 года, поэтому на каждой новой версии WP работает все менее корректно. Лучше поискать какой-нибудь другой. К примеру, pagebar, wp-pagenavi и т.п.

    Относительно 2 вопроса: чтобы разбить поста на несколько страниц, перейдите в редакторе записи с режима «Визуально» на «HTML» и в нужном месте вставьте тег <!--nextpage-->

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

Highslide for Wordpress Plugin Проверка сайта Клуб Инвесторов. Обмен ссылками.