英雄知识库——使用模板系统

已发表: 2016-01-11

如果您花费大量时间一遍又一遍地回答相同的支持问题,那么我们 HeroThemes 就有了答案……

注意:本文假设您知道如何安装 WordPress、插件,并且您有一些主题开发知识,包括父/子主题、HTML、CSS 以及对 PHP 的基本了解。

英雄知识库

我们的知识库插件提供了一种快速且易于设置的解决方案,可以在您的网站上创建自定义知识库。 立即为您的客户提供那些更常见问题的答案,并让您减少回答支持电话和电子邮件所花费的时间,这样您就可以转而跳过雏菊领域(或做任何您想做的事情)相反)并确保您拥有更满意的客户。

像大多数 WordPress 插件一样,初始安装再简单不过了。 只需通过仪表板将插件上传到您的插件目录并激活它。 知识库插件与大多数编码良好的主题无缝集成,因此,无论您使用的是完全定制的主题、我们的高级 HeroThemes 产品之一还是 WordPress 的默认主题,都没有区别。 您将在几分钟内轻松地将功能齐全的知识库集成到您的 WordPress 网站中。

如果您有一些主题开发知识并希望进一步定制插件,那么我们干净、开发人员友好的代码、可插入的功能和易于遵循的模板系统允许您进行高级定制。 本文将介绍使用模板系统自定义插件时可以做的一些很酷的事情。

我将简要概述:

  • 安装插件、常规设置和添加一些内容
  • 与 WordPress 4.4 提供的新 TwentySixteen 主题的基本集成
  • 高级集成:修改模板以进行进一步定制

入门

初始安装 WordPress 后,请确保您已安装并激活了 TwentySixteen 主题和知识库插件。

TwentySixteen 是 WordPress 4.4 附带的新默认主题。 如果在升级 WordPress 安装后,您没有在外观 > 主题下列出新主题,您可以从 WordPress.org 上的 TwentySixteen 主题页面下载它

知识库插件

就像 WordPress 本身一样,设置知识库插件非常简单。 激活插件后,您将自动进入“入门”屏幕,其中包含一些帮助您入门的基本技巧。 仪表板左侧的菜单中还有一个新的菜单项,称为知识库。

知识库的工作方式与 WordPress 使用的标准“帖子”帖子类型非常相似。 文章可以按类别组织,也可以按标签组织。 可以随时添加或删除类别,就像他们可以添加帖子一样,但是,为了帮助确保您的知识库尽可能有用,建议您在开始创建内容之前规划您的类别结构。

默认情况下,知识库文章按发布日期顺序显示,与标准帖子完全相同,但是,您可以在插件设置中更改此设置。

kb-blog1-设置

知识库附带了广泛的设置,可以自定义您的安装,而无需深入研究模板。

您可以保持原样,您的知识库将完美运行,但是,如果您想更改文章的排序方式、类别的显示方式、自定义实时搜索功能、启用对文章的投票和评论以及广泛的许多其他选项,您无需具备任何编码知识即可执行此操作。

创建内容

在开始对我们的知识库进行任何高级定制之前,您需要一些内容。 因此,您需要做的第一件事是创建一些文章。 安装了 TwentySixteen 主题后,您的添加新屏幕

kb-blog1-添加新屏幕
kb-blog1-add-new-options

如果您以前使用过 WordPress,这应该看起来很熟悉。 帖子标题、内容、发布、帖子格式、类别和标签框都相同。 事实上,唯一不同的领域是文章选项和投票选项

或者,您可以在开始时从入门屏幕安装默认内容。

与 TwentySixteen 集成

将知识库插件与 TwentySixteen 主题集成非常简单。 如果您已按照上述步骤操作,就是这样。 您可以将它留在那里,您将拥有一个漂亮的功能知识库,无需对其进行任何进一步的操作。 如果您不太了解代码或只是想要快速简单地设置一些东西,那就完美了。

但是……如果你想做更多呢?

对于主题开发人员来说,插件的真正好处是模板系统。

模板系统通过将要更改的模板文件从插件复制到主题文件夹中来工作。 WordPress 然后首先查看您的主题。 如果您的主题中有相关的模板文件,那么将使用该文件。 如果没有,插件文件夹中的后备模板将用于劫持the_content()函数并将知识库内容插入到标准page.php中。

插件或主题内的模板层次结构与标准 WordPress 模板层次结构非常相似,让您轻松搞定。

例如hkb-taxonomy-category.php将覆盖hkb-archive.php ,就像category-$slug.php覆盖标准archive.php一样。

