Вітаю вас, шановні читачі блогу . Сьогодні мова піде про дуже популярному плагіні WP-PageNavi, який дозволяє вивести посторінкову навігацію вашого блогу під управлінням WordPress на новий якісний рівень.
Навіщо використовувати плагін WP-PageNavi
Судіть самі, ось так виглядає розбиття на сторінки за замовчуванням:
А так після встановлення плагіну:
або ж так:
це залежить від тих опцій, які ви виберіть у вікні налаштувань.
По-моєму, другий варіант набагато симпатичніше першого, який використовується за замовчуванням. Якщо ви теж так вважаєте, то вам варто дочитати цю статтю до кінця і дізнатися все про нюанси установки і настроювання цього чудового розширення.
Плагін попередньо потрібно буде завантажити звідси. Знайдіть праворуч кнопку «Download» і збережіть архів wp-pagenavi.zip у себе на комп’ютері. Потім розпакуйте його і завантажте отриману в результаті розархівування папку на сервер хостингу в папку з плагінами wp-content/plugins/.
Для цього вам знадобиться отримати доступ до файлів і папок вашого WP блогу по протоколу FTP (тут читайте про те, як цій справі може допомогти FileZilla).
При разархивировании буває, що з’являється зайва зовнішня папка, тому перевірте це і при необхідності позбавтеся від неї. Сподіваюся зрозуміло пояснив? Інакше WordPress не побачить встановлений вами плагін. Гаразд, продовжимо.
Після того, як ви скопіюєте файли плагіна на сервер хостингу в папку wp-content/plugins/, вам потрібно буде зайти в адмінку Вордпресс (http://vash_sait.ru/wp-admin/) і вибрати з лівого меню адмінки пункт «Плагіни». У верху відкритого вікна «Управління» вам потрібно натиснути на посилання «Недоступне» (або ж, якщо немає перекладу «Inactive»).
Вставляємо код виведення плагіна в потрібні шаблони Вордпресс
Плагін активований, але для того, щоб побачити на своєму блозі результати його роботи, потрібно буде ще вставити код виклику функції wp_pagenavi у файли вашої теми оформлення, яка використовується в даний момент. Зі структурою файлів тем оформлення для WordPress ви можете ознайомитися тут.
Зазвичай посторінкова навігація використовується на головній сторінці блогу (файл INDEX.PHP з папки з вашою темою), на вебстраницах архівних матеріалів (ARCHIVE.PHP) і в результатах пошуку (файл SEARCH.PHP). Власне, в ці файли (шаблони) нам і потрібно буде вставити код виклику потрібної нам функції.
Тобто треба буде знову встановити FTP і зайти в папку з поточною темою:
wp-content/themes/Назва папки з вашою темою оформлення
Знайдіть у ній INDEX.PHP та відкрийте його на редагування у зручному для вас редакторі (я використовую для цієї мети просунутий Нотепад++ — у мене є стаття по роботі з ним). Тепер ваше завдання полягає в тому, щоб знайти в INDEX.PHP ділянка коду, що відповідає за перехід на попередню або наступну сторінку. Непроста задачка, чи не правда? Хоча, звичайно ж, для кого як.
INDEX.PHP не дуже великий, уважно вивчіть його зміст на предмет пошуку коментарів, пов’язаних з пагінація, наприклад, таких:
і
Зазвичай творці тим оформлення для WordPress укладають подібні коментарі область коду, що відповідає за висновок посторінкової навігації. Сам стандартний код якої може виглядати, наприклад, так:
або так
Після того, як ідентифікуєте потрібний фрагмент, вам потрібно буде замінити рядком виклику функції wp_pagenavi:
Тепер необхідно зберегти зроблені в INDEX.PHP зміни, зайти на головну сторінку свого блогу і переконатися, що все працює як треба. Тобто замість стандартної пагинации, використовуваної в WordPress, у вас використовується краса від WP-PageNavi.
До речі, стандартну пагінацію можна і не видаляти з коду INDEX.PHP для того, щоб при видаленні цього плагіна у вас не виникло потім проблем з нею. Для цього ви повинні будете прописати в INDEX.PHP замість стандартного коду навігації умова, що визначає, коли відображати стандартну, а коли панель WP-PageNavi.
Умова буде залежати від того, встановлений плагін WP-PageNavi на вашому блозі або немає. Виглядати він може приблизно так:
У цьому коді умова:
if(function_exists(‘wp_pagenavi’))
перевіряє встановлений плагін, і якщо він не встановлений, то буде працювати стандартний скрипт:
else {?>
А якщо WP-PageNavi встановлений, то навігаційна панель буде формуватися його силами:
{ ?>
}
Хоча, звичайно ж, можна не морочитися і просто замінити одне на інше, але це справа ваша.
Так, тепер все теж саме ви повинні будете виконати для файлів ARCHIVE.PHP і SEARCH.PHP з папки з вашою темою (wp-content/themes/Назва папки з вашою темою оформлення).
Налаштування плагіна 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».
Зміна зовнішнього вигляду панелі посторінкової навігації
Для того, щоб змінити кольорову гаму, відступи, шрифти та інші атрибути зовнішнього вигляду панелі пагинации, відображуваної на вашому блозі, вам знадобиться додати в файл каскадних таблиць стилів цього плагіна необхідні CSS властивості.
Правда для того, щоб вона прийняла вигляд, показаний на наведених у цій статті скріншотах, я додав додаткові властивості не в файл CSS плагіна (/wp-content/plugins/wp-pagenavi/pagenavi-css.css), а в файл використовується мною теми оформлення (wp-content/themes/назва папки з темою оформлення/style.css).
У цьому файлі властивості CSS, які визначають зовнішній вигляд панелі WP-PageNavi, виглядають так:
#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active {
padding: 3px 8px 3px 8px;
margin: 2px;
text-decoration: none;
color: #fff;
border: 0px
line-height:24px;
background-color: #2b99ff;
}
#content .wp-pagenavi a:hover {
color:#fff;
background-color: #154b7d;
}
#content .wp-pagenavi span.pages {
padding: 3px 8px 3px 8px;
margin: 2px 2px 2px 2px;
}
#content .wp-pagenavi span.current {
padding: 3px 8px 3px 8px;
margin: 2px;
line-height:25px;
font-weight: bold;
color: #add352;
background:#26343c;
}
Звертаю вашу увагу, що назви класів і ID (тут читайте про ці селектори детальніше), які використовуються тут, належать саме до мого шаблоном. Поясню призначення деяких правил і властивостей CSS.
Правило:
#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active {
padding: 3px 8px 3px 8px;
margin: 2px;
text-decoration: none;
color: #fff;
border: 0px
line-height:24px;
background-color: #2b99ff;
}
задає зовнішні і внутрішні відступи (margin і padding — тут про них дивіться) для кнопок панелі (фактично для посилань з цих кнопок, оскільки ці властивості будуть застосовані саме до посилань задається тегом A і розміщеним у контейнері wp-pagenav).
Так само в цьому правилі задається колір тексту посилань (білий колір задається у властивості color: #fff; — тут читайте про background Color і в CSS).
Рамка навколо посилань буде відсутня властивість border: 0px), а фоновий колір для контейнерів з цими посиланнями буде визначатися властивість background-color: #2b99ff;. Саме цей колір ви можете бачити на скріншотах розташованих вище для неактивних кнопок панелі посторінкової навігації.
CSS:
#content .wp-pagenavi a:hover {
color:#fff;
background-color: #154b7d;
}
задає колір тексту і фону контейнера (кнопки) з посиланням, до якої в даний момент підведений курсор миші (CSS властивості посилання при наведенні — a:hover — тут описані hover та інші селектори псевдокласів).
Колір тексту посилання по раніше залишається білим, а ось колір фону (фактично колір кнопки) змінюється на більш темний (background-color: #154b7d;). Тобто відвідувач, підводячи курсор миші до кнопок панелі навігації, буде бачити зміна кольору цієї кнопки, що створює відчуття інтерактивності.
CSS:
#content .wp-pagenavi span.current {
padding: 3px 8px 3px 8px;
margin: 2px;
line-height:25px;
font-weight: bold;
color: #add352;
background:#26343c;
}
Задає зовнішній вигляд кнопки з номером, відкритої в даний момент сторінки блогу (в коді у цій посилання буде прописаний тег SPAN з класом CURRENT). Така кнопка буде виглядати так само, як і кнопка з цифрою один, на наведеному нижче рисунку:
У цьому CSS правилі задається зміна кольору фону цієї активної кнопки (властивість background:#26343c), кольору тексту посилання на цій кнопці (властивість color: #add352), а крім цього шрифт тексту посилання буде жирним чинності цього CSS властивості font-weight: bold (тут описані всі можливі комбінації Font (Weight, Family, Size, Style) і Line-Height).
Але для зміни зовнішнього вигляду панелі посторінкової навігації можна прописати потрібні властивості CSS і в файл стильового оформлення самого плагіна. Цей файл каскадних таблиць стилів ви зможете відкрити на редагування з папки:
/wp-content/plugins/wp-pagenavi/pagenavi-css.css
Наприклад, для того, щоб отримати панель такого виду:
Вам потрібно буде завантажити цей архів, розпакувати його і скопіювати папку IMAGES в папку з плагіном WP-PageNavi, яку ви зможете знайти за наступним шляхом:
/wp-content/plugins/wp-pagenavi
В папці IMAGES лежить графічний файл fon.gif, який буде формувати фон для панелі PageNavi. Тепер вам потрібно буде відкрити на редагування файл /wp-content/plugins/wp-pagenavi/pagenavi-css.css і замінити наявний там код наступними правилами:
.wp-pagenavi {
width: 100%;
overflow:hidden;
padding: 4px 0px 4px 0px;
margin-left: 0px;
border: 1px solid #00598F;
background: url(‘images/fon.gif’) center left repeat-x;
}
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited {
padding: 4px 5px 4px 5px;
margin: 2px 0px 2px 0px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.wp-pagenavi a.last {
padding: 4px 5px 4px 5px;
}
.wp-pagenavi a.first {
padding: 4px 5px 4px 5px;
}
.wp-pagenavi a:hover {
background-color: #00598F;
color: #FFFFFF;
font-weight: bold;
}
.wp-pagenavi span.pages {
padding: 4px 5px 4px 5px;
margin: 2px 0px 2px 0px;
color: #FFFFFF;
background: url(‘images/fon.gif’) center left repeat-x;
background-color: #4f4f4f;
font-weight: bold;
}
.wp-pagenavi span.current {
padding: 4px 7px 4px 7px;
margin: 2px 0px 2px 0px;
font-weight: bold;
border-top: 1px solid #00598F;
border-bottom: 1px solid #00598F;
color: #FFFFFF;
background-color: #00598F;
font-weight: bold;
}
.wp-pagenavi span.extend {
padding: 4px 0px 4px 0px;
margin: 2px 0px 2px 0px;
margin-right: 0px;
margin-left: 0px;
border-top: 1px solid #00598F;
border-bottom: 1px solid #00598F;
color: #FFFFFF;
background: url(‘images/fon.gif’) center left repeat-x;
font-weight: bold;
}
.wp-pagenavi span.next-prev {
font-family: Arial; /* IE fix */
}
Збережіть зроблені у файлі pagenavi-css.css зміни і зайдіть на свій блог, щоб перевірити, чи змінився зовнішній вигляд навігації. Якщо не змінився, то спробуйте оновити вікно в браузері, утримуючи кнопку SHIFT, а якщо це не допомагає, то очистіть кеш браузера.
Удачі вам! До зустрічей на сторінках блогу
