カスタムWordPressプラグイン開発と
AIエディタの活用
このドキュメントは、WordPressのカスタムプラグイン開発の可能性、そのために使われる技術、そして開発をサポートするAIネイティブエディタについて、私たちの会話から重要なポイントをまとめたものです。
Q1. どんな程度のプラグインなら作れますか？
PolylangのようなWordPressの根幹を改造する「超大作」とは異なり、「便利な特注の道具」や「気の利いた追加オプション」のような、サイト運営をより便利にするカスタムプラグインの作成が可能です。これらは、WordPressの既存の機能の上に、あなたのサイトだけの便利な機能を追加します。
作成可能なプラグインの例
1. コンテンツ表示を便利にする系（ショートコード）
記事内に簡単なコード（ショートコード）を書くだけで、決まった形のレイアウトを呼び出す機能です。
- プロフィールボックス表示:
[my_profile]と書くだけで、設定済みの自己紹介ボックスを表示する。 - 広告表示:
[ad_banner_A]と書くだけで、特定の広告コードを表示する。 - 吹き出し会話:
[chat person="A"]こんにちは！[/chat]のように書くと、会話形式のデザインで表示する。
2. 管理画面を効率化する系
日々のサイト更新作業を少し楽にする機能です。
- 投稿複製: 投稿一覧に「複製」ボタンを追加し、ワンクリックで記事をコピーする。
- カスタムダッシュボード: 管理画面トップに「よく使うページのリンク一覧」など、あなた専用の情報ボックスを追加する。
3. 簡単な外部連携系
他のサービスとシンプルに連携する機能です。
- カスタムSNSシェアボタン: 記事の最後に、定型文付きのX（旧Twitter）シェアボタンを追加する。
- 天気予報ウィジェット: 天気予報APIから情報を取得し、サイドバーに今日の天気を表示する。
Q2. プラグイン作成にCursorは使えますか？ また、プラグインは何語でできていますか？
Cursorの活用
はい、使えます。そして、最高の相棒になります。
Cursorはプラグイン開発のための「超高性能な作業台」です。AIアシスタントが、コードの生成、エラーチェック、関数の意味の解説など、開発のあらゆる場面で強力なサポーターとなってくれます。
プラグインを構成する言語
WordPressのプラグインは、複数の言語を組み合わせた「道具箱」のようなものです。以下に、それぞれの言語の役割を、Polylangを例に挙げてより詳しく解説します。
1. 骨格と頭脳（メイン言語）: PHP
プラグインの中心となる言語。WordPressの裏側で動き、データベースとのやり取りやサーバー設定の変更など、複雑な処理のすべてを担当します。
場所: …/plugins/[プラグイン名]/[メイン].php, …/themes/[子テーマ名]/functions.php
Polylangでの役割: まさにプラグインの心臓部です。データベースに接続して「どの記事がどの言語に対応するか」を記録したり、URLの構造を書き換えて/en/のような言語ごとのパスを生成したりする、最も重要なロジックを担っています。
2. 構造: HTML
プラグインが作り出すボタンや設定画面など、目に見える部分の基本的な「骨組み」を作ります。ただし、WordPressでは.htmlというファイルが直接使われることは稀で、通常はPHPファイルの中で動的に生成されます。
Polylangでの役割: 例えばサイトに表示される「言語スイッチャー」は、見た目上はただのリンクやドロップダウンメニューですが、そのHTML構造（<a>タグや<ul>タグなど）は、PHPによって「このサイトには英語と日本語があるから、リンクを2つ作ろう」というロジックに基づいて動的に作り出されています。
3. 見た目と装飾: CSS
PHPが生成したHTMLの骨組みに対して、色をつけたり、レイアウトを整えたりして、美しいデザインに仕上げます。
場所: …/themes/[子テーマ名]/style.css, …/plugins/[プラグイン名]/css/style.css
Polylangでの役割: 言語スイッチャーに表示される国旗のアイコンの大きさや配置を調整したり、ドロップダウンメニューのデザインを整えたりするのに使われています。
4. 動きと対話: JavaScript
ユーザーの操作に応じて、ページを再読み込みすることなくコンテンツを動的に変化させ、スムーズな操作感を提供します。
場所: …/themes/[子テーマ名]/js/script.js, …/plugins/[プラグイン名]/js/script.js
Polylangでの役割: WordPressの管理画面で、投稿の言語を切り替えたときに設定項目がスムーズに切り替わったり、ドラッグ＆ドロップで言語の順番を並べ替えたりといった、リッチなユーザー体験を実現するために使われています。
なんで HTMLのファイルの場所が書いてないの？😊
素晴らしい質問ですね！これはWordPressの仕組みの核心に触れる、とても重要なポイントです。結論から言うと、WordPressのテーマやプラグインがページの構造を作る際に、独立した.htmlファイルが使われることはほとんどありません。
HTMLの構造は、すべて.phpファイルの中に書かれています。これは、PHPがウェブサイトを動的に作るための基本的な仕組みだからです。料理に例えると分かりやすいかもしれません。
「完成した料理の写真」のようなものです。見た目は決まっていますが、中身を変えることはできません。
「レシピ」のようなものです。HTMLでお皿を用意し、PHPでデータベースから最新情報を取ってきて盛り付ける、といった指示が書かれています。
ウェブサーバーは、この.phpという「レシピ」を読んで調理し、最終的に完成品であるHTMLだけをあなたのブラウザに提供します。なので、.phpファイルの中にHTMLが書かれているのはごく自然なことなのです。（逆に、.htmlファイルの中にPHPの命令を書いても実行されません。）
そのため、HTMLの「場所」は以下のようになります。
プラグインの場合: …/plugins/[プラグイン名]/[メインファイル].php や、その中のPHPファイル
テーマの場合: …/themes/[子テーマ名]/page.php や single.php などのPHPテンプレートファイル
なぜファイルがたくさんあるの？
WordPressは役割分担を徹底しています。wp-adminやwp-includesはWordPress本体の「エンジンルーム」で、私たちは触りません。私たちが主に作業するのは、テーマやプラグインが格納されるwp-contentフォルダの中だけです。
プラグインの権限はどこまで？
一度「有効化」されたプラグインは、非常に強力な権限を持ちます。例えるなら「建物のマスターキー」を渡されるようなもので、データベースの全データの読み書き・削除、サーバー上の全ファイルの変更、外部との自由な通信が可能です。だからこそ、信頼できるプラグインだけをインストールすることが非常に重要になります。
具体例：Polylangの場合
Polylangのような高度なプラグインは、その強力な権限をサイトの広範囲にわたって行使します。
- データベースへの権限: Polylangの最も重要な役割は、データベースを操作することです。主にPHPを使い、
wp_posts（投稿）やwp_terms（カテゴリー・タグ）といったテーブルに、「どの記事とどの記事が翻訳関係にあるか」という情報を記録します。これにより、言語の切り替えを可能にしています。 - ファイルへの権限: インストールされると、
wp-content/plugins/polylang/というフォルダに、自身の動作に必要な多数のファイルが設置されます。これらは主にPHP（WordPressのコア機能と連携するロジック）、JavaScript（管理画面でのスムーズな操作を実現するため）、CSS（言語スイッチャーなどのデザインのため）で書かれています。 - また、URLの構造（例:
example.com/en/）を機能させるために、サーバーの設定ファイルである.htaccessファイルに書き込みを行う権限も持ちます。
Q3. 各社のAIネイティブエディターの得意・不得意は？
AIエディタの世界は今、まさに戦国時代です。それぞれに個性と得意分野があります。
| エディタ/ツール名 会社 |
得意なこと（強み） | 不得意なこと（弱み） |
|---|---|---|
| Cursor Anysphere |
AIとの対話・編集能力。既存のコードを「これ、こう直して」と指示して修正させたり、チャットで相談しながら開発するのが非常に得意。VS Codeベースなので拡張性も高い。 | AIの利用回数に無料制限がある。まだ比較的新しいツールなので、情報が少ない場合がある。 |
| GitHub Copilot GitHub (Microsoft) |
コードの自動補完（オートコンプリート）が驚異的に賢い。「こういうコードを書きたいな」とコメントを書くだけで、次の行からコードをスラスラと提案してくれる。 | あくまで「助手（Copilot）」なので、CursorのようにAIと対話しながら能動的にコードを編集する能力は限定的。 |
| Replit Ghostwriter Replit |
ブラウザだけで完結する手軽さ。PCへのインストールが一切不要で、ブラウザを開けばすぐに開発を始められる。AIもそのオンライン環境に最適化されている。 | オフラインでは使えない。大規模なプロジェクトや、ローカル環境との深い連携には不向き。 |
| Amazon CodeWhisperer Amazon |
セキュリティとライセンス管理。書いたコードにセキュリティ上の問題がないかスキャンしたり、参考にしたオープンソースのライセンスを明記する機能に強い。企業での利用に向いている。 | 個人の開発者にとっては、少し機能が硬派で、創造性を刺激するような機能は少なめ。 |
結論として、あなたが選んだCursorは、「AIと相談しながら、一緒に一つのものを作り上げていく」という、まさにAIネイティブな開発スタイルに最も適したエディタの一つです。
コメント