wordpress图像大小_如何在WordPress中创建其他图像大小

wordpress图像大小

Last month there was a huge vulnerability spotted in a famous image resizing script known as TimThumb. Since then the community has collaborated and fixed the issues. While TimThumb is a viable option, we believe that WordPress theme developers should focus on using the core functions rather than relying on third party scripts. In this article we will show you how to add additional image sizes in WordPress.

上个月，在著名的图像调整大小脚本TimThumb中发现了一个巨大漏洞。 从那时起，社区开始合作并解决问题。 尽管TimThumb是一个可行的选择，但我们认为WordPress主题开发人员应专注于使用核心功能，而不是依赖第三方脚本。 在本文中，我们将向您展示如何在WordPress中添加其他图像大小。

WordPress has a built-in feature Post Thumbnails aka Featured Images. There is also a built-in function add_image_size() which lets you specify image sizes and give you the option to crop. Using these core functions in your theme can essentially eliminate the need of a third party script like TimThumb in most cases.

WordPress具有内置功能Post Thumbnails aka Featured Images 。 还有一个内置函数add_image_size()，它可以让您指定图像尺寸并为您提供裁剪选项。 在主题中使用这些核心功能可以在大多数情况下基本上消除对诸如TimThumb的第三方脚本的需要。

为主题注册其他图像尺寸 (Registering Additional Image Sizes for your Theme)

You will need to start by adding the support of post thumbnails by placing the following code in your theme’s functions.php file:

首先，需要通过将以下代码放置在主题的functions.php文件中来添加对帖子缩略图的支持：

add_theme_support( 'post-thumbnails' );

Once you enable the support for post thumbnails, you can now use the functionality of registering additional image sizes with the function add_image_size(). The usage of add_image_size function is like this: add_image_size( ‘name-of-size’, width, height, crop mode );

启用对帖子缩略图的支持后，现在可以使用通过功能add_image_size()注册其他图像尺寸的功能。 add_image_size函数的用法如下：add_image_size('尺寸名称'，宽度，高度，裁切模式);

Example code can look like:

示例代码如下所示：

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

Now if you notice, we have specified three different sort of image sizes. Each has different modes such as hard crop, soft crop, and unlimited height. So lets cover each example and how you can use them for your benefits.

现在，如果您注意到，我们指定了三种不同的图像尺寸。 每种都有不同的模式，例如硬作物，软作物和无限的高度。 因此，让我们涵盖每个示例以及如何使用它们以获取好处。

Hard Crop Mode – As you notice, there is a value “true” added after the height. That true value is telling WordPress to crop the image to the size that we have defined (in this case 120 x 120px). This is the method we use a lot in our theme designs to make sure everything is proportionate and our design is not breaking. This function will automatically crop the image either from the sides or from the top and bottom depending on the size. The downside of hard cropping is that you cannot control which part of the image is displayed.

硬作物模式 –如您所见，在高度之后添加了“ true”值。 真正的价值在于告诉WordPress将图片裁剪为我们定义的尺寸(在本例中为120 x 120px)。 这是我们在主题设计中经常使用的方法，以确保所有内容都相称且设计没有中断。 此功能将根据尺寸从侧面或从顶部和底部自动裁剪图像。 硬裁剪的缺点是您无法控制显示图像的哪一部分 。

Correction by Mike Little – When you have uploaded an image and before you insert into post, you can click on ‘edit image’ and from there change the thumbnail or the whole image, scale, rotate, or flip the image , and for the thumbnail select the exact portion of the image you want.

迈克·利特尔(Mike Little)进行的更正–上传图片后，在您插入帖子之前，您可以点击“编辑图片”，然后在其中更改缩略图或整个图片，缩放，旋转或翻转图片，并更改缩略图选择所需图像的确切部分。

Soft Crop Mode – By default soft cropping mode is turned on this is why you do not see any additional value added after the height. This method resizes the image proportionally without distorting it. So you might not get the dimensions that you wanted. Usually it matches the width dimension and the heights are different based on each image’s proportion. An example display would look like this:

柔和裁切模式 –默认情况下，柔和裁切模式处于打开状态，这就是为什么在高度之后看不到任何附加值的原因。 此方法按比例调整图像大小，而不会失真。 因此，您可能无法获得所需的尺寸。 通常，它与宽度尺寸匹配，并且高度根据每个图像的比例而不同。 显示示例如下所示：

