Зміна HTML-коду сторінки у WordPress перед виведенням у браузер

Привіт:) У цьому пості покажу простий приклад як змінити код HTML сторінки WordPress перед виведенням її вмісту у браузер.

Зміст

Що таке output buffering у PHP
Як працює буферизація у WordPress
Приклади зміни HTML-коду сторінки WordPress
Додати власний рядок у HTML код
Змінити HTML код

У процесі розробки WordPress сайтів іноді виникає потреба змінити HTML-код, який уже згенеровано WordPress, перш ніж він буде надісланий у браузер. Наприклад, вставити власний HTML-тег, змінити заголовок <title> або встановити інше значення атрибуту lang у <html>. Причому це може бути для якихось окремих сторінок, а не для всього сайту.

Оскільки WordPress вже завершив рендеринг сторінки, пряме втручання у цей момент можливе лише через буферизацію виведення (output buffering). У PHP це досягається через функції на кшталт ob_start(), які дозволяють перехопити згенерований HTML, обробити його, і лише після цього вивести.

Цей підхід — зручний та гнучкий спосіб вплинути на фінальний HTML-код, особливо коли немає доступу до шаблонів теми або коли неможливо змінити поведінку активного SEO-плагіну через його опції в адмін-панелі сайту.

до змісту ↑

Що таке output buffering у PHP

Output buffering — це механізм PHP, який дозволяє тимчасово зберігати виведений вміст (контент у пам'яті, замість того щоб одразу відправляти його у браузер. Це дає змогу:

змінювати HTML-код "на льоту";
виконувати аналіз виводу;
уникати помилок "headers already sent";
додавати/видаляти частини коду перед остаточним виведенням.

Основна функція, яка запускає буферизацію — це ob_start( $callback ), де $callback — ім’я функції, яка отримає весь згенерований буфер і може його змінити.

до змісту ↑

Як працює буферизація у WordPress

Зазвичай згадана функція ob_start() прикріплюється до WordPress-хуку template_redirect. Він спрацьовує перед виведенням шаблону сторінки, тобто на етапі, коли WordPress уже визначив, який шаблон буде використовуватись (single.php, page.php тощо), але ще не почав формувати HTML. Це ідеальний момент, щоб активувати ob_start() і перехопити весь HTML-код перед його надсиланням у браузер. Це забезпечує:

можливість централізованого втручання у структуру HTML.
максимальну гнучкість (буфер захоплює всю HTML-структуру);
незалежність від шаблонів теми.

до змісту ↑

Приклади зміни HTML-коду сторінки WordPress

Наведу приклади для типових задач, які попадаються у моїй роботі.

Додати власний рядок у HTML код

Для прикладу додам перед тегом </head> наступний рядок:

<meta name="robots" content="noindex, follow">

Для цього наступний код додайте у файл functions.php.

/**
 * Додавання власних даних у HTML-код сторінки перед виведенням її у браузер
 * 
 * <meta name="robots" content="noindex, follow">
 * 
 */
if ( ! function_exists( 'mp_add_to_html_code_buffer' ) ) {
    add_action( 'template_redirect', 'mp_add_to_html_code_buffer' );
    
    function mp_add_to_html_code_buffer() {
        ob_start( 'mp_add_to_html_code' );
    }

    function mp_add_to_html_code( $buffer ) {
        $insert_string = '<meta name="robots" content="noindex, follow">';

        // Якщо знайшли наш рядок перед закриттям тегу </head>, нічого не додаємо
        if ( strpos( $buffer, $insert_string ) !== false ) {

            // error_log( print_r( 'CODE ALREADY EXISTS!', 1 ) );

            return $buffer;
        }

        // Додаємо наш рядок перед закриттям тегу </head>
        $insert = "\n" . $insert_string . "\n";
        $buffer = str_replace( '</head>', $insert . '</head>', $buffer );

        // error_log( print_r( 'CODE IS MISSING, ADD IT!', 1 ) );

        return $buffer;
    }
}

Значення змінної $insert_string замініть на свої дані.

Цей код:

підключає функцію ob_start() через хук template_redirect;
передає згенерований HTML у функцію mp_add_to_html_code;
шукає вміст </head> і вставляє перед ним тег <meta>;
перевіряє, чи коментар вже існує, щоб уникнути дублювання.

до змісту ↑

Змінити HTML код

Для прикладу змінюватиму значення наступних тегів:

<title>...</title>
<html lang="...">

Код:

/**
 * Зміна HTML-коду сторінки перед виведенням її у браузер:
 * 
 * 1. <title>Власний заголовок</title>
 * 2. <html lang="Власне значення"> (наприклад, "uk_UA")
 * 
 */
if ( ! function_exists( 'mp_change_html_code_buffer' ) ) {
    add_action( 'template_redirect', 'mp_change_html_code_buffer' );

    function mp_change_html_code_buffer() {
        ob_start( 'mp_change_html_code' );
    }

    function mp_change_html_code( $buffer ) {
        $new_title = 'Власний заголовок сторінки';
        $new_html_lang = 'uk_UA';
        
        $pattern_title = '/<title>(.*?)<\/title>/s';
        $pattern_html_lang = '/<html[^>]*lang=["\']([^"\']*)["\'][^>]*>/i';
        
        if ( preg_match( $pattern_title, $buffer, $matches ) ) {
            // $matches[0] містить весь знайдений тег <title>...</title>
            // $matches[1] містить вміст тегу <title>

            $buffer = preg_replace( $pattern_title, '<title>' . $new_title . '</title>', $buffer );
        }

        if ( preg_match( $pattern_html_lang, $buffer, $matches ) ) {
            // $matches[0] містить весь знайдений тег <html lang="...">
            // $matches[1] містить вміст атрибуту lang

            // error_log( print_r( $matches, 1 ) );

            $buffer = preg_replace( $pattern_html_lang, '<html lang="' . $new_html_lang . '">', $buffer );
        }

        return $buffer;
    }
}

У змінні $new_title та $new_html_lang підставте свої значення.

Тут спочатку у HTML-коді сторінки відбувається пошук вказаних тегів. Якщо знайдені, відбувається заміна їх значень.