如何在WordPress中创建指南(内容集合)

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200美元免费信用额度!

博客文章可以是任何你想要的内容。你可以轻松地写一篇链接到网站上大量文章的文章。标题、摘要、链接……所有手工制作的HTML。可以称之为“指南”。我发现,它可能会受到读者的欢迎,尤其是在你链接到旧的常青内容时,这些内容在今天仍然相关且有用。

但是,假设您想以编程方式创建这些“指南”。这可能会使它们的创建速度更快、维护更容易,并让您对它们拥有良好的控制水平。让我们看看如何做到这一点。

CSS-Tricks上的指南

我写这篇文章是因为指南是我们刚刚在CSS-Tricks上开始做的事情。例如,我想制作一个指南,其中包含适合初学者阅读的内容,所以我制作了我们的CSS和HTML入门指南

它不是手工构建的,而是通过将各种内容以编程方式附加到我们专门为指南创建的自定义文章类型来构建的。

以编程方式将文章附加到文章

您知道如何将图像放入博客文章中吗?但在WordPress中,还有一个名为特色图像的概念,它是该文章的一个特定程序化附加图像。

该图像是以编程方式附加到此文章的。

在WordPress中启用此功能就像

add_theme_support('post-thumbnails', array('post', 'page', 'whatever'));

但我们正在讨论将文章与文章关联,而不是将图像关联到文章。WordPress中没有内置方法可以做到这一点,因此我们将求助于插件。

CMB2 及其伙伴

CMB2(即“自定义元框”的第二个版本)是一个免费的开源插件,用于添加更好的 UI 和自定义字段周围的功能。如果您熟悉高级自定义字段,它有点像那个,只不过我想它是完全免费的,而且模块化程度更高。

安装后,您现在可以安装(我想我们会称之为子插件?)让 CMB2 做一些事情。我们需要的插件是CMB2 附加文章字段,它具有将文章附加到文章(或实际上是文章类型附加到任何文章类型)的明确任务。

它在您为其激活的文章类型上为您提供了这个两列 UI

将任何内容从左侧移动到右侧,它现在就以编程方式附加了。这正是我们想要的。现在我们可以手动选择和手动排序任何类型的文章以附加到任何其他文章。

配置事项

在您看到上面的 UI 之前,您不仅需要安装并激活这两个插件,还需要告诉 CMB2 创建自定义元框并将其应用于您想要的文章类型。

在我们的例子中,我们的指南是一个自定义文章类型。启用它非常简单

register_post_type( 'guides',
  array(
    'labels'        => array(
      'name'          => __( 'Guides' ),
      'singular_name' => __( 'Guide' ),
      'add_new'       => __( 'Add Guide' ),
      'add_new_item'  => __( 'Add New Guide' ),
      'edit_item'     => __( 'Edit Guide' ),
    ),
    'public'      => true,
    'has_archive' => true,
    'rewrite'     => array( 'slug' => 'guides' ),
    'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt' )
  )
);

然后,我们将此新的自定义元框仅应用于该自定义文章类型(这样我们就不必在任何地方都看到它)

$cmb = new_cmb2_box( array(
  'id'            => 'guide_metabox',
  'title'         => __( 'The Guide Metabox', 'cmb2' ),
  'object_types'  => array( 'guides', ), // Post type
  'context'       => 'normal',
  'priority'      => 'high',
  'show_names'    => true, // Show field names on the left
  // 'cmb_styles' => false, // false to disable the CMB stylesheet
  // 'closed'     => true, // Keep the metabox closed by default
) );

// Regular text field
$cmb->add_field( array(
  'name'       => __( 'Things for the Guide', 'cmb2' ),
  'id'         => 'attached_cmb2_attached_posts',
  'type'       => 'custom_attached_posts',
  'show_on_cb' => 'cmb2_hide_if_no_cats',
  'options' => array(
    'show_thumbnails' => true, // Show thumbnails on the left
    'filter_boxes'    => true, // Show a text box for filtering the results
    'query_args'      => array(
      // 'posts_per_page' => 2,
      'post_type' => array('post', 'page')
    ), // override the get_posts args
  ),
) );

我们将所有这些代码很好地嵌套在一个功能插件中,而不是`functions.php`文件中,这样更改主题就不会影响此内容。

指南模板

现在,我们的指南存在一个自定义文章类型,将名为`single-guides.php`的文件放入我们的活动主题中就足以使其成为渲染`/guide/example/`等内容的文件。

在该文件中,我们会执行任何其他模板文件上执行的常规模板操作(例如`page.php`,还可以循环遍历我们附加的所有这些文章!

<?php

  $attached = get_post_meta(get_the_ID(), 'attached_cmb2_attached_posts', true);

  foreach ($attached as $attached_post) {
    $post = get_post($attached_post); ?>

  <?php include("parts/article-card.php"); ?>

<?php } ?>

总的来说,并没有那么复杂!

拥有某种机制来呈现像这样的常青内容感觉很棒。对于内容量巨大的网站来说,这可能是一个不小的挑战!


Rebekah Monson致敬,我从她那里剽窃了这个想法,她利用这个方法在The New Tropic上构建指南,例如这些社区指南