wordpress - Wordpress 无法加载脚本
问题描述
我正在拼命尝试实现本教程中的音频播放器: https ://www.script-tutorials.com/html5-audio-player-with-playlist/ 作为 wordpress 插件。我需要一个可以为我的网站装扮自己的播放器。Noob Alert,我刚开始自己研究自定义 wordpress 的兔子洞,很抱歉,如果之前有人问过这个问题,我搜索了 stackoverflow,但找不到任何有用的东西。
我从上面提到的教程下载了源代码,并在源目录中创建了一个 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 脚本的方式,但我一直在阅读我能找到的每一个教程,但我仍然卡住了。有人可以让我走上正轨吗?
解决方案
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
推荐阅读
- typescript - 在打字稿中将地图转换为记录
- rust - Rustlang structopt 如何设置主目录
- php - cron 作业 - 在 laravel 中检查到期是否接近时自动发送电子邮件
- fluxcd - 如何在 Fluxcd helm 中使用自定义 values.yaml?
- installation - Visual Studio 安装程序技术
- vba - 复制时 VBA 应用程序定义或对象定义错误
- javascript - 美元货币格式的正则表达式
- node.js - 如何在 Kotlin 中包装 react-infinite-grid React 模块?
- c# - 为什么 taghelper 没有在服务器上呈现
- prometheus - 如何在普罗米修斯中编写对元素值的查询