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

На сайте wp-kama есть замечательный класс, который собирает заголовки и формирует содержание статьи. Полезная штука, если у вас длинные статьи.

к содержанию

Вывод после любого абзаца

Получившееся содержание выводится шорткодом или автоматически перед статьей. Автоматическое решение конечно удобная штука, но вот для формирования сниппета в Яндексе не подходит, потому что Яндекс любит брать первые 2-3 строки статьи. А потому, чтобы такого не было, содержание будем выводить автоматически после первого или второго абзаца прямо внутри статьи. Сделать сие можно с помощью вот такого простого кода

//Вставляем содержание после 1-го абзаца статьи.
add_filter( 'the_content', 'prefix_insert_post_ads' );
function prefix_insert_post_ads( $content ) {
	if ( is_single() && ! is_admin() ) {
		// здесь помещаем нужные настройки для содержания
		$args['css'] = false; 
		$tags = array('h2','h3','h4');
		// записываем в переменную значение класса
		$ad_code = Kama_Contents::init( $args )->make_contents( $content, $tags );

		return prefix_insert_after_paragraph( $ad_code, 1, $content ); // изменением цифирки, меняем номер абзаца
	}
	return $content;
}
// Родительская функция перебора абзацев
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
	$closing_p = '</p>';
	$paragraphs = explode( $closing_p, $content );
	foreach ($paragraphs as $index => $paragraph) {

		if ( trim( $paragraph ) ) {
			$paragraphs[$index] .= $closing_p;
		}
		if ( $paragraph_id == $index + 1 ) {
			$paragraphs[$index] .= $insertion;
		}
	}
	return implode( '', $paragraphs );
}

Добавляете этот код в файл function.php вместо функции вывода  перед статьей. Более подробно в видео

к содержанию

Вывод после любого заголовка

Работа функции довольно проста: в тексте статьи ищем закрывающий тег </p> и после него добавляем нужный контент. В данном случае — это содержание статьи. По тому же самому принципу можно вывести содержание после любого заголовка — достаточно только вместо </p> указать закрывающий тег заголовка. Например, </h2> или любой другой…

//Вставляем содержание после 1-го абзаца статьи.
add_filter( 'the_content', 'prefix_insert_post_ads' );
function prefix_insert_post_ads( $content ) {
	if ( is_single() && ! is_admin() ) {
		// здесь помещаем нужные настройки для содержания
		$args['css'] = false; 
		$tags = array('h2','h3','h4');
		// записываем в переменную значение класса
		$ad_code = Kama_Contents::init( $args )->make_contents( $content, $tags );

		return prefix_insert_after_paragraph( $ad_code, 1, $content ); // изменением цифирки, меняем номер абзаца
	}
	return $content;
}
// Родительская функция перебора абзацев
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
	$closing_p = '</h2>'; // здесь указываем нужный тег
	$paragraphs = explode( $closing_p, $content );
	foreach ($paragraphs as $index => $paragraph) {

		if ( trim( $paragraph ) ) {
			$paragraphs[$index] .= $closing_p;
		}
		if ( $paragraph_id == $index + 1 ) {
			$paragraphs[$index] .= $insertion;
		}
	}
	return implode( '', $paragraphs );
}

Замену производим в строке 17!

Если есть вопросы, пишем в комментариях.

