Главная Новости

Постраничная навигация на блоге WordPress


Опубликовано: 01.09.2018

видео Постраничная навигация на блоге WordPress

Постраничная навигация в WordPress

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



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

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


Постраничная навигация. Виды и способы создания

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

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

Вот именно поэтому существует масса способов заменить такую невзрачную и неудобную навигацию по страницам блога на нечто более удобное и функциональное.

Поэтому сегодня я поделюсь с вами несколькими, а если быть точной, то тремя способами установки постраничной навигации на блог WordPress. Начнем мы с плагина WP Page Numbers , продолжим плагином WP-PageNavi , ну а на закуску рассмотрим возможность установки навигации по страницам без плагина — путем редактирования файлов шаблона. Начнем-с.

Плагин WP Page Numbers

Плагин скачали — установили -активировали? Отлично! Теперь нужно открыть на редактирование файл index.php вашей темы оформления и найти в ней примерно вот такую строку: <?php twentytwelve_content_nav( 'nav-below' ); ?> и заменить ее на вот такую: <?php if(function_exists('wp_page_numbers')) : wp_page_numbers(); endif; ?>;

Давайте обратим внимание на второй пункт моего алгоритма, а вернее, на слово «примерно». К сожалению, я не могу дать вам привычных четких и точных инструкций о том, какой код нужно искать и заменять. Все дело в том, что в каждой теме оформления те самые стандартные ссылки «старые записи — новые записи» выводятся разными строчками кода.

Единственное, что могу посоветовать — это искать в коде какие-то фразы типа «nav», как у меня в примере, или «navigation» — это прямое указание на то, что эти строки отвечают за вывод стандартной вордпрессовской постраничной навигации. Да, и еще — используя редактор Notepad++, который я активно агитирую вас применять для работы с файлами кода, вы можете вычислить нужное место в файле методом «научного тыка» — вставили, сохранились, обновили страницу — если навигация выводится не там, где нужно, откатили изменения назад и по новой — и так до результата.

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

Не обнаружили? Не паникуйте!

Важно помнить: чтобы такая навигация появилась, нужно, чтобы у вас на блоге было в общей сумме записей больше, чем вы указали для вывода на одной странице блога, когда делали его общие настройки . Ну то есть, если вы планируете выводить на каждой страничке по 10 постов, а написано у вас только пять, то как ни колдуй — навигацию вы не увидите, да и откуда бы ей взяться?

Но чтобы все-таки постраничная навигация показала свое истинное лицо, я использую маленькую наивную хитрость — в разделе «Чтение» настроек блога указываю вывод одной записи на странице, и создаю на блоге две тестовые записи, которые потом удалю. Таким образом, у меня будет уже две страницы — и постраничная навигация, созданная плагином WP Page Numbers , предстанет перед нами во всей красе.

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

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

Вначале идут настройки внешнего вида постраничной навигации:

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

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

Далее, переводим надписи: Ну и в заключительной части мы можем скрыть некоторые элементы и указать количество страниц, которое хотим показывать:

Собственно, все, друзья! Как бы ни хотелось мне рассказать еще что-нибудь об этом плагине, да нечего! Зато на очереди у нас другой плагин, который выполняет абсолютно ту же функцию, что и WP Page Numbers , и который вы можете использовать, если этот вам по каким-то причинам не понравился или не устроил. Итак, предлагаю вашему вниманию

Плагин для постраничной навигации WordPress WP-PageNavi

Скачиваем плагин здесь , после чего заливаем папку с файлами плагина в каталог плагинов вашего блога \wp-content\plugins и активируем его в админке:

После чего открываем на редактирование файл index.php вашей темы оформления и заменяем в нем код, отвечающий за вывод стандартной постраничной навигации WordPress (о том, как этот код найти, я рассказывала чуть выше, описывая плагин WP Page Numbers ) на вот такую строчку:

<?php wp_pagenavi();  ?>

Теперь изменения нужно сохранить, и обновив страницу, вы увидите на блоге вот такую навигацию, созданную плагином WP-PageNavi :

Плагин WP-PageNavi тоже имеет свою страницу параметров, скрытых в меню «Настройки» админки, и вы при желании можете туда зайти и подредактировать что-нибудь. Но я для себя ничего интересного там не нашла, все настройки оставила «по умолчанию» — и все отлично работает. Тем более что одной из самых нужных настроек — регулирования внешнего вида — на странице параметров просто нет.

Поэтому, если вы все же пожелаете как-то подогнать внешний вид постраничной навигации под цветовое решение вашего блога, то файл pagenavi-css.css и базовые знания CSS — ваши верные друзья.

