Invest-Diary.ru — Ни дня без прибыли

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

Существует множество плагинов, которые включают постраничную навигацию. До недавнего времени я пользовался 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;
В моем случае я нашел похожий код

Я его полностью удалил, а вместо него вставил следующий код

Теперь переходим в настройки плагина: «Натройки» – «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.css

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

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

Для начала поменяем ширину width: со 100% на 80%. Сохраняем результат (не забываем преобразовать кодировку в UTF-8 без BOM). Что получилось.

В принципе, можно еще уменьшить, а можно это сделать потом, когда будут все 10 страниц навигации.
Смотрим дальше. Очень кидается в глаза непонятная синяя рамка. Нужно ее убрать.
В том же блоке уберем строку кода, которая отвечает за рамки border:

Теперь вышеуказанный блок выглядит так

Сохраняем и смотрим на результат.

То, что нужно. Цветовое оформление, правда, совсем не в тему, но я специально его выбрал, поскольку на нем хорошо видно все косяки. Я же для будущего блога выберу другое.
Для этого опять возвращаемся в настройки Page Numbers и выберем тему Panther. Сохраняем результат и смотрим, что получилось.

Вполне ожидаемые косяки. Будем исправлять. Для этого, по аналогии с предыдущей темой оформления, открываем файл стилей нужной темы плагина.
Уменьшаем ширину со 100% на 50%

Результат

Теперь меняем серый фон навигации на черный. Для подбора цвета есть очень хорошая и маленькая программка – pixie. Вкючаем ее и наводим курсором на то место, цвет которого хотим использовать. В моем случае я наведу на фон моей темы. Нажимаем сочетание CTRL+ALT+C. Теперь код цвета скопирован. Возвращаемся в таблицу стилей и меняем background c #4f4f4f на скопированный код #000000 (если все цифри и буквы одинаковы, то можно писать не шесть, а только три знака).

Сохраняем в нужной кодировке и смотрим на результат.

Я еще немножко поколдовал с файлом стилей и вот конечный результат

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

Популярность: 39%

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

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