Створення динамічного змісту для публікацій WordPress за допомогою PHP

Зміст (TOC) не тільки покращує користувацький досвід, полегшуючи навігацію, але й підвищує SEO, структуруючи контент для пошукових систем. У цій статті ви дізнаєтесь, як автоматизувати створення динамічного змісту для публікацій WordPress за допомогою PHP. Ми розглянемо вилучення заголовків, автоматичне вставлення змісту та додавання CSS/JavaScript для стилізації та покращення TOC.

Чому важливо мати зміст

1. Покращення користувацького досвіду – Відвідувачі можуть швидко перейти до найбільш актуального для них розділу.
2. Покращення SEO – Google віддає перевагу структурованому та організованому контенту.
3. Збільшення залученості – TOC допомагає читачам залишатися довше, демонструючи глибину контенту та полегшуючи навігацію.

Крок 1: Вилучення заголовків із контенту публікації

Щоб створити зміст динамічно, нам потрібно вилучити заголовки (h2, h3 тощо) з контенту публікації. Ось як це зробити за допомогою PHP:

function extract_headings($content) {
    preg_match_all('/<h([2-6])>(.*?)<\/h[2-6]>/', $content, $matches, PREG_SET_ORDER);
    $toc = '<ul class="toc">';
    $counter = 1;
    
    foreach ($matches as $match) {
        $id = 'section-' . $counter++;
        $level = $match[1];
        $title = $match[2];
        
        // Замінюємо заголовок на якірне посилання
        $content = str_replace($match[0], "<h$level id='$id'>$title</h$level>", $content);
        
        // Додаємо до списку TOC
        $toc .= "<li class='toc-level-$level'><a href='#$id'>$title</a></li>";
    }
    $toc .= '</ul>';
    
    // Повертаємо змінений контент і TOC
    return ['toc' => $toc, 'content' => $content];
}

Крок 2: Автоматичне вставлення TOC у публікації

Тепер, коли у нас є функція для вилучення заголовків, нам потрібно автоматично вставляти TOC на початку публікації. Це можна зробити за допомогою хуку the_content.

function add_toc_to_content($content) {
    if (is_single()) {
        $result = extract_headings($content);
        $toc = $result['toc'];
        $content = $result['content'];
        
        // Вставляємо TOC на початку публікації
        $content = $toc . $content;
    }
    return $content;
}
add_filter('the_content', 'add_toc_to_content');

Крок 3: Стилізація змісту за допомогою CSS

TOC повинен бути візуально привабливим та адаптивним. Ось базовий CSS для стилізації TOC:

.toc {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
}
.toc li {
    list-style: none;
    margin: 5px 0;
}
.toc a {
    text-decoration: none;
    color: #0073aa;
}
.toc a:hover {
    text-decoration: underline;
}

Крок 4: Додавання плавної прокрутки за допомогою JavaScript

Щоб покращити користувацький досвід, додамо плавну прокрутку при натисканні на посилання TOC.

<script>
    document.querySelectorAll('.toc a').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            target.scrollIntoView({ behavior: 'smooth' });
        });
    });
</script>

Кілька слів на завершення

Завдяки декільком рядкам PHP, CSS і JavaScript ви можете автоматизувати створення динамічного змісту у WordPress. Це не тільки покращує зручність використання, але й сприяє підвищенню SEO. Налаштуйте стилі та функціональність відповідно до дизайну вашого сайту, і ваш контент стане більш структурованим та доступним.