Как сделать оглавление для статьи в WordPress.

Снова на связи! Сегодня я расскажу как можно просто сделать оглавление для статей на своем сайте с помощью плагина Advanced Custom Fields как например у меня на данном сайте.

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

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

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

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

Приведу пример полей, которые я сделал:

Оглавление статьи в WordPress
Оглавление статьи в WordPress, поля которые создали через плагин acf

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

<? if (is_single()) { // Проверяем что это действительно запись, я не страница
   if (have_rows('header_article')){ // Указываем что если у нас есть поля с именем header_article, то выполняем код дальше
?>
		<aside class="widget widget_recent_comments clearfix">
		<div class="widget-header">
			<h3 class="widget-title"><i class="fa fa-bookmark-o" aria-hidden="true"></i> Оглавление статьи</h3>
		</div>
		<ul>
	<? 
  while(have_rows('header_article')) : the_row(); // Запускаем цикл
		$link = get_sub_field('link'); //Получаем в переменную $link значение заполненного поля link
		$header = get_sub_field('header'); //Получаем в переменную $header значение заполненного поля header
 ?>
	<li>
		<a href="#<?echo $link;?>"><?echo $header;?></a>
	</li>
		<? endwhile; ?>
		</ul>
										<?}
	?></aside><?
};

Надуюсь, что тут все понятно. Если будут вопросы, задавайте.

Как выглядит теперь все это в админке, когда я добавляю материал. Да, мне приходиться к каким то заголовкам, вручную приписывать id, например

<h2 id="hello">Привет</h2>

А дальше я в админке просто проставляю hello и привет, и wordpress с плагином acf дальше делаем сам свою магию.

Добавление оглавлений в админке, при создании записи
Добавление оглавлений в админке, при создании записи

Друзья, как всегда, если у вас есть какие то вопросы или что-то не понятно, пожалуйста задавайте мне их в комментариях, я всегда рад помочь!

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

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