AIはワードプレスのコーディングができるのか？ChatGPT, Gemini, Grok,Cloudeで検証してみました。１サンプルですので正確な検証とは言えませんが、往々にして同じような傾向でAIのコードは生成されますので参考になりましたら幸いです。
使ったプロンプトは？
使ったプロンプトは下記となります。聞き方をかなり技術寄りで正確なものとしました。
人間の技術者でしたら簡単に出来る内容です。
AIが生成したコードを実際に動かしてみてエラーが無いかやどのような見た目になるかを検証しました。
ワードプレスの管理画面の全画面に表示される投稿ID５のカスタムフィールドmydataを表示するPHPの関数書いて。functions.phpにコピペして使える形でお願い
１ ChatGPT(無料版)
ChatGPTの出力結果は下記のようになりました。
結果
エラーは出ず、コードのロジックやエラー処理もよくできていますがコードが冗長ですね。またデザインが最悪です。これでは操作ができなくなってしまいます。視覚的な結果を予測したりして実装するのはAIは総じて苦手です。
function show_mydata_on_admin_screen() {
if ( ! is_admin() ) {
return;
}
$post_id = 5;
$meta_key = 'mydata';
$mydata = get_post_meta( $post_id, $meta_key, true );
?>
<div id="mydata-admin-overlay">
<?php echo esc_html( $mydata ); ?>
</div>
<style>
#mydata-admin-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.85);
color: #fff;
z-index: 99999;
padding: 40px;
box-sizing: border-box;
font-size: 18px;
overflow-y: auto;
}
</style>
<?php
}
add_action( 'admin_footer', 'show_mydata_on_admin_screen' );
２ Gemini(無料版)
Gemini無料版の結果は下記のようになりました。
エラーは出ずコードもシンプルに仕上がっています。これはなかなか優秀です。しかし、場所があまりよくないですね。全ページに表示される汎用データでしたら、各管理画面のページのタイトルの上にあった方がいいでしょう。
/**
* 管理画面の全ページ上部に投稿ID 5のカスタムフィールド 'mydata' を表示する
*/
function display_custom_field_id5_at_top() {
// 投稿ID 5から 'mydata' の値を取得
// 第3引数をtrueにすることで、配列ではなく文字列として取得します
$my_data = get_post_meta(5, 'mydata', true);
// 値が存在する場合のみ表示
if (!empty($my_data)) {
echo '<div class="notice notice-info" style="display: block; border-left-color: #0073aa; margin-top: 10px;">';
echo ' <p><strong>【共有データ】</strong> ' . esc_html($my_data) . '</p>';
echo '</div>';
}
}
add_action('admin_notices', 'display_custom_field_id5_at_top');
３ Grok(無料版)
Grokの結果は下記のようになりました。
エラーは出ませんでしたが、Gemini同様、表示位置の課題があり、視覚的な奇妙さが感じられる結果となりました。
/**
* 管理画面の全画面（ほぼ）に投稿ID=5のカスタムフィールド「mydata」の値を表示する
* functions.php に貼り付けて使用
*/
add_action('admin_notices', 'show_post5_mydata_in_admin_all_pages');
function show_post5_mydata_in_admin_all_pages() {
// 管理画面以外では何もしない
if (!is_admin()) {
return;
}
// 投稿ID = 5 のカスタムフィールドを取得
$post_id = 5;
$mydata = get_post_meta($post_id, 'mydata', true);
// 値が空なら表示しない
if (empty($mydata)) {
return;
}
// 安全に出力するためにエスケープ
$escaped_value = esc_html($mydata);
// 表示スタイル（目立つように赤背景＋白文字）
$style = '
background: #ff1744;
color: white;
padding: 12px 18px;
margin: 15px 0;
border-radius: 4px;
font-weight: bold;
font-size: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
';
// どの画面でも上部に表示される通知として出す
printf(
'<div class="notice notice-info is-dismissible" style="%s">'
. '【投稿ID:5 の mydata】 %s'
. '</div>',
esc_attr($style),
$escaped_value
);
}
４ Cloude(無料版)
Claudeの結果は下記のようになりました。
なかなか優秀ですが、スライドして上部に張り付く機構などもついており、この事によってレスポンシブ(スマホ時)にはレイアウトが崩れる形の実装になっています。
/**
* 管理画面の全画面に投稿ID 5のカスタムフィールド'mydata'を表示
*/
function display_mydata_in_admin() {
// 投稿ID 5のカスタムフィールド'mydata'を取得
$mydata = get_post_meta(5, 'mydata', true);
// データが存在しない場合は表示しない
if (empty($mydata)) {
return;
}
?>
<div id="mydata-admin-notice" style="
position: fixed;
top: 32px;
left: 0;
right: 0;
background: #fff3cd;
border-bottom: 1px solid #ffc107;
padding: 10px 20px;
z-index: 9999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
">
<strong>mydata:</strong> <?php echo esc_html($mydata); ?>
</div>
<style>
/* 管理画面のコンテンツを下にずらす */
#wpcontent {
margin-top: 50px !important;
}
</style>
<?php
}
add_action('admin_notices', 'display_mydata_in_admin');
総論
どのコードにもエラーは出ませんでした。しかし当社経験上複雑な実装になればなるほどAIのコードはエラーが出ることが多いです。
また、視覚的な表示(ユーザビリティー)にはどのAIも課題がありそうです。
どのコードも人間が修正を必要としますのでやはりCSSやPHPのスキルは必要となりそうです。
AIのコードは現状シンプルなものであっても、いったんテスト環境で適応の上、動作確認したうえで修正をして本番環境に適応する必要があるかと思います。
WordPress ワードプレスのバグ修正や移行、PHPコーディングを経験豊かな技術者が代行いたします。お気軽にご依頼ご相談お送りください
