图片摘要可以是文章中的图么-Wordpress教程-爱模板网

图片摘要可以是文章中的图么

2024-08-26 10:03:33

一文详解 WordPress 文章特色图片（缩略图）功能

现在绝大多数的 WordPress 主题，特别是那些杂志型的主题，比如 Autumn Pro，都会给每篇文章加上一张缩略图，一般会在首页或者其他列表页的时候，使用这种展现方式，缩略图可能单独出现，或者和文章摘要一起。

在 WordPress 2.9 之前，WordPress 没有提供一个标准的方法去实现文章缩略图，很多主题都是使用 WordPress 自定义字段来实现文章缩略图功能，这样的设置比较复杂。

从 WordPress 2.9 开始，WordPress 开始内置了文章缩略图的功能，后面又把名称改为特色图片（Featured Image），这里为了统计叫法，还是使用文章缩略图的名称，并且 WordPrss 还提供了详细的接口让主题的作者可以自定义设置和调用文章缩略图。

今天就讲解一下如何使用开启，自定义和使用文章缩略图。

开启文章缩略图功能

要使用文章缩略图功能，首先需要通过函数 add_theme_support() 来开启，具体是在当前 WordPress 主题的 functions.php 文件中添加以下代码：

add_theme_support( 'post-thumbnails' );

上面的代码会在 WordPress 后台编辑文章的界面开启设置文章缩略图的窗体，并且同时给文章和页面开启缩略图功能，如果想单独开启的话，使用以下代码：

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 给文章启用文章缩略图功能add_theme_support( 'post-thumbnails', array( 'page' ) ); // 给页面启用文章缩略图功能设置文章缩略图大小

开启了 WordPress 文章缩略图功能之后，我们可以通过函数 set_post_thumbnail_size() 来设置缩略图的大小，这里有两种方式：盒大小（box-resize）模式和裁剪（hard-crop）模式。

盒大小模式（box-resize）按照比例缩小图片直到适合指定的盒子，所以不会扭曲图片。盒大小模式可以指定长度和宽度，比如一张 100X50 的图片在指定的 50X50 的盒子中会被缩小为 50X25。

这种模式的好处是可以显示整张图片，缺点是生成的图片并不是一样大的，它是按照最长边来设置的，所以有时候是长度一样，有时候是高度一样。如果我们想限制缩略图到一定的宽度，而不在乎它的高度，这时候我们可以指定缩略图的宽度，然后设置它的高度为 9999 或者其他任何认为够大的一个数字。代码如下：

set_post_thumbnail_size( 50, 50 ); // 50 像素宽和 50 像素高，盒大小模式

第二种是硬裁剪模式（hard-crop），这种模式下，图片会被裁剪为指定的大小，这种方式的好处就是得到我们所希望的，比如我们希望得到一张 50X50 的缩略图，就会得到 50X50 的缩略图，缺点就是图片会被裁减，缩略图中只会显示图片的一部分。这种方式的代码是：

set_post_thumbnail_size( 50, 50, true ); // 50 像素宽和 50 像素高，裁剪模式在主题中显示文章缩略图

现在我们要在主题中使用模板函数来显示文章缩略图，下面这些函数应该在 WordPress 的主循环中使用。

has_post_thumbnail()：判断当前文章是否有缩略图，如果有返回 true，否则为 false：

