自定义文章格式是 WordPress 3.1 版本首次引入的一项功能。从根本上说,文章格式是一种不同的文章分组方式,允许您定义所发布的文章内容类型。一旦按照格式对文章进行了分组,您就可以选择将文章排列在一起、为文章设计不同的样式或根据文章格式来组织文章。
WordPress 允许您从一组列表中切换不同的文章格式。您不必使用所有格式,只需选择最适合您网站的格式即可。目前,这个列表包括:
- 日志:类似于快速笔记。用于快速更新或自定义状态等文章。
- 图库:包含图片库的文章。
- 图片:单张图片,而非图库。
- 视频:包含一个或多个视频的文章。WordPress codex 还指出,单个 URL 可能表示视频的来源,而不是嵌入式视频。
- 音频:音频文件或播放列表。
- 链接:指向外部网站的简单链接。
- 引用:引用的文本块,通常是引用的文本块: 引用的文本块,通常注明引用作者。
- 状态:与旁白类似,但更多是简单的单行状态。
- 聊天:完整的聊天记录。
显然,这些描述都是指导原则,您可以根据自己的需要调整文章格式。如果你正在运营一个博客,那么你很可能有一些符合这些类别的特殊文章,你希望这些文章看起来与众不同,或者以一种独特的方式布局。在本文中,我们将介绍如何设置文章格式来实现这一目的,以及一些开始使用它们的想法。
- 设置文章格式
- 样式化文章格式
- 根据文章格式过滤内容
- 固定链接
- 小结
设置文章格式
在主题中添加文章格式非常简单,只需在 WordPress 中添加一个功能,列出您想使用的文章格式即可。许多主题已经预装了文章格式。不过,最好还是熟悉一下它们的设置方式。
在本教程中,我将使用 Fable 主题,该主题包含几种文章格式: 图库、引用和视频。不过,对于我的博客来说,这些还不够。我想再增加几种。首先要做的是为 Fable 创建一个子主题,只需一个基本的 style.css 文件。使用子主题可以确保未来对主题的更新保持不变,不过我们的所有自定义设置都会覆盖主题的默认设置。
值得注意的是,默认情况下,文章格式会添加到 “文章 “文章类型中,但也可以通过另一行代码添加到自定义文章类型中。
现在,我们只需在主题中添加一些文章格式。如果还没有,请在子主题目录下创建一个 “functions.php “文件,并添加以下代码块。
function add_post_formats() { add_theme_support( 'post-formats', array( 'gallery', 'quote', 'video', 'aside', 'image', 'link' ) ); } add_action( 'after_setup_theme', 'add_post_formats', 20 );
在这里,我们使用 add_theme_support 函数来包含我们的文章格式。正如我提到的,我们的主题已经包含了图库、引用和视频。不过,我们将用自己的功能覆盖该功能,因此如果想保留这些格式,就必须确保包含它们。您可以从上面的列表中添加任何您想要的文章格式,因此请选择最适合您博客的格式。
激活子主题后,您可以访问 WordPress 管理并创建一个新文章。你会看到右侧边栏列出了六种文章格式。选择其中任何一种,就可以将文章改为特定的文章格式,或者直接保留为 “标准 “格式。在我们继续之前,我建议您为每种文章格式添加几个包含相关内容(图库、嵌入式视频等)的虚拟文章,这样您就可以看到文章格式的实际效果。
您可以在文章编辑器中从文章格式列表中进行选择
好了,我们已经设置了自定义文章格式。现在,是时候看看我们能用它们做些什么了。
样式化文章格式
开始使用文章格式的最简单方法就是使用 CSS 为每种格式设计不同的样式。默认情况下,使用 post_class 函数的主题(包括 Elegant Themes 的任何主题)会为每篇文章输出一个特殊的 CSS 类,指定文章格式。该类的结构为 .format-(name)。因此,视频文章的类为:
.format-video
这些类同时包含在索引页面和单个文章页面中,可用于在任一位置添加独特的样式。让我们从简单的开始。
我正在使用的 Fable 主题已经为引用文章设置了一个特殊的结构,即单个引用加粗并置于引号内。但我想同时更改所有引用文章的背景颜色,以便更加突出它们。为此,我打开了子主题的 “style.css “文件,并添加了以下内容:
.format-quote { background: #FFAADD !important; color: white; }
这将为任何指定为 “引用” 格式的文章添加粉色背景。它还会将文字颜色更改为白色。我确保添加了 “!important”
标记,以覆盖主题的默认设置。
当然,这种样式适用于所有情况下的文章,包括单篇文章、页面和索引页面。如果我想让这种样式只在文章被列在主页上时才应用,我们只需添加一点特殊性。这一次,我只打算在文章被列在主页上时应用粉色背景。我还将用 CSS 删除文章的标题,因此只保留文章内容。
.home .format-quote { background: #FFAADD !important; color: white; } .home .format-quote .entry-title { display: none; }
我们的完整引用,粉色背景,无标题
CSS 可用于根据格式改变内容。例如,Fable 主题就为图库添加了特殊样式,使其显示为六边形面板。
我为寓言主题添加的格式之一是旁白,因此目前还没有独特的 CSS。为了让旁白文章看起来更像状态,我想移除 Fable 主题添加的默认下拉菜单,并添加我自己的文字效果。
.home .format-aside .entry-content > p:first-child:first-letter { display: inline; float: none; margin: 0; font-size: inherit; } .home .format-aside .entry-content p { font-style: italic; font-size: 36px; color: #666; text-shadow: 2px 2px #E7E1E1; }
这样,文本的样式就包括斜体、更大的字体大小和文本阴影,同时去掉了下拉菜单。同样,这只适用于主页,但你也可以简单地移除”.home”,使其也适用于单个页面。
只需使用 CSS 就能定制很多文章格式。我建议大家浏览本网站列出的任何主题,从中获得一些灵感。
根据文章格式过滤内容
只需使用 CSS 样式,就能让文章格式为你所用。但如果你想要更多控制权,也可以直接编辑模板,修改它们的输出。大多数主题(如 Fable 或 Divi 主题)都会根据文章格式设置显示自定义模板。关键代码通常位于文章模板的循环中(如 index.php 或 single.php)。
get_template_part( 'content', get_post_format() );
您无需添加此代码,Elegant Themes 主题和大多数专业主题都默认提供了此代码。
Get_template_part 可从特定的 PHP 文件中提取模板,并可根据文章格式进行修改。因此,如果你想为旁白格式创建一个特殊模板,只需创建一个 content-aside.php 文件,然后在其中开始编辑循环内容即可。
例如,Fable 主题中的 “画廊”(Gallery)文章类型将图片排列在一个网格上,并内置了对花式框弹出窗口的支持。这是在 “content-gallery.php “文件中完成的。
如果你选对了主题,很多工作都会为你完成,但添加一些额外的功能也很有用。例如,我在第一步中为 Fable 主题添加了 “链接 “格式。我的链接文章非常简单,只包含一个标题和一个链接。
我真正想做的是调出这个 URL,当文章在我的主页上列出时,将我的标题直接链接到一个外部页面,而不是强迫用户访问单个文章,然后再点击链接。这超出了 CSS 的范围,需要使用模板。
为样式做好准备
我们需要使用一些自定义 CSS,这样就能稍微突出链接文章,确保用户知道他们正被引导离开网站。我想确保文章标题的颜色与网站上其他链接的颜色一致,并稍微改变一下背景。我还想在标题前使用一个链接图标。
首先要做的是在子主题中创建一个图片文件夹,然后将上面的链接图片保存为 “link.png”。接下来,我们将添加一些 CSS,确保我们的内容看起来独一无二。
.home .format-link { background: #eee !important; } .home .format-link .entry-title h2 { color: #6ba7a5; } .home .format-link .entry-title h2:before { display: inline-block; content: " "; background: url(images/link.png); width: 75px; height: 56px; } .home .format-link .entry-title p { text-align: center; }
在这里,我们要编辑链接文章的背景和文本颜色。然后,我们使用 :before 伪选择器在文章标题前添加链接图标。如果还不清楚这是干什么的,没关系。我们稍后会讲到。
添加链接抓取功能
为了将我们的文章直接链接到外部链接,我们需要创建一个函数,从文章内容中抓取第一个链接,并返回 URL 供我们使用。然后,我们就可以在文章格式模板中使用该 URL,将标题直接链接到外部页面。
打开子主题文件夹下的 “functions.php” 文件,添加此函数:
function get_my_url() { if ( ! preg_match( '/]*?href=['"](.+?)['"]/is', get_the_content(), $matches ) ) return false; return esc_url_raw( $matches[1] ); }
该功能只需对文章内容进行排序,然后搜索 a href= 标记。然后,它会从其中提取 URL 并返回给你。我们将在下一步中使用它。
设置我们的链接模板
接下来,我们需要为链接文章格式创建模板。为此,我们必须在子主题文件夹中创建一个名为 “content-link.php “的文件。该文件将接收任何文章格式为 “链接 “的文章,并使用该文件来呈现其内容,而不是使用默认模板。现在,这个模板是空白的,所以还不能做什么。让我们添加代码。
>
This is an external link and will take you to a new page.
这里发生了很多事情,所以我将一点一点地介绍这段代码,以便你能看到它是如何设置的。
>这只是开始 HTML 结构的一些基本代码。我们正在添加 post_class 函数,以获得适当的类(包括 .format-link)以及容器和标题元素。这些代码直接取自默认模板,也就是我主主题文件夹中的 “content.php” 文件。您可以随意编辑这部分内容,使其与您的主题相匹配。
本节使用 “is_single” 条件标记来检查我们是否在单帖页面上。如果是,我们就用默认的 h1 标签显示标题。当然,用户不应该访问这个页面,因为我们是从它链接出去的,但这是一个很好的后备方案。
This is an external link and will take you to a new page.
这里才是真正神奇的地方。我们使用之前创建的 get_my_url 函数,将文章中的第一个链接存储到 $myLink 变量中。然后,在 h2 标签中,我们在 a 元素中呼应出该链接。这样,链接格式就不是链接到文章,而是链接到文章的第一个外部链接(在我们的例子中是 https://www.elegantthemes.com)。
接下来,我们只需添加标题作为链接文本。请记住,我们在 CSS 中添加了链接图标,它会自动添加到每个标题之前。最后,我们将添加一段文字,告诉用户他们将被引导到一个新页面。
我们将使用默认模板中的相同标记来结束我们的文章,以确保文章在单个页面上的渲染效果与正常情况相同,并且我们的所有 HTML 元素都是封闭的。
最后,我们将在主页上以不同的外观显示链接文章。
当然,这只是开始。文章格式模板可以做很多事情,根据文章格式编辑和修改文章输出,从而实现全方位的内容。如果您有兴趣进一步了解其工作原理,我建议您深入了解内容模板,看看它们是如何工作的,或者访问 WordPress codex 中关于文章格式的条目。
固定链接
我要与您分享的最后一个技巧是如何根据文章格式来组织您的文章。WordPress 自带一个方便的函数 get_post_format_link,可以让你链接到只包含特定文章格式的页面。要使用它,只需在任何模板文件中使用该函数即可。
这将提供一个指向 “日志” 文章列表的链接。换掉文章格式的名称,以匹配链接到的文章格式。这在导航或将文章分组时非常有用。如果你的博客大量使用文章格式,这将是组织内容的好方法。
小结
目前,关于文章格式的讨论很多,它们的未来也有点悬而未决。但如果你运行的是一个内容驱动型博客,它们可能是一个非常有用的工具,可以为你的文章增加一些可靠的额外功能。Elegant Themes 主题有很多文章格式,你可以探索几乎所有的文章格式,了解它们是如何工作的。最好的入门方式就是直接进入!