wp_enqueue_script in shortcode

Question

안녕하세요, http://scribu.net/wordpress/optimal-script-loading.html의 멋진 튜토리얼을 사용했고 라이트 박스라는 단축 코드가 여기에 사용되면 스크립트를로드하는 데 문제가 있습니다. 나는 그것이 부름 받았을 때 누군가가 제대로 쓰여 졌는지 확인하기를 원할 때 페이지에있다.

는

add_shortcode('lightbox', 'lightbox_handler'); 
function lightbox_handler($atts) { 
$base = get_stylesheet_directory_uri(); 
    wp_enqueue_script('jquery-mousewheel', $base . '/js/jquery.mousewheel-3.0.6.pack.js', array('jquery'), null, true); 
    wp_enqueue_script('jquery-fancybox', $base . '/js/jquery.fancybox.pack.js', array('jquery'), '1.0', true); 
    wp_enqueue_script('jquery-fancybox-buttons', $base . '/js/jquery.fancybox-buttons.js', array('jquery-fancybox'), '1.0', true); 
    wp_enqueue_script('jquery-fancybox-media', $base . '/js/jquery.fancybox-media.js', array('jquery-fancybox'), '1.0', true); 
    wp_enqueue_script('jquery-fancybox-thumbs', $base . '/js/jquery.fancybox-thumbs.js', array('jquery-fancybox'), '1.0', true); 

    wp_enqueue_style('jquery-fancybox', $base . '/css/jquery.fancybox.css', false, '1.0', true); 
    wp_enqueue_style('jquery-fancybox-buttons', $base . '/css/jquery.fancybox-buttons.css', array('jquery-fancybox'), '1.0', true); 
    wp_enqueue_style('jquery-fancybox-thumbs', $base . '/css/jquery.fancybox-thumbs.css', array('jquery-fancybox'), '1.0', true); 
} 
function lightbox($atts, $content = null) { 

$defaults = apply_filters('toggle_shortcode_args', 
    array(
    'title' => '', 
    'id' => '', 
    'type' => '', 
    'rel' => '', 
    'url' => '', 
    ) 
); 


extract(shortcode_atts($defaults, $atts)); 

     $html .= '<a class="'.$id.'" rel="'.$rel.'" data-fancybox-group="gallery" href="'.$url.'" title="'.$title.'"><img src="'.$url.'" alt="" />'; 
     $html .= '</a>'; 

    return $html; 
} 

Answer 1

wp_register_script의 첫 번째 인수는 차별화 "fancybox.mousewheel", "fancybox", "fancybox.buttons"등 같은 이름이 필요할 수 있으므로, (the codex 참조) 각 스크립트에 대해 고유해야합니다. 확인하겠습니다 만, fancybox.js 및 fancybox.pack.js 중 하나만 필요하다고 판단됩니다. 팩 파일은 fancybox의 축소판입니다 .js

사용중인 WordPress의 버전은 무엇입니까? ? 언급 한 튜토리얼 상단의 링크는 WordPress 3.3 이상 버전에서 더 깨끗한 방법으로 클래스의 필요성을 없애줍니다.

Answer 2

첫 번째 포인트 :이 튜토리얼은 이전 버전의 WordPress를 기반으로합니다. 저것을 따르지 말라. 지금 :

wp_register_script()에 지정하는 핸들은 고유해야합니다. 모든 스크립트에 대해 동일한 핸들 (fancybox)을 재사용하고 있습니다. 이 작동하지 않습니다. 각기 다른 핸들을 지정하십시오 (예 : 'jquery-mousewheel', 'jquery-fancybox', 'jquery-fancybox-buttons'등 WordPress가 사용하는 기존 명명 된 습관을 고수하십시오. 예제는 wp_enqueue_script() default scripts을 참조하십시오.

스크립트를 바닥 글에 출력하려면 wp_register_script() (있는 경우)라고 말하면됩니다. wp_footer 조치를 사용할 필요가 없습니다. 스타일은 꼬리말이 아닌 머리글에 출력되어야합니다.

워드 프레스가 wp_enqueue_script() 및 wp_enqueue_style()과 같이 하나씩 호출하여 출력용 스크립트 및 스타일 시트를 등록하고 대기열에 추가하도록 지정할 수 있습니다. 간단한 케이스에 등록하고 엔큐를 할 필요가 없습니다.

스크립트를 등록하고 대기열에 추가하는 가장 좋은 방법은 'wp_enqueue_scripts'입니다. 특별한 상황을 제외하고는 그것을 사용하도록하십시오.

보너스 포인트 : 스크립트 이름에 이미 버전 번호가 포함되어있는 경우 버전 문자열로 null을 전달하여 WordPress가 부과하는 추가 '? ver = nnn'을 억제 할 수 있습니다.

마지막으로 get_stylesheet_directory_uri()에는 인수가 없습니다.

NB : 스크립트가 작동됩니다. 당신의 링크 된 튜토리얼이 다르게하는 한 가지는 스크립트를 조건부로만 출력하는 것이지만, wp_enqueue_scripts() 매뉴얼 페이지 하단에 링크 된 그 주제에 대한 더 나은 튜토리얼이있다. 첫째, 귀하의 사이트를 작동 시키십시오!

class fancy{ 
    static function init() { 
     add_shortcode('lightbox', array(__CLASS__, 'handle_shortcode')); 

     add_action('wp_enqueue_scripts', array(__CLASS__, 'wp_enqueue_scripts')); 
    } 

    static function handle_shortcode($atts) { 
     self::$add_script = true; 

     // actual shortcode handling here 
    } 

    static function wp_enqueue_scripts() { 
     $base = get_stylesheet_directory_uri(); 
     wp_enqueue_script('jquery-mousewheel', $base . '/js/jquery.mousewheel-3.0.6.pack.js', array('jquery'), null, true); 
     wp_enqueue_script('jquery-fancybox', $base . '/js/jquery.fancybox.pack.js', array('jquery'), '1.0', true); 
     wp_enqueue_script('jquery-fancybox-buttons', $base . '/js/jquery.fancybox-buttons.js', array('jquery-fancybox'), '1.0', true); 
     wp_enqueue_script('jquery-fancybox-media', $base . '/js/jquery.fancybox-media.js', array('jquery-fancybox'), '1.0', true); 
     wp_enqueue_script('jquery-fancybox-thumbs', $base . '/js/jquery.fancybox-thumbs.js', array('jquery-fancybox'), '1.0', true); 

     wp_enqueue_style('jquery-fancybox', $base . '/css/jquery.fancybox.css', false, '1.0', true); 
     wp_enqueue_style('jquery-fancybox-buttons', $base . '/css/jquery.fancybox-buttons.css', array('jquery-fancybox'), '1.0', true); 
     wp_enqueue_style('jquery-fancybox-thumbs', $base . '/css/jquery.fancybox-thumbs.css', array('jquery-fancybox'), '1.0', true); 
    } 
} 

fancy::init(); 

PS : I가 jquery.fancybox.pack.js가 jquery.fancybox.js의 포장 (즉, 축소 된) 버전 인 것으로 생각되므로 'JQuery와-fancybox'는 것처럼 하나를 사용한다; 당신은 둘 다 필요하지 않습니다.