类型:CMS系统
简介:一款开源的内容管理系统(CMS),用于构建和管理网站。
适当的图片大小不仅可以提升页面加载速度,还能改善用户体验,并确保网站在不同设备和屏幕尺寸上均具有良好的响应性和视觉效果。在WordPress中,我们可以通过内置功能或使用插件来管理和调整图像尺寸,以满足特定的布局需求和性能标准。
一、默认尺寸
在默认设置下,每个WordPress安装预配置了三种自定义图像尺寸,以适应不同的显示和用途需求。
1、缩略图 – 尺寸为150×150像素:这种尺寸通常用于文章列表或归档页面中的小图像预览。
2、中等尺寸 – 尺寸为300×300像素:这个尺寸的图片经常用在网站的标准文章中,提供较为清晰的视觉效果。
3、大尺寸 – 尺寸为1024×1024像素:这些较大的图像适用于需要展示详细图片的场合,如特色图像或当用户点击查看完整大小的图像时。
这些默认尺寸可以根据网站的具体需求进行调整,WordPress提供了灵活的函数来修改这些值,或者添加更多的自定义尺寸,以优化网站的视觉表现和提高加载速度。
二、修改默认尺寸
在WordPress管理控制台中,转到“设置”>“媒体”。在那里,可以更改3个默认图像尺寸的尺寸。
只需在要修改的图像尺寸中输入所需的宽度和高度。例如,假设要将中等尺寸的图像更改为500 * 500 px。只需在相应的字段中输入新值,然后单击“保存更改”按钮。
三、添加自定义尺寸
1、手动添加
使用几行PHP代码,可以轻松地为WordPress网站添加自定义图像尺寸。在开始之前,建议创建一个子主题并生成网站的完整备份,以确保数据安全。
在这个演示中,我们将使用Child Themify WordPress插件来操作。首先,安装并激活Child Themify插件。
然后,转到外观>主题编辑器。
默认情况下,主题编辑器将加载style.css文件,但要添加自定义图像尺寸,需要选择子主题的functions.php。
打开functions.php文件后,粘贴以下代码:
add_theme_support('thumbnail');
这个脚本将在安装中启用add_image_size功能,否则将无法创建任何其他图像尺寸,粘贴代码后,按“更新文件”按钮。
接下来,我们需要添加首选的自定义尺寸。为此,我们将使用以下代码:
add_image_size('thumbnail-size', 800, 240); add_image_size('homepage-thumb-size', 220, 180); add_image_size('full-page-thumbnail-size', 590, 790);
如果仔细看一下下面的图片,会发现我们已经添加了要包含的每个自定义尺寸的名称和尺寸。只需根据需要更改名称和大小。自定义代码后,将其粘贴到functions.php文件中,然后更新文件。
至此,已成功将自定义图像尺寸添加到WordPress网站。现在,每次上传图像并检查尺寸选项时,都会看到WordPress使用新的自定义尺寸创建图像的副本。此外,可以使用“重新生成缩略图”插件来创建图像的缩略图。
3、使用插件添加
如果不想直接编辑主题的核心文件,可以使用插件来添加自定义图像大小。我们将使用两种不同的工具添加自定义代码,而不是直接编辑functions.php文件:
首先,在WordPress信息中心中,转到“插件”>“添加新内容”,搜索代码片段,安装并激活它。
然后,转到代码段设置,添加自定义代码段。要添加新的自定义图片尺寸,需要创建一个新的代码段。
为此,可以使用以下代码并根据需要调整名称和大小。
add_theme_support('thumbnail'); add_image_size('thumbnail-size', 800, 240); add_image_size('homepage-thumb-size', 220, 180); add_image_size('full-page-thumbnail-size', 590, 790);
在代码段部分中添加代码后,将其保存,然后验证代码。
为确保一切正常,请检查活动图像尺寸。
如在上面的屏幕截图中所见,WordPress已经识别出我们刚刚添加的自定义图像。
此方法涉及一些编码,但不需要编辑主题文件。此外,代码段是在网站上插入代码而不创建任何子主题或修改现有文件的绝佳选择。