<?php if ( has_post_thumbnail() ) { //当前文章有缩略图} else { //当前文章没有设置缩略图} ?>

the_post_thumbnail()：输出文章缩略图，如果缩略图存在的话。

<?php the_post_thumbnail(); ?>一个具体的例子

假设我们想在首页使用一个比较小的 50X50 裁剪模式的缩略图，并且想在文章页面使用 400 像素宽（高度不限制）的图片？我们可以设置额外的自定义尺寸缩略图，代码如下：

在 functions.php 中添加如下代码：

add_theme_support( 'post-thumbnails' );set_post_thumbnail_size( 50, 50, true ); // 普通的缩略图add_image_size( 'single-post-thumbnail', 400, 9999 ); // 定义文章页面的缩略图大小

在当前主题的 index.php 或者 home.php（取决主题的结构）中的主循环添加如下代码：

<?php if ( has_post_thumbnail() ) { the_post_thumbnail();} else { //当前文章没有设置缩略图} ?>

在当前主题的 single.php （也是主循环中）添加如下代码：

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

通过函数 set_post_thumbnail_size() 可以生成默认的文章缩略图。

除此之外，我们还可以通过调用 add_image_size(); 来增加额外的文章缩略图尺寸，然后在文章页面通过 the_post_thumbnail( ); 调用新的缩略图尺寸来显示新的缩略图。

WPJAM Basic 的缩略图功能

如果没有缩略图怎么办？或者之前的版本把缩略图设置到了自定义字段怎么处理？

WPJAM Basic 针对这些情况都做了处理，首先我们可以选择是否自动将缩略图的设置应用到主题还是修改主题代码来实现。

然后可以设置默认文章缩略图，在各种情况都找不到缩略图之后默认的缩略图，可以设置多张，这样很多文章没有默认缩略图的时候，也不会太过单调。

最后就是定义文章缩略图顺序，首先使用文章特色图片，如果没有设置文章特色图片，可以定义获取文章缩略图的顺序。比如上图中，我就首先定义从标签缩略图中获取，如果没有，再从第一张图片，最后从分类缩略图中获取。

关于 WPJAM Basic 的缩略图设置更详细设置请点击这里。

更多文章缩略图的函数

作为一篇完整的教程，我们将其他文章缩略图相关函数也一起介绍一下：

get_post_thumbnail_id()：获取文章缩略图 ID

有时候我们想获取缩略图的 ID，文章缩略图的 ID 是存在 meta_key 为 _thumbnail_id 的值中，但是我们只需要使用下面简单的函数就可以获取文章的缩略图 ID：

$image_id = get_post_thumbnail_id();

get_the_post_thumbnail_url()：获取文章缩略图链接

获取到文章缩略图链接 ID 之后，我们可以使用 wp_get_attachment_image_url 函数获取图的链接，但是 WordPress 已经提供了现成的函数一步到位：

$thumbnail_url = get_the_post_thumbnail_url( $post = null, $size = 'post-thumbnail' );

the_post_thumbnail_url()：这个函数直接显示文章缩略图链接，这个函数和上面函数类似，一个是返回，一个是直接输出，不具体详细讲解了。

get_the_post_thumbnail()：获取文章缩略图而不是输出它

有时候，我们可能在 PHP 代码中返回文章缩略图，而不是输出它，可以使用下面简单的代码：

$image = get_the_post_thumbnail( $post->ID, 'thumbnail' );

图文教程 WordPress 基本功能使用

通用内容：控制内容的展示，帮助模块.

仪表盘：Welcome，概述，快速草稿，活动，WordPress 活动与新闻，调整仪表盘的布局.

文章管理：新建文章，页面布局调整，新建文章.

分类目录：标签，页面管理，新建页面.

多媒体资源管理：上传文件，管理文件。

友情链接管理：评论管理，主题管理，插件管理，用户管理，用户列表，新建用户，修改用户身份。

课程实践目标：掌握 WordPress 的使用。

通用内容

控制内容的展示

每个页面都可以单击右上角的显示选项来控制页面显示什么内容，方便调整自己的页面布局，符合自己的写作习惯。

帮助模块

WordPress 每个页面都有一个帮助模块，在帮助模块中，可以看到当前页面的具体帮助内容，假如不知道当前页面怎么用，除了在达人课的读者圈中提问，也可以单击上方的“帮助”按钮来寻找答案。

仪表盘

仪表盘是我们登录 WordPress 后台后首先会看到的内容。

Welcome

Welcome 是新用户引导，单击“不再显示”链接后，下次就不会再出现。

如果后面还想看，可以单击右上角的“显示”选项：

勾选其中的 Welcome 复选框，这个界面就会出现了。

概述

概述里展示了我们博客的最基础的几个数据：博客文章数、博客评论数、单页数目、当前版本和当前使用的主题。

单击其中的超链接，就会跳转到对应的列表。例如，单击“1篇文章”链接，就会跳转到文章列表，可以对文章进行管理。

快速草稿

快速草稿可以帮助我们在仪表盘记录心中的所念所想，而无需加载完整的 WordPress 编辑器来编辑格式。当有一些小的灵感时，可以在这里快速的输入、并保存，后续再完善，以免忘记了这个想法。

活动

在这里会显示博客的最新动向，比如最近发布的文章、最近游客留下的评论等等。

WordPress 活动与新闻

这个栏目展示了 WordPress 官方的一些新闻和活动，不过对于我们大多数人来说都没有任何用。所以这个选项一般都是隐藏的。

单击右侧的“小三角”按钮，就可以收缩 tab 了：

不过，用户也可以单击页面右上角的显示选项，取消该选项的勾选即可。

调整仪表盘的布局

仪表盘的每个元素都是可以调整位置的，当将鼠标的光标移动到标题时，等待其变为移动符号时，拖动区块即可移动。

文章管理

新建文章

文章是 WordPress 的最基本的单位，我们可以通过两种方式进入新建文章的页面，一个是通过菜单栏中的“文章——新建文章”进入：

或者通过顶部的快捷菜单进入。

页面布局调整

进入到新建文章页面后，会看到很多项目：

在使用前，建议读者先调整这个页面的布局，调整为符合你自己习惯的布局。

单击上方的显示选项按钮，可以看到具体显示哪些模块，是否切换为单栏布局。

一般来说，推荐显示形式（需要主题支持）、分类目录、标签、特色图片（特色图片）、摘要。

我的布局如下，仅供参考：

其他内容可以根据自己的具体情况来设置。

下方的全高度编辑器其实是“全屏”功能，影响不到，主要是手动开启的。而后面的免打扰功能开启后，会在读者进行写作时进入免打扰模式，隐藏左侧的菜单和右侧的发布等连接。

新建文章

标题栏

页面中的元素非常简单，上方的标题栏填写我们设置的文章标题。

固定链接

下方的固定链接则可以编辑，设置我们文章的链接名。如果你有自己的文章风格，不希望其为你生成默认的中文链接名，可以在这里手动设置。

添加媒体

WordPress 为我们提供了非常完善的多媒体资源管理能力。单击“添加媒体”按钮，就可以上传要添加的图片了。

你可以上传新的图片，或者使用媒体库中的图片，

上传后，选中你要插入的图片（支持选中多个）。单击“插入”按钮即可插入图片到文章。

在插入前可以设置图片的说明和替代文本，说明将会设置为 caption 标签。而替代文本则会设置为 alt 属性。

下方编辑器也非常好用，可以直接单击下方的按钮，选择对应的样式设置。

下方的摘要则会影响到文章列表和 RSS 列表的内容输出，你可以认真写一写摘要，并借此提高读者的打开率。

有的主题会支持不同形式的主题，可以设置不同形式的主题，以使用主题针对特定形式的设定。

有些主题还支持自定义栏目，还可以根据主题说明设置对应的自定义栏目。

分类目录

单击左侧菜单栏中的“文章——分类目录”按钮，可以进入到分类目录的设置页面。

可以新建一个分类目录。分类目录支持多级，这样可以很方便的分类文章。

右侧则是分类目录的列表，可以单击编辑进入详细编辑页面编辑，也可以单击快速编辑修改分类名和分类别名。单击“查看”按钮，则会进入到前台的目录页面。

标签

除了分类目录，我们还可以通过标签对文章进行管理，标签的操作逻辑和分类目录基本一致，唯一不同的是标签不支持多级分类。

页面管理

页面部分比较简单，很多基础操作和文章管理是一致的，就不在赘述相同的部分了，这里只讲一下主要的不同点。

新建页面

新建页面中大体上和新建文章没有区别这里只说不同点，便是页面属性。

页面没有目录，但是可以设置页面的上级页面，通过一个主页面和若干子页面来管理内容，可以帮助我们更好的整理内容。

模板则是 WordPress 一个非常有用的功能。很多时候，我们需要的功能不止是新闻的展示，可能是一些其他的功能，如展示友情链接、展示日历、展示消息通知等等。

通过选择不同的模板，就可以实现不同功能页面的加载。

此功能需要主题的支持，后续主题开发课也会加入这部分内容。

多媒体资源管理

上传文件

多媒体资源的上传有两种方式，一种是通过新增文章、页面时上传，另一种是通过媒体库进行上传。

单击媒体 | 添加命令，可以看到上传的界面，选择要上传的内容就会自动上传了。你也可以把要上传的内容拖动到上传区域来进行上传。

管理文件

单击媒体 | 媒体库命令，会进入媒体库，可以在媒体库中管理附件：

单击“附件”按钮，可以进入到附件的编辑页面进行管理：

可以为附件设置具体的信息，如果你的主题中有附件页，就可以看到具体的信息：

此外，我们还可以编辑图片，对图片进行简单的处理，在附件的编辑页面单击“编辑图像”按钮。

WordPress 支持对图片进行裁剪、旋转、镜像等功能。（我这里因为是gif，所以裁剪是灰的。）

编辑完成后，单击右侧的“更新”按钮即可将图片进行更新。

友情链接管理

在最新版本的 WordPress 中默认没有开启这个功能，不过可以通过安装 Link Manager 插件来开启这个功能。

单击左侧边栏的链接管理，可以进入到链接管理的界面。

首先，我们可以根据需要，创建链接所属目录，创建方式和创建文章目录相同，单击链接分类目录，进入到管理页面。

创建完成目录后，我们可以创建具体的链接，单击左侧菜单栏中的添加按钮，进入到添加链接的页面。

必要设置包括名称和 Web 地址，将要添加的网站的名称和 Web 地址填入其中，即可添加链接了。

不过下方有很多其他的设置也值得知道。

在下方应该会注意到有个 XFN（XML Friends NetWork），通过 XFN 可以表明这个链接和你的远近亲疏关系，还是很有意思的。不过目前国内并没有针对此进行优化。

此外，如果你觉得文字链接不好看，还可以选择使用图片链接，上传图片、设置备注、设置 RSS 地址等。

如果希望链接展示在前台，可以前往外观 | 小工具中添加。

你可以在可视区域中添加一个链接小工具，并设置要显示的链接和具体的类型。

评论管理

单击左侧的评论管理按钮，会进入到评论管理的页面。

评论默认有四种状态，待审核、已批准、垃圾评论和回收站评论。

所有未被确认为垃圾评论，但又从未留言过的评论都会放在待审核列表中（取决于在评论设置中的设置）。

可以在列表中修改一个评论的状态、回复、甚至是编辑它。

也可以单击后面的按钮，查看同一篇文章的其他评论。

可以批量选择评论，并对他们进行处理。

上述就是我们常用的评论的操作。

此外，记得时常去清理下回收站，让数据库更干净。

主题管理

此部分会在后续的主题开发中进行讲解。

插件管理

此部分会在后续的插件开发中进行讲解。

用户管理

用户管理这里大体上和我们后面要讲的个人信息设置相同，具体的细节操作我不再重复，可以到第4课看 WordPress 的基本设置。

用户列表

点击左侧边栏、用户——所有用户，我们可以看到目前博客的所有注册用户、以及其所有文章。

除了自己这个用户无法删除外，你可以删除其他用户。

新建用户

单击左侧边栏 | 用户 | 添加用户命令，我们可以新建一个 WordPress 用户。

基本属性直接填写即可，这里关注一下密码和角色。

默认情况下， WordPress 会为用户生成一个极为复杂的密码，如果希望自己帮用户指定密码的话，可以单击“显示密码”按钮，在弹出的密码框中输入密码。