WordPressにAIチャットのような画像貼り付け機能を実装する方法
AIに触れた方は分かるかもしれませんが、チャット欄に画像をペーストするとアップロード出来るって知ってますか？
これ凄く便利なんです！スクリーンショットから画像を保存しなくてもそのままペースト出来る！
これをWordPressで出来ないかなと思って、実装してみることにしました。
この記事を読めば、あなたのWordPressサイトで、クリップボードから直接画像をペーストして記事に挿入できるようになります。
さらに、ただ貼り付けられるだけではありません。ペーストされた画像は自動的に軽量なWebP形式に変換され、サイトの表示速度向上にも貢献します。メディアライブラリから普通にアップロードした画像も、同様に自動でWebP化。あなたの画像管理フローが劇的に変わる、まさに決定版です。
完成する機能の紹介
- クリップボードから直接ペースト:
Ctrl+Cでコピーした画像やスクリーンショットを、投稿画面でCtrl+Vするだけで記事に挿入できます。 - 自動WebP変換: ペーストされた画像は、ユーザーのブラウザの力で瞬時にWebP形式に変換されてからアップロードされます。
- メディアライブラリも完全対応: 通常の「メディアを追加」からアップロードしたJPEGやPNG画像も、サーバー側で自動的にWebPに変換され、元画像は削除。メディアライブラリは常に最適化されたWebP画像だけが保存されるクリーンな状態に保たれます。
実装手順
実装はとてもシンプルです。子テーマのjsフォルダにJavaScriptファイルを1つ作成し、functions.phpに必要なコードを貼り付けるだけで完了します。
ステップ1: 画像ペーストを検知するJavaScriptを用意する
まず、ペースト操作を検知し、画像をWebPに変換する魔法のスクリプトを用意します。
- お使いの子テーマのフォルダ内に、
jsという名前のフォルダを作成します（すでにあれば不要です）。 - その
jsフォルダの中に、image-paste-upload.jsという名前で新しいファイルを作成します。 - 作成した
image-paste-upload.jsに、以下のコードをそのままコピー＆ペーストして保存してください。
ステップ2: WordPressにすべての機能を組み込む (functions.php)
次に、お使いの子テーマのfunctions.phpファイルを開き、以下のコードをファイルの末尾にコピー＆ペーストしてください。
このコードには、2つの重要な機能が含まれています。
- 先ほど作成したJavaScriptを投稿編集画面で読み込む機能
- メディアライブラリにアップロードされた画像をWebPに変換する機能
使い方と動作確認
設定は以上です！ファイルを保存したら、さっそく試してみましょう。
- コピペを試す: PCでスクリーンショットを撮るか、何か画像をコピーしてクリップボードに保存します。そして、WordPressの投稿編集画面で
Ctrl+V(MacならCommand+V) を押してみてください。右下に通知が表示され、少し待つとWebPに変換された画像ブロックが挿入されれば成功です！ - メディアライブラリを試す: 「メディアを追加」ボタンから、お手持ちのJPEGまたはPNG画像をアップロードします。アップロード後、メディアライブラリで画像のファイル名が
.webpに変わっていれば成功です。
まとめ
これで、あなたのブログ執筆はこれまで以上にスピーディで快適になるはずです。画像を保存する手間から解放され、サイトの高速化も同時に実現できるこの方法、ぜひあなたのサイトにも導入してみてください！
これで、あなたのブログ執失はこれまで以上にスピーディで快適になるはずです！
実を言うと、この記事で最終的にご紹介したコードにたどり着くまでには、少しだけ試行錯誤がありました。当初、より高機能な「Imagick」という画像処理ライブラリを使おうとしたのですが、私がこのサイトで利用しているロリポップ！レンタルサーバーの環境では、WebPへの変換がうまくいかなかったのです。
しかし、そのおかげで、より多くのレンタルサーバー環境で普遍的に動作する「GD」ライブラリを使った、より確実で安定した方法を見つけることができました。回り道もしてみるものですね！
画像を保存する手間から解放され、サイトの高速化も同時に実現できるこの方法。ロリポップ！はもちろん、様々なサーバーで動作するはずですので、ぜひあなたのサイトにも導入してみてください！
