Как сделать chessboard.js работать на локальном WordPress?

-1

У меня есть страница «Шахматы» с пользовательским шаблоном. Когда я использую сценарий cheessboard.js онлайн, проблем нет. Когда я хочу использовать загруженную версию и заменять <base href="http://chessboardjs.com/" /> с локальным путем, он производит эти ошибки в браузере:Как сделать chessboard.js работать на локальном WordPress?

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> 
    ...

источник

2014-09-14 Thierry Bonnechere

Любые ошибки в вашем браузере Панель JavaScript? – halfer

«это не работает» ** НЕТ ** описание ошибки – Xatenev

Прохладный плагин :)) – brasofilo

<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: wp_enqueue_script('jquery');.

Вы также можете использовать create a shortcode. Ниже приведен пример использования файлов Chessboardjs в каталоге /wp-content/themes/your-theme/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>

источник

2014-09-14 23:10:54 brasofilo

Спасибо, это прекрасно;) –

Как сделать chessboard.js работать на локальном WordPress?

ответ

Смежные вопросы