wordpress - Jplayer 和 wordpress 3.6.x

Question

我正在将我的 Jplayer 代码嵌入到我的网站中，但是 wordpress 安装中已经有 jquery，但是当我将代码复制到播放器上时，它会损坏，因为它没有显示带有 x 的音量图标。当我包含一个外部 jquery 脚本时，它会破坏入口站点，但播放器可以工作。有没有更好的方法让我将 jPlayer 包含到我的 wordpress 网站中？

Answer 1

jPlayer 脚本入队必须按照 WordPress 规则播放。最简单（也许是唯一）的方法是使用Shortcode。有很多开发人员，主要是主题开发人员，忽略了我们不会将捆绑的 jQuery 版本出列并从某个 CDN 加载任何版本（至少，我们不会在不知道我们在做什么的情况下这样做）。

这是一个粗略的测试，短代码回调函数需要大量打磨。

public function plugin_setup() // hooked into plugins_loaded 
{
    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
    add_shortcode( 'jplayer', array( $this, 'shortcode' ) );
}

public function enqueue()
{
    wp_register_script(
        'sj-jplayer', 
        $this->plugin_url . 'js/jquery.jplayer.min.js', 
        array( 'jquery' ), // <------- Dependencies
        false,
        true
    );
    wp_register_style( 'sj-skin', $this->plugin_url . 'skin/blue.monday/jplayer.blue.monday.css' );

    wp_enqueue_script( 'sj-jplayer' );
    wp_enqueue_style( 'sj-skin' );
}

public function shortcode( $atts, $content )
{
    ob_start();
    require_once('html-shortcode.php');
    $var = ob_get_clean();
    return $var;
}

该文件html-shortcode基本上是这个演示代码改编如下：

<?php
/*
 * Prints the shortcode
 */
?>
<script type="text/javascript">
    jQuery(document).ready(function($) // <------ WP noConflict 
    {
        $("#jquery_jplayer_1").jPlayer({});
    });
</script>

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

我在另一个执行jScrollPane的 jPlayer 短代码中测试了这个 jPlayer 短代码，它可以在 iPad 上运行。