Javascript 如何使chessboard.js在本地WordPress上工作?
我有一个带有自定义模板的“国际象棋”页面。当我在线使用脚本时,没有问题。当我想使用下载的版本并用本地路径替换Javascript 如何使chessboard.js在本地WordPress上工作?,javascript,php,wordpress,chessboard.js,Javascript,Php,Wordpress,Chessboard.js,我有一个带有自定义模板的“国际象棋”页面。当我在线使用脚本时,没有问题。当我想使用下载的版本并用本地路径替换时,它会在浏览器上产生以下错误: GET http://localhost/css/chessboard.css (index):4 GET http://localhost/js/chess.js (index):8 GET http://localhost/js/jquery-1.10.1.min.js (index):9 GET http://localhost/js/ches
时,它会在浏览器上产生以下错误:
GET http://localhost/css/chessboard.css (index):4
GET http://localhost/js/chess.js (index):8
GET http://localhost/js/jquery-1.10.1.min.js (index):9
GET http://localhost/js/chessboard.js (index):10
Uncaught ReferenceError: $ is not defined
如何调整模板Chess.php
...
<html>
<head>
<base href="http://chessboardjs.com/" />
<link rel="stylesheet" href="/css/chessboard.css" />
</head>
<body>
<div id="board" style="width: 400px"></div>
<script src="/js/chess.js"></script>
<script src="/js/jquery-1.10.1.min.js"></script>
<script src="/js/chessboard.js"></script>
<script>
var init = function() {
var board, game = new Chess();
var makeRandomMove = function() {
var possibleMoves = game.moves();
if (game.game_over() === true || game.in_draw() === true || possibleMoves.length === 0) return;
var randomIndex = Math.floor(Math.random() * possibleMoves.length);
game.move(possibleMoves[randomIndex]);
board.position(game.fen());
window.setTimeout(makeRandomMove, 500);
};
board = new ChessBoard('board', 'start');
window.setTimeout(makeRandomMove, 500);
};
$(document).ready(init);
</script>
</body>
</html>
...
。。。
var init=函数(){
var棋盘,游戏=新国际象棋();
var makeRandomMove=函数(){
var possibleMoves=game.moves();
if(game.game|u over()==true | | game.in|u draw()==true | | | possibleMoves.length==0)返回;
var randomIndex=Math.floor(Math.random()*possibleMoves.length);
游戏移动(可能移动[随机索引]);
board.position(game.fen());
setTimeout(makeRandomMove,500);
};
棋盘=新棋盘(“棋盘”、“开始”);
setTimeout(makeRandomMove,500);
};
$(文件).ready(初始化);
...
属性。你可能把这些文件放在你的主题目录里,我们用
正确的方法是使用加载JS和CSS文件,并且只在需要它们的页面上进行加载。另外,不要将外部jQuery从外部源排队,使用与WP捆绑的jQuery:WP_enqueue_脚本(“jQuery”)代码>
你也可以为此付出代价。以下只是一个原始示例,其中Chessboardjs文件位于目录/wp content/themes/your theme/Chessboardjs/
中。模板chess.php
是这样的:
<?php
/**
* Template Name: Chess
*/
$base = get_stylesheet_directory_uri() . '/chessboardjs';
?><html>
<head>
<link rel="stylesheet" href="<?php echo $base; ?>/css/chessboard-0.3.0.min.css" />
<script src="<?php echo $base; ?>/js/chess.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="<?php echo $base; ?>/js/chessboard-0.3.0.min.js"></script>
</head>
<body>
<div id="board" style="width: 400px"></div>
<script>
var init = function() {
var board, game = new Chess();
var makeRandomMove = function() {
var possibleMoves = game.moves();
if (game.game_over() === true || game.in_draw() === true || possibleMoves.length === 0) return;
var randomIndex = Math.floor(Math.random() * possibleMoves.length);
game.move(possibleMoves[randomIndex]);
board.position(game.fen());
window.setTimeout(makeRandomMove, 500);
};
var cfg = {
pieceTheme: '<?php echo $base; ?>/img/chesspieces/wikipedia/{piece}.png',
position: 'start'
};
board = new ChessBoard('board', cfg);
window.setTimeout(makeRandomMove, 500);
};
jQuery(document).ready(init);
</script>
</body>
</html>
浏览器JavaScript控制台中有任何错误吗?“它不工作”不是错误描述感谢您,它是完美的;)