l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在WordPress中重新生成缩略图或新的图片尺寸

如何在WordPress中重新生成缩略图或新的图片尺寸

Bug编译狮

Bug编译狮

在WordPress中重新生成缩略图或调整图片尺寸是一项常见的任务，特别是在发布新内容时，或者当现有图片不适合特定的布局需求时。以下是几种常见的方法来实现这一目标：

方法一：使用插件

  1. 安装并激活“WP Smush”插件：

    • 这个插件可以自动压缩图片以减少文件大小，同时保持质量。
    • 打开 WordPress 后台，导航到“插件”，然后搜索“WP Smush”。点击“安装”，再点击“激活”。

  2. 选择和编辑图片：

    • 在您要调整尺寸的页面或帖子上，找到您想要处理的图片。
    • 通过拖动鼠标选择图片区域。

  3. 调整图片尺寸：

    • WP Smush 提供了一个直观的界面，您可以在这里设置图片的新尺寸。
    • 调整好后，点击保存按钮。

  4. 重新上传：

    • 点击“保存更改”后，WordPress 会自动删除旧的图片，然后插入新的、经过优化的图片。

示例代码

假设我们有一个名为 example.jpg 的图片，我们要将其转换为宽度为 800 像素，高度自适应的尺寸。

// 检查是否已经存在原始图片
if (file_exists(ABSPATH . 'wp-content/uploads/example.jpg')) {
    // 创建一个新的图片变量
    $image = imagecreatefromjpeg('uploads/example.jpg');

    // 设置新图片的宽度和高度（高度自动计算）
    $newWidth = 800;
    $newHeight = imagesy($image);

    // 使用图像创建函数创建新的图片
    $newImage = imagecreatetruecolor($newWidth, $newHeight);
    imagecopyresampled($newImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, imagesx($image), imagesy($image));

    // 保存新图片
    imagejpeg($newImage, 'uploads/optimized_example.jpg', 95); // 95 是质量参数，值越大压缩程度越高

    // 清理内存
    imagedestroy($image);
    imagedestroy($newImage);
}

解释

  • 检查是否存在原始图片：首先确保图片确实存在于指定的位置。
  • 读取原图片：使用 imagecreatefromjpeg() 函数读取图片数据。
  • 设定新尺寸：根据需要设置新图片的宽度和高度。这里我们将宽度设为 800 像素，高度由系统自动计算。
  • 创建新图片：使用 imagecreatetruecolor() 函数创建一个新的图片，其大小与新设置的尺寸相同。
  • 复制并重置比例：使用 imagecopyresampled() 函数将原图片的内容复制到新图片中，并保持比例不变。
  • 保存新图片：使用 imagejpeg() 函数保存新图片。
  • 清理资源：最后，使用 imagedestroy() 函数释放不再需要的图像资源。

这个示例展示了如何在WordPress中动态地修改图片尺寸，从而避免了重复上传和不必要的空间浪费。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

在WordPress中，你可以通过多种方式来调整或重新生成图片的大小和格式。以下是一些基本的方法：

1. 使用WordPress自带功能

WordPress本身提供了许多内置的功能，可以用来自动生成缩略图、调整图片大小以及创建不同的文件格式。

示例代码：

// 获取当前上传的图片ID
$image_id = get_post_thumbnail_id();

// 创建一个新的图像
$thumb = wp_generate_attachment_url( $image_id );

// 在主题中显示缩略图
echo '<img src="' . esc_url($thumb) . '">';

在这个例子中，我们首先获取了当前正在编辑的文章的缩略图ID。然后，使用wp_generate_attachment_url()函数创建了一个新的URL，这个URL包含了原始的图片链接（即原文件路径）。最后，我们在HTML中显示这个新创建的URL。

2. 使用插件实现

除了WordPress本身的功能外，还有许多第三方插件可以帮助你自定义图片处理。例如，WooCommerce Image Uploader就是一个很好的选择，它允许你在上传图片时自定义其大小和格式。

示例代码：

add_action('upload_image', function ($file, $post) {
    // 如果用户选择了自定义尺寸
    if (isset($_POST['custom_size'])) {
        // 获取上传文件的宽度和高度
        list($width, $height) = $_POST['custom_size'];

        // 调用插件提供的resize()方法
        $resized_file = wp_resize_image(
            $file,
            $width,
            $height,
            true,
            false
        );

        // 更新原文件名
        update_post_meta($post->ID, '_thumbnail_id', $resized_file);
    } else {
        // 使用默认尺寸
        wp_resize_image($file, 800, 600, true, false);
    }
});

这段代码会在用户上传图片时检查是否选择了自定义尺寸。如果选择了，就调用wp_resize_image()插件提供的方法来调整图片的尺寸；如果没有选择，就使用默认的800×600尺寸。

3. 自动调整图片大小

如果你希望自动调整图片的尺寸以适应特定的屏幕尺寸，可以考虑使用一些自动化工具，如ImageOptim或者Imagick等库。

示例代码：

var resizeWidth = 960;
var resizeHeight = 540;

function onResizeComplete(resizeData) {
    var newImg = resizeData.newImage;
    var originalImg = resizeData.originalImage;

    // 将新图片设置为当前页面上的缩略图
    document.getElementById("original").src = newImg.src;
    document.getElementById("optimized").src = newImg.src;
}

// 设置自动调整图片尺寸
ImageOptim({
    width: resizeWidth,
    height: resizeHeight,
    callback: onResizeComplete
}).optimizeImages();

这段代码会根据指定的宽高比（这里设为960×540）优化图片，然后将结果设置为页面上两个对应的元素的src属性。

总结

在WordPress中调整图片大小有多种方法，包括但不限于使用WordPress自身的功能、插件功能，以及利用外部库如ImageOptim等。每种方法都有其优缺点，需要根据具体需求和应用场景选择合适的方式。

,

最新更新