プラグイン開発でリンクがうまく動作しない時のチェックポイント

プラグイン開発でリンクがうまく動作しない時のチェックポイント

ボタンを右クリックして『要素の詳細を表示』を選択。
すると、リンクがうまくいっていないと赤い感嘆符!が表示される。

Failed to load resource: the server responded with a status of 404 (Not Found)
リソースの読み込みに失敗しました: サーバーがステータス 404 (Not Found) を返しました
http://localhost: 8888/mamp-polo-web.com/wp-content/plugins/my=seasonal-thumbnall/assets/admin-script.js?ver=10.0.0

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
リソースの読み込みに失敗しました:サーバーがステータス500(Internal Server Error)を返しました
http://localhost: 8888/mamp-polo-web.com/wp-admin/admin-ajax.php

ボタン類(画像を追加・一括追加・削除など)が動かない原因は、⑤ assets/admin-script.js が正しく読み込まれていないか、先ほどの分割時にJavaScriptのコードの一部が途切れて構文エラーを起こしている可能性が最も高いです。

確認すべき3つのチェックポイント

以下の順番で原因を切り分けるとすぐに特定できます。

  • 1. ブラウザの開発者ツール(コンソール)でエラーを見る
    設定画面を開いた状態でキーボードの F12 キー(Macは Cmd + Option + I)を押し、上部の 「Console(コンソール)」 タブを開きます。ここに赤い文字のエラー(例:Uncaught SyntaxError や 404 Not Found)が出ていれば、それが直接の原因です。
  • 2. ファイル名と配置場所のスペルを確認する
    assets フォルダの中に admin-script.js という正確なファイル名で保存されているか確認します(admin-scripts.js のように s がついていたり、.txt になっていたりすると読み込まれません)。
  • 3. admin-script.js の中身が途中で切れていないか確認する
    以前のやり取りでコードブロックが途中ではみ出していたため、admin-script.js の最後の閉じカッコ });が欠けて動いていないケースがよくあります。

念のための完全版 assets/admin-script.js(はみ出し防止整形済み)

1行あたりの長さを短く整えた、確実な完全版コードです。現在の assets/admin-script.js の中身をすべて消して、こちらをそのまま上書き保存してみてください。

この解決はadmin-script.jsのファイル名をコピーして名前を書き直したらエラーが無くなった。
ファイル名は何度も確認したが、目に見えない何かがあったということになる?