WordPressのメディアライブラリに画像フォーカスツールを追加

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

画像フォーカスツールは、任意の画像のメインフォーカス領域の位置をすばやく選択できるツールです。画像をクリックするだけで、x 軸と y 軸のどこに画像の焦点があるかを簡単に特定できます。

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

イメージフォーカスツールを使用する理由

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

実施方法

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

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

1.WordPressのダッシュボードにログインします。

2.テーマエディターを開きます

1. 左側のメニューから"外装状態".
2. ドロップダウンメニューから選択してください。テーマファイルエディタ".

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

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

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

function add_focus_point_field($form_fields, $post) { { focus_point'フィールドを追加します。
    $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%；

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

• セットアップ object-position：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を追加する必要があります：

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

エディターサポート

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

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

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

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

概要

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