2013-08-11 3 views
0

저는 만들고있는 wp 플러그인에 jquery를 구현하려고합니다. 내 테마의 functions.php에서 jQuery와 Wordpress - 스크립트가 작동하지 않습니다.

나는 다음과 같은 코드가 있습니다 I 출력 기능과 ADD_ACTION ('wp_head', 'functions_name')를 통해 다음과 같은 플러그인 파일 중 하나에서 다음

function load_jquery() { 

    // only use this method is we're not in wp-admin 
    if (!is_admin()) { 

     // deregister the original version of jQuery 
     wp_deregister_script('jquery'); 
     wp_deregister_script('jquery-ui-slider'); 
     wp_deregister_style('jquery-ui-style'); 


     // discover the correct protocol to use 
     $protocol='http:'; 
     if($_SERVER['HTTPS']=='on') { 
      $protocol='https:'; 
     } 

     // register the Google CDN version 
     wp_register_script('jquery', $protocol.'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2'); 
     wp_register_script('jquery-ui-slider', $protocol.'//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', false, '1.10.3'); 
     wp_register_style('jquery-ui-style', $protocol.'//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css', false); 

     // add it back into the queue 
     wp_enqueue_script('jquery'); 
     wp_enqueue_script('jquery-ui-slider'); 
     wp_enqueue_style('jquery-ui-style'); 
    } 
} 

add_action('wp_enqueue_scripts', 'load_jquery'); 

을 ;

echo ' 
<script type="text/javascript"> 

    jQuery(function($) { 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [ 75, 300 ], 
     slide: function(event, ui) { 
     $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
     } 
    }); 
    $("#amount").val("$" + $("#slider-range").slider("values", 0) + 
     " - $" + $("#slider-range").slider("values", 1)); 
    }); 
</script>'; 

실제 스크립트 전에로드 된 jquery를 볼 수는 있더라도 아무 것도 작동하지 않습니다.

아이디어가 있으십니까? 내가 wp_enqueue_script 부분을 건너 뛰고, 모든 것을 지나친다면, 그것은 작동합니다.

+0

무엇이 문제인가? 스크립트가 전혀로드되지 않았거나로드되었지만 작동하지 않습니다. –

+0

원본 코드에서 볼 수 있도록 스크립트가로드되었지만 작동하지 않습니다. – Fred

+0

Genesis 프레임 워크 btw를 실행하고 있습니다. – Fred

답변

2

jQuery(document).ready(function($)으로 스크립트를 래핑해야합니다. jquery 객체가로드 될 수 있지만 jquery-ui 스크립트가 필요하기 때문입니다.

<script type="text/javascript"> 
jQuery(document).ready(function($){ 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [ 75, 300 ], 
     slide: function(event, ui) { 
     $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
     } 
    }); 
    $("#amount").val("$" + $("#slider-range").slider("values", 0) + 
     " - $" + $("#slider-range").slider("values", 1)); 
}); 
</script>'; 
+0

나는 그걸 시도했지만 여전히 결과가 없다. Genesis 프레임 워크와 관련이 있다고 확신합니다. – Fred

+0

브라우저 콘솔에 오류가 있습니까? – Strategio

0

큰 문제는 당신이 'jQuery를'와 jQuery를에 사용하는 모든 '$' 표지판을 교체 할 필요가 작동하도록 스크립트의 순서로 워드 프레스 충돌 상황이다. 좋은 워드 프레스 테마 개발자라면 누구나이 코드를 알고 있으므로 Wordpress와의 충돌이 일어나기 때문에이를 적용해야합니다.

예 : 나는 내가 같은 문제를 가지고 그렇게했고, 그것이 해결되었다 때문에 권리 해요 희망

jQuery(document).ready(function($){ 
     jQuery("#slider-range").slider({ 
      etc etc 
     )}; 
     )}; 

. :)

관련 문제