Question

嗨所以我使用了http://scribu.net/wordpress/optimal-script-loading.html的一个很好的教程，当我在这里使用一个名为lightbox的短代码是我的代码时，我无法加载脚本。我在调用页面时想要与某人核实是否正确写入。

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

第一点：该教程基于旧版WordPress;别跟着那个。现在：

您在wp_register_script()中指定的句柄必须是唯一的。您正在为所有脚本重用相同的句柄（fancybox）;这不会奏效。给每个人一个不同的句柄，例如＆＃39; jquery-mousewheel＆＃39;，＆＃39; jquery-fancybox＆＃39; jquery-fancybox-buttons＆＃39;等。尝试坚持WordPress使用的既定命名习惯，请参阅{ {3}}例如。

如果你想在脚注中输出你的脚本，只需在wp_register_script（）（你有）中这样说;没有必要使用wp_footer动作。无论如何都应该在标题中输出样式，而不是页脚。

您可以通过一次调用告诉WordPress注册和排队脚本和样式表以进行输出：wp_enqueue_script() default scripts和wp_enqueue_script()。在您的简单案例中，无需注册，然后排队。

注册和排队脚本的最佳操作挂钩是＆＃39; wp_enqueue_style()＆＃39;除特殊情况外，尽量只使用那个。

奖励积分：如果脚本名称已包含版本号，您可以取消额外的＆＃39;？ver = nnn＆＃39; WordPress通过传递null作为版本字符串来解决这个问题。

最后，wp_enqueue_scripts没有任何论据。

注意：这会让您的脚本正常运行。您的链接教程有不同的做法只是有条件地输出您的脚本，但是在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：我怀疑jquery.fancybox.pack.js是jquery.fancybox.js的打包（即缩小版）版本，因此请使用该版本作为＆＃39; jquery-fancybox＆＃39;如果是;你不需要两者。

Answer 2

wp_register_script的第一个参数需要对每个脚本都是唯一的（请参阅the codex），因此您可能需要“fancybox.mousewheel”，“fancybox”，“fancybox.buttons”等名称区分。我检查，但我怀疑你只需要fancybox.js和fancybox.pack.js中的一个 - 我认为包文件是fancybox.js的缩小版本

但是你使用的是什么版本的WordPress？您提到的教程顶部的链接显示了在WordPress 3.3+中更简洁的方法，无需使用该类。

短代码中的wp_enqueue_script

2 个答案: