当前位置：
  1. 首页
  2. 极客学院
  3. WordPress基础教程
  4. 正文

WordPress特色图片详解入门教程插图

在您的WordPress网站中包含视觉元素是吸引访问者注意力的好方法。此外，与综合文章搭配时，良好的视觉元素可以显着提升内容的信息价值。

幸运的是，WordPress具有多种功能，可以将视觉效果整合到网站中，例如包括特色图像。

本教程将涵盖您需要了解的有关特色图片的所有信息——它们是什么，为什么要使用它们，以及如何在您的网站上启用它们。我们还将介绍一些插件来优化特色图像。

  • 什么是特色图片？
  • 为什么使用特色图片？
  • 在您的WordPress网站上启用特色图片
    • 如何将特色图片添加到文章中
    • 设置WordPress特色图片大小
    • 在WordPress中设置自动特色图像
    • 为您的文章和页面添加缩略图预览编辑列表
  • 什么是Header图片？
  • 优化您的特色图片
目录 隐藏
什么是特色图片？
为什么使用特色图片？
在您的WordPress网站上启用特色图片
如何将特色图片添加到文章中
设置WordPress特色图片大小
在WordPress中自动设置特色图像
为您的文章和页面添加缩略图预览编辑列表
什么是Header图片？
优化您的特色图片
小结

WordPress特色图片，也称为文章缩略图，可以代表您的文章、页面或自定义文章类型。

从您网站的存档或主页查看时，此类图像通常会伴随您的文章。当您的文章在其他平台上共享时，它也将可见。

但是，它们的位置取决于您选择的WordPress主题。一些主题在标题上方或下方显示图像，而其他主题会自动将其放置在文章的右侧或左侧。

特色图像也可能与最近或流行的出版物一起出现在小工具区域上。

WordPress特色图片详解入门教程插图1

精选图片既可以极大地增强您网站的外观，又可以为原本平淡无奇的文章或博客文章提供引人入胜的视觉效果。图像有助于向读者传达想法，帮助他们更好地理解内容。

始终如一地使用特色图片不仅可以帮助您定义网站的视觉风格，而且还可以增加您的访问量——研究表明，包含图片的文章比不包含图片的文章产生的浏览量高出94%。

更重要的是，在图片的标题和替代文本中加入关键字可以提升您的WordPress网站的SEO。

通常，大多数 WordPress 主题都支持“设置特色图片”选项。然而，情况并非总是如此。

您可以通过使用主题开发人员方法并将以下代码插入主题的functions.php文件来快速解决此问题。

add_theme_support( 'post-thumbnails' );

完成后，在创建或编辑博客文章时应该可以使用 WordPress 特色图片设置。

请记住，“发布缩略图”功能不会自动让您的主题显示或分配图像。它仅在您网站的文章编辑器中启用该选项。

要显示图像，您需要将下面的代码片段添加到您希望显示视觉效果的模板部分：



需要编辑的特定文件将根据您的主题而有所不同。


如果您使用宝塔管理服务器，请按照以下步骤访问您的主题文件。


1. 访问宝塔面板的文件菜单。


2. 进入网站的根目录，/www/wwwroot/www.inpandora.com/wp-content/themes。


WordPress特色图片详解入门教程插图2


3. 此文件夹包含您网站上安装的所有WordPress主题。选择当前活动的主题进行编辑。


4. 选择您的主题的function.php，然后单击菜单栏上的编辑图标。这将打开文本编辑器，您可以在其中插入所需的代码。完成后，单击“保存”按钮以保存更改。


WordPress特色图片详解入门教程插图3


您现在应该可以在WordPress中使用特色图片了。作为上述方法的替代方法，您可以安装可以修复不兼容问题的WordPress插件，例如：


  • Dynamic Featured Image
    • 

  • Quick Featured Images
    • 

  • Featured Image From URL
    • 

如何将特色图片添加到文章中


要将特色图片添加到文章中，请导航至文章。点击写文章，或选择现有文章进行编辑。


加载文本编辑器后，单击屏幕选项并确保选中特色图像。


WordPress特色图片详解入门教程插图4


特色图片选项通常位于侧边栏的底部。找到后，单击设置特色图片按钮。


WordPress特色图片详解入门教程插图5


您可以从计算机上传图片，也可以从媒体库中选择一张。不要忘记添加图片的替代文字和标题，然后点击设置特色图片。


WordPress特色图片详解入门教程插图6


如果您按照这些步骤操作，您将成功添加WordPress特色图片。如果要删除图像，请单击删除特色图像按钮。



每当您将图像上传到WordPress时，您都会在设置中找到四种默认图像尺寸：


  • 缩略图（150像素正方形）
    • 

  • 中等尺寸（最大300像素的宽高）
    • 

  • 大尺寸（最大1024像素宽高）
    • 

  • 全尺寸（原始图像）
    • 

这些选项可用，因此您可以将图片放置在博客文章的不同部分，而无需手动调整原始文件的大小。但是，在某些情况下，这些尺寸可能不适合您的需求。


您可以通过访问WordPress仪表盘来解决此问题。


导航到设置->媒体。在这里，您将看到每种图像尺寸的几种配置。根据您的需要输入新尺寸，然后单击Save Changes。


WordPress特色图片详解入门教程插图7


如果您需要更多尺寸，可以在functions.php文件中使WordPress支持自定义图像尺寸。



当博客文章没有特色图片时，您可以对WordPress进行编程以自动将附加图片显示为文章缩略图。


这样，每当您保存新的博客文章时，它都会检查是否有特色图片集。否则，它将检索找到的第一张图像并将其显示为特色图像。


要实现此功能，只需访问主题的functions.php文件并添加以下代码段。


function auto_featured_image() {
 global $post;
if (!has_post_thumbnail($post->ID)) {
 $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
if ($attached_image) {
foreach ($attached_image as $attachment_id => $attachment) {
set_post_thumbnail($post->ID, $attachment_id);
}
}
}
}
add_action('the_post', 'auto_featured_image');
add_action('save_post', 'auto_featured_image');
add_action('draft_to_publish', 'auto_featured_image');
add_action('new_to_publish', 'auto_featured_image');
add_action('pending_to_publish', 'auto_featured_image');
add_action('future_to_publish', 'auto_featured_image');


但是，如果您在文章中不包含任何图片，此功能将不会显示任何通知，并且会简单地发布它而不包含任何图片。为防止这种情况发生，请确保至少包含一张图片。


或者，您可以使用以下功能在未设置特色图像时显示弹出错误消息。


add_filter( 'wp_insert_post_data', function ( $data, $postarr ) {
$post_id       = $postarr['ID'];
$post_status     = $data['post_status'];
$original_post_status = $postarr['original_post_status'];
if ( $post_id && 'publish' === $post_status && 'publish' !== $original_post_status ) {
$post_type = get_post_type( $post_id );
if ( post_type_supports( $post_type, 'thumbnail' ) && ! has_post_thumbnail( $post_id ) ) {
$data['post_status'] = 'draft';
}
}
return $data;
}, 10, 2 );
add_action( 'admin_notices', function () {
$post = get_post();
if ( 'publish' !== get_post_status( $post->ID ) && ! has_post_thumbnail( $post->ID ) ) { ?>









<?php }
} );


每当作者尝试发布没有特色图片的文章时，该函数将触发错误消息，如下例所示。


WordPress特色图片详解入门教程插图8


如果找到，将出现一条成功消息，并发布该文章。


WordPress特色图片详解入门教程插图9


为您的文章和页面添加缩略图预览编辑列表


WordPress管理面板允许用户管理作者、类别和日期等内容属性。


但是，默认界面不包括特色图片。这意味着您必须手动打开每个文章以检查文章是否具有图像集。


WordPress特色图片详解入门教程插图10


下面的功能将在管理面板上显示特色图像，让您更轻松地更有效地管理您的内容。


只需将代码复制并粘贴到您的主题函数文件并保存更改即可。


