twine_如何在WordPress中嵌入Twine故事
twine
从一开始，我就希望我的WordPress网站romanluks.eu上的“关于我”页面是交互式的。
最初，我尝试了Dart，这是Google开发的一种编程语言，可以转换为JavaScript。 当我意识到自己在开发游戏而不是“关于我”页面时，我终止了该项目。
稍后，我发现了Twine ，这是一个用于创建交互式故事的开源工具。 它使我想起了我小时候喜欢的游戏本。 在Twine中创建相互关联的文本非常容易，并且非常适合我想要的类似于采访的格式。 因为Twine直接发布为HTML，所以您可以用它做很多有趣的事情-包括创建交互式小说和冒险游戏或在博客或网站上发布故事。
早期的斗争
我在Twine中创建了“关于我”页面，然后尝试将其粘贴到WordPress页面中。
WordPress和Twine说：“不行。”
您会看到，从Twine导出的Twine故事只是一个网页（即HTML格式的文件）。 但是，它不仅包括HTML，还包括JavaScript代码。 而且，当您仅尝试复制粘贴内容时，它不起作用。 我尝试将粘贴内容仅缠绕在Twine故事页面的正文中而没有成功。
我以为“我想我需要单独添加该JavaScript代码”，然后尝试了自定义字段。
不。
我从调查中休息了一下。 我刚刚通过FTP上传了“关于我”麻线的故事，并从我的网站菜单中链接了该故事。 人们可以访问它并与该故事进行交互，但是，没有菜单，并且感觉不像是我的网站的一部分。 我为自己做了一个陷阱。 这让我意识到我真的很希望我的“关于我”直接出现在我的网站上。
DIY嵌入
我对这个问题不屑一顾，并提出了解决方案 。
有效。 它不是完美的，但是有效。
但这并不完美 。 有没有更好的办法？ 肯定会有更好的方法……
这花了我几毛，但我设法获得了响应性的iframe和自动滚动 。
感觉好多了。 我为自己感到骄傲，并在Reddit上分享了它。
嵌入麻线之路
突然，一个主意！ 如果人们可以使用WordPress插件而不是按照我的教程怎么办？
他们只需要给插件一个Twine的故事，其余的工作就可以解决。 轻松自如。 无需复制粘贴任何JavaScript代码。
那不是光荣的吗？！
我不知道WordPress插件如何工作。 我只知道它们是用PHP编写的。 不久前，我从事PHP开发人员的兼职工作，而且我还记得一些基础知识。
容器和WordPress
我向朋友提到了我的想法，他建议我可以将容器用作WordPress开发环境。
过去，我一直使用XAMPP ，但是我想尝试一会儿容器。
没问题，我想！ 在学习如何制作WordPress插件并恢复PHP技能的同时，我将学习容器。 那应该足够刺激。
是的。
我不记得我停下，移走并重建了容器多少次。 我必须使用命令行。 而且文件权限很麻烦。
好家伙！ 这就像在玩一个您喜欢玩的游戏，尽管这会让您非常生气。 这具有挑战性，但很有意义。
我发现创建一个简单的WordPress插件非常容易：
- 编写源代码
- 将其保存在WP插件目录中
- 测试一下
- 重复
容器使您可以轻松使用特定的环境，并且在拧紧并需要重新开始时很容易清理。
使用Git可以避免意外删除整个代码库。 我使用Sourcetree作为我的Git用户界面。 最初，我用Notepad ++编写代码，但是当我将代码分成多个文件时，我切换到了Atom 。 对于极客来说，它是一个很棒的编辑器。 使用它就像代码自己编写。
中场休息
那么，到目前为止我们知道些什么？
- 我想要一个交互式的“关于我”页面
- 我在Twine中创作了一个“关于我”的故事
- Twine导出网页（作为包含JavaScriptHTML文件）
- WP插件易于制作
- 容器很棒
嵌入麻线诞生
我想要一种将Twine故事嵌入WordPress的简单方法。 因此，我使用了软件开发的能力，无所事事地使用了容器，编写了一些PHP代码，并将结果发布为一个名为Embed Twine的WordPress插件。
安装插件
- 将插件文件上传到/ wp-content / plugins / plugin-name目录，或通过WordPress插件屏幕安装插件。
- 通过WordPress中的“插件”屏幕激活插件。
使用插件
安装Embed Twine插件并创建Twine 2故事后，将其嵌入到WordPress网站中：
- 将您的Twine 2故事导出到HTML文件中。
- 通过插件的界面上传。
- 将简码插入页面或帖子中。
- 享受您的嵌入式故事。
该插件还提供自动滚动功能，使用户可以轻松浏览您的故事。
配置插件
该插件可通过简码参数进行配置。 要使用简码，只需将[embed_twine]放入您的帖子中。
您可以使用以下格式的其他参数： [embed_twine story =“ Story” aheight = 112 autoscroll = true ascroll = 100] ，如下所示：
- 故事：指定故事名称（不带扩展名的文件名）。
- 如果story参数被省略，则默认为“ Story”。 这意味着如果您的Twine文件名是Story.html，则无需使用此参数。
- 如果您上载名为MyFooBar.html的Twine故事，请使用简码： [embed_twine story =“ MyFooBar”] 。
- aheight：使用此参数可以调整iframe的高度。 您可能需要调整高度以摆脱iframe滚动条。 预设值为112； 将此值添加到iframe高度，并用于设置iframe的style.height 。
- 自动滚动：默认情况下启用自动滚动。 您可以使用简码参数[embed_twine autoscroll = false]将其关闭。
- 升序：使用此选项可以调整自动滚动的默认位置。 预设值为100； 从iframe的顶部位置减去此值，然后将其输入JavaScript方法window.scrollTo（）中 。
已知错误
当前，包含图像的Twine段落可能会错误地报告其高度，并且滚动条可能会显示这些段落。 调整shortcode参数aheight摆脱它们。
剧本
1
2
3
/**
4 * Plugin Name: Embed Twine
5 * Description: Insert Twine stories into WordPress
6 * Version: 0.0.6
7 * Author: Roman Luks
8 * Author URI: https://romanluks.eu/
9 * License: GPLv2 or later
10 */
11
12
require_once
(
'include/embed-twine-load-file.php'
)
;
13
require_once
(
'include/embed-twine-parent-page.php'
)
;
14
require_once
(
'include/embed-twine-process-story.php'
)
;
15
16
// Add plugin to WP menu
17
function embed_twine_customplugin_menu
(
)
{
18
19 add_menu_page
(
"Embed Twine"
,
"Embed Twine"
,
"manage_options"
,
__FILE__
,
"embed_twine_uploadfile"
)
;
20
}
21
22 add_action
(
"admin_menu"
,
"embed_twine_customplugin_menu"
)
;
23
24
function embed_twine_uploadfile
(
)
{
25
include
"include/embed-twine-upload-file.php"
;
26
}
27
28
// Add shortcode
29
function embed_twine_shortcodes_init
(
)
30
{
31
function embed_twine_shortcode
(
$atts
=
[
]
,
$content
=
null
)
32
{
33
// Attributes
34
$atts
= shortcode_atts
(
35
array
(
36
'story'
=>
'Story'
,
37
'aheight'
=>
112
,
//adjust for style.height (30) and margins of tw-story (2x41)
38
'autoscroll'
=>
true
,
//autoscroll enabled by default
39
'ascroll'
=>
100
,
//adjust for autoscroll
40
)
,
41
$atts
,
42
'embed_twine'
43
)
;
44
45
$content
= embed_twine_buildParentPage
(
$atts
[
'story'
]
,
$atts
[
'aheight'
]
,
$atts
[
'autoscroll'
]
,
$atts
[
'ascroll'
]
)
;
46
47
return
$content
;
48
}
49 add_shortcode
(
'embed_twine'
,
'embed_twine_shortcode'
)
;
50
}
51 add_action
(
'init'
,
'embed_twine_shortcodes_init'
)
;
本文改编自Roman Luks的博客和WordPress插件上的Embed Twine页面。
翻译自: https://opensource.com/article/20/2/embed-twine-wordpress
twine