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