Unlimited Height Mode – There are times when you have super long images that you want to use in your design, but you want to make sure that the width is limited. The main use we find for this sort of image size is on infographic posts. Infographics tend to be very long and full of information. Hard cropping such image on a single post page is not a great idea. But by nature infographics are wider than the content width. So what you can do is specify a width which will not break your design while leaving the height to be unlimited, so all of infographic can be shown without any distortion. An example display would look like this:

无限高度模式 –有时您会在设计中使用超长图像，但要确保宽度受到限制。 我们发现这种图像尺寸的主要用途是在信息图表帖子上。 信息图表往往很长，而且充满信息。 在单个帖子页面上硬裁剪此类图像不是一个好主意。 但从本质上讲，信息图表比内容宽度还要宽。 因此，您可以做的是指定一个宽度，该宽度在保持高度不受限制的情况下不会破坏您的设计，因此可以显示所有信息图而不会出现任何变形。 显示示例如下所示：

在WordPress主题中显示其他图像大小 (Displaying additional image sizes in your WordPress theme)

Now that you have added the functionality for the desired image sizes lets take a look at displaying them in your WordPress theme. Open the theme file where you want to display the image and paste the following code:

现在，您已经添加了所需图像大小的功能，现在让我们来看看如何在WordPress主题中显示它们。 打开要在其中显示图像的主题文件，然后粘贴以下代码：

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

Note: This bit of code must be pasted inside the post loop.

注意：这部分代码必须粘贴在post循环内。

That’s all you really have to do to display the additional image sizes in your WordPress theme. You probably should wrap it around with the styling that fits your need.

这就是您真正要做的，才能在WordPress主题中显示其他图像大小。 您可能应该用适合您需要的样式来包装它。

重新生成其他图像尺寸 (Regenerating Additional Image Sizes)

If you are not doing this on a brand new site, then you probably will have to regenerate thumbnails. The way add_image_size() function works is that it only generates the sizes from the point it was added into the theme. So any post images that were added prior to the inclusion of this function will not have the new size. So what we need to do is regenerate the new image size for older post images. This is made easy by the plugin called Regenerate Thumbnails. Once you install and activate this plugin, a new option is added under the menu: Tools » Regen. Thumbnails

如果您不在全新的网站上进行此操作，则可能必须重新生成缩略图。 add_image_size()函数的工作方式是仅从添加到主题中的那一点生成大小。 因此，在包含此功能之前添加的任何帖子图像都不会具有新大小。 因此，我们需要做的是为较旧的帖子图像重新生成新的图像尺寸。 名为Regenerate Thumbnails的插件使此操作变得容易。 安装并激活此插件后，将在菜单下添加一个新选项：工具»重新生成。 缩图

Click Regenerate Thumbnail icon and let the plugin do its job.

单击重新生成缩略图图标，然后让插件完成其工作。

Another plugin that can do this job is Simple Image Sizes.

可以完成此工作的另一个插件是Simple Image Sizes 。

为您的帖子内容启用其他图像尺寸 (Enabling Additional Image Sizes for your Post Content)

Even though you have enabled image sizes in your theme, the usage is limited only to your theme which does not makes any sense. All image sizes are being generated regardless, so why not make it available for the post author to use it within the post content. You can do this by using a plugin called Simple Image Sizes.

即使您在主题中启用了图像大小，使用也仅限于主题，这没有任何意义。 无论如何，所有图像尺寸都会生成，所以为什么不让帖子作者在帖子内容中使用它。 您可以使用名为Simple Image Sizes的插件来完成此操作。

Once you install and activate this plugin new options will be added on your Settings » Media page. You will see a list of sizes that you defined in your theme. All you have to do is check the box that says “Show in post insertion”.

安装并激活此插件后，新选项将添加到“设置”»“媒体”页面中。 您将看到在主题中定义的尺寸列表。 您所要做的就是选中“在插入后显示”框。

Once you check this box, additional sizes will be available for your author to use in the post content.

选中此框后，其他大小将可供您的作者在帖子内容中使用。

Notice in the image above, we have all the image sizes that we defined in our theme available for our authors to use in the post content if they desire.

请注意，在上图中，我们拥有我们在主题中定义的所有图像尺寸，可供我们的作者根据需要在帖子内容中使用。

Simple Image Sizes plugin also lets you create custom image sizes directly from the WordPress dashboard.

Simple Image Sizes插件还允许您直接从WordPress仪表板创建自定义图像大小。

We believe this method should be added under best practices for all WordPress theme developers. What are your thoughts?

我们认为应该为所有WordPress主题开发人员的最佳做法添加此方法。 你觉得呢？你有没有什么想法？

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-create-additional-image-sizes-in-wordpress/

wordpress图像大小