向 WordPress 媒体库添加图像焦点工具

图像焦点工具是什么？

图像焦点工具是一种可以让你快速选择任何图像的主要焦点区域的位置。只需点击图像，你就能轻松确定图像的焦点位置在x轴和y轴上的具体位置。

然后，这个x和y的位置可以用在background-position或object-position CSS属性中。这样，不管屏幕尺寸如何，图像的重要部分都能被看到。

为什么要使用图像聚焦工具

通常，我们在桌面上设置的图像在其他设备上查看时，会裁剪掉重要的人或物。通过设置图像焦点，可以避免这个问题，确保图像的重要部分始终可见。

如何实施

要将图像聚焦工具添加到你的WordPress媒体库，只需在PHP代码片段或子主题的functions.php文件中添加代码。

按照以下步骤操作：

1. 登录到WordPress仪表板

2. 打开主题编辑器

1. 在左侧菜单中，找到并点击“外观”。
2. 从下拉菜单中选择“主题文件编辑器”。

3. 编辑functions.php文件

在右侧文件列表中，找到并点击“functions.php”文件（可能显示为“主题函数”）。

代码片段名称：将图像焦点工具添加到媒体库

function add_focus_point_field($form_fields, $post) {
    $form_fields['focus_point'] = array(
        'label' => 'Image Focus Point',
        'input' => 'html',
        'html'  => '<input type="text" id="focus-point-' . $post->ID . '" class="focus-point" readonly>',
    );

    return $form_fields;
}
add_filter('attachment_fields_to_edit', 'add_focus_point_field', 10, 2);

function add_focus_point_scripts() {
    ?>
<style>
.attachment-info .thumbnail.thumbnail {
    max-width: 210px;
    max-height: 210px;
}

.attachment-info .thumbnail.thumbnail img {
    max-width: 210px;
    max-height: 210px;
}
</style>
    <script>
document.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('click', (event) => {
        const imgParent = event.target.closest('.thumbnail-image, .attachment-media-view, .wp_attachment_image');

        if (!imgParent) return;

        const img = imgParent.querySelector('img');

        if (!img) return;

        const imgWidth = img.width;
        const imgHeight = img.height;
        const offsetX = event.offsetX;
        const offsetY = event.offsetY;
        const xPercent = ((offsetX / imgWidth) * 100).toFixed(0);
        const yPercent = ((offsetY / imgHeight) * 100).toFixed(0);
        const sharedParent = img.closest('.media-frame-content, #post-body-content');
        
        if (!sharedParent) return;

        const focusPoint = sharedParent.querySelector('[id^="focus-point-"]');
        if (!focusPoint) return;

        focusPoint.value = `${xPercent}% ${yPercent}%`;
    });
});
    </script>
    <?php
}
add_action('admin_head', 'add_focus_point_scripts');
add_action('elementor/editor/after_enqueue_scripts', 'add_focus_point_scripts');

function add_focus_point_scripts_for_bricks() {
    // Only load the scripts in the Bricks Builder editor panel
    if (function_exists('bricks_is_builder_main') && bricks_is_builder_main()) {
        add_focus_point_scripts();
    }
}
add_action('wp_enqueue_scripts', 'add_focus_point_scripts_for_bricks');

如何使用图像焦点工具

使用步骤

1. 打开媒体库：进入你的WordPress后台，导航到媒体库。
2. 选择图像：点击任意图像，在右侧你会看到一个新的选项。
3. 设置焦点：单击图像的任意部分，工具会自动使用 xx% yy% 的值更新焦点位置。

注意事项

• 焦点位置不保存：焦点位置不会保存到数据库中，以避免不必要的混乱。这意味着每次都可以根据不同的需求重新设置焦点。

应用CSS

当你使用background-size: cover的背景图像时，可以使用焦点值：

• 设置 background-position: 22% 40%; 或
• 设置 background-position-x: 22%; background-position-y: 40%;

对于设置为object-fit: cover的图像，使用相同的值：

• 设置 object-position: 22% 40%;

在Elementor中使用

Elementor提供了background-position和object-position选项，但这些选项可能存在一些问题或缺失。因此，为了正确设置焦点，你可能需要使用自定义CSS。

设置背景图像焦点

1. 进入Elementor编辑器：选择需要设置背景图像的元素。
2. 设置背景大小：在Elementor UI中，将背景大小设置为“cover”。
3. 添加自定义CSS：导航到高级 > 自定义CSS，添加以下代码：

selector {
    background-position: 22% 40%;
}

当然，将22% 40%替换为你自己的焦点值。

设置object-fit: cover的图像焦点，Elementor用户自定义CSS可参考。

对于设置为object-fit: cover的图像，你需要添加以下CSS：

selector {
    object-position: 22% 40%;
}

编辑器支持

在块编辑器、Elementor编辑器和Bricks Builder编辑器中选择图像时，图像聚焦工具会直接起作用。

在这些编辑器中，你可以点击右上角的小预览图像：

1. 块编辑器：选择图像块后，点击预览图像以设置焦点。
2. Elementor编辑器：选择图像元素后，点击右上角的小预览图像以设置焦点。
3. Bricks Builder编辑器：选择图像元素后，点击预览图像以设置焦点。

它可以通过直接访问媒体库在所有 WordPress 网站上运行。

总结：

图像焦点工具是一种帮助用户快速选择图像主要焦点区域位置的工具。通过在WordPress媒体库中添加这个工具，用户可以轻松设置图像的焦点位置，确保在不同设备上显示时重要部分始终可见。使用这个工具，用户可以在图像上单击以确定焦点位置的x轴和y轴坐标，并将这些坐标值用于CSS属性，以确保图像的重要部分在任何屏幕尺寸下都能够被完整显示。通过在functions.php文件中添加相应的代码片段，用户可以在WordPress中实现这一功能，并在块编辑器、Elementor编辑器和Bricks Builder编辑器中直接使用。