注册
WordPress开发

如何创建WordPress文章格式

WBOLT_COM
1.7k+
0

如何创建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 主题有很多文章格式，你可以探索几乎所有的文章格式，了解它们是如何工作的。最好的入门方式就是直接进入！

WordPress文章 文章格式 自定义文章
评论收藏微海报
分享
分享到

相关的

评论留言

马上学习

文章目录

  • 设置文章格式
  • 样式化文章格式
  • 根据文章格式过滤内容
  • 为样式做好准备
  • 添加链接抓取功能
  • 设置我们的链接模板
  • 固定链接
  • 小结