wordpress enqueue 스크립트 문제("$가 정의되지 않음")
이것이 여러분에게 꽤 쉬운 수정이기를 바랍니다:)
워드프레스 테마를 만들고 있는데 이전에는 html 헤드태그에서 jquery 스크립트를 제대로 호출하지 못했습니다.이 때문에 Opera에서 부하 지연이 발생했는데, 두 가지 방법으로 동시에 jquery를 로드하려고 했기 때문인 것 같습니다.어쨌든 지금은 함수에서 제대로 하고 있습니다.php 파일이지만 jquery에 의존하는 추가 스크립트가 잘 재생되지 않습니다.
다음은 jquery를 큐잉하는 방법과 스크립트(슬라이딩 패널용)의 일부입니다.
add_action('init', 'my_init');
function my_init() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2', true);
wp_enqueue_script('jquery');
wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js');
echo "alert( 'Hello Admin!' );";
}
}
슬라이딩 패널 대본은 다음과 같습니다.
$(document).ready(function(){
$(".btn-slide").click(function(){
var $marginLefty = $("#slide-panel");
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
});
});
});
헤드 태그에서 jquery를 호출하고 스크립트 태그에 이 스크립트를 직접 넣었을 때는 이 모든 것이 도움이 되었습니다만, fire bug에서는 "$는 정의되어 있지 않습니다"라고 표시되어 있습니다.$를 jquery로 변경하면 "jquery는 정의되어 있지 않습니다"라고 하는 결과가 됩니다.누구라도 도와주시겠어요?
사용하다jQuery대문자로Q대신$할 수 있을 것 같아요워드프레스에는 보통 마지막에 호출하는 스크립트가 포함되어 있습니다.$정의되지 않았습니다.결과는 다음과 같습니다.
jQuery(function($) { //jQuery passed in as first param, so you can use $ inside
$(".btn-slide").click(function(){
var $marginLefty = $("#slide-panel");
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0
});
});
});
wp_enqueue ->에서 이 작업을 수행하여 스크립트가 jQuery에 의존하고 있음을 나타냅니다. wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery'));
주의:array('jquery')이는 스크립트가 jQuery에 의존하고 있음을 나타냅니다.
이 문제를 해결할 수 있는 유일한 방법은 포함된 스크립트에서 모든 "$"를 "jQuery"로 바꾸는 것입니다.
이 경우 새로운 스크립트는 다음과 같습니다.
jQuery(document).ready(function(){
jQuery(".btn-slide").click(function(){
var jQuerymarginLefty = jQuery("#slide-panel");
jQuerymarginLefty.animate({
marginLeft: parseInt(jQuerymarginLefty.css('marginLeft'),10) == 0 ?
jQuerymarginLefty.outerWidth() :
0
});
});
});
이러한 좋은 힌트 후에도 문제가 해결되지 않는 사람이 있다면 http://codex.wordpress.org/Function_Reference/wp_enqueue_script에서 자세한 내용을 읽어보시기 바랍니다.
이 링크에서는 가능한 모든 상황에 대한 자세한 내용을 볼 수 있습니다.
그리고 꼭 전화하고wp_enqueue_script사용 중인 모든 JS 스크립트에 대해 설명합니다.직접 링크하지 마십시오.괜찮을 거예요;)
기능을 이른바 "domReady" 함수로 래핑합니다.
<script>
(function($) {
//insert function here
})(jQuery);
</script>
이미 답변이 끝난 것으로 알고 있습니다만, 여기에 추가하고 싶다고 생각하고 있습니다.
파일일 경우 스크립트의 의존관계로 jQuery가 포함되어 있을 가능성이 높습니다. wp_enqueue_script('script_name', get_template_directory_uri() . '/path_and_script_name.js', array('jquery'));
jQuery 객체가 있지만 $가 없는 경우 다음을 시도해 볼 수 있습니다.
<script id="script-below-jquery-src">
(function($) {
// Anything here can only immediately reference the DOM above it
$(function(){
//on DOM (document) ready
});
})(jQuery);
</script>
이 스크립트는 jQuery 스크립트 태그 아래에 속합니다.
되어 있지 않은 는, 「jQuery」를 확인해 .<head>jQuery 스크립트가 없는 경우 jQuery 스크립트가 제대로 등록/엔큐되지 않은 것입니다.제 경우에는 모든 태그를 제거하는 필터를 추가했습니다.디버깅하려면...
add_filter('script_loader_tag', function($tag, $handle){
/*maybe echo/print here*/
return $tag . "<!-- Script for handle '$handle' -->";
}, 10, 2);
하지만 솔직히 네 머리글만 보는 것보다 더 유용하진 않을 거야
하시기 바랍니다.add_action('wp_enqueue_scripts', /*function name*/);을 사용하다
를 jQuery 위에 붙이지 .<?php wp_head(); ?>를 참조해 주세요.유지보수가 용이하지 않습니다.특히 jQuery에서는 플러그인 등에서 필요한 경우 스크립트가 두 번 포함될 수 있습니다.
먼저 jQuery를 위의 배열 jQuery 트릭으로 로드해야 합니다.
wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery'));
그러나 다음과 같이 충돌 없는 커스텀 변수를 정의하는 것이 가장 좋습니다.
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(".btn-slide").click(function(){
var $jmarginLefty = $j("#slide-panel");
$jmarginLefty.animate({
marginLeft: parseInt($jmarginLefty.css('marginLeft'),10) == 0 ? $jmarginLefty.outerWidth() : 0
});
});
});
주의: 다른 용도는 모두 교환해야 합니다.$ ★★★★★★★★★★★★★★★★★」jQuery$j이 에 붙어야 $j노디피니션(No-Definition)(노디피니션(No-Definition)
var $=jQuery;
jQuery(function(){alert("Document Ready")})를 사용할 수 있습니다.
언급URL : https://stackoverflow.com/questions/3818089/wordpress-enqueue-script-issues-is-not-defined
'sourcecode' 카테고리의 다른 글
| WordPress에서 CloudConvert API 사용 (0) | 2023.02.07 |
|---|---|
| 라인 항목당 WooCommerce 쿠폰 코드 (0) | 2023.02.07 |
| Wordpress Docker가 업로드 제한을 늘리지 않음 (0) | 2023.02.07 |
| 업로드된 이미지와 동일한 크기의 미리 보기를 생성하도록 Wordpress를 강제 (0) | 2023.02.07 |
| Woocommerce Ajax가 프로그래밍 방식으로 카트에 추가 (0) | 2023.02.07 |