WordPress에 jquery-ui 효과를 올바르게 포함시키는 방법

내 워드 프레스 테마에 jquery ui 효과 (특히 흔들림 효과)를 포함하려고했습니다. 지금까지 jQuery 스크립트 만 포함 할 수 있었지만 실제로는 ui 스크립트를 배치 할 위치와이를 큐에 넣는 방법에 대한 실마리는 없습니다.

이것은 내가 가진 코드입니다. 분명히 작동하지 않습니다.

    <?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 UI 라이브러리가 포함되어 있지만 UI / Effects 라이브러리는 포함되어 있지 않습니다. 해당 라이브러리는 분리되어 있으며 독립형입니다. effects.core.js 파일의 사본을 포함하고 별도로 대기열에 포함시켜야합니다.

일관성을 유지하려면 대기열에 넣을 때 이름을 jquery-effects-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-effects-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 UI를 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 라이브러리 (전체 목록 here )에 대한 기본로드가없는 것 같으므로 스크립트를 대기열에 추가하기 전에 등록 해야합니다.

약간의 팁. 스크립트를 대기열에 넣을 때 관리자 패널을 포함한 전체 사이트를 대기열에 넣습니다. 관리자 패널에서 스크립트를 원하지 않으면 프런트 엔드 사이트에 스크립트 만 포함 할 수 있습니다.

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 스크립트 파일을 작성하고 종속성을 나열하여 다음과 같이 큐에 넣으십시오. 사용하는 각 라이브러리에 대해 별도의 큐에 명령이 필요하지 않습니다.

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/에서 종속성으로 추가 할 수있는 모든 사용 가능한 스크립트 목록을 찾을 수 있습니다.