Шахматный веб-сайт для ребенка. Помогите "чайнику"!

[Ипполит]

Есть у меня замысел. Связанный с представлением о личности и характере своего ребенка. Основанный на предположении, что нечто сделанное руками отца, именно для него имеет наивысшую ценность и значимость по сравнению с другими доступными аналогами. И есть у меня тому подтверждение. Ну да совсем не это предположение я буду обсуждать.
А задумал я сделать ему сайт с шахматными уроками и т.п. В вордпрессе это будет по замыслу. Тексты я набью, конечно. Диаграммы .jpg - ские тоже могу вставить, но это позапрошлый век, а хочется так, как вот здесь, например:


Если кто-то знает, как это сделать и согласится меня проконсультировать, прошу  учесть, что я не просто чайник, а самовар.
Буду рад и другим комментариям на эту тему.

[anatoly]

Есть множество онлайн-генераторов шахматно-шашечных диаграмм.
Идея такая:
https://khat.wordpress.com/2007/02/23/generator-of-diagrams/
Позиция в стандартном формате FEN
добавляется как параметр запроса к серверу-гератору диаграмм. Получается ссылка на .PNG, который генерируется сервером на лету.
На некоторых шахматных форумах есть такие генераторы, чтобы вставлять диаграмки в сообщения.
Шахматы:
http://forum.gambiter.ru/fen/chess.php?coord&fen=rnb1kbnr/pppp1ppp/8/4p3/5PPq/8/PPPPP2P/RNBQKBNR
Шашки:
http://forum.gambiter.ru/fen/checkers.php?coord&fen=3d4/D7/1D6/8/3d4/8/5d2/8

Рисовалка ссылок?
http://forum.gambiter.ru/fen

[Ипполит]

anatoly , буду надоедать 
Получил с помощью шаманства урл http://www.euruchess.org/29x29/merida29/diagol.php?position=3k3R/8/3K4/8/8/8/8/8
Немножко неясно, почему черные внизу? Ну да тыканьем разберемся.
По существу два вопроса.
1. Как вот эту ссылку из урла обратить в диаграмму на сайте?  Вот хотя бы прямо здесь, где я пишу сейчас? Вот есть браузерный урл, да? http://www.euruchess.org/29x29/merida29/diagol.php?position=3k3R/8/3K4/8/8/8/8/8
Нужны теги, да? Вот эти вот: [img][ /img] Но ничего не получается! Когда я заключаю ссылку в эти теги, то нажимая "предварительный просмотр" картинки все равно нет. Пробовал я и в урлы запихивать, что здесь на панели. Все равно не получается. Почему?
2. А как, чтобы оно ещё и по стрелочкам играло, двигалось?

[anatoly]

Если хочется не вставлять диаграммки после каждых 2-4 ходов, а ходить по тексту партии туда-сюда, нужен PGN Viewer, которых тоже немало.
DuckDuckGo нашёл какой-то (возможно, уже протухший) плагин для вёрдпресс.
https://wordpress.org/plugins/pgnviewer-plugin/
Статические статьи с диаграммками, a la "Наука и жизнь" прошлого века, тоже смотрятся неплохо. И, на мой взгляд, лучше вписываются в стиль Wordpress

[anatoly]

1. Как вот эту ссылку из урла обратить в диаграмму на сайте?  Вот хотя бы прямо здесь, где я пишу сейчас?
http://www.euruchess.org/29x29/merida29/diagol.php?position=3k3R/8/3K4/8/8/8/8/8

Нужны теги, да? Вот эти вот: [img][ /img] Но ничего не получается! Когда я заключаю ссылку в эти теги, то нажимая "предварительный просмотр" картинки все равно нет.
...
 Все равно не получается. Почему?

На этом форуме не всегда сразу появляются картинки не только в предварительном просмотре, но и в сообщении.
Возможно, движку нужно время, чтобы запомнить какую-то информацию о картинке, или сервер, с которого загружается картинка, неверно отдаёт её тип.

Попробуйте вставить диаграммы через http://forum.gambiter.ru/fen/ , как в моём сообщении выше. Он проще, и ссылки получаются короче. Для малофигурных позиций можно поробовать встроенный генератор ссылок

[Ипполит]

Моё косноязычие меня подводит, anatoly [img]http://forum.gambiter.ru/fen/chess.php?coord&fen=8/8/8/8/8/3K4/8/R2k4[ /img]
Не знаю, что получится, нажимаю "Отправить".
[img]...Вот здесь должна быть сгенерированная шаманством ссылка?.. [ /img]
Или какие-то теги лишние у меня, или их расстановка напутана?

[anatoly]

Или какие-то теги лишние у меня, или их расстановка напутана?