kb-blog1-template-heirachy
订单模板的使用取决于显示的内容以及它们是否存在于您的主题中。 例如查看分类时,如果文件存在则使用hkb-taxonomy-category.php ,否则使用hkb-archive.php

如果您想了解更多关于 WordPress 模板层次结构的信息,您可以阅读开发人员手抄本。

自定义模板

默认情况下,使用 TwentySixteen 主题时,知识库部分将如下所示:

知识库内容页面和一篇文章
知识库内容页面和一篇文章

这很好,TwentySixteen 是一个风格非常漂亮的移动优先主题。 但是,由于页面模板的布局,与网站中的其他页面相比,知识库页面有很多死空间:

与标准博客文章相比,相同的知识库内容页面
与标准博客文章相比,相同的知识库内容页面

您不需要知识库页面上的所有这些空白,因此您需要做的是修改相关模板的 HTML 以将其删除。

不过,在开始之前,您需要为 TwentySixteen 创建一个子主题,以便在发布主题更新时不会丢失任何更改。 我已将我的文件夹命名为二十六-孩子。 有关子主题的更多信息可以在我们关于子主题的文章中找到。

设置好子主题后,您现在可以开始编辑模板了。 在二十六文件夹中创建一个新文件夹并将其命名为hkb-templates 。 然后,将要编辑的模板从插件文件夹复制到新创建的模板文件夹中。

要更改知识库存档页面,您需要编辑的模板是hkb-archive.php 。 复制完成后,在代码编辑器中打开它。 你应该看到:


<?php /** * Theme template for archive display */ ?>

<?php get_header(); ?>

<?php hkb_get_template_part('hkb-compat', 'archive'); ?>

<?php get_footer(); ?>

注意:因为插件中的模板使用 WordPress 的the_content()函数将知识库内容注入到页面中,所以页面的完整结构最初并未包含在模板中。 因为您要覆盖默认模板,所以您需要向页面添加额外的 HTML。

因此hkb-archive.php中的代码应更改为如下所示:

<?php /** * Theme template for archive display */ ?>
<?php get_header(); ?>

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php // Include the page content template. hkb_get_template_part('hkb-compat', 'archive'); ?>
</main><!-- .site-main -->

<?php get_sidebar( 'content-bottom' ); ?>
</div>

<!-- .content-area -->

<?php get_sidebar(); ?><?php get_footer(); ?>

注意:此模板中无需包含 while 循环

kb-blog1-知识库-unformat

保存文件并查看页面。 它现在应该看起来像这样:

这现在使用了二十六主题中标准page.php的布局,并从左侧删除了空白。 但是,它实际上也删除了所有插件样式,而是遵循主题的默认样式。

这是因为一旦您开始自定义主题,插件就会假定您想要自由编写自己的样式,因此不会加载样式表。 这在您构建完全定制的主题时非常有用,但是,如果您确实想保留现有样式,您可以将hkb-style.css中的样式复制并粘贴到子主题中的style.css中。 或者,如果您正在创建定制主题,您可以将样式表从插件文件夹复制到主题文件夹,然后使用以下代码行将其排入您的functions.php队列:


// Knowledge Base plugin styles
wp_enqueue_style( 'hkb-style', get_template_directory_uri() . '/css/hkb-style.css', array( 'twentysixteen-style' ), '20151217' );

注意:如果将此方法用于子主题,则需要使用get_stylesheet_directory_uri()而不是get_template_directory_uri() 。 这是因为get_stylesheet_directory_uri()将查看您的子主题的文件结构,而get_template_directory_uri()指向父主题文件夹。

如果您正在构建定制主题而不是使用子主题修改现有主题,那么我个人更喜欢将样式表分开并使用 enqueue 方法将样式正确地注入主题中。 这是因为 style.css 通常会变得非常大并且难以快速管理,将相关样式分开可以在您需要进一步编辑它们时轻松找到它们。 如果您使用像 SASS 这样的预处理器,则可以使用相同的组织,然后您可以@import新样式表,以便将其自动组合到style.css中,然后可以使用wp_enqueue_style()将其注入到您的主题中。

重新应用样式后,再次查看页面,您现在应该看到:

kb-blog1-知识库格式

页面现已重新格式化,左侧的死区已被删除,使所有内容看起来更加整洁,同时又不失主题的风格和设计。 如果您希望将此布局更改应用到任何其他页面模板,只需将相关模板复制到您的子主题中即可!

最后的想法

希望我已经展示了 Heroic Knowledge Base 插件的可定制性。 您无需了解任何代码即可开箱即用地做很多事情,但是,如果您确实想进一步自定义内容并且您了解 WordPress 代码标准和主题开发,则可以非常轻松地完成。