AIの実力がどんなものか、まずは簡単なものから試してみようと思い、wordpressのログイン用のプラグインを作らせてみました。
以下が自分で考えた仕様
「
このプロジェクトはwordpressです。wordpressのログイン用のプラグインを構築してください。
仕様：
・ショートコードを投稿ページに貼ると、ログインフォームが表示される。
・ログインフォームには、ユーザー名とパスワードの入力フィールドが必要です。
・ログインフォームには、ログインボタンが必要です。
・ユーザーが正しい資格情報を入力した場合、ユーザーはトップページにリダイレクトされる。
・ユーザーが誤った資格情報を入力した場合、エラーメッセージが表示される。
・プラグインは、WordPressのユーザーロールと権限を尊重する必要があります。
・プラグインは、セキュリティのベストプラクティスに従う必要があります。
」これを、「preplexity」というAIブラウザで詳細を書かせる
すると、以下のようなプロンプトを生成してくれた
「
了解しました。
以下は、機能仕様に加えて「美しく整ったデザイン（HTML＋CSS）」を含めた、完成度の高いWordPressログインフォームプラグインを構築させるための詳細プロンプトです。
見た目の統一やユーザー体験（UX）も考慮した内容に書き直しています。
WordPress プラグイン開発用プロンプト（デザイン統合版詳細仕様）
次の要件に従って、WordPress用のデザイン性と機能性を兼ね備えたカスタムログインフォームプラグインを構築してください。
プロジェクト概要
このプロジェクトは、WordPressサイト向けのログインフォームプラグインです。
WordPressの標準ログインページ（wp-login.php）を使わず、ショートコードで任意のページや投稿にスタイリッシュなログインフォームを埋め込めるようにします。
フォームデザインはシンプルでモダン、ユーザーフレンドリーなUIにしてください。
機能仕様
ショートコード実装
ショートコード名：[custom_login_form]
ショートコードを貼り付けたページに、デザイン付きのログインフォームを表示。
ログインフォームUI
丸みを帯びたボックス型レイアウト。
レスポンシブ対応（スマホ・PC両方で最適表示）。
センター寄せ、フォーム周囲に適度な余白とドロップシャドウ。
ラベルと入力フィールドを縦並びに配置。
「ログイン」ボタンはコントラストの高い強調色でホバー時に軽いアニメーション。
テキストフォントはGoogle Fontsの「Roboto」など、モダンなサンセリフ体を採用。
フォーム項目
ユーザー名（username）テキスト入力フィールド。
パスワード（password）入力フィールド。
「ログイン」ボタン。
入力例を示すプレースホルダー（例：「ユーザー名」「パスワード」を明記）。
ログイン処理
WordPress標準関数 wp_signon() を使用。
成功時：ログイン処理後に home_url(‘/’) へリダイレクト。
失敗時：フォーム上部に赤枠のエラーメッセージを表示（例：「ユーザー名またはパスワードが正しくありません。」）。
すでにログイン済みのユーザーがアクセスした場合：「すでにログインしています。」というメッセージを中央に表示し、フォームは非表示。
セキュリティ要件
wp_nonce_field()を使用してCSRF対策。
sanitize_text_field()などで入力値をサニタイズ。
出力にはesc_html()、esc_attr()、esc_url()などのエスケープ関数を徹底。
HTTPS通信を想定し、安全なログイン処理を設計。
スタイル仕様
ログインフォームのラッパークラス：.custom-login-form-wrapper
CSSは assets/style.css に分離し、wp_enqueue_style() で読み込む。
CSS例：
背景：淡いグレーまたは白背景。
ボタン：メインカラー（#0073aa）、ホバー時には少し濃いトーン。
枠線：薄グレー、角丸5px。
シャドウ：box-shadow: 0 4px 10px rgba(0,0,0,0.1);
スマホ時は幅90%、PC時は最大幅400pxに制限。
プラグイン構成
text
/custom-login-form/
├── custom-login-form.php
├── assets/
│ └── style.css
custom-login-form.php に以下を実装：
プラグインヘッダー（名称、バージョン、作成者、説明）。
ショートコード登録処理。
フォーム出力ロジック。
ログイン認証＋エラーハンドリング処理。
ログイン済判定。
style.css に上記UIデザインを反映。
国際化対応
テキストには __() もしくは _e() を利用。
翻訳ファイル対応を前提に設計。
動作環境
WordPress 6.x 以上。
PHP 7.4 以上。
マルチサイト対応。
期待される出力（フォーム見た目の一例）
text
—————————————-
🔒 ログインフォーム
—————————————-
[ ユーザー名 ] ____________
[ パスワード ] ____________
[ ログインボタン ] ← 濃い青色、ホバーで明るく
—————————————-
[エラーメッセージがここに赤文字で表示]
—————————————-
」
これはすごい。
これをそのままgithubcopilotにコピペして作らせてみる。
すると一瞬でプラグインを構築してくれた。
コードは以下のようになっている。
– custom-login-form
– custom-login-form.php
– assets/
– style.css
phpの中身は以下
「
<?php
/**
* Plugin Name: Custom Login Form
* Plugin URI: https://example.com
* Description: WordPressサイトにショートコードでカスタムログインフォームを埋め込むプラグイン
* Version: 1.0.0
* Author: Your Name
* Author URI: https://example.com
* License: GPL v2 or later
* Text Domain: custom-login-form
* Domain Path: /languages
*/
if ( ! defined( ‘ABSPATH’ ) ) {
exit;
}
// ショートコード登録
add_shortcode( ‘custom_login_form’, ‘custom_login_form_shortcode’ );
// CSSの読み込み
add_action( ‘wp_enqueue_scripts’, ‘custom_login_form_enqueue_assets’ );
/**
* CSSファイルを読み込む
*/
function custom_login_form_enqueue_assets() {
wp_enqueue_style(
‘custom-login-form-style’,
plugin_dir_url( __FILE__ ) . ‘assets/style.css’,
array(),
‘1.0.0’
);
}
/**
* ショートコードコールバック関数
*/
function custom_login_form_shortcode() {
// すでにログイン済みの場合
if ( is_user_logged_in() ) {
return ‘<div class=”custom-login-form-wrapper”><div class=”login-message”>’ .
esc_html__( ‘すでにログインしています。’, ‘custom-login-form’ ) .
‘</div></div>’;
}
// エラーメッセージの処理
$error_message = ”;
if ( isset( $_POST[‘custom_login_nonce’] ) ) {
if ( ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST[‘custom_login_nonce’] ) ), ‘custom_login_action’ ) ) {
$error_message = esc_html__( ‘セキュリティ検証に失敗しました。’, ‘custom-login-form’ );
} else {
$username = isset( $_POST[‘username’] ) ? sanitize_text_field( wp_unslash( $_POST[‘username’] ) ) : ”;
$password = isset( $_POST[‘password’] ) ? sanitize_text_field( wp_unslash( $_POST[‘password’] ) ) : ”;
if ( empty( $username ) || empty( $password ) ) {
$error_message = esc_html__( ‘ユーザー名とパスワードを入力してください。’, ‘custom-login-form’ );
} else {
$creds = array(
‘user_login’ => $username,
‘user_password’ => $password,
‘remember’ => true,
);
$user = wp_signon( $creds, false );
if ( is_wp_error( $user ) ) {
$error_message = esc_html__( ‘ユーザー名またはパスワードが正しくありません。’, ‘custom-login-form’ );
} else {
wp_safe_remote_post( home_url( ‘/’ ), array(
‘blocking’ => false,
) );
wp_redirect( home_url( ‘/’ ) );
exit;
}
}
}
}
// フォームHTML
ob_start();
?>
<div class=”custom-login-form-wrapper”>
<div class=”custom-login-form-container”>
<h2 class=”form-title”>🔒 <?php esc_html_e( ‘ログインフォーム’, ‘custom-login-form’ ); ?></h2>
<?php if ( ! empty( $error_message ) ) : ?>
<div class=”login-error”>
<?php echo $error_message; ?>
</div>
<?php endif; ?>
<form method=”POST” class=”login-form”>
<?php wp_nonce_field( ‘custom_login_action’, ‘custom_login_nonce’ ); ?>
<div class=”form-group”>
<label for=”username”><?php esc_html_e( ‘ユーザー名’, ‘custom-login-form’ ); ?></label>
<input
type=”text”
id=”username”
name=”username”
placeholder=”<?php esc_attr_e( ‘ユーザー名を入力’, ‘custom-login-form’ ); ?>”
required
>
</div>
<div class=”form-group”>
<label for=”password”><?php esc_html_e( ‘パスワード’, ‘custom-login-form’ ); ?></label>
<input
type=”password”
id=”password”
name=”password”
placeholder=”<?php esc_attr_e( ‘パスワードを入力’, ‘custom-login-form’ ); ?>”
required
>
</div>
<button type=”submit” class=”login-button”>
<?php esc_html_e( ‘ログイン’, ‘custom-login-form’ ); ?>
</button>
</form>
</div>
</div>
<?php
return ob_get_clean();
}
」
このプラグインを早速有効化してみる。
ショートコードを固定ページに貼る。
[custom_login_form]
これで保存してページを見てみる
おお、デザインいい感じ。
早速アイパスを入れてログインしてみると
成功！！
すごーーーーい、AIすごい。
すごく簡単なプラグインなので、出来るとは思ったけど本当に出来てびっくり。
さらに、エラーのパターンも試してみる。
エラーもちゃんと出る！！
これもすごい。
AIすごい。
このプラグインは、セキュリティ対策もちゃんとされているし、デザインもいい感じだし、完璧すぎる。
AIすごい。
コメント