Wordpress 加载脚本失败

Question

我正在拼命尝试实现本教程中的音频播放器： https://www.script-tutorials.com/html5-audio-player-with-playlist/ 作为 wordpress 插件。我需要一个可以为我的网站打扮自己的播放器。 Noob Alert，我刚刚开始研究自己定制 wordpress 的难题，抱歉，如果之前有人问过这个问题，我搜索了 Whosebug，但找不到任何有用的东西。

我从上面提到的教程中下载了源码，并在源码目录中创建了一个index.php。这是我试过的：

<?php
/**
* Plugin Name: Audio Player
* Description: Just a test Plugin
* Version: 1.0
* Author: rtuz2th
**/

wp_enqueue_script( 'jquery-1.7.2.min.js', plugins_url( 'js/jquery-1.7.2.min.js' , __FILE__ ), array('jquery') );
wp_enqueue_script( 'jquery-ui-1.8.21.custom.min.js', plugins_url( 'js/jquery-1.7.2.min.js' , __FILE__ ), array('jquery') ); 
wp_enqueue_style( 'main', plugins_url( 'wp-content/plugins/test/js/jquery-1.7.2.min.js' , __FILE__ ) );


function test_shortcode(){
    $player='

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="author" content="Script Tutorials" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <!-- add styles and scripts -->
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
    <div class="example">

        <div class="player">
            <div class="pl"></div>
            <div class="title"></div>
            <div class="artist"></div>
            <div class="cover"></div>
            <div class="controls">
                <div class="play"></div>
                <div class="pause"></div>
                <div class="rew"></div>
                <div class="fwd"></div>
            </div>
            <div class="volume"></div>
            <div class="tracker"></div>
        </div>
    <ul class="playlist hidden">
            <li audiourl="01.mp3" cover="cover1.jpg" artist="Artist 1">01.mp3</li>
            <li audiourl="02.mp3" cover="cover2.jpg" artist="Artist 2">02.mp3</li>
            <li audiourl="03.mp3" cover="cover3.jpg" artist="Artist 3">03.mp3</li>
            <li audiourl="04.mp3" cover="cover4.jpg" artist="Artist 4">04.mp3</li>
            <li audiourl="05.mp3" cover="cover5.jpg" artist="Artist 5">05.mp3</li>
            <li audiourl="06.mp3" cover="cover6.jpg" artist="Artist 6">06.mp3</li>
            <li audiourl="07.mp3" cover="cover7.jpg" artist="Artist 7">07.mp3</li>
        </ul>
    </div>
</body>
</html>
';
    return $player;
}

add_shortcode('test', 'test_shortcode');
?>

我没有显示播放器，而是将文件名 01.mp3 到 07.mp3 作为项目符号列表。我试过调试，我知道我的错误一定是我处理 js 和 css 脚本的方式，但我已经浏览了我能找到的每一个教程，但我仍然被卡住了。有人可以让我走上正轨吗？

Answer 1

Here is an error with your code

<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

In src/href attribute call the relative url like: (if the script is in themes/theme_name/js)
src="<?php echo get_template_ditectory_uri();?>/js/jquery-1.7.2.min.js

Wordpress 加载脚本失败

Wordpress fails to load scripts

wordpress

html5-audio

wordpress-plugin-creation