写故事而不是代码？使用画布讲故事的五个步骤

如果今年对我们没有任何影响，那么就说明叙事不仅仅是一种新兴趋势。老实说，那么永恒的事物怎么会成为一种潮流呢？无论如何，越来越多的公司将讲故事作为其营销体系的一部分。

为什么不呢？它具有吸引人的视觉效果，互动性，让我们面对现实吧，平均用户的注意力范围……嗯……我在说什么？哦，注意范围！哈哈！就是这样我们必须让人们保持兴趣和娱乐。大公司正在迅速解决这一问题，长篇文章已经被证明具有有效的投资回报率。

那么我们如何使用WooThemes和WordPress做到这一点呢？实际上，借助Aesop Story Engine套件，这是一套开源工具，可以使任何主题都包含交互式讲故事，这实际上很容易。在这个简短的教程中，我们将向您展示如何仅用一点肘油脂就能将Aesop Story Engine实施到Canvas中。

步骤1：安装并激活Aesop Story引擎

这是简单的部分！在插件中搜索Aesop，然后安装并激活Aesop Story Engine。如果您希望在多站点安装的每个子站点上都可以使用它，那么只需通过网络将其激活即可。激活插件后，将在编辑器正上方的发布屏幕上的“添加媒体”按钮旁边添加一个“添加组件”按钮。单击此按钮将打开一个模态，其中显示了组件及其设置。单击即可完成添加和更新。超级简单！

首先，向帖子中添加一个视差组件，然后发布。查看网站后，这就是我们得到的。

嗯，不是全角。怎么会？那么几乎所有的WordPress主题都会在网站的“容器”上设置宽度。这只是标准做法，因此其中的所有内容都不会“超出范围”。借助Aesop Story Engine组件，他们喜欢全宽显示。那么我们如何在Canvas中实现这一目标呢？撒上一些CSS！

第2步：破坏容器

现在该打破东西了！我们需要打破将东西限制在一定宽度的容器。幸运的是，借助WordPress，我们可以有选择地执行此操作，就像仅在pos上一样。我们这样做是因为，当我们打破宽度时，所有的动物都会奔跑而没有围栏。因此，我们需要有选择地限制我们想要的内容，并让其他所有内容自由运行。

这是用于此的CSS。注意：请记住，这是特定于Canvas的。其他WordPress主题可能会使用不同的ID和类名。添加此内容的最快方法是安装“简单自定义CSS”，然后将意大利面**到适当位置，或者，如果让您喜欢的话，当然可以构建一个子主题。

.aesop-on-canvas.single-post #wrapper，

.aesop-on-canvas.single-post.colpost-full，

.aesop-on-canvas.single-post #main article .scroll-nav__section {

最大宽度：100％;

padding-left：0;

padding-right：0;

}

.aesop-content，

.aesop-on-canvas.single-post#header.col-full，

.aesop-on-canvas.single-post#navigation.col-full，

.aesop-on-canvas.single-post#post-author，

.aesop-on-canvas。single-post #footer.col-full,

.aesop-on-canvas.single-post #footer-widgets,

.aesop-on-canvas.single-post article header,

.aesop-on-canvas.single-post article .post-meta,

.aesop-on-canvas.single-post article .post-utility,

.aesop-on-canvas.single-post .post-entries,

.aesop-on-canvas.single-post .entry > *:not(.aesop-component),

.aesop-on-canvas.single-post .scroll-nav__section > *:not(.aesop-component){

width: 100%;

max-width: 960px;

margin-left: auto;

margin-right: auto;

}

So again, what we’re doing is breaking the container width then resetting it back onto only the paragraph item elements and things like lists. And only on posts. This means that everything besides the content will be full width. We call this approach “Content First,” where we are creating an infrastructure around our content instead of confining it. There is only one caveat to this; if a 3rd party plugin adds something to a post, it may be full width as well. The best thing to do in this case is to create a uni您可以随意应用通用CSS类来限制事物。

