Применяем js/css только на тех страницах где присутствует шорткод WordPress

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

В ядре WordPress есть функция

has_shortcode();

которая может проверить содержится ли указанный шорткод в переданном тексте.

Внутри эта магия магия работает по средствам регулярок, а как иначе.

План действий таков:

  1. создать плагин использующий шорт;
  2. зарегистрировать таблицу стилей, но не выводить её;
  3. проверять каждую страницу на предмет содержания в ее контенте нашего шорткода и выводить наш css , если содержится.

Класс плагина я сопроводил комментариями дабы было понятней

<?php
/*
Plugin Name: My good shortcode
Plugin URI: https://alkoweb.ru/primenyaem-js-css-tolko-na-teh-stranitsah-gde-prisutstvuet-shortkod-wordpress
Author: Petrozavodsky
Author URI: https://alkoweb.ru
Version: 1.0.0
*/

class My_Good_shortcode
{

    /*
    Конструкор классса
    */
    function __construct()
    {

        /* Подключаем домен перевода*/
        add_action('plugins_loaded', array($this, 'load_textdomain'));

        /* Регистрируем шерткод*/
	add_shortcode('my_good_shortcode', array($this, 'add_shortcode'));
        /* Добавляем вызом метода add_js_css событию wp т.к. к этому момент переменная $post точно существует  */
        add_action('wp' , array( &$this , 'add_js_css') );
    }

    function add_js_css()
    {
        /* Получаем глобальную переменную $post */
        global $post;

        /* Регистрируем таблицу стилей */
        wp_register_style('my_good_shortcode_css', plugin_dir_url(__FILE__) . 'public/css/my_good_shortcode.css', array(), '1.0.0');
		
        /* Проверяем нет присутствует ли в записи шорткод, если да то выводит css */
        if ( has_shortcode($post->post_content, 'my_good_shortcode') ) {
            wp_enqueue_style('my_good_shortcode_css');
        }
    }
	
   /* Метод выводящий шорткод */
   function  add_shortcode($res)
    {
        $res = '';
        $res .= '<div class="block__shortcode">';
        $res .= __('Hello world','my_good_shortcode') ;
        $res .= '</div>';
        return apply_filters('my_good_shortcode', $res);
    }

    /* Загружаем текстовый домен */
    function load_textdomain()
    {
        $mo_file_path = dirname(__FILE__) . '/languages/' . get_locale() . '.mo';
        load_textdomain('my_good_shortcode', $mo_file_path);
    }
}

$my_good_shortcode = new My_Good_shortcode(); 

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

Использовать ли описанное в своих проектах выше дело каждого, но я слышал где то что одним их критериев оценки качества кода в репозитории wordpress.org ну то есть Ривьеры смотрят не подключенный ли ресурсы на страницах которые они не используются.

Источник: https://alkoweb.ru/primenyaem-js-css-tolko-na-teh-stranitsah-gde-prisutstvuet-shortkod-wordpress/

Добавить комментарий

%d такие блоггеры, как: