Главная
Wordpress
Как вывести ссылки Следующая / Предыдущая запись в WordPress
  • 15 Фев 2015г
  • 2406
  • 7
  • Рубрика: Wordpress

Как вывести ссылки Следующая / Предыдущая запись в WordPress

Навигация

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

Давайте приступим к выполнению задачи.

1-й способ. Следующая / Предыдущая запись без миниатюр

Первое что нужно сделать - это найти и открыть Файл single.php. Далее внутри цикла вывода записи

Примерный вид цикла вывода записи

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

//сюда код, чтобы вывести над текстом записи

<?php the_content(); ?>

//сюда код, чтобы вывести под текстом записи

<?php endwhile; else: ?>
<?php endif; ?>

вставить код приведенный ниже.

<nav id="nav-single">
<span class="nav-previous"><?php previous_post_link( 'Предыдущая запись <br> %link'); ?></span>
<span class="nav-next"><?php next_post_link ('Следующая запись <br> %link'); ?></span>
</nav>

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

#nav-single{width:100%;font-weight:bold;color:#333;font-size:15px;line-height:20px;display:inline-block;}
#nav-single a{font-weight:normal;font-size:13px;margin-top:15px;}
#nav-single .nav-next{width:45%;float:right;text-align:right;}
#nav-single .nav-previous{width:45%;float:left;}

Теперь у Вас получился 100% готовый вариант. Конечно же можете менять стили и настроить все под себя и внешний вид темы.

2-й способ. Следующая / Предыдущая запись с миниатюрами

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

Для начала код с разметкой.

<div id="post-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
if($prevPost) {?>
<div class="nav-box previous">
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
<?php previous_post_link('%link',"$prevthumbnail  <p>%title</p>", TRUE); ?>
</div>
<?php } $nextPost = get_next_post(true);
if($nextPost) { ?>
<div class="nav-box next">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); } ?>
<?php next_post_link('%link',"$nextthumbnail  <p>%title</p>", TRUE); ?>
</div>
<?php } ?>
</div>

По коду видно, что у нас один родительский блок post-nav и два дочерних nav-box, с предыдущей и следующей ссылкой, внутри которых вызываются функции WordPress.
Первая функция в nav-box это вызов миниатюры

$prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );

где 100,100 это размер - ширина и высота, так что можете настроить, если надо.

Вторая функция в nav-box это текстовая ссылка

next_post_link('%link',"$nextthumbnail  <p>%title</p>", TRUE);

Далее вставляем стили

#post-nav{display:inline-block;}
#post-nav .nav-box{background:#eee;padding:10px;}
#post-nav img{float:left;margin:0 10px 0 0;}
#post-nav p{margin:0 10px;font-size:12px;}
#post-nav .previous{float:left;width:45%;}
#post-nav .next{float:right;width:45%;}

Тут тоже нет ничего сложного, если нужно, можете добавить своих стилей и стилизовать свой блок навигации так, как Вам это нужно.

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

Теперь Вам решать какой из способов Вам подходит больше. Лично я, как и писал выше использую первый способ по старинке, без миниатюр, но многие склоняются ко второму варианту.
Очень надеюсь, что данная статья Вам поможет.
На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(16 голосов, в среднем: 3.9 из 5)

Опубликовано 7 комментариев

  • Тарас
    Комментариев: 2

    Здравствуйте. Большое спасибо за урок!
    Именно в Вашем исполнении он мне помог. У других - то в коде ошибка, то еще что-то не то.))
    Однако помог отчасти, поэтому прошу чуточку детализировать. Если это возможно, конечно...
    Итак, в single.php я вставил предложенный Вами код в нужном месте для вывода ссылок с миниатюрами. Все получилось. Правда, картинки выстроились вертикально, а не горизонтально. Я так понимаю, дело в стилях. Указанный второй код вставил в папку стилей произвольно (в самом конце), но ничего не произошло. Так симпатично, как у Вас в примере - горизонтально, не вышло. Стоят вертикально и без стилевого оформления. Хотелось бы исправить ситуацию.))
    Заранее спасибо за ответ. С уважением.

    • Виталий
      Комментариев: 269

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

      • Тарас
        Комментариев: 2

        С размером не помогло. Более того, вчера оказывается рано радовался. Что-то со скриптом не то (или конфликт с моим сайтом). Шаблон ВП у меня из двух столбиков (похож на Ваш). Так вот, когда вставляю код, вроде бы все работает. Но не везде... В статьях, которые последние в рубриках (то есть нет ссылки "следующая запись") боковой сайдбар сползает в футер. Если на примере Вашего сайта, то как если бы Ваш сайдбар начинался там, где у Вас сейчас "Подписка" и "Немного статистики". А напротив текста справа - пустота. Словом, что-то не то. Как говорил Ю. Никулин: "будем искать".)) Еще раз спасибо. С уважением.

  • Денис
    Комментариев: 1

    Здравствуйте, скажите, пожалуйста,как сделать только "следующаязапись" и "предыдущая запись", без вывода заголовка записи, чтобы ссылки перехода на следующую и предыдущую записи содержались в словах "следующая запись>>" И "

    • Виталий
      Комментариев: 269

      Второй способ, только убрать строку с выводом миниатюры, а там где выводится имя записи %title заменить на слова — предыдущая и следующая.

  • Олег
    Комментариев: 1

    Здравствуйте! Спасибо за статью! Подскажите пожалуйста код как вывести заголовки записей, без следующая и предыдущая со стрелочками?
    допустим

    Заранее спасибо!

    • Виталий
      Комментариев: 269

      Здравствуйте. В первом коде уберите слова "Предыдущая запись" "Следующая запись". а после или перед %link, в зависимости как вам надо поставьте код стрелочки:
      Стрелка влево ← (& larr; уберите пробел )
      Стрелка вправо → (& rarr; уберите пробел )

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий