Вордпресс

Только когда был выпущен WordPress 4.1, создание навигации по блогам с разбивкой на страницы было довольно громоздким делом, которое требовало либо определенных усилий по разработке, либо плагина. WordPress 4.1 оставляет это в прошлом. Он позволяет вам создать навигацию по блогу с разбивкой на страницы, добавив один единственный тег в тему. index.php. Теперь вам нужно немного CSS, чтобы получить достойный дизайн. И это все. Разработка навигации занимает не более 10 минут, а результат просто потрясающий. Давайте подробнее рассмотрим возможности нового тега шаблона. В нашем примере мы используем тему Twenty Twelve.

Исходное состояние: тема WordPress The Twenty Twelve

Тема Twenty Twelve не предоставляет встроенную навигацию по блогам с разбивкой по страницам. Вместо этого вы можете перемещаться по страницам блога, используя довольно простую навигацию «Старые сообщения/Новые сообщения». Twenty Twelve — далеко не единственная тема, использующая такую навигацию. На скриншоте показано исходное состояние:

Эта навигация может быть преднамеренной, но она не красива и не удобна для пользователя, поскольку вы не можете с первого взгляда увидеть, на какой странице блога вы находитесь. Поэтому сегодня мы покажем вам, как создать навигацию с разбивкой на страницы. До выпуска WordPress 4.1 для разбиения на страницы требовалась специально закодированная функция или плагин, такой как WP-PageNavi.

Разбивку на страницы также можно было бы реализовать с помощью тега шаблона. paginate_links(); однако этот тег, существующий с версии WordPress 2.1.0, оказался одним из самых тщательно охраняемых секретов. Я не могу вспомнить ни одного случая, когда он использовался. В этой статье рассматриваются недавно представленные the_post_pagination() ярлык.

Шаг 1. Локализуйте и деактивируйте старую навигацию по блогу

Прежде чем мы начнем настраивать новую навигацию, нам нужно сначала деактивировать и локализовать старую навигацию по блогу темы Twenty Twelve. Для этого откройте файл темы index.php в любом HTML-редакторе. В строке 28 вы найдете тег двадцать двенадцать_content_nav (‘nav-ниже’), отвечающий за отображение старой навигации. Добавьте две косые черты после открытия php, чтобы деактивировать функцию.

При обновлении веб-сайта вы заметите, что навигация по страницам блога исчезла.

Шаг 2: Интегрируйте теги нового шаблона

Поместите новый тег под деактивированным тегом. Подробнее о том, где (строка 30) и как установить тег, смотрите на скриншоте.

Результат нового тега в исходном коде

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

Вот как код выглядит в исходном коде HTML:

Мы получаем навигация элемент и див элемент, содержащий а элементы и охватывать элемент. Немного CSS превращает этот код в красивую навигацию.

Шаг 3: Настройте тег the_posts_pagination()

Список элементов навигации, безусловно, выглядит лучше и семантически более корректен. С небольшой хитростью такой список можно отобразить с помощью the_posts_pagination() ярлык. С the_posts_pagination() основан на paginate_links()вы можете использовать параметры paginate_links() для тега.

Обязательный и немного расширенный тег выглядит так:

HTML-код, создаваемый этим расширенным тегом шаблона, именно то, что нам нужно: замечательный список.

Новая навигация по списку блогов в представлении темы:

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

Исправьте неполный перевод

При более внимательном рассмотрении вывода HTML the_posts_pagination() template, вы заметите, что он переведен не полностью. Это не идеально, но это можно быстро исправить. Как уже упоминалось, the_posts_pagination() основывается на существующей paginate_links() тег, поэтому вы можете использовать его параметры. Просто добавьте следующее в тег шаблона:

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

Теперь все, что вам нужно, это немного CSS, чтобы представить вашу новую разбивку на страницы как привлекательную навигацию.

Шаг 4: Создайте необходимый CSS


/* =Blog-Navigation - Pagination
----------------------------------------------- */

nav.pagination {
position: relative;
display: block;
}

.nav-links {
position: relative;
}

.nav-links ul {
margin: 0;
padding: 0,
}

.nav-links ul li {
list-style: none;
margin:0 10px 0 0;
padding:0;
float: left;
}

.nav-links ul li span.current {
padding: 10px 12px;
background: #777;
border: 1px solid #777;
display: block;
line-height: 1;
border-radius: 4px;
color: #fff;
}

.nav-links ul li a {
padding: 10px 12px;
background: #ddd;
color: #666;
text-decoration: none;
border: 1px solid #ccc;
border-radius: 3px;
display: block;
line-height: 1;
}

.nav-links ul li a:hover {
background: #999;
border-color: #888;
color: #fff;
}

Окончательное состояние: завершенная навигация по блогу с разбивкой на страницы

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

Заключение

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