如何创建WordPress文章格式

如何创建WordPress文章格式

自定义文章格式是 WordPress 3.1 版本首次引入的一项功能。从根本上说,文章格式是一种不同的文章分组方式,允许您定义所发布的文章内容类型。一旦按照格式对文章进行了分组,您就可以选择将文章排列在一起、为文章设计不同的样式或根据文章格式来组织文章。

WordPress 允许您从一组列表中切换不同的文章格式。您不必使用所有格式,只需选择最适合您网站的格式即可。目前,这个列表包括:

  • 日志:类似于快速笔记。用于快速更新或自定义状态等文章。
  • 图库:包含图片库的文章。
  • 图片:单张图片,而非图库。
  • 视频:包含一个或多个视频的文章。WordPress codex 还指出,单个 URL 可能表示视频的来源,而不是嵌入式视频。
  • 音频:音频文件或播放列表。
  • 链接:指向外部网站的简单链接。
  • 引用:引用的文本块,通常是引用的文本块: 引用的文本块,通常注明引用作者。
  • 状态:与旁白类似,但更多是简单的单行状态。
  • 聊天:完整的聊天记录。

显然,这些描述都是指导原则,您可以根据自己的需要调整文章格式。如果你正在运营一个博客,那么你很可能有一些符合这些类别的特殊文章,你希望这些文章看起来与众不同,或者以一种独特的方式布局。在本文中,我们将介绍如何设置文章格式来实现这一目的,以及一些开始使用它们的想法。

设置文章格式

在主题中添加文章格式非常简单,只需在 WordPress 中添加一个功能,列出您想使用的文章格式即可。许多主题已经预装了文章格式。不过,最好还是熟悉一下它们的设置方式。

Fable主题中的视频文章格式示例

Fable主题中的视频文章格式示例

在本教程中,我将使用 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图标

首先要做的是在子主题中创建一个图片文件夹,然后将上面的链接图片保存为 “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( '/<a\s[^>]*?href=[\'"](.+?)[\'"]/is', get_the_content(), $matches ) )
        return false;
 
    return esc_url_raw( $matches[1] );
}

该功能只需对文章内容进行排序,然后搜索 a href= 标记。然后,它会从其中提取 URL 并返回给你。我们将在下一步中使用它。

设置我们的链接模板

接下来,我们需要为链接文章格式创建模板。为此,我们必须在子主题文件夹中创建一个名为 “content-link.php “的文件。该文件将接收任何文章格式为 “链接 “的文章,并使用该文件来呈现其内容,而不是使用默认模板。现在,这个模板是空白的,所以还不能做什么。让我们添加代码。

<article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>>
    <div class="container clearfix">
        <header class="entry-title">
        <?php if ( is_single() ) { ?>
            <h1><?php the_title(); ?></h1>
        <?php } else { ?>
        <?php $myLink = get_my_url(); ?>
            <h2>
                <a href="<?php echo $myLink; ?>"><?php echo the_title(); ?></a>
            </h2>
            <p>This is an external link and will take you to a new page.</p>
        <?php } ?>
 
            <?php et_fable_post_meta(); ?>
        </header>
    </div> <!-- .container -->
 
    <?php if ( is_single() ) : ?>
        <?php get_template_part( 'includes/share', get_post_format() ); ?>
    <?php endif; ?>
</article> <!-- .entry-->

这里发生了很多事情,所以我将一点一点地介绍这段代码,以便你能看到它是如何设置的。

<article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>>
    <div class="container clearfix">
        <header class="entry-title">

这只是开始 HTML 结构的一些基本代码。我们正在添加 post_class 函数,以获得适当的类(包括 .format-link)以及容器和标题元素。这些代码直接取自默认模板,也就是我主主题文件夹中的 “content.php” 文件。您可以随意编辑这部分内容,使其与您的主题相匹配。

<?php if ( is_single() ) { ?>
    <h1><?php the_title(); ?></h1>

本节使用 “is_single” 条件标记来检查我们是否在单帖页面上。如果是,我们就用默认的 h1 标签显示标题。当然,用户不应该访问这个页面,因为我们是从它链接出去的,但这是一个很好的后备方案。

<?php } else { ?>
        <?php $myLink = get_my_url(); ?>
            <h2>
                <a href="<?php echo $myLink; ?>"><?php echo the_title(); ?></a>
            </h2>
            <p>This is an external link and will take you to a new page.</p>
        <?php } ?>

这里才是真正神奇的地方。我们使用之前创建的 get_my_url 函数,将文章中的第一个链接存储到 $myLink 变量中。然后,在 h2 标签中,我们在 a 元素中呼应出该链接。这样,链接格式就不是链接到文章,而是链接到文章的第一个外部链接(在我们的例子中是 https://www.elegantthemes.com)。

接下来,我们只需添加标题作为链接文本。请记住,我们在 CSS 中添加了链接图标,它会自动添加到每个标题之前。最后,我们将添加一段文字,告诉用户他们将被引导到一个新页面。

 <?php et_fable_post_meta(); ?>
        </header>
    </div> <!-- .container -->
 
    <?php if ( is_single() ) : ?>
        <?php get_template_part( 'includes/share', get_post_format() ); ?>
    <?php endif; ?>
</article> <!-- .entry-->

我们将使用默认模板中的相同标记来结束我们的文章,以确保文章在单个页面上的渲染效果与正常情况相同,并且我们的所有 HTML 元素都是封闭的。

最后,我们将在主页上以不同的外观显示链接文章。

以不同的外观显示链接文章

当然,这只是开始。文章格式模板可以做很多事情,根据文章格式编辑和修改文章输出,从而实现全方位的内容。如果您有兴趣进一步了解其工作原理,我建议您深入了解内容模板,看看它们是如何工作的,或者访问 WordPress codex 中关于文章格式的条目。

我要与您分享的最后一个技巧是如何根据文章格式来组织您的文章。WordPress 自带一个方便的函数 get_post_format_link,可以让你链接到只包含特定文章格式的页面。要使用它,只需在任何模板文件中使用该函数即可。

<?php echo esc_url( get_post_format_link( 'aside' ) ); ?>

这将提供一个指向 “日志” 文章列表的链接。换掉文章格式的名称,以匹配链接到的文章格式。这在导航或将文章分组时非常有用。如果你的博客大量使用文章格式,这将是组织内容的好方法。

小结

目前,关于文章格式的讨论很多,它们的未来也有点悬而未决。但如果你运行的是一个内容驱动型博客,它们可能是一个非常有用的工具,可以为你的文章增加一些可靠的额外功能。Elegant Themes 主题有很多文章格式,你可以探索几乎所有的文章格式,了解它们是如何工作的。最好的入门方式就是直接进入!

评论留言