![Оглавление на WordPress-сайте](https://hoboweb.ru/wp-content/uploads/2024/06/toc_au-min.png)
В этой заметке приведу код, который позволит сделать оглавление на WordPress-сайте. Оглавление будет появляться автоматически при добавлении в текст заголовков. Теперь нам не придётся каждый раз писать html-код для оглавления вручную при создании новой записи, имеющей подзаголовки.
В файл function.php для начала необходимо внести следующий PHP-код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function generate_table_of_contents() { global $post; $content = get_the_content(); $document = new DOMDocument(); @$document->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8')); $headers = $document->getElementsByTagName('h2'); if ($headers->length > 0) { $toc = '<div class="table-of-contents"><h2>Оглавление</h2><ul>'; foreach ($headers as $header) { $id = sanitize_title($header->textContent); $toc .= '<li><a href="#' . $id . '">' . $header->textContent . '</a></li>'; $content = preg_replace('/<h2(.*?)>(.+?)<\/h2>/', '<h2 id="' . $id . '"$1>$2</h2>', $content, 1); } $toc .= '</ul></div>'; $content = $toc . $content; } return $content; } add_filter('the_content', 'generate_table_of_contents'); |
Этот код использует функцию generate_table_of_contents(), которая:
- Получает содержимое текущей записи с помощью get_the_content().
- Анализирует содержимое, используя DOMDocument, чтобы найти все теги h2.
- Создает оглавление, используя найденные заголовки, и добавляет уникальные идентификаторы id для каждого заголовка.
- Заменяет оригинальные теги h2 на теги с добавленными идентификаторами.
- Возвращает обновленное содержимое записи с добавленным оглавлением.
Чтобы использовать этот код, вам нужно:
- Скопировать код в файл functions.php вашей темы WordPress.
- Сохранить изменения и обновить страницу.
Теперь, когда вы добавляете теги h2 в свои записи, оглавление будет автоматически генерироваться и отображаться в начале записи. Однако, этот вариант не слишком интересен. Дело в том, что оглавление будет всегда отображаться в раскрытом виде, и это не всегда удобно.
Вот доработанный код, который включает в себя возможность свернуть/развернуть оглавление, прокрутку страницы до соответствующего тега h2 при клике на пункт оглавления, а также красивый фон оглавления:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
function add_toc_script() { wp_enqueue_script('toc-script', get_template_directory_uri() . '/js/toc.js', array('jquery'), null, true); wp_enqueue_style('toc-style', get_template_directory_uri() . '/css/toc.css'); } add_action('wp_enqueue_scripts', 'add_toc_script'); function add_toc_markup($content) { $pattern = '/<h2[^>]*>(.*?)<\/h2>/'; preg_match_all($pattern, $content, $matches); if (count($matches[0]) > 0) { $toc = '<div class="toc-container"><button class="toggle-toc"><h2>Оглавление</h2></button><div class="toc-content">'; $toc .= '<ul class="toc-list">'; foreach ($matches[0] as $key => $heading) { $anchor = 'toc-' . $key; $content = str_replace($heading, '<h2 id="' . $anchor . '">' . $matches[1][$key] . '</h2>', $content); $toc .= '<li><a href="#' . $anchor . '" class="toc-link">' . $matches[1][$key] . '</a></li>'; } $toc .= '</ul></div></div>'; return $toc . $content; } return $content; } add_filter('the_content', 'add_toc_markup'); |
Однако, чтобы всё заработало, для этого кода нужно создать два новых файла:
- toc.js (в папке js):
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152document.addEventListener('DOMContentLoaded', function() {var tocLinks = document.querySelectorAll('.toc-link');var toggleTocButton = document.querySelector('.toggle-toc');var tocContent = document.querySelector('.toc-content');// Переключение отображения оглавленияtoggleTocButton.addEventListener('click', function() {tocContent.classList.toggle('show');this.classList.toggle('open');});// Плавная прокрутка при клике на пункт оглавленияtocLinks.forEach(function(link) {link.addEventListener('click', function(e) {e.preventDefault();var targetId = this.getAttribute('href');var targetElement = document.querySelector(targetId);if (targetElement) {var targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;smoothScroll(targetPosition, 800);}});});// Функция плавной прокруткиfunction smoothScroll(finalPosition, duration) {var startPosition = window.pageYOffset;var distance = finalPosition - startPosition;var startTime = null;function animation(currentTime) {if (startTime === null) startTime = currentTime;var timeElapsed = currentTime - startTime;var run = easeInOutQuad(timeElapsed, startPosition, distance, duration);window.scrollTo(0, run);if (timeElapsed < duration) {requestAnimationFrame(animation);} else {window.scrollTo(0, finalPosition);}}function easeInOutQuad(t, b, c, d) {t /= d / 2;if (t < 1) return c / 2 * t * t + b;t--;return -c / 2 * (t * (t - 2) - 1) + b;}requestAnimationFrame(animation);}});
- toc.css (в папке css):
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960.toc-container {background-color: #f5f5f5;border: 1px solid #ddd;padding: 20px;margin-bottom: 20px;}.toggle-toc {/*display: block;*/width: 100%;text-align: left;background-color: transparent;border: none;cursor: pointer;font-size: 16px;font-weight: bold;display: flex;justify-content: space-between;align-items: center;cursor: pointer;}.toggle-toc.open::after {content: "▲";float: right;font-size: 16px;font-weight: bold;transition: transform 0.3s ease;}.toggle-toc:not(.open)::after {content: "▼";float: right;font-size: 16px;font-weight: bold;transition: transform 0.3s ease;}.toc-content {display: none;}.toc-content.show {display: block;}.toc-list {list-style-type: none;padding: 0;margin: 0;}.toc-link {color: #333;text-decoration: none;}.toc-link:hover {color: #000;}
Этот код добавляет следующие функциональности:
- Оглавление можно свернуть/развернуть, нажав на стрелку в заголовке.
- При клике на пункт оглавления, страница прокручивается до соответствующего тега h2.
- Оглавление имеет красивый фон, определенный в стилях CSS.
Чтобы использовать этот код, вам нужно:
- Скопировать код в файл functions.php вашей темы WordPress.
- Создать файлы toc.js и toc.css в соответствующих папках вашей темы.
- Сохранить изменения и обновить страницу.
Теперь, когда вы добавляете теги h2 в свои записи, оглавление будет автоматически генерироваться, и вы сможете свернуть/развернуть его, а также прокрутить страницу до соответствующего раздела при клике на пункт оглавления.
Всем WEB!