На этом, пожалуй, с плагинами мы покончим. Те, кого интересовала установка постраничной навигации при помощи плагина, могут выбрать из WP-PageNavi и WP Page Numbers , а вот господа, искренне убежденные, что плагины — это зло, и их нужно всегда стараться по возможности заменять кодом, могут проследовать за мной далее.

Установка постраничной навигации на блог WordPress без плагина

производится путем нескольких несложных телодвижений:

В файл functions.php нужно вставить нижеследующий код (убедитесь, что файл сохранен в кодировке UTF-8 без BOM , иначе вместо русских подписей вылезут кракозябрики): function wp_corenavi() { global $wp_query, $wp_rewrite; $pages = ''; $max = $wp_query->max_num_pages; if (!$current = get_query_var('paged')) $current = 1; $a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999)); $a['total'] = $max; $a['current'] = $current; $total = 0; //1 - выводить текст "Страница N из N", 0 - не выводить $a['mid_size'] = 3; //сколько ссылок показывать слева и справа от текущей $a['end_size'] = 1; //сколько ссылок показывать в начале и в конце $a['prev_text'] = '&laquo;'; //текст ссылки "Предыдущая страница" $a['next_text'] = '&raquo;'; //текст ссылки "Следующая страница" if ($max > 1) echo '<div>'; if ($total == 1 && $max > 1) $pages = '<span>Страница ' . $current . ' из ' . $max . '</span>'."\r\n"; echo $pages . paginate_links($a); if ($max > 1) echo '</div>'; }

Теперь осталось поместить вызов этой функции в нужное место файла index.php (где это пресловутое место находится, я рассказывала выше, когда речь шла о плагине WP Page Numbers ). Собственно код для размещения:

<?php if (function_exists('wp_corenavi')) wp_corenavi(); >

В итоге мы получаем постраничную навигацию вот такого вида:

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

Прежде всего, можно изменять значения параметров в теле самой функции — это тот кусочек кода, который мы вставляли в functions.php . Значения параметров пояснены в комментариях, так что первичная настройка постраничной навигации без плагина труда не составит.

А вот с изменением внешнего вида постраничной навигации на блоге придется немножко повозиться. Я, если честно, поленилась сама экспериментировать, ну во-первых, потому, что с оформлением и художественной фантазией у меня и так-то напряг, а в последние дни я растратила и остатки своих этих весьма сомнительных качеств (о чем дальше), а во-вторых, есть мои коллеги-блогеры, которые давно и на примерах разжевали кастомизацию внешнего вида постраничной навигации. Так что отдам я, пожалуй, им эту тему на откуп — стилевое оформление навигации по страницам блога WordPress отлично описано здесь и здесь .

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

Кстати, если вы до сих пор в раздумьях, какой же способ выбрать, я настоятельно рекомендую использовать вставку кода, то есть третий способ. Почему? Да ответ прост! Потому что даже установка плагина постраничной навигации так или иначе все равно требует редактирования кода, пусть и одного только файла. Но я считаю: где один файл, там и два, заодно и руку набьете, и блог лишний раз нагружать не станете — а когда станете блогером-десятитысячником, вспомните скромную Web-Кошку добрым словом за этот совет…

Ну и пару слов о том, чем же я так занята последние дни. Все банально и тривиально: переверстываю уже третий шаблон в поисках идеала для своего нового блога об ImageCMS . Идеал все так же маячит вдали, как и несколько дней назад, когда я вдруг решила сменить уже подготовленную и настроенную тему на что-то совсем другое, что только пока существует только в моем воспаленном (а какое оно еще может быть после трех бессонных ночей подряд) воображении.

Самое интересное, что технически-то можно реализовать практически все, что хочется (хотя и не всегда, конечно — нужно совершенствовать навыки), а вот с внешним видом, как всегда, напряг… Так что я в творческом поиске, который, скорее всего, скоро мне надоест и ничем толковым не увенчается.

Впрочем, в любом случае, пора уже завершать все эти верстки-переверстки, так что скоро я представлю вам моего нового малыша. Следите за обновлениями , чтобы не пропустить знакомство — все, что я могу вам сейчас посоветовать!

Ну вот и все на сегодня! Я прощаюсь с вами до скорой приятнейшей встречи здесь, на Авторском блоге Web-Кошки , и приглашаю всех интересующихся вновь в гости в самое ближайшее время на урок Joomla , а может, и не Joomla, а может, не урок…

Была с вами всегда ваша пушистая Web-Кошка, которая зажав в лапах справочник по CSS и PHP, уже… спит мордочкой на клавиатуре…

rss