WordPressで画像にピンをうって説明とかつけるやつ

WordPressって使われていますか。
画像に対して何か簡単な説明をつけたりリンクを飛ばしたりとか
したいこととかってないですか。

WordPressではプラグインが豊富に公開されているので
既存のものを探したりしもしたのですが
欲しいものに近い高機能で似たようなものは
あったんですがサブスクで月$10くらいだったりと
自分の用途ではちょっとお高い。

なら自前でってことでWordpressのプラグインです。

画像の上にピンを置いて説明を付けたいなと思って
座標を打ち込むのはさすがにやりたくない
マウスで直感的にやりたい。

既存のものを探せば高機能で似たような機能のものは
あったんですがサブスクで月$10くらいだったりと
自分の用途ではちょっとお高い。

なら自前でってことでWordpressのプラグインです。

よかったらどうぞです。

https://github.com/naoijponly/image-pin-block/releases/download/v0.3.2/image-pin-block-0.3.2.zip

ラベルをつけたり説明をつけたりできます

主な機能
インストール
1. 方法A: GitHub Releases から ZIP をダウンロード
2. 方法B: git clone
基本的な使い方
主な操作
対応環境

主な機能

画像上の好きな位置にピンを追加し、ドラッグで位置調整(画像に対する%座標で保存されるため、表示サイズが変わっても相対位置を保ちます)
ピンごとに、近くに常時表示するラベル・クリックやタップで表示する説明文・同じページ内の見出し等への遷移先を設定できます
ラベルはドラッグで、ピン/マーカーの周囲360度好きな位置へ配置できます
マーカー画像: ピンごとに丸マーカーの代わりに任意の画像を指定できます。拡大率(元画像サイズを基準にした%)とラベル表示の有無を個別に設定できます
PC / スマホでそれぞれ独立した動作設定(ホバー・クリック・タップの組み合わせ)を選べます
ピンの追加・編集はすべて専用のフルスクリーン編集画面(Fullscreen Editor)で行います。ダブルクリックで新規ピンの追加位置を確認してから作成する、といった誤操作を防ぐ導線になっています
現在の状態を元画像の解像度でPNG画像として書き出せます(「画像として保存」)
ピンのサイズ・色・ラベル/ポップオーバーの背景色・不透明度・文字色・縁取りを、WordPress 標準のカラーピッカー等で設定可能
画像の拡大表示。ドラッグ/スワイプでの移動、マウスホイール/ピンチ/画面上のボタンでの拡大縮小します。

インストール

方法A: GitHub Releases から ZIP をダウンロード

このリポジトリの Releases ページから最新の ZIP ファイルをダウンロードします
WordPress 管理画面の「プラグイン」→「新規追加」→「プラグインのアップロード」から ZIP ファイルを選択してインストールします
- または、ZIP を解凍して wp-content/plugins/image-pin-block フォルダとして直接配置しても構いません
プラグイン一覧から「Image Pin Block」を有効化します

方法B: git clone

cd wp-content/plugins
git clone <このリポジトリのクローン用URL> image-pin-block

<このリポジトリのクローン用URL> は、GitHub の「Code」ボタンから取得できる URL に置き換えてください。配置後、WordPress 管理画面のプラグイン一覧から「Image Pin Block」を有効化します。

基本的な使い方

投稿・固定ページの編集画面で、ブロック挿入メニューから「Image Pin Block」を追加します
「画像を選択」ボタンから、メディアライブラリの画像(PNG / JPEG)を選びます
画像のダブルクリック、または右サイドバーの「ピンを編集」ボタンで、フルスクリーン編集画面(Fullscreen Editor)を開きます。ピンの追加・編集はすべてこの中で行います(通常のブロック表示は、編集操作のない表示専用プレビューです)
プレビュー上の空いている場所をダブルクリックするか「＋」ボタンでピンを追加し、ラベル・説明・遷移先などを設定します

主な操作

ピン/画像マーカーの追加: 空き部分のダブルクリック、または「＋」ボタン
選択: 1回クリック(選択のみ、ポップオーバーは開きません)。もう一度クリックするとポップオーバーが開閉します
移動: ピン・画像マーカー・ラベルをドラッグ
削除: 「このピンを削除」(削除後は次のピンを自動選択)
Zoom / Pan: プレビュー上部のスライダー、またはマウスホイール操作(100〜200%)。100%を超えるとプレビュー上のドラッグで表示位置を移動できます
画像として保存: 現在のピン配置を元画像へ合成したPNGとして保存
全体を表示する: 画像全体をプレビューに収める倍率へ戻す

対応環境

WordPress のブロックエディタ(Gutenberg)
Cocoon(クラシックテーマ、子テーマ有効)での動作を確認しています

Pointer Events や <template> 要素、CSS の transform などを使用しているため、モダンブラウザでの利用を前提としています。