-1

嗨，所以我使用了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;
}
4

2 回答 2

5

第一点：该教程基于旧版本的 WordPress；不要跟随那个。现在：

您在wp_register_script()中指定的句柄必须是唯一的。您正在为所有脚本重用相同的句柄（fancybox）；这行不通。给每一个不同的句柄，例如“jquery-mousewheel”、“jquery-fancybox”、“jquery-fancybox-buttons”等。尝试坚持 WordPress 使用的既定命名习惯，请参阅wp_enqueue_script() 默认脚本示例。

如果您希望脚本在页脚中输出，只需在 wp_register_script() （您有）中这样说；无需使用 wp_footer 操作。无论如何，样式都应该在页眉中输出，而不是在页脚中。

您可以告诉 WordPress 注册脚本和样式表并将其排入队列以输出，每个调用一次：wp_enqueue_script()和wp_enqueue_style()。在您的简单情况下，无需注册，然后入队。

注册和入队脚本的最佳操作挂钩是“ wp_enqueue_scripts ”。除特殊情况外，尽量只使用那个。

加分项：在脚本名称已经包含版本号的情况下，您可以通过将 null 作为版本字符串传递来抑制 WordPress 附加的额外 '?ver=nnn'。

最后，get_stylesheet_directory_uri()不接受任何参数。

注意：这会让你的脚本工作。您的链接教程所做的不同之处在于仅有条件地输出您的脚本，但是在 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 的打包（即缩小）版本，所以如果是，则将其用作“jquery-fancybox”；你不需要两者。

于 2012-12-02T22:16:28.677 回答
0

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

但是您使用的是哪个版本的 WordPress？您提到的教程顶部的链接显示了在 WordPress 3.3+ 中执行此操作的一种更简洁的方法，无需类。

于 2012-12-02T22:06:39.830 回答