圖像焦點(diǎn)工具是什么？

圖像焦點(diǎn)工具是一種可以讓你快速選擇任何圖像的主要焦點(diǎn)區(qū)域的位置。只需點(diǎn)擊圖像，你就能輕松確定圖像的焦點(diǎn)位置在x軸和y軸上的具體位置。

然后，這個(gè)x和y的位置可以用在background-position或object-position CSS屬性中。這樣，不管屏幕尺寸如何，圖像的重要部分都能被看到。

為什么要使用圖像聚焦工具

通常，我們在桌面上設(shè)置的圖像在其他設(shè)備上查看時(shí)，會(huì)裁剪掉重要的人或物。通過設(shè)置圖像焦點(diǎn)，可以避免這個(gè)問題，確保圖像的重要部分始終可見。

如何實(shí)施

要將圖像聚焦工具添加到你的WordPress媒體庫，只需在PHP代碼片段或子主題的functions.php文件中添加代碼。

按照以下步驟操作：

1. 登錄到WordPress儀表板

2. 打開主題編輯器

1. 在左側(cè)菜單中，找到并點(diǎn)擊“外觀”。
2. 從下拉菜單中選擇“主題文件編輯器”。

3. 編輯functions.php文件

在右側(cè)文件列表中，找到并點(diǎn)擊“functions.php”文件（可能顯示為“主題函數(shù)”）。

代碼片段名稱：將圖像焦點(diǎn)工具添加到媒體庫

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');

如何使用圖像焦點(diǎn)工具

使用步驟

1. 打開媒體庫：進(jìn)入你的WordPress后臺(tái)，導(dǎo)航到媒體庫。
2. 選擇圖像：點(diǎn)擊任意圖像，在右側(cè)你會(huì)看到一個(gè)新的選項(xiàng)。
3. 設(shè)置焦點(diǎn)：單擊圖像的任意部分，工具會(huì)自動(dòng)使用 xx% yy% 的值更新焦點(diǎn)位置。

注意事項(xiàng)

• 焦點(diǎn)位置不保存：焦點(diǎn)位置不會(huì)保存到數(shù)據(jù)庫中，以避免不必要的混亂。這意味著每次都可以根據(jù)不同的需求重新設(shè)置焦點(diǎn)。

應(yīng)用CSS

當(dāng)你使用background-size: cover的背景圖像時(shí)，可以使用焦點(diǎn)值：

• 設(shè)置 background-position: 22% 40%; 或
• 設(shè)置 background-position-x: 22%; background-position-y: 40%;

對于設(shè)置為object-fit: cover的圖像，使用相同的值：

• 設(shè)置 object-position: 22% 40%;

在Elementor中使用

Elementor提供了background-position和object-position選項(xiàng)，但這些選項(xiàng)可能存在一些問題或缺失。因此，為了正確設(shè)置焦點(diǎn)，你可能需要使用自定義CSS。

設(shè)置背景圖像焦點(diǎn)

1. 進(jìn)入Elementor編輯器：選擇需要設(shè)置背景圖像的元素。
2. 設(shè)置背景大小：在Elementor UI中，將背景大小設(shè)置為“cover”。
3. 添加自定義CSS：導(dǎo)航到高級(jí) > 自定義CSS，添加以下代碼：

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

當(dāng)然，將22% 40%替換為你自己的焦點(diǎn)值。

設(shè)置object-fit: cover的圖像焦點(diǎn)，Elementor用戶自定義CSS可參考。

對于設(shè)置為object-fit: cover的圖像，你需要添加以下CSS：

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

編輯器支持

在塊編輯器、Elementor編輯器和Bricks Builder編輯器中選擇圖像時(shí)，圖像聚焦工具會(huì)直接起作用。

在這些編輯器中，你可以點(diǎn)擊右上角的小預(yù)覽圖像：

1. 塊編輯器：選擇圖像塊后，點(diǎn)擊預(yù)覽圖像以設(shè)置焦點(diǎn)。
2. Elementor編輯器：選擇圖像元素后，點(diǎn)擊右上角的小預(yù)覽圖像以設(shè)置焦點(diǎn)。
3. Bricks Builder編輯器：選擇圖像元素后，點(diǎn)擊預(yù)覽圖像以設(shè)置焦點(diǎn)。

它可以通過直接訪問媒體庫在所有 WordPress 網(wǎng)站上運(yùn)行。

總結(jié)：

圖像焦點(diǎn)工具是一種幫助用戶快速選擇圖像主要焦點(diǎn)區(qū)域位置的工具。通過在WordPress媒體庫中添加這個(gè)工具，用戶可以輕松設(shè)置圖像的焦點(diǎn)位置，確保在不同設(shè)備上顯示時(shí)重要部分始終可見。使用這個(gè)工具，用戶可以在圖像上單擊以確定焦點(diǎn)位置的x軸和y軸坐標(biāo)，并將這些坐標(biāo)值用于CSS屬性，以確保圖像的重要部分在任何屏幕尺寸下都能夠被完整顯示。通過在functions.php文件中添加相應(yīng)的代碼片段，用戶可以在WordPress中實(shí)現(xiàn)這一功能，并在塊編輯器、Elementor編輯器和Bricks Builder編輯器中直接使用。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息