Добавление встроенного скрипта через wp enqueue script с зависимостями

4 авг. 2011 г., 00:11:23
Просмотры: 37.7K
Голосов: 40

Есть ли способ использовать wp_enqueue_script() для встроенных скриптов?

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

Также, это встроенный скрипт, потому что я передаю PHP переменные в JavaScript (например, путь к теме и т.д.)

Заранее спасибо.

0
Все ответы на вопрос 6
2
36

У вас есть функция wp_localize_script(), но она предназначена только для передачи данных.

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

function print_my_inline_script() {
  if ( wp_script_is( 'some-script-handle', 'done' ) ) {
?>
<script type="text/javascript">
// здесь будет JavaScript-код
</script>
<?php
  }
}
add_action( 'wp_footer', 'print_my_inline_script' );

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

4 авг. 2011 г. 01:18:38
Комментарии

Конечно, это работает только в том случае, если скрипт, от которого вы зависите, уже был выведен? Если скрипт, от которого вы зависите, также зарегистрирован в wp_footer и выполняется после встроенного кода скрипта, то встроенный скрипт просто не будет записан на клиентской стороне и, следовательно, не будет выполнен?

Sam Peacey Sam Peacey
31 мая 2014 г. 07:19:32

Начиная с WordPress 4.5 вы можете использовать wp_add_inline_script() wp_add_inline_script с WordPress jQuery

Dhinju Divakaran Dhinju Divakaran
25 июн. 2016 г. 09:41:03
0

Просто не делайте его встроенным скриптом и не передавайте динамические параметры в виде переменных. Отто написал отличное руководство о том, как эффективно это реализовать.

WordPress 3.3 также сделает эту возможность более мощной: https://core.trac.wordpress.org/ticket/11520

4 авг. 2011 г. 02:02:08
0

Это решение похоже на ответ @scribu, но следует форме wp_enquque_script() и поместит скрипт в заголовок, если его зависимости включены в заголовок.

/**
 * Подключает встроенный JavaScript. @see wp_enqueue_script().
 * 
 * ИЗВЕСТНАЯ ОШИБКА: Встроенные скрипты не могут быть подключены до 
 *  любых встроенных скриптов, от которых они зависят (если только они не
 *  размещены в заголовке, а зависимые — в подвале).
 * 
 * @param string      $handle    Уникальное имя скрипта
 * @param string      $src       Код JavaScript
 * @param array       $deps      (опционально) Массив имен скриптов, от которых зависит этот скрипт
 * @param bool        $in_footer (опционально) Подключать скрипт перед </head> или перед </body>
 * 
 * @return null
 */
function enqueue_inline_script( $handle, $js, $deps = array(), $in_footer = false ){
    // Функция обратного вызова для вывода встроенного скрипта.
    $cb = function()use( $handle, $js ){
        // Убедиться, что скрипт включен только один раз.
        if( wp_script_is( $handle, 'done' ) )
            return;
        // Вывести скрипт и пометить его как включенный.
        echo "<script type=\"text/javascript\" id=\"js-$handle\">\n$js\n</script>\n";
        global $wp_scripts;
        $wp_scripts->done[] = $handle;
    };
    // (`wp_print_scripts` вызывается в заголовке и подвале, но $cb имеет защиту от повторного включения.)
    $hook = $in_footer ? 'wp_print_footer_scripts' : 'wp_print_scripts';

    // Если нет зависимостей, просто подключить к заголовку или подвалу.
    if( empty($deps)){
        add_action( $hook, $cb );
        return;
    }

    // Отложить вывод скрипта, пока все зависимости не будут включены.
    $cb_maybe = function()use( $deps, $in_footer, $cb, &$cb_maybe ){
        foreach( $deps as &$dep ){
            if( !wp_script_is( $dep, 'done' ) ){
                // Зависимости не включены в заголовке, попробовать снова в подвале.
                if( ! $in_footer ){
                    add_action( 'wp_print_footer_scripts', $cb_maybe, 11 );
                }
                else{
                    // Зависимости не были включены ни в `wp_head`, ни в `wp_footer`.
                }
                return;
            }
        }
        call_user_func( $cb );
    };
    add_action( $hook, $cb_maybe, 0 );
}

// Использование
enqueue_inline_script('test','alert(\'тест подключения встроенного скрипта\');',array( 'jquery'));

Примечание: здесь используются анонимные функции, но для версий PHP до 5.3 это можно легко преобразовать в класс.

28 мар. 2014 г. 16:02:40
0

Начиная с WordPress 4.5 вы можете использовать функцию wp_add_inline_script():

add_action( 'wp_enqueue_scripts', 'cyb_enqueue_scripts' );
function cyb_enqueue_scripts() {
   wp_enqueue_script( 'myscript', 'url/to/myscript.js', array(), '1.0' );
   wp_add_inline_script( 'myscript', 'Ваш встроенный JavaScript-код здесь' );
}
15 мая 2016 г. 18:18:08
0

Лучший способ, который я нашел — это использование wp_localize_script(), как предложил @scribu.

Обычно я использовал встроенный JavaScript, потому что мне нужно было передать PHP-переменные в скрипт. Эту проблему можно решить с помощью wp_localize_script(). Приведу пример:

У вас есть массив $aFoo с некоторыми настройками, и его нужно передать в скрипт.

$aFoo = array( 'option1' => $option1Value, 'option2' => $option2Value ); 

Использование встроенного скрипта:

<script> 
    var oFoo = {};
    oFoo.option1 = <?php echo $aFoo['option1'] ?>;  
    oFoo.option2 = <?php echo $aFoo['option2'] ?>;            
    // выполняем действия с oFoo
</script>

Использование wp_localize_script():

wp_register_script( 'script_name', 'pathToScript/script.js', array( 'jquery' )); // если jQuery не нужен, просто удалите последний аргумент
wp_localize_script( 'script_name', 'object_name', $aFoo ); // передаем 'object_name' в script.js
wp_enqueue_script( 'script_name' );    

Тогда файл pathToScript/script.js будет выглядеть так:

var oFoo = {};
oFoo.option1 = object_name.option1;   
oFoo.option2 = object_name.option2;            
// выполняем действия с oFoo (без PHP)

Таким образом, вам больше не понадобятся встроенные скрипты.

18 авг. 2014 г. 17:29:45
1

scribu абсолютно прав. В любом случае, я хочу добавить некоторую информацию:

Мне нужно, чтобы моя функция выводила скрипт только один раз, независимо от того, сколько раз она вызывается. Это функция, связанная с контентом, поэтому я не могу ждать каких-либо хуков. Я использовал информацию от scribu и некоторое изучение ядра WP, чтобы прийти к такому решению:

function print_script_once() {
    if(!wp_script_is('my-handle', 'done')) {
        echo "<script>alert('once!');</script>";
        global $wp_scripts;
        $wp_scripts->done[] = 'my-handle';
    }
}
add_action('get_footer', print_script_once);

Используя этот метод, я могу вывести встроенный скрипт только один раз. В моем случае у меня есть функция, которая создает кнопку "Поделиться" и требует выполнения одного скрипта для всех кнопок. Но только один раз.

29 янв. 2014 г. 14:29:13
Комментарии

Подход с использованием встроенного скрипта echo — это то, как была построена тема Twenty Seventeen, по крайней мере в определённый момент. Я тоже использую этот метод. Работает отлично и позволяет подключаться к разным местам.

vhs vhs
1 июн. 2017 г. 04:05:58