Claude CodeでWordPressプラグインをつくってみた。

  • URLをコピーしました!

WordPressではプラグインを使って機能をカスタマイズすることができます。
このプラグインをAIに聞きながらつくってみました。

目次

WordPressのプラグインとは?

WordPressを利用して、ブログやホームページ、動画販売サイトをつくっています。
最初にWordPressをインストールした段階では、ほとんど真っ白な状態。

そこからカスタマイズをして、独自のサイトをつくることができます。
とはいえ、WordPressでイチからコードを書いてつくるというのは、現実的ではありません。
誰もができるものではありませんし。

ただ、WordPressにはテーマとプラグインをインストールすることができ、ベースになるサイトデザインや機能を取り入れることができるのです。

このうちプラグインは、機能付加ができるもの。
インストールすれば、新しい機能を加えることができます。

たとえば、このブログのフォームも「Contact Form7」というプラグインをインストールして使えるようにしています。プラグインを無効化すれば、フォームも表示されなくなります。

このプラグイン、今はAIに相談しつつ、じぶんでつくることができるようになっています。
わたしがつくってみたのは、投稿する写真の情報(EXIF)を載せるプラグインです。

「写真をどう撮ったのか?」を表示したい

カメラで写真を撮ったとき、どのカメラ、どのレンズでF値や焦点距離、シャッタースピードなどどうやって撮ったかが写真ファイルに保存されています。EXIF(エグジフ)と言われる規格データです。

ファイルに書き込まれています。
Macの場合だと、ファイルを右クリックして、「情報を見る」を選ぶと、

詳細情報で、写真を撮ったカメラ情報やF値、シャッタースピードなどをチェックできるのです。

ただ、カメラで撮った写真をこの情報をブログに載せたこともあるのですが、いちいち調べるのがめんどくさく…やらなくなりました。そこで今回のプラグインをつくりました。

写真をWordPressにアップロードしたら、その写真のEXIF(撮影情報)を自動で表示させることができます。いちいち調べなくてもよくなりました。

実際に撮影した写真で実例を。これは岐阜清流里山のハイウェイオアシスで。

下呂に着いて最初に食べたのが下呂プリン。妻が買ったものを撮らせてもらいました。ズームレンズで背景ボケが入るように。

夜に下呂の待ちを撮影に行ったときの1枚。夜なので、さすがに明るく撮るのにも限界があり、ISO6400で撮ったものの、思ったよりノイズがないかなと。

といったように。写真撮影をしたときの設定をそのままブログ記事にも活かせるようになりました。
ただ、この表示を使いたくない場面もあります。

そのときは、記事中の写真のカメラ情報を表示のチェックをはずすか、

アイキャッチの写真なら、カメラ情報を表示のチェックをはずせば、EXIF(撮影情報)を非表示にできます。

まぁ、カメラで写真を撮らない方には、必要ないかもしれませんけどね。
じぶんがつけたければ、プラグインをつくって解決することができるということです。

AIで自作プラグイン「EXIF FILM Display」完成への道

今回、プラグインをつくるのに、利用したのはClaude Code。

プラグインを追加するには、必要なプラグインを見つけてインストールするか、ZIPファイルをアップロードするかのどちらかです。

今回は自作のプラグインですから、ZIPファイルをつくってアップロードすることになります。

このプラグインをどうやってつくったか?
希望をClaude Codeに相談したのです。

・EXIF(撮影情報)をアップロードした画像に自動表示させたい
・表示・非表示は選択できるように
・画像の下部分に表示させたい
・目立ちすぎないように表示させる
・フォントはNoto Sans JP
・カメラのアイコンを入れたい
・他のプラグインと干渉しないように
・軽いファイルにして
・編集画面でもEXIF(撮影情報)を表示させたい

といったことを伝えたのですが、まぁ最初からはうまくいきません。

最終的にはこういう3つのファイルをつくって、ZIPファイルにします。3つのファイルはClaude Codeに書いてもらいました。

ただ、最初はなかなかうまくいきません。
まずは写真をアップロードしても、何も表示されないところから。その後はエラーが出たり、

いざ、表示されるようになったらなったで、意外と見にくかったりしましたし、

帯を入れて見るものの、今度は写真のした部分が見えなくなってしまうのがイヤだなとまた変更をお願いし、

なので、白い透過にして表示するようにしたりと何度か試行錯誤を重ねて最終的にはこれで落ち着きました。編集画面でも、EXIF(撮影情報)が出るようにしたのは、わたしのこだわりです。

スマホ表示も大丈夫でしたし、

RSSは画像への表示はできませんが、文字の埋め込みでの表示はできました。

じぶんのブログのデザインを変えたいと思ったら、プラグインもAIに相談しつつ、つくってみるのもおすすめです。(ご興味あれば、サポートも承ります。)


【編集後記】
昨日は朝から家族で下呂へ。
これまでは中央道経由で
行ってましたが、はじめて
東海北陸自動車道経由で。

下呂に着いてからは
食べ歩きをしたものの、
店が少なく早めにホテルへ。

食事前に卓球を30分、
食事後に長女(17)のリクエストで
下呂の夜景撮影に。

そのまま泊まっています。

【昨日の1日1新】
※「1日1新」→詳細はコチラ
岐阜清流里山ハイウェイオアシス
東海北陸自動車道 富加関ICで下車
GEROGERO BUTTER STAND
下呂プリン
NITAROU
湯島庵
TAOYA下呂


この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次