twine_如何在WordPress中嵌入Twine故事-白红宇

twine_如何在WordPress中嵌入Twine故事

阅读量：2525 次

发布时间：2019-05-11

本文共 4185 字，大约阅读时间需要 13 分钟。

twine

从一开始，我就希望我的WordPress网站上的“关于我”页面是交互式的。

最初，我尝试了Dart，这是Google开发的一种编程语言，可以转换为JavaScript。当我意识到自己在开发游戏而不是“关于我”页面时，我终止了该项目。

稍后，我发现了，这是一个用于创建交互式故事的开源工具。它使我想起了我小时候喜欢的游戏本。在Twine中创建相互关联的文本非常容易，并且非常适合我想要的类似于采访的格式。因为Twine直接发布为HTML，所以您可以用它做很多有趣的事情-包括创建和或在博客或网站上发布故事。

早期的斗争

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

WordPress和Twine说：“不行。”

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

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

不。

我从调查中休息了一下。我刚刚通过FTP上传了“关于我”麻线的故事，并从我的网站菜单中链接了该故事。人们可以访问它并与该故事进行交互，但是，没有菜单，并且感觉不像是我的网站的一部分。我为自己做了一个陷阱。这让我意识到我真的很希望我的“关于我”直接出现在我的网站上。

DIY嵌入

我对这个问题不屑一顾，并提出了。

有效。它不是完美的，但是有效。

但这并不完美。有没有更好的办法？肯定会有更好的方法……

这花了我几毛，但我设法获得了。

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

嵌入麻线之路

突然，一个主意！如果人们可以使用WordPress插件而不是按照我的教程怎么办？

他们只需要给插件一个Twine的故事，其余的工作就可以解决。轻松自如。无需复制粘贴任何JavaScript代码。

那不是光荣的吗？！

我不知道WordPress插件如何工作。我只知道它们是用PHP编写的。不久前，我从事PHP开发人员的兼职工作，而且我还记得一些基础知识。

容器和WordPress

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

过去，我一直使用，但是我想尝试一会儿容器。

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

是的。

我不记得我停下，移走并重建了容器多少次。我必须使用命令行。而且文件权限很麻烦。

好家伙！这就像在玩一个您喜欢玩的游戏，尽管这会让您非常生气。这具有挑战性，但很有意义。

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

编写源代码

测试一下

重复

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

使用Git可以避免意外删除整个代码库。我使用作为我的Git用户界面。最初，我用编写代码，但是当我将代码分成多个文件时，我切换到了。对于极客来说，它是一个很棒的编辑器。使用它就像代码自己编写。

中场休息

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

我想要一个交互式的“关于我”页面

我在Twine中创作了一个“关于我”的故事

Twine导出网页（作为包含JavaScriptHTML文件）

WP插件易于制作

容器很棒

嵌入麻线诞生

我想要一种将Twine故事嵌入WordPress的简单方法。因此，我使用了软件开发的能力，无所事事地使用了容器，编写了一些PHP代码，并将结果发布为一个名为的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            
     
          
     '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'      
     )      
     ;