Изменение решения для вставки кода в посты WordPress без плагинов

Почему стандартные методы вставки кода в WordPress не всегда подходят

При создании публикаций в WordPress часто возникает задача вставить в посты блоки кода — например, фрагменты PHP, JavaScript, HTML или CSS. Однако стандартный редактор Gutenberg или классический редактор не всегда корректно отображают код без форматирования, что приводит к проблемам с читаемостью и безопасностью. Использование плагинов для подсветки синтаксиса — популярное решение, но иногда хочется обойтись без них, чтобы не перегружать сайт или сохранить полный контроль над кодом.

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

Такое решение идеально подойдет для сайтов с невысокой нагрузкой и для тех, кто не хочет зависеть от внешних плагинов и обновлений.

Создание короткого кода для вывода кода с подсветкой

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

Добавьте в файл functions.php вашей темы следующий код:

function wpcat_code_shortcode($atts, $content = null) {
    // Безопасно очищаем входящий код
    $code = trim(htmlspecialchars($content, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'));
    // Определяем язык программирования, если передан
    $language = isset($atts['lang']) ? sanitize_text_field($atts['lang']) : '';
    // Формируем HTML с классом для подсветки
    return '<pre><code class="' . esc_attr($language) . '">' . $code . '</code></pre>';
}
add_shortcode('wpcat_code', 'wpcat_code_shortcode');

Этот шорткод [wpcat_code lang="php"]ваш код[/wpcat_code] позволяет вставлять любой код с указанием языка подсветки.

Далее нужно подключить библиотеку highlight.js и её стили. Добавьте в functions.php функцию подключения:

function wpcat_enqueue_highlightjs() {
    wp_enqueue_style('highlightjs-style', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css', array(), '11.7.0');
    wp_enqueue_script('highlightjs-script', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js', array(), '11.7.0', true);
    wp_add_inline_script('highlightjs-script', 'hljs.highlightAll();');
}
add_action('wp_enqueue_scripts', 'wpcat_enqueue_highlightjs');

Пояснение к коду

• Функция wpcat_code_shortcode преобразует переданный текст в безопасный HTML с подсветкой.
• Параметр lang задает язык для подсветки (php, javascript, html, css и др.).
• Подключение highlight.js происходит через CDN, что упрощает установку.
• Функция hljs.highlightAll(); запускает подсветку на всех блоках кода.

Использование шорткода в постах

Пример вставки PHP-кода в пост с подсветкой:

[wpcat_code lang="php"]
function hello_world() {
    echo 'Привет, WordPress!';
}
hello_world();
[/wpcat_code]

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

Дополнительные настройки и расширения

Автоматическое определение языка

Если не указывать параметр lang, highlight.js попытается определить язык автоматически, но лучше всегда указывать его для точной подсветки.

Кастомизация стилей

Вы можете подключить любой из доступных стилей highlight.js, заменив URL в wp_enqueue_style на нужный из CDNJS.

Безопасность

Обратите внимание, что код безопасно экранируется функцией htmlspecialchars, что исключает выполнение скриптов и XSS-атаки при выводе.

Альтернатива — использование плагина Clearfy Pro для управления производительностью

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