25 комментариев
  • Константин

    27.03.2016

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

    Не подскажите, как реализовать вставку сразу перед первым заголовком?

    • Артем

      27.03.2016

      Добрый день! У Камы на сайте есть, в комментариях только)))
      А после заголовка можно так указать

      //Вставляем содержание после 1-го абзаца статьи.
      add_filter( 'the_content', 'prefix_insert_post_ads' );
      function prefix_insert_post_ads( $content ) {
      	if ( is_single() && ! is_admin() ) {
      		// здесь помещаем нужные настройки для содержания
      		$args['css'] = false; 
      		$tags = array('h2','h3','h4');
      		// записываем в переменную значение класса
      		$ad_code = Kama_Contents::init( $args )->make_contents( $content, $tags );
      
      		return prefix_insert_after_paragraph( $ad_code, 1, $content ); // изменением цифирки, меняем номер абзаца
      	}
      	return $content;
      }
      // Родительская функция перебора абзацев
      function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
      	$closing_p = ''; // указываем заголовок
      	$paragraphs = explode( $closing_p, $content );
      	foreach ($paragraphs as $index => $paragraph) {
      
      		if ( trim( $paragraph ) ) {
      			$paragraphs[$index] .= $closing_p;
      		}
      		if ( $paragraph_id == $index + 1 ) {
      			$paragraphs[$index] .= $insertion;
      		}
      	}
      	return implode( '', $paragraphs );
      }
      

      В строке 17 требуется указать закрывающий тег заголовка, сейчас стоит

    • Артем

      27.03.2016

      Обновил статью и заодно проверил код. Все работает, пользуйтесь на здоровье)

  • Игорь

    08.04.2016

    Здравствуйте, а как можно увеличить размер «Оглавление», а то уж больно маленький у меня получился.

    • Артем

      08.04.2016

      Добрый день! С помощью стилей увеличить шрифт

      • Игорь

        08.04.2016

        А можно пример? А то я уже пытался и ничего не получилось.

        • Артем

          08.04.2016

          Находим нужный класс, в вашем случае, тот блок в который обернуто название Оглавление. И присваиваем ему нужные стили
          Как-то так

          .kc-title {
              font-size: 25px;
              font-weight: bold;
          }
          
          • Игорь

            08.04.2016

            Странно, но у меня упорно это не хочет работать

          • Артем

            08.04.2016

            Ничего странного, значит или класс не тот, или закешировалось, или еще что-то. Покажите где у вас это оглавление

          • Артем

            08.04.2016

            И не получится, у вас для Заголовка применяются стили, прописанные в самой функции. Надо или их отключить, для чего добавить в функцию вывода строку

            $args['css'] = false; 
            

            Или попробовать перебить их, например так (вставлять в файл style.css)

            .kc__title {
                font-size: 25px !important;
                font-weight: bold !important;
            }
            
  • Игорь

    08.04.2016

    К сожалению это выше моего понимания, спасибо за попытку помочь.

  • Сергей

    30.05.2016

    Неплохое решение. Возможно, применю его в будущем, а пока не думал об этом. Да и длинных статей не пишу)) Потому что сам не очень люблю читать длинные посты.

  • Святослав

    15.10.2016

    Мне пришлось отказаться от плагина комментариев, по причине долгой загрузки страниц. Решил не изобретать велосипед, так как wordpress все придумал за меня. Но в стандартных коммен. wordpress нет функции подписки на комментарий, и тут опять нужен плагин. Не хотелось бы ставить плагин, это шило на мыло выходит. Как вы тут решили данный вопрос?

  • HD

    09.11.2016

    Как раз пригодилось на строительном блоге.И вообще годная штука когда пишу длинные простыни текста.

  • Sergey

    12.02.2017

    Спасибо за Ваш сайт и уроки! Помогите пожалуйста: после добавления скрипта плавной прокрутки в консоли выдает ошибку. Вверх к содержанию скролит плавно, а при нажатии на ссылку в самом содержании выводит следующее:
    Uncaught Error: Syntax error, unrecognized expression: #klassifikatsiya-fundamentov., a[name=»klassifikatsiya-fundamentov.»]
    at Function.fa.error (jquery.js?ver=1.12.4:2)
    at fa.tokenize (jquery.js?ver=1.12.4:2)
    at fa.select (jquery.js?ver=1.12.4:2)
    at Function.fa (jquery.js?ver=1.12.4:2)
    at Function.a.find (jquery-migrate.min.js?ver=1.4.1:2)
    at n.fn.init.find (jquery.js?ver=1.12.4:2)
    at n.fn.init.a.fn.find (jquery-migrate.min.js?ver=1.4.1:2)
    at a.fn.init.n.fn.init (jquery.js?ver=1.12.4:2)
    at a.fn.init (jquery-migrate.min.js?ver=1.4.1:2)
    at n (jquery.js?ver=1.12.4:2)

    • Артем

      24.02.2017

      Прошу прощения за долгий ответ. У вас конфликт в скрипте, что-то не так с идентификаторах, на которые вешается скрипт

  • Мастер

    24.04.2017

    Как хорошо, что наткнулся на эту статью. Я сейчас как раз занимаю своим сайтом и это мне необходимо.

  • Дизайнер

    06.05.2017

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

  • Алексей

    20.05.2017

    Отличная идея сделать содержание, особенно если длинная статья.

    • Артем

      21.05.2017

      Эт да, удобство читателей — наше всё)

  • Игорь

    29.10.2017

    Я немного не понял, это всё делается без плагина?
    Я например установил TOC+ или по другому Table of Contents Plus но он не выводит после первого абзаца.
    Что мне делать.

    • Артем

      29.10.2017

      Да, все без плагина. Но с TOC вроде были настройки вывода после нужного абзаца

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

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