Правильная инициализация скриптов в Wordpress или зачем нужен wp_add_inline_script()

правильная инициализация скриптов в wordpress

Йоу-йоу! С некоторого времени я занимаюсь разработкой сайта для общественной организации защиты животных. Недавно я отослал свой плагин на валидацию и мне прислали ошибку. Суть заключалась в том, что для вставки инлайнового скрипта я использовал примерно такой код: 

add_action('wp_footer', 'my_print_script');
function my_print_script(){
    ?>
    <script>
        /* Код скрипта */
    </script>
    <?php
}

однако этот код поддержка wordpress’а не одобрила и сказала, чтобы я использовалwp_add_inline_script().

Как работает wp_add_inline_script()

Функция печатает скрипт после какого-то определённого другого скрипта, который был подключен через wp_enqueue_script(). Когда вы используете wp_enqueue_script() то первым параметром передаёте уникальный идентификатор (handler). В wp_add_inline_script() вы первым параметром вводите handler того скрипта после (или перед) которого вы хотите, чтобы был напечатан ваш инлайновый скрипт. Например в статье про построение fancybox-галереи я печатал свой скрипт прямо в html после вывода блоков. Ценой такого исполнения было то, что я оборачивал весь код в window.onload. Код выглядел вот так: 

wp_enqueue_script( 'application', get_template_directory_uri() . '/js/app.js', array('gjQuery', 'fancybox'), '0.1.0', true );
add_action('x_gallery', 'x_gallery');
function x_gallery(){

$argm = [
        'post_type'=>'fgb_fs_gallery',
        'orderby'=>'date',
        'order'=>'ASC'
    ];
    $query = new WP_query($argm);
    // Сюда в цикле собираем данные о картинках прикреплённых к записям
    $arr_x = [];
    $home_url = get_home_url();

    while ( $query->have_posts() ) : $query->the_post();

        $postID = get_the_ID();

        // Для фансибокса
        $needPostMetaValue = get_post_meta($postID, '_x_id', true);
        // Кладём в ассоциативнй массив данные о картинках
        $arr_x[$needPostMetaValue] = get_post_images();

    ?>
        <!-- Вёрстка блока который мы выведем -->
        <!-- data-x-fancy селектор для fancybox -->
        <div>
            <a data-x-fancy="<?php echo $needPostMetaValue; ?>" data-src="<?php echo get_the_post_thumbnail_url($postID, 'full');?>" href="javascript:;">
                <?php echo get_the_post_thumbnail($postID, 'x_face', ['class'=>'w-100']);?>
            </a>
        </div>

    <?php
    endwhile;
    // Сюда получаем будем собирать ссылки на картинки
    $images = [];

    foreach ($arr_x as $gallery=>$arr){
        foreach ($arr as $item){
            $el = wp_get_attachment_image_src( $item['id'], 'full');
            $images[$gallery][] = $el[0];
        }
    }

       ?>
       <!-- Печатаем скрипт с вызовам js части -->
    <script>
        window.addEventListener('load', function () {



        <?php foreach ($images as $key=>$value): ?>

        var <?php echo $key; ?> = new XSLICK({
            galleryId: '<?php echo $key; ?>',
            images: [
                <?php foreach ($value as $item): ?>
                    <?php echo '"' . $item . '",' . PHP_EOL ?>
                <?php endforeach; ?>
            ]
        }, $);

        <?php endforeach; ?>
        });
    </script>

    <?php

}

Сейчас бы код был примерно таким 

wp_enqueue_script( 'application', get_template_directory_uri() . '/js/app.js', array('gjQuery', 'fancybox'), '0.1.0', true );
add_action('x_gallery', 'x_gallery');
function x_gallery(){

$argm = [
        'post_type'=>'fgb_fs_gallery',
        'orderby'=>'date',
        'order'=>'ASC'
    ];
    $query = new WP_query($argm);
    // Сюда в цикле собираем данные о картинках прикреплённых к записям
    $arr_x = [];
    $home_url = get_home_url();

    while ( $query->have_posts() ) : $query->the_post();

        $postID = get_the_ID();

        // Для фансибокса
        $needPostMetaValue = get_post_meta($postID, '_x_id', true);
        // Кладём в ассоциативнй массив данные о картинках
        $arr_x[$needPostMetaValue] = get_post_images();

    ?>
        <!-- Вёрстка блока который мы выведем -->
        <!-- data-x-fancy селектор для fancybox -->
        <div>
            <a data-x-fancy="<?php echo $needPostMetaValue; ?>" data-src="<?php echo get_the_post_thumbnail_url($postID, 'full');?>" href="javascript:;">
                <?php echo get_the_post_thumbnail($postID, 'x_face', ['class'=>'w-100']);?>
            </a>
        </div>

    <?php
    endwhile;
    // Сюда получаем будем собирать ссылки на картинки
    $images = [];

    foreach ($arr_x as $gallery=>$arr){
        foreach ($arr as $item){
            $el = wp_get_attachment_image_src( $item['id'], 'full');
            $images[$gallery][] = $el[0];
        }
    }

    ob_start(); // Использую для сохранения строки
       ?>
        <?php foreach ($images as $key=>$value): ?>

        var <?php echo $key; ?> = new XSLICK({
            galleryId: '<?php echo $key; ?>',
            images: [
                <?php foreach ($value as $item): ?>
                    <?php echo '"' . $item . '",' . PHP_EOL ?>
                <?php endforeach; ?>
            ]
        }, $);
        <?php endforeach; ?>
    <?php
    $output = ob_get_contents();
    ob_end_clean();
    wp_add_inline_script('application', $output, 'after' );
}

Самое главное, что я точно знаю, что мой скрипт будет загружен после того в котором лежит код, который я инициализирую. Тоже самое вы можете сделать например с fancybox, slick-slider, datatable, stickjaw и любые скрипты, которые например, зависят от jQuery (иногда это большая боль).

Порядок исполнения wp_add_inline_script()

wp_add_inline_script() может подключатся не только после скрипта, но и перед. Для этого нужно прописть парамерт $position. Вообще у wp_add_inline_script() имеет 3 параметра:

  • $handle (Название (ID) скрипта к которому будут добавлен дополнительный блок скрипта.)
  • $data (Строка содержащая javascript, который нужно добавить. Не нужно указывать открывающий и закрывающий тег script — он добавляется автоматически.)
  • $position (Куда добавить код: до (before) или после (after) указанного в $handle скрипта.)

тоесть у $position есть два варианта before и after (по умолчанию). Если before — скрипт подключиться до, если after — после. Это будет полезно если вам, например, нужно объявить глобальные переменные или по каким-то причинам прервать скрипт, которы должен выполняться ниже или создать промис или создать элемент.

P.S.

В дополнение к этой статье прочитайте о том как правильно подключать скрипты в wordpress. Это вам поможет избегать ошибок и загрузки лишних скриптов на странице. Призываю вас использовать инструменты для разработчика на моём сайте, напримерЭкранировать html.