イメージフォーカスツールそれは何ですか？

イメージフォーカスツールは、画像の主焦点エリアの位置を素早く選択できるツールです。画像をクリックするだけで、x 軸と y 軸のどこに画像の焦点があるかを簡単に特定できます。

このxとyの位置は、CSSプロパティのbackground-positionやobject-positionで使うことができる。こうすることで、画面サイズに関係なく、画像の重要な部分を見ることができます。

イメージフォーカスツールを使う理由

デスクトップに設定した画像を他のデバイスで見ると、重要な人物や物体が切り取られてしまうことがよくあります。この問題は、画像の重要な部分が常に見えるように画像のフォーカスを設定することで回避できます。

実施方法

イメージフォーカスツールをWordPressメディアライブラリに追加するには、PHPコードスニペットまたは子テーマのfunctions.phpファイルにコードを追加するだけです。

以下の手順に従ってください：

1.ワードプレスのダッシュボードにログインする

2.テーマエディターを開く

1. 左側のメニューから"外装状態".
2. ドロップダウンメニューから "テーマファイルエディター".

3.functions.phpファイルを編集する。

右側のファイルリストから、「functions.php」ファイルを見つけてクリックします（「Theme Functions」と表示される場合もあります）。

コード・スニペット名：メディア・ライブラリに画像フォーカス・ツールを追加する

function add_focus_point_field($form_fields, $post) { 以下のようになります。
    $form_fields['focus_point'] = array(
        'label' => '画像のフォーカスポイント'、
        'input' => 'html'、
        'html' => 'ID . '" class="focus-point" readonly>', '.
    ).

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

関数 add_focus_point_scripts() { ?
    ?; function add_focus_point_scripts() { ?

.attachment-infoの.thumbnail.thumbnail {。
    max-width: 210px；
    max-height: 210px；
}

.attachment-info .thumbnail.thumbnail img { { 添付ファイルのサムネイル。
    max-width: 210px; max-height: 210px; }.
    max-height: 210px; }.
}
</style
    
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')；

        const img = imgParent.querySelector('img'); if (!img) return；

        const imgWidth = img.width; const imgHeight = img.height; if (!img)
        const imgHeight = img.height; const offsetX = event.offsetX; event.height; event.offsetX
        const offsetX = event.offsetX; const
        const offsetY = event.offsetY; const xPercent = ((offsetX / /))
        const xPercent = ((offsetX / imgWidth) * 100).toFixed(0); const yPercent = ((offsetY / imgWidth) * 100).
        const yPercent = ((offsetY / imgHeight) * 100).toFixed(0); const sharedParent = img.
        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() { // フォーカスポイントのスクリプトのみを読み込みます。
    // ブリック・ビルダー・エディタ・パネルのスクリプトのみを読み込む
    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-position: 22% 40%； もしかしたら
• セットアップ background-position-x: 22%; background-position-y: 40%；

に設定されている場合オブジェクトフィット：カバー同じ値を使って、画像の

• セットアップ オブジェクトの位置：22% 40%。

Elementorでの使用

Elementorは以下を提供する。背景位置歌で応えるオブジェクト位置オプションを使用することができますが、これらのオプションに問題があったり、欠落している場合があります。したがって、フォーカスを正しく設定するには、カスタムCSSを使用する必要があるかもしれません。

背景画像のフォーカスを設定する

1. Elementorエディタへのアクセス背景画像を設定する要素を選択します。
2. 背景サイズの設定: Elementor UIで、背景のサイズを "cover "に設定します。
3. カスタムCSSの追加Advanced > Custom CSSに移動し、以下のコードを追加します：

セレクタ
    background-position: 22% 40%；
}

もちろん、22% 40%を自分のフォーカス値に置き換えてください。

object-fit: coverのイメージフォーカスを設定する。Elementorユーザー定義CSS紹介可能。

に設定されている場合オブジェクトフィット：カバー画像を表示するには、以下のCSSを追加する必要があります：

セレクタ
    オブジェクトの位置：22% 40%；
}

エディターサポート

イメージフォーカスツールは、ブロックエディター、Elementorエディター、Bricks Builderエディターで画像を選択する際に直接機能します。

これらのエディターでは、右上の小さなプレビュー画像をクリックすることができます：

1. ブロックエディタ画像ブロックを選択した後、プレビュー画像をクリックしてフォーカスを設定します。
2. エレメンタ・エディター画像要素を選択した後、右上の小さなプレビュー画像をクリックしてフォーカスを設定します。
3. ブリック・ビルダー エディター画像要素を選択した後、プレビュー画像をクリックしてフォーカスを設定します。

メディアライブラリに直接アクセスできるすべてのWordPressサイトで動作します。

概要

イメージフォーカスツールは、画像のメインフォーカスの位置を素早く選択できるツールです。WordPressのメディアライブラリにこのツールを追加することで、ユーザーは画像のフォーカス位置を簡単に設定することができ、異なるデバイスで表示された場合でも重要な部分が常に表示されるようになります。このツールを使って、ユーザーは画像をクリックしてフォーカス位置のX軸とY軸座標を決定し、これらの座標値をCSSプロパティに使用することで、どの画面サイズでも画像の重要な部分が完全に表示されるようにすることができます。functions.phpファイルに適切なコードスニペットを追加することで、WordPressにこの機能を実装し、Block Editor、Elementor Editor、Bricks Builder Editorで直接使用することができます。