具有WordPress的自适应内容

Anna Ladoshkina. 经过 Anna Ladoshkina.  |  2013年4月09日

响应设计不仅挑战我们的工具和网络设计和开发方法,而且旨在审查我们的规划和管理内容的方式。新工作流程需要正确的工具。在第一次思考时,这开辟了全新的内容管理系统(CMS)和出版平台的机会(我们可能会在不久的将来看到很多)。但是,任何从一个CMS迁移到另一个CMS的人都非常了解过程并不是无痛。那么,我们可以调整熟悉和流行的CM,如WordPress,帮助我们创建和管理自适应内容吗?

首先,我们需要直截了当。适应性内容是什么意思,为什么我们在响应设计时代需要它?我们还将讨论WordPress的功能和工具,可以帮助我们创建一个未来友好的出版平台。我们的目标是高目标:在不同的设备和不同观看条件下可以灵活地呈现内容。让我们看看我们可以接近它。

 

自适应内容,以及为什么我们需要它

在她最近的书中 移动内容策略,UX和内容策略专家 凯伦·麦格伦 给出了对为什么我们需要新的内容管理方法的详细和良好的解释。我们进一步发展响应位 - 我们正在创建可以在不同平台上发布并访问各种设备的内容。如果明天冰箱成为某人的主要工具,那么何时才能消耗信息?您的网站是否准备好了这样的用例?

响应设计大多出于需要提供充分体验的移动用户。虽然,但“移动”只是图片的一部分。如果我们想到未来,我们可以轻松期待我们的内容将出现的其他新平台和设备:手表,冰箱,眼镜,谈话机器人 - 任何人都可以想象。这是否意味着我们需要创建我们网站的“谈话机器人”版本?那将是疯狂的。那么,解决方案是什么?该解决方案是自适应内容 - 内容,一旦创建,可以在不同的情况和方案中重用。听起来很棒,不是吗?我们如何实现它?

1.结构化内容

我们的内容不再包括“页面”。它由对象组成,每个对象应该被认为是一包预定义元素。对于每个结构组件 - 一个块 - 设计系统将算出它应该如何在所有方案中显示。块可以以不同用例的替代媒体或格式呈现。例如,如果我们在我们的内容对象中有视频,我们可以具有描述性文本或用于无法查看视频的方案的转录程序。或者对象的注释可以根据场景而变化 - 例如在社交媒体中共享或在搜索结果中包含或在站点上引入时。

2.呈现无关的内容

我们必须采取下一步迈向将内容分开演示文稿。实际上,这是重新设计的重要原则和网络标准的基石。但我们必须进一步和释放自己的Wysiwyg心态。 “你所看到的东西”不是“你的用户看到什么”了。这是一个危险的幻觉。我们不应该用斜体标记我们的文本,或将图像插入“页面内容”字段中作为HTML。我们应该仅包括对内容对象的引用,让我们的设计系统决定如何呈现该对象。

3.元数据

我们卸载到程序工具的工作越多(毕竟,我们确实希望根据预定义的方案,右图案自动在各种平台上呈现我们的内容?),我们应该向这些系统提供关于内容的这些系统的信息。例如,在过去,我们可以用简单的英语写,文本的作者是John Doe,并以大胆标记他的名字 - 现在我们不能。我们在CMS中需要一个单独的字段来输入如何以不同方案呈现它的名称和一组规则。

4.可重复使用的内容

我们需要一个内容的单一来源和一种基于场景的发布系统,可以根据其环境(设备,屏幕分辨率,连接速度等)来决定如何向用户呈现所请求的内容。

所有这些方面都可以用WordPress实现吗? MacGrane归咎于WordPress和其他博客软件,不支持发布者作为自适应内容的工具。具体来说,我们仍然在WordPress中拥有WYSIWYG编辑器,单个文本区域进入我们的“帖子”。不幸的是,这是使用普通箱式歌曲版WordPress的设计师面临的情况。幸运的是,WordPress有点不仅仅是“博客软件”。它已经发展成为一个开发平台,该框架,开发人员可以提供具有真正现代和未来的经验的客户。

 

将WordPress转换为自适应发布平台

让我们看看我们作为开发人员的哪些工具,以及如何实现它们以将WordPress转换为客户端的自适应发布平台。

WordPress启动其在作为引入定制帖子类型和习惯分类时成为全方位的CMS的运动。与这些结合使用的另一个强大功能是所谓的自定义字段。这个简单的名字是指GUI;实际上,这些自定义字段表示可以与WordPress中的任何对象相关联的元数据集。 WordPress使我们能够为元数据创建高度可自定义的UI和用于存储和访问它的灵活API。

为什么这有用? 使用自定义帖子类型,我们不再锁定到“页面”概念中。我们可以为我们需要的任何对象创建一个帖子类型(例如新闻,活动,合作伙伴 - 无论我们喜欢什么),我们可以通过这组元数据定义对象的结构。我们还可以创建一个单独的UI来管理元数据。所有这一切都使我们的内容更多结构。一旦WordPress允许我们创建任何类型的元数据,我们就可以使用它来存储内置内容块(如标题和描述)的替代方案。 (例如,我们可能会看到SEO插件,允许为每个内容对象唯一的SEO目标标题和描述。)

