如何使chessboard.js在本地WordPress上工作？
如何使chessboard.js在本地WordPress上工作？
提问于 2014-09-14 20:01:48
我有一页“国际象棋”的定制模板。当我在线使用cheessboard.js脚本时，没有问题。当我想使用它的下载版本并将<base href="http://chessboardjs.com/" />替换为本地路径时，它会在浏览器上产生以下错误：
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>
...回答 1
Stack Overflow用户
回答已采纳
发布于 2014-09-14 23:10:54
<base>属性https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base。您可能会将这些文件放在主题目录中，我们可以通过get_stylesheet_directory_uri()获得这些文件。
正确的做法是使用wp_enqueue_scripts来加载JS和CSS文件，并且只在需要它们的页面上这样做。另外，不要从外部源中加入外部jQuery，使用与WP：wp_enqueue_script('jquery');捆绑在一起的外部源。
您也可以为此使用创建一个短代码。下面只是/wp-content/themes/your-theme/chessboardjs/目录中Chessboardjs文件的一个原始示例。模板page-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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25837463
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号