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
<?php
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