保存更改，激活代码段，然后刷新页面。如果一切都按计划进行，那么您的视差分量现在将变为全角！！

随后，所有的Aesop组件现在都将变为全角。所以，您已经准备好了！！好吧，差不多。我们还有两件事要做，那就是为章节和时间轴组件集成做准备，并添加扩展样式支持。

步骤3：章节和时间表整合

“章节”组件将帖子分为几章，在使用滑出章节导航菜单之间会自动滚动这些章节。这是通过扫描帖子中的章节组件来实现的。在大多数情况下，此方法效果很好，但是由于我们无法预测将使用哪些标记主题，因此需要使用可用的Aesop Story Engine过滤器过滤Chapter组件搜索的类。

添加这段代码的最快方法是安装一个名为Code Snippets的插件。这保存了代码t您可以将函数粘贴到帽子中。或者，也可以根据需要进一步创建子主题。

下载，安装和激活代码片段。创建一个代码段并将以下代码粘贴到位。

add_filter（'aesop_chapter_scroll_container'，'aesop_woo_chapter_scroll_container'）;

函数aesop_woo_chapter_scroll_container（$ class）{

$ class =‘.entry’;

返回$ class;

}

add_filter（'aesop_timeline_scroll_container'，'aesop_woo_timeline_scroll_container'）;

函数aesop_woo_timeline_scroll_container（$ class）{

$ class =‘.entry’;

返回$ class;

}

这些过滤器将类更改为Canvas用于其后置容器的.entry。它适用于“时间轴”组件以及几乎相同的组件，但适用于不同的目的。您的代码段中应仅包含上面的代码。如果有，请激活该代码段，然后创建一个帖子。如果没有，那就解决它！

现在让我们对其进行测试。获得大量文本，例如Fillerati的内容。加一些小题大作r组件。这很容易，单击“添加组件”，然后选择“章节”。向下滚动并添加背景图像和标题。然后插入。通过添加新的或克隆其中的内容来创建更多此类内容。完成后发布帖子。

当您查看帖子时，现在应该有一个滑出菜单，当您单击每个标题时，它将滚动到该故事的那个位置。那太棒了!!您可以**使用Aesop中的组件来构建一个一页站点。

好的，所以最后一步是一个简单的add_theme_support片段，以启用扩展CSS。

步骤4：添加扩展的CSS支持

早在Aesop首次发布的那一天，计划就是100％依靠主题以他们想要的方式对事物进行样式设计。我们很快了解到，“用户”多于“开发人员”，因此在过去的16个发行版中，我们一直在稳定地使之与之兼容，同时保持向后兼容。结果是一个简单的add_theme_support代码段，其中添加了其他CSS根据您指定的内容。我们需要将整个代码段粘贴到位，因为我们希望所有组件都具有完整的样式。

您可以将其粘贴到与先前创建的代码段相同的代码段中。

add_action（'after_setup_theme'，'aesop_woo_extended_styles'）;

函数aesop_woo_extended_styles（）{

add_theme_support（“ aesop-component-styles”，array（“ parallax”，“ image”，“ quote”，“ gallery”，“ content”，“ video”，“ audio”，“ collection”，“ chapter”，“ document” ”，“字符post”，“地图”，“时间轴”）））;

}

而已！所有的集成都已经完成，您将可以开始制作故事魔术。

步骤5：撰写故事

您的Canvas主题现在与Aesop Story Engine及其所有组件完全兼容。现在轮到您做点令人惊奇的事情了。完成后，请与我们分享！！我们喜欢看到别人在用这个工具做些什么，我们花了很多时间来完善和维护。

为了方便起见，我们将上述步骤变成了一个可以在WordP中激活的插件ress。目前，此功能仅与Canvas兼容，但我们很高兴根据要求扩展此功能，以容纳更多WooThemes。

在此处下载插件。

讲故事快乐！

–伊索队