Как правильно включить эффекты jquery-ui на WordPress

Я пытался включить эффекты jquery ui (точнее, эффект встряхивания) в мою тему WordPress. До сих пор я был в состоянии включить только сценарий jQuery, но я действительно не знаю, где разместить сценарии пользовательского интерфейса и как их ставить в очередь.

Это код, который у меня есть. Это явно не работает:

    <?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("#manita-imagen").mouseover(function(){
            //$j(this).animate({ opacity: "hide" })
            // alert('asd');
            $j(this).effect("shake", { times:3 }, 300);
        });
    });

 </script>

Спасибо за вашу помощь!

Хотя WordPress включает в себя библиотеки пользовательского интерфейса jQuery, он не включает библиотеку пользовательского интерфейса / эффектов. Эта библиотека отдельная и автономная. Вам нужно будет включить копию файла effect.core.js и поставить ее в очередь отдельно.

Обратите внимание, что вы должны назвать его jquery-effect-core при постановке его в очередь для согласованности именования.

Вы можете включить это так:

wp_enqueue_script("jquery-effects-core",'http://example.com/whatever/effects.core.js', array('jquery'), '1.8.8');

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

Список слагов для этих файлов можно найти в wp-includes / script-loader.php, но слаг ядра - это jquery-effect-core.

wp_enqueue_script("jquery-effects-core");

@dabito,

Вы неправильно загружаете свои сценарии ... Не вызывайте wp_enqueue_script()внутри файла шаблона вашей темы (похоже, что это так header.php). Вам нужно вызывать эту функцию из отдельного хука.

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

function my_add_frontend_scripts() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'my_add_frontend_scripts');

Если оба скрипта зарегистрированы правильно, это должно нормально их загрузить (добавив соответствующие <script />теги в заголовок. Тогда ваш другой код JavaScript должен работать.

Если вы хотите добавить сценарии к админам стороне вещей, добавить свое действие на admin_enqueue_scriptsвместо.

Вы также можете поставить в очередь весь пользовательский интерфейс jQuery непосредственно из Google. Вот как я это делаю:

wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6');

А поскольку jQuery указан в качестве зависимости для jQuery UI, вам не нужно ставить его в очередь вручную. WordPress сделает это автоматически для вас.

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

Просто немного советов. Когда вы ставите в очередь свой скрипт, он ставит в очередь весь сайт, включая панель администратора. Если вам не нужен скрипт в панели администратора, вы можете включить его только для сайта во внешнем интерфейсе.

function my_add_frontend_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
}

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');

Все ответы здесь, пока они работают, технически неверны.

Правильный способ включить jquery-ui и другие библиотеки - включить их как зависимостей вашего собственного скрипта.

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

Итак, если вы хотите использовать jquery и jquery-ui, создайте свой собственный файл сценария .js и поставьте его в очередь следующим образом, со списком зависимостей - не нужно отдельной команды enqueue для каждой используемой вами библиотеки:

wp_enqueue_script('your-script-handle', 
 plugins_url('your-script-file.js', __FILE__), 
 array('jquery', 'jquery-effects-core', 'jquery-ui-core')
);

Вы можете найти список всех доступных сценариев для добавления в качестве зависимостей здесь: https://developer.wordpress.org/reference/functions/wp_enqueue_script/