个人中心
gpt4 book ai didi

javascript - 如何让 chessboard.js 在本地 WordPress 上运行？

转载 作者：行者123 更新时间：2023-12-02 16:59:50 25 4
gpt4 key购买 nike

我有一个带有自定义模板的“国际象棋”页面。当我使用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>
    ...

最佳答案

<base>属性 specifies the base URL to use for all relative URLs contained within a document 。您可能将这些文件放在主题目录中，我们可以通过 get_stylesheet_directory_uri() 获得该文件。 。

正确的是使用 wp_enqueue_scripts 加载 JS 和 CSS 文件，并且只在需要它们的页面上执行。另外，不要将外部源的外部 jQuery 排入队列，使用与 WP 捆绑的 jQuery:wp_enqueue_script('jquery'); 。

您还可以create a shortcode为了这。以下只是目录 /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>

关于javascript - 如何让 chessboard.js 在本地 WordPress 上运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25837463/

25 4 0
文章推荐： javascript - 使用云代码从 parse.com 检索类
文章推荐： javascript - 更新 Meteor 中已发布的集合
文章推荐： javascript - 有人知道为什么我的点击在这个核心崩溃组件测试中没有触发吗？
文章推荐： javascript - 触发具有 $this 的 Jquery 函数。加载和单击
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com