WordPress: enqueue를 사용하여 여러 스크립트 로드
헤더에 jQuery 및 기타 스크립트를 로드하려고 합니다(또는 바닥글이어야 함). jQuery 작업 종류가 있으면 경보 상자를 실행할 수 있습니다.
중요한 건...jquery-2.0.3.min.js
로딩이 되지 않아 enqueue가 제대로 수행되고 있는지 알 수 없습니다.jquery-1.10.2는 로딩되어 있습니다.그리고 다른 스크립트도 로드되지 않습니다.양쪽 스크립트(2.0.3 및 기타 스크립트)의 마지막은 다음과 같습니다.?ver=3.6.1
그리고 둘 다 하나의 기능에 로드하는 것이 좋을지도 모른다고 읽었습니다.
그러니 어떤 도움이라도 주시면 감사하겠습니다!
function load_jquery() {
wp_register_script( 'jquery_script', get_template_directory_uri() . 'js/jquery-2.0.3.min.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery_script' );
}
add_action( 'init', 'load_jquery' ); // end jQuery
function another() {
wp_register_script( 'another_script', get_template_directory_uri() . 'js/another.js', array( 'jquery' ) );
wp_enqueue_script( 'another_script' );
}
add_action( 'init', 'another' );
기본적으로 워드프레스에 jquery가 있기 때문에 등록할 필요가 없습니다.그냥 큐잉하세요.
대부분의 jquery ui libs 및 핵심 jquery 파일은 이미 워드프레스에 등록되어 있으므로 오른쪽 핸들로 enqueue 스크립트를 참조하기만 하면 됩니다.
wp_enqueue_script
스크립트 큐잉에 사용됩니다.wp_enqueue_style
스타일을 큐잉하는 데 사용됩니다.
커스텀 js를 호출하려면 스크립트 또는 스타일을 먼저 등록한 후 사용하는 것이 좋습니다.
wp_register_script
// 스크립트를 등록하려면
wp_register_style
// 스타일을 등록하려면
그런 다음 큐잉을 사용하여wp_enqueue_script
,wp_enqueue_style
여기 제 사이트에서 전 과정을 위한 샘플 코드 조각이 있습니다.
function pr_scripts_styles() {
wp_enqueue_script('jquery'); // just enqueue as its already registered
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* REGISTER ALL JS FOR SITE */
wp_register_script('pr_cycle_all',get_stylesheet_directory_uri().'/js/pr-slider.js');
wp_register_script('pr_slider',get_stylesheet_directory_uri().'/js/jquery.cycle.all.min.js');
wp_register_script('pr_validation_engine',get_stylesheet_directory_uri().'/js/jquery.validationEngine-en.js');
wp_register_script('pr_validation_locale',get_stylesheet_directory_uri().'/js/jquery.validationEngine.js');
wp_register_script('stylethemes',get_stylesheet_directory_uri().'/js/stylethemes.js');
wp_register_script('pr-jquery-ui',get_stylesheet_directory_uri().'/js/jquery-ui.js');
wp_register_script('main-js',get_stylesheet_directory_uri().'/js/main.js');
wp_register_script('pr-galleriffic',get_stylesheet_directory_uri().'/js/jquery.galleriffic.js');
wp_register_script('pr-rollover',get_stylesheet_directory_uri().'/js/jquery.opacityrollover.js');
wp_register_script('pr_colorbox',get_stylesheet_directory_uri().'/js/jquery.colorbox.js');
wp_register_script('pr_jcarousel_js',get_stylesheet_directory_uri().'/js/jquery.jcarousel.min.js');
//wp_register_script('google-map-api','https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false');
/* REGISTER ALL CSS FOR SITE */
wp_register_style('pr_woocommerce',get_stylesheet_directory_uri().'/css/_woocommerce.css');
wp_register_style('pr_mobile',get_stylesheet_directory_uri().'/css/mobile.css');
wp_register_style('pr_sec_teal_grey',get_stylesheet_directory_uri().'/css/secondary-teal-grey.css');
wp_register_style('pr_site_options',get_stylesheet_directory_uri().'/css/site-options.css');
wp_register_style('pr_teal_grey',get_stylesheet_directory_uri().'/css/teal-grey.css');
wp_register_style('validation_css',get_stylesheet_directory_uri().'/css/validationEngine.jquery.css');
wp_register_style('galleriffic_css',get_stylesheet_directory_uri().'/css/galleriffic.css');
wp_register_style('pr_colorbox_style',get_stylesheet_directory_uri().'/css/colorbox.css');
wp_register_style('pr_jcarousel_css',get_stylesheet_directory_uri().'/css/jcarouselskin.css');
/* CALL ALL CSS AND SCRIPTS FOR SITE */
wp_enqueue_script('pr-jquery-ui');
wp_enqueue_script('stylethemes');
wp_enqueue_script('pr_cycle_all');
wp_enqueue_script('pr_slider','','','',true);
wp_enqueue_script('pr_validation_engine');
wp_enqueue_script('pr_validation_locale');
wp_enqueue_script('google-map-api');
wp_enqueue_script('main-js');
wp_enqueue_script('pr-galleriffic');
wp_enqueue_script('pr-rollover');
wp_enqueue_script('pr_colorbox');
wp_enqueue_style( 'pr-style', get_stylesheet_uri(), array(), '2013-07-18' );
wp_enqueue_style('pr_site_options');
wp_enqueue_style('pr_woocommerce');
wp_enqueue_style('pr_mobile');
wp_enqueue_style('pr_sec_teal_grey');
wp_enqueue_style('pr_teal_grey');
wp_enqueue_style('validation_css');
wp_enqueue_style('galleriffic_css');
wp_enqueue_style('pr_colorbox_style');
if(is_single()){
wp_enqueue_script('pr_jcarousel_js');
wp_enqueue_style('pr_jcarousel_css');
}
}
add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );
또, 기능을 접속하는 것도 잊지 말아 주세요.wp_enqueue_scripts
스크립트 및 스타일이 올바르게 로드되도록 합니다.add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );
자녀 테마를 사용할 때는 이 방법이 효과적입니다. 스크립트에 다른 이름을 사용해야 합니다.
function my_scripts_method() {
wp_enqueue_script(
'script-name1',
get_stylesheet_directory_uri() . '/some-script.js',
array( 'jquery' )
);
wp_enqueue_script(
'script-name2',
get_stylesheet_directory_uri() . '/another-script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
이렇게 해서 스타일과 스크립트를 추가할 수 있습니다.그러나 사용하기 전에 먼저 이해한 후 누구나 이 방법을 따를 수 있도록 권장합니다.
function theme_files() {
$styles = [
['handle' => 'style', 'src' => '../style.css', 'deps' => false, 'media'=>"all"],
['handle' => 'bootstrap', 'src' => 'bootstrap.min.css', 'deps' => false, 'media'=>"all"],
['handle' => 'font_awesome', 'src' => 'font-awesome.min.css', 'deps' => false, 'media'=>"all"],
['handle' => 'animate', 'src' => 'animate.min.css', 'deps' => false, 'media'=>"all"],
['handle' => 'lightbox', 'src' => 'lightbox.css', 'deps' => false, 'media'=>"all"],
['handle' => 'main', 'src' => 'main.css', 'deps' => false, 'media'=>"all"],
['handle' => 'responsive', 'src' => 'responsive.css', 'deps' => false, 'media'=>"all"]
];
for ($i = 0; $i < sizeof($styles); $i++) {
wp_enqueue_style($styles[$i]['handle'], get_template_directory_uri() . '/css/' . $styles[$i]['src'], $styles[$i]['deps'], $styles[$i]['media'] );
}
$scripts = [
['handle' => 'bootstrap', 'src'=>'bootstrap.min.js','dep'=> array( 'jquery' ),'var'=> false,'in_foot'=> true],
['handle' => 'lightbox', 'src'=>'lightbox.min.js','dep'=> array( 'jquery' ),'var'=> false,'in_foot'=> true],
['handle' => 'wow', 'src'=>'wow.min.js','dep'=> array( 'jquery' ),'var'=> false,'in_foot'=> true],
['handle' => 'main', 'src'=>'main.js', 'dep'=>array( 'jquery' ), 'var'=>false, 'in_foot'=>true]
];
for ($i=0; $i < sizeof($scripts); $i++) {
wp_enqueue_script( $scripts[$i]['handle'], get_template_directory_uri() . '/js/' . $scripts[$i]['src'], $scripts[$i]['dep'], $scripts[$i]['ver'], $scripts[$i]['in_foot'] );
}
}
add_action( 'wp_enqueue_scripts', 'theme_files' );
언급URL : https://stackoverflow.com/questions/19263390/wordpress-loading-multiple-scripts-with-enqueue
'programing' 카테고리의 다른 글
가져오기 vs.Ajax Call (0) | 2023.03.20 |
---|---|
Swift에서의 객체 자동 JSON 시리얼화 및 역직렬화 (0) | 2023.03.20 |
리액트 리플릿 맵이 올바르게 표시되지 않음 (0) | 2023.03.20 |
HttpClient에서 JSON 문자열을 해석하려면 어떻게 해야 하나요? (0) | 2023.03.15 |
Angularjs: ng-options 그룹화 기준 (0) | 2023.03.15 |