if ( !function_exists('AddThumbColumn') && function_exists('add_theme_support') ) {
add_theme_support('post-thumbnails', array( 'post', 'page' ) );
function AddThumbColumn($cols) {
$cols['thumbnail'] = __('Thumbnail');
return $cols;
}
function AddThumbValue($column_name, $post_id) {
$width = (int) 50;
$height = (int) 50;
if ( 'thumbnail' == $column_name ) {
$thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
$attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
if ($thumbnail_id)
$thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
elseif ($attachments) {
foreach ( $attachments as $attachment_id => $attachment ) {
$thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
}
}
if ( isset($thumb) && $thumb ) {
echo $thumb;
} else {
echo __('None');
}
}
}
add_filter( 'manage_posts_columns', 'AddThumbColumn' );
add_action( 'manage_posts_custom_column', 'AddThumbValue', 10, 2 );
add_filter( 'manage_pages_columns', 'AddThumbColumn' );
add_action( 'manage_pages_custom_column', 'AddThumbValue', 10, 2 );
}


要更改缩略图图像的大小，请根据自己的喜好编辑$width和$height值。


现在，刷新管理面板。它应该在屏幕右侧显示特色图像。


WordPress特色图片详解入门教程插图11


什么是Header图片？


古腾堡编辑器带来的新WordPress功能之一是封面区块。正如其名，此功能允许您添加封面图像或标题图像。


与 WordPress 特色图片不同，标题图片仅出现在用作文章封面和部分分隔符的文章和页面上。然而，这两个元素有一个相似之处——不是每个 WordPress 主题都支持它们。


要将标题图像添加到您的WordPress文章，请转到您的WordPress仪表盘，然后将菜单导航到文章-> 写文章。


将鼠标悬停在编辑器主体上，然后单击+按钮。然后，从媒体选项卡中选择封面。


WordPress特色图片详解入门教程插图12


从那里，您可以从媒体库中选择一张图片，或者通过单击上传按钮上传一张新图片。使用工具栏向标题图像添加和修改文本，如下例所示。


WordPress特色图片详解入门教程插图13



请记住，较大的图像尺寸也会使网站加载速度变慢，从而导致用户体验不佳。


因此，图像优化是至关重要的一步。优化图像可以减小文件大小，进而提高页面加载时间。


优化特色图像的最简单方法是安装图像优化插件——它们会自动压缩图像大小并保持高质量。


以下是一些可用于您的网站的最佳图像优化器插件：


  • 
ShortPixel Image Optimizer –使用有损和无损图像压缩来优化任何类型的文件，例如.PNG、 .JPG和.GIF。
    • 

  • 
Imagify –提供三种不同级别的压缩——正常、激进和超强。
    • 

  • 
WP Smush –扫描您网站和媒体库中的图像，一次最多可以压缩 50 个文件。
    • 

  • 
Optimole –提供延迟加载并通过CDN（内容交付网络）提供图像。
    • 

小结


通过充分利用特色图片，您可以吸引访问者的注意力，提供更多信息内容，并坚持最佳SEO实践。


为帮助您实现这一目标，WordPress包含多种功能和自定义选项，以及许多激活WordPress特色图像功能的替代方法。


在标题图像的帮助下，用户可以介绍和拆分他们的内容以获得更好的用户体验。为了实现一致的视觉风格，特色图像及其缩略图的大小也可以自由配置。


如果您想优化图像，请考虑安装为该任务设计的众多插件之一，或自行调整设置。请记住在您的特色图片的替代文本中包含关键字，因为这将带来更好的SEO。


我们希望本指南能帮助您更多地了解WordPress特色图片及其对您网站的重要性。




	

		

            
            			
		

		


            
			            
			                
                        
            
		

	




      

          

    

  






	

            	

            
                

                

                    上一篇
                    如何禁用WordPress网站的RSS Feeds
                

             
        

                    	

            
                

                    下一篇
                    禁用WordPress嵌入功能以提升WordPress性能
                

                

            
        

            


    

        
相关文章