Как в консоли вордпресса показать, что какой-то из шорткодов добавлен с ошибкой

Автор:
Руслан Шкарбан — автор статьи Руслан Шкарбан
#Советы

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

Зачем вашему сайту нужно отслеживать ошибки в шорткодах?

Шорткоды являются гибкой и полезной штукой, но только в том случае, если они используются правильно: указаны без ошибок и принимают валидные параметры. Как показывает практика, такое случается не всегда. В основном, шорткодами пользуются менеджеры и специалисты по контенту. Из-за спешки и невнимательности они могут допустить ошибку в названии шорткода или передать неверный параметр. Как итог, шорткод не отрендерится, и мы получим либо сам шорткод в формате текста, либо пустоту.

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

Схожий сценарий недавно случился на одном из наших проектов (пока писали статью — еще на одном) и мы задумались над тем, как можно отслеживать правильность всех шорткодов на сайте с возможностью вывода на дашборд (вкладка «консоль») административной панели WP. Готовых решений в виде плагинов не нашли, поэтому написали собственное решение.О нем и пойдет речь.

Шаг 1: Определили, какой функционал мы хотим получить

Мы посчитали, что оптимальным решением для отлова ошибок в шорткодах будет выводить их на вкладку «Консоль» в административной панели WP. Также рассматривали вариант отправки сообщения на электронную почту, но от этой идеи отказались. На данном этапе решили только выводить на дашборд, хотя отправка сообщений на электронную почту тоже может быть полезным функционалом, все зависит от нужд каждого проекта.

Место, куда хотим выводить ошибки

Шаг 2: Регистрируем виджет в консоли и пишем обработку ошибок

Для вывода информации на дашборд у WordPress есть встроенный хук - wp_dashboard_setup. Подробно описывать его не будем, вся информация доступна в документации.

Воспользовавшись хуком, зарегистрируем виджет на дашборде:

    
        function register_dynamic_price_error_widget() {
            wp_add_dashboard_widget(
                'shortcode_error_widget', //уникальное название виджета
                'Ошибки в шорткодах', //название, которое будет отображаться на дашборде
                'show_error', //название функции, которая будет вызываться при ошибке (рассмотрим ниже)
                null, // не используем widget_options
                null, // не используем callback args
                'column3', // определяем местоположение виджета, 3 колонка в нашем случае
                'high' // приоритет отображения виджета
            );
        }
        add_action('wp_dashboard_setup', 'register_dynamic_price_error_widget');

Напишем функцию по обработке ошибок:

    
        // Функция для вывода ошибки на дашборде
        function show_error($post, $callback_args) {
            $logfile = __DIR__ . '/inc/shortcodes_log.txt'; //файл для хранения ошибок, можно отправлять ошибки в базу данных, но создание отдельного файла — более удобное и простое решение, на наш взгляд
            if ( file_exists( $logfile ) ) { //проверяем, существует ли файл
                $errors = file( $logfile ); // считываем содержимое файла в массив, каждая строка = следующий элемент массива
                $errors = array_reverse( $errors ); // перемешиваем массив, последние ошибки должны выводиться первыми, т.к. они свежие
                if ( $errors ) { // проверяем, есть ли ошибки в массиве, и формируем уведомление
                    echo '<ol>';
                    foreach ( $errors as $error ) {
                        echo '<li style="padding:2px 4px 6px;border-bottom:1px solid #ececec;">';
                        echo htmlspecialchars($error); // использование htmlspecialchars для корректного отображения кода на HTML-странице
                        echo '</li>';
                    }
                    echo '</ol>';
                } else { //если ошибок нет, то так и пишем
                    echo '<p>Ошибок нет.</p>';
                }
            } else { // если файл отсутствует или его не удается найти
                echo '<p>Не удалось прочитать файл ошибок. Возможно, его нет.</p>';
            }
        }

Таким образом, мы написали обработку ошибок и зарегистрировали виджет в консоли. Если вы добавили наш код, то у вас появится:

Место, куда хотим выводить ошибки

Шаг 3: Добавляем проверку параметров в шорткоде

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

    
		//Функция проверки для типовых шорткодов, которые не принмимают параметры, а только выводят информацию, например из CF
		function checking_value_shortcode($name_shortcode, $value){
		if (!isset($value)) {
			global $post;
			$message = 'В шорткод ' . $name_shortcode . ' неправильное значение, ошибка на странице ' . get_permalink($post->ID);
				$file = __DIR__ . '/inc/shortcodes_log.txt';
				$open = fopen( $file, "a" ); 
				$write = fputs( $open, $message."\n"); 
				fclose( $open );
			}
		}    

Рассмотрим сам шорткод:

    
        /** Шорт-код на отображение стоимости устного перевода в СПБ **/
        function echo_price_oral_translation_spb(){
            $price_oral_translation_spb = carbon_get_theme_option('price_oral_translation_spb'); //получаем значение из поля Carbon Fields
            checking_value_shortcode($price_oral_translation_spb); 
			//вызываем нашу функцию с проверкой, в примере мы используем один из самых простых вариантов проверки, в вашем коде вы можете создать любые условия
            return $price_oral_translation_spb; // возвращаем значение
        } 
        
        add_shortcode('price_oral_translation_spb','echo_price_oral_translation_spb');

В случае ошибки мы будем видеть предупреждение на дашборде.

Проверяем функционал

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

Место, куда хотим выводить ошибки

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

Мы рассмотрели примитивный шорткод и простейшую проверку, но проверять на ошибки и выводить на дашборд можно много чего полезного:

  1. Мы показываем, на какой странице ошибка, но по названию шорткода можно определить, где он получает данные, и показывать больше данных пользователю, где искать ошибку уже в админке.
  2. Если шорткод принимает параметры, можно проверять, какие параметры передаются, и проверять их. Например, у нас есть шорткод для вывода изображений со всеми возможными srcset для браузера (очень экономит время, кстати), в который нужно передавать айди изображения из медиабиблиотеки. Можно случайно ошибиться с айди, тогда картинка не выведется. Или можно заняться чисткой библиотеки и удалить изображение, на которое ссылаются в шорткоде. Поэтому для этого шорткода мы проверяем, получаем ли мы по айди какое-то изображение. Если пусто, логируем и показываем ошибку.

Проверок может быть масса. Уверены, вы придумаете что-то полезное и для своего проекта.