它的限度是多少? WordPress是批评了很多,以始终提供存储元数据的API。具体来说,我们可以为帖子(和自定义帖子类型)和用户提供元数据,但不适用于分类物(a 需要插件 为了那个原因)。在帖子的编辑屏幕中创建自定义UI并不像它一样简单。缺少预定义的函数和标准(这就是为什么不同插件不同的原因不同,让我们混乱,而不是一个系统)。但最近的变化有助于统一和优化WordPress仪表板给我们希望。

WordPress的另一个很棒的特征是它允许在一页上允许富文本编辑器的若干实例。这可以用它来实现  WP_EDITOR. 函数不仅创建了相应的TextArea标记,还可以为其和媒体选择按钮分配富编辑的功能。

为什么这有用? 使用此功能,我们可以根据对象的结构将单个内容字段打入几个。在这样做时,我们将一个结构组件添加到我们的物体中。此外,每个可编辑区域都有一个统一和熟悉的GUI,它将帮助编辑器轻松将必要的标记插入相应的字段,包括短路。

它的限度是多少? 我们应该将数据存储为如元数据,这意味着更多的数据库调用等。因此,这种方法需要进一步关注网站的优化,例如缓存。没有内置的功能在模板中表示此数据,因此我们需要创建它。

通过这种方法,熟悉的后编辑屏幕将完全转换:

上面讨论的WordPress工具使我们能够通过定义对象并用存储内容的各个部分和元数据的一组字段替换单个内容来使我们的内容更加结构。

现在让我们看看我们必须分开意义和演示的工具。实际上,只有两个基本规则:

  1. 摆脱视觉编辑器。
  2. 尽可能避免在内容字段中使用普通的HTML。

第一个规则很容易遵循。使用简单的过滤器,我们可以删除所有用户的可视编辑器。

add_filter('user_can_richedit', '__return_false');

The second rule is much more difficult to follow. Certainly, we are not going to hunt for every HTML tag in our text — the ones that represent truly semantic elements are absolutely OK. But when we start inserting <div> into a content object, we get into trouble. As we know, a column in one scenario might be something completely different in another.

其他 巨大的 从WordPress插入丰富的媒体的方式出现问题 - 特别是图像 - 进入内容字段。目前,它打印普通的HTML,该HTML硬通到图像的链接,其大小和包装标记。这是适应性方法最糟糕的情况。如果我们需要针对特定​​用例的图像的另一个变体怎么办?如果我们已将媒体库移动到另一个域名,该怎么办?如果我们改变了一个对象的设计,那么,需要在另一个尺寸中的图像?如果我们正在实施一个响应的技术,那么要求我们为一个图像指定几个来源的响应技术?如果我们没有改变WordPress'默认行为,所有这些用例都是绝对不可能的。

然而,WordPress几乎所有的一切都可以移动到一个自适应方法:

  • Every media item in the media library has its own entry in the database that stores all relevant information, including the data about the source file. But WordPress doesn’t store an absolute link to a file; rather, it stores the file’s name and the path to the uploads folder separately, so that the full path can be built dynamically.
  • WordPress具有短代码功能,允许您在内容字段内引用任何标记,并在前端打印内容时动态创建实际标记。

将其全部放在一起,我们可以代表具有包含媒体库中项目ID的短码的介质的标记。一个非常基本的例子看起来像这样:

add_shortcode('frl_image', 'frl_image_screen');
function frl_image_screen($atts, $content = ''){

    extract(shortcode_atts(array('id' => 0, 'link' => 'file', 'size' => 'medium'), $atts ));

    $out = '';              
    $id = intval($id);
    if($id == 0)
        return ''; // no attachment

    $out = "<figure class='image {$size}'>";
    $args = array(
        'class' => 'frl-image',
        'title' => ''
    );

    $img = wp_get_attachment_image($id, $size, false, $args);

    /* linked image */
    if($link == 'none'){ //no link      
        $out .= $img;

    } elseif($link == 'file') { //link to file
        $url = wp_get_attachment_url($id);  
        $out .= "<a href='{$url}'>{$img}</a>";

    } else { //custom url
        $url = esc_attr($link);     
        $out .= "<a href='{$url}'>{$img}</a>";
    }

    if(!empty($content))
        $out .= "<figcaption>{$content}</figcaption>";

    $out .= "</figure>";

    return $out;
}

 

结论

为什么这有用?它不会强迫我们解决媒体(或其他内容元素)的标记。通过存储对象的引用,我们将关于实际标记的决定转移到设计系统,而不是内容的作者。

它的限度是多少?核心WordPress不支持这种方法,因此我们将不得不改变WordPress的“默认行为来实现这一目标。

目前,短路几乎单手中单独的分隔结构从展示中的展示中。我们必须通过创建有意义的短路系统来负责任地使用它们,以便我们的作者和内容管理人员能够学习和使用它。

那么可重复使用的内容如何,​​即针对不同用例的内容? WordPress'模板系统支持子主题,允许我们动态切换主题并将模板基于层次结构为内容对象分配,这是内容重用的良好基础。使用一个中央内容引擎,我们可以根据用户的需求创建不同的设计方案并在它们之间切换。

利用所有这些机会的“最佳”方式在我们眼前展开。目前,我们有响应式WordPress主题和仅移动WordPress主题的示例;而且,一般来说,没有什么能阻止我们对谈话机器人的WordPress主题。

 

您希望对主题的更详细的洞察力吗?您是否在项目中使用这些(或其他)工具中的任何一个以使内容更适应?让我们在评论中知道。 

特色图片/缩略图, 自适应形象 via Shutterstock.