Между IMG должен быть только адрес без дополнительных тэгов:

Код:

[img]
http://forum.gambiter.ru/fen/chess.php?coord&fen=8/8/8/8/8/3K4/8/R2k4
[/img]

[Ипполит]

Ничего у меня пока не получается.
В вордпрессе на просмотре одни ссылки. Как и здесь.
Вот ещё одна попытка:


...
Ага тут получилось.

[Ипполит]

Нашел плагинчик.
https://ru.wordpress.org/plugins/embed-chessboard/
Образец с сайта у меня в вордпрессе заработал, но пока образец, не свой материал.

[anatoly]

Первый попавшийся тоже с виду симпатичный:
http://rpb-chessboard.yo35.org/navigation-board/
http://rpb-chessboard.yo35.org/chess-game-with-comments-and-sub-variations/
Просят помочь с переводом на русский 
https://ru.wordpress.org/plugins/rpb-chessboard/
Когда всё заработает, пригласите нас в свой вордпресс? 

[Ипполит]

Конечно, anatoly ! Первым гостем станете! 
Но пока я далек от этого. Я не понимаю, что надо сделать, чтобы заработало  И в того, кто назовёт меня тупицей, камень я не брошу.
Ниже, чтобы не гонять никого по ссылкам, я приведу описание плагинов. Может, и дождусь подмоги.
P.S. Помните, Гребенщикова: "А подмога не пришла..." 

[Ипполит]

Описание

Embed Chessboard is a plugin that allows for the insertion of a chessboard displaying chess games within worpress articles.

Use following tag to insert a chessboard:

[pgn parameter=value ...]
... chess games in PGN format ...
[/pgn]
Tag parameters:

layout=horizontal|vertical
height=auto|number
showMoves=figurine|text|puzzle|hidden
initialGame=first|last|random|number
initialVariation=number
initialHalfmove=start|end|random|comment|number
autoplayMode=game|loop|none
Например:

[pgn height=500 initialHalfmove=16 autoplayMode=none]

[Event "World championship"]
[Site "Moscow URS"]
[Date "1985.10.15"]
[Round "16"]
[White "Karpov"]
[Black "Kasparov"]
[Result "0-1"]

1. e4 c5 2. Nf3 e6 3. d4 cxd4 4. Nxd4 Nc6 5. Nb5 d6 6.
c4 Nf6 7. N1c3 a6 8. Na3 d5 9. cxd5 exd5 10. exd5 Nb4
11. Be2 Bc5 12. O-O O-O 13. Bf3 Bf5 14. Bg5 Re8 15.
Qd2 b5 16. Rad1 Nd3 17. Nab1 h6 18. Bh4 b4 19. Na4 Bd6
20. Bg3 Rc8 21. b3 g5 22. Bxd6 Qxd6 23. g3 Nd7 24. Bg2
Qf6 25. a3 a5 26. axb4 axb4 27. Qa2 Bg6 28. d6 g4 29.
Qd2 Kg7 30. f3 Qxd6 31. fxg4 Qd4+ 32. Kh1 Nf6 33. Rf4
Ne4 34. Qxd3 Nf2+ 35. Rxf2 Bxd3 36. Rfd2 Qe3 37. Rxd3
Rc1 38. Nb2 Qf2 39. Nd2 Rxd1+ 40. Nxd1 Re1+ 0-1

[/pgn]
Any PGN header tag missing will not be displayed.

Note: HTML tags are stripped from the PGN data, removing all text between «<» and «>» characters; please make sure your PGN data does not contain «<» and «>» characters.

[Ипполит]

Описание

RPB Chessboard allows you to typeset and display chess games and diagrams in the posts and pages of your WordPress blog, using the standard FEN and PGN notations.
Установка

Download rpb-chessboard.zip and upload its content to the /wp-content/plugins/ directory of your website.
Activate the plugin through the Plugins menu in WordPress.
You are now able to put [fen][/fen] and [pgn][/pgn] tags in your posts and pages to insert chess diagrams and full chess games. Please look at the Chess > Memo menu (created by the plugin) for examples of how to use these tags.
For extensive details about plugin installation and management, please have a look to the general plugin management page.

[Ипполит]

И не то чтобы я не понимал языка или не умел пользоваться переводчиком...
"Но ты мне рукой, рукой покажи!.." (с)

Кстати, плагины все эти не работают в бесплатной версии вордпреса, ну.. то есть у них на ресурсе. Пришлось задействовать коммерческий хостинг с установкой/поддержкой. Ну и как я писал выше, скопировав образец, я его получил на странице, а отсебятина никакая не идет...

[anatoly]

Можно себе на Windows или Linux установить сервер с worpdress'ом, чтобы опробовать плагины и потренироваться.