Вордпресс

Вордпресс

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

wordpress-postpaginate-teaser_EN

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

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

neuere-aeltere-artikel-навигация

Эта навигация может быть преднамеренной, но она не красива и не удобна для пользователя, поскольку вы не можете с первого взгляда увидеть, на какой странице блога вы находитесь. Поэтому сегодня мы покажем вам, как создать навигацию с разбивкой на страницы. До выпуска 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, чтобы деактивировать функцию.

deaktivierung-der-alten-blog-navigation

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

двадцать двенадцать-он-навигация

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

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

der-neue-тег

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

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

умереть-пагинация-им-тема

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

der-ausgegebene-quellcode-des-tags1

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

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

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

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

erweiterter-template-tag1

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

die-paginierung-als-liste

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

die-paginierung-als-liste-auf-dem-theme

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

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

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

пост-пагинация-uebersetzung

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

die-uebersetzte-навигация

Теперь все, что вам нужно, это немного 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;
}

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

das-endergebnis1

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

Заключение

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

Ссылки по теме

(дпе)


Эта статья была первоначально опубликована 24 апреля 2015 г. и обновлена ​​21 октября 2021 г.