如何在 WordPress 中嵌入 Twine 故事

Person drinking a hat drink at the computer

图片来源：

从一开始，我就希望我的 WordPress 网站 romanluks.eu 上的“关于我”页面是互动的。

起初，我尝试了 Dart，这是一种由 Google 开发并转译为 JavaScript 的编程语言。当我意识到我正在制作一个游戏而不是“关于我”页面时，我放弃了这个项目。

不久之后，我发现了 Twine，这是一个用于创建互动故事的开源工具。它让我想起了我小时候喜欢的游戏书。在 Twine 中创建相互关联的文本片段非常容易，它非常适合我想要实现的类似访谈的形式。因为 Twine 直接发布到 HTML，所以您可以使用它做很多有趣的事情——包括创建互动小说和冒险游戏，或在博客或网站上发布故事。

早期的挣扎

我在 Twine 中创建了我的“关于我”页面，并尝试将其粘贴到我的 WordPress 页面中。

“不行，”WordPress 和 Twine 都说。

您看，从 Twine 导出的 Twine 故事只是一个网页（即 HTML 格式的文件）。但是，它不仅包含 HTML，还包含 JavaScript 代码。而且，当您只是尝试复制粘贴内容时，它不知何故不起作用。我尝试复制粘贴 Twine 故事页面的正文，但没有成功。

我想，“我想我需要单独添加 JavaScript 代码”，我尝试了自定义字段。

不行。

我暂停了调查。我只是通过 FTP 上传了我的“关于我”Twine 故事，并从我网站的菜单链接到它。人们可以访问它并与故事互动，但是，没有菜单，而且感觉不像是我网站的一部分。我给自己设了一个陷阱。这让我意识到我真的 *非常* 希望我的“关于我”直接包含在我的网站上。

DIY 嵌入

我尝试解决这个问题，并提出了这个解决方案。

它奏效了。它并不完美，但它奏效了。

但它并不 *完美*。有更好的方法吗？肯定有更好的方法……

我为此付出了几根头发，但我设法获得了响应式 iframe 和自动滚动。

这好多了。我为自己感到骄傲，并在 Reddit 上分享了它。

Embed Twine 的道路

突然，一个想法！如果人们可以使用 WordPress 插件而不是遵循我的教程，会怎么样？

他们只需要给插件一个 Twine 故事，它就会处理剩下的事情。无忧无虑。无需复制粘贴任何 JavaScript 代码。

那岂不是很棒吗？！?

我不知道 WordPress 插件是如何工作的。我只知道它们是用 PHP 编写的。很久以前，我曾做过兼职 PHP 开发人员，我记得一些基础知识。

容器和 WordPress

我向一位朋友提到了我的想法，他建议我可以将容器用作我的 WordPress 开发环境。

过去，我总是使用 XAMPP，但我想尝试使用容器一段时间。

没问题，我想！我将在学习如何制作 WordPress 插件和重拾我的 PHP 技能的同时学习容器。这应该足够刺激。

确实如此。

我不记得我停止、删除和重建容器多少次了。我不得不使用命令行。而且文件权限很麻烦。

哦，天哪！这就像玩一个即使让你相当生气但你仍然喜欢玩的游戏。这既具有挑战性，又令人欣慰。

我发现创建一个简单的 WordPress 插件非常容易

编写源代码
将其保存在 WP 插件目录中
测试它
重复

容器使您可以轻松使用特定环境，并且在您搞砸并需要重新开始时易于清理。

使用 Git 使我免于意外擦除我的整个代码库。我使用 Sourcetree 作为我的 Git 用户界面。最初，我在 Notepad++ 中编写代码，但当我将代码分成多个文件时，我切换到 Atom。这是一个非常酷的极客编辑器。使用它感觉代码会自己编写。

幕间休息

到目前为止我们知道什么？

我想要一个互动的“关于我”页面
我在 Twine 中创建了一个“关于我”故事
Twine 导出网页（作为包含 JavaScript 的 HTML 文件）
WP 插件很容易制作
容器很棒

Embed Twine 诞生了

我想要一种将 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 参数，则默认为“Story”。这意味着如果您的 Twine 文件名是 Story.html，则无需使用此参数。
- 如果您上传了一个名为 MyFooBar.html 的 Twine 故事，请使用简码：[embed_twine story="MyFooBar"]。
aheight: 使用此参数调整 iframe 的高度。您可能需要调整 aheight 以消除 iframe 滚动条。默认值为 112；此值添加到 iframe 高度，并用于设置 iframe 的 style.height。
autoscroll: 默认情况下启用自动滚动。您可以使用简码参数 [embed_twine autoscroll=false] 关闭它。
ascroll: 使用此参数调整自动滚动的默认位置。默认值为 100；此值从 iframe 的顶部位置减去，并馈送到 JavaScript 方法 window.scrollTo()。

已知错误

目前，包含图像的 Twine 段落可能会错误地报告其高度，并且滚动条可能会为这些段落显示出来。调整简码参数 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 页面。

接下来阅读什么