Failed to load plugin: table from url~エラーの解消手順【WordPress】
WordPressで記事を書こうとしたら、
Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
というエラーが出てしまった時の原因と解決手順です。
このエラーの何が困るかというと、エディターのメニューバーに以下「テーブル」が表示されなくなってしまい表が作れないのです。
テーブルがなくなってしまう
原因から察するに、日本に限らず世界中のWordPressサイトで同じ事象が頻発していると思うのですが、日本語どころか英語で調べても全く情報が出てこなかったので、記事にすることにしました。
メモ：
このエラーメッセージの原因は、あなたのWordPressで現在利用しているテーマが原因です。
WordPressやPHPの知識がないと少し難しい作業になるため、もし有料購入したテーマであればテーマ販売者にテーマ改修をしてもらう等の依頼をするといいでしょう。
ー もくじ ー
Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js が出る原因
functions.phpでテーブル機能を追加していると発生
これは僕の例ですが、WordPressテーマのfunctions.phpファイルにmce_external_pluginsフックを使いcdn.tinymce.comからJavaScriptを読み込むことでビジュアルエディターにテーブル作成機能を追加していると該当エラーが発生します。
functions.php// エディターにテーブル追加
function mce_external_plugins_table($plugins) {
$plugins['table'] = '//cdn.tinymce.com/4/plugins/table/plugin.min.js'; //←原因
return $plugins;
}
add_filter( 'mce_external_plugins', 'mce_external_plugins_table' );これは「WordPress エディタ テーブル機能」等でググると出てくる定番のカスタマイズ方法(だから日本中・世界中で同じ事象が頻発しているだろうと考えている)。
3行目のcdn.tinymce.com/4/plugins/table/plugin.min.jsが読み込めないのがエラーメッセージの原因というわけですね。
メモ：
利用しているテーマの構造によってはfunctions.phpに上記のコードが書かれておらず、別ファイルに書いた上でfunctions.phpにget_template_part関数でその別ファイルを読み込む、などしている可能性もあります。
僕は独自テーマを制作してこのブログで使っていて、functions.phpへ直接書いています。
他人が制作したテーマでエラーが出ていて自分で改修を試みる場合、まずはmce_external_pluginsという単語がfunctions.phpに出てくるか探してみて、出てこければその他PHPファイルをしらみつぶしに探してみましょう。
「functions.phpとかいうファイルはどこにあるの？」というかたは、WordPress管理画面からアクセスできるので、記事最終章の3. functions.phpを編集【完了】を参照してfunctions.phpの中身を検索してみてください。
根本的な発生原因
2021年4月半ば頃まではTinyMCEのバージョンが4だったものが、"バージョン5"となり、APIキーを持っていないと(つまりTinyMCEを使うために会員登録をしないと)使えなくなったようです。
以下、TinyMCEの開発元サイト ≫より。
無料とはいえAPIキーが必須になった模様
またエラーメッセージで「読み込めませんよ」と言われている以下JavaScriptファイルのURLへブラウザからアクセスしてみると(以下/4/の部分がバージョン4という意味のよう)、
https://cdn.tinymce.com/4/plugins/table/plugin.min.js
AccessDeniedと言われてしまっていることが分かります。
やはり、APIキーによる認証がないとアクセスができなくなってしまったということなのでしょう。
解決の手順
CDNによるJavaScriptファイルの読み込みができなくなったなら、ローカルにファイルを落として読み込めばいいじゃない、の作戦で解決しました。
原因の章で書いたとおり、WordPressテーマのfunctions.phpファイルにmce_external_pluginsフックを使ってテーブル機能を実現している、という前提での解決手順となります。
- TinyMCEのソースコードをアーカイブからダウンロード
- テーマフォルダへplugin.min.jsをアップロード
- functions.phpを編集【完了】
3ステップです。
1. TinyMCEのソースコードをアーカイブからダウンロード
http://archive.tinymce.com/download/older.php
上記URLへアクセスして、TinyMCE 4.3.3 の [Prod] をクリックします。
すると、ソースコード(zipファイル)のダウンロードが始まります。
ダウンロードが完了したら、zipファイルを解凍しておきます。
2. テーマフォルダへplugins.min.jsをアップロード
解凍したフォルダ「tinymce」から、
tinymce > js > tinymce > plugins > table という順番にフォルダをもぐっていきましょう。
すると上記赤枠で囲ったplugin.min.jsというJavaScriptのファイルが見つかります。
これを、サーバー上のテーマフォルダ内にアップロードします。
以下、レンタルサーバーのファイルマネージャー機能を使って直接ソースコードファイルをアップロードする前提で操作手順をメモしていきます。普段ソースコード等のアップロードでgitを使う・FTPを使うなどしている人は、適宜読み替えてください。
以下、mixhostというレンタルサーバーのファイルマネージャーを使ってテーマフォルダへアップロードした参考です。あなたの環境に置き換えて作業をしてみてください。
yuki.world > wp-content > themes > darktheme > js
とフォルダをもぐっていって、最終的に「js」フォルダへplugin.min.jsをアップロードしました。
3. functions.phpを編集【完了】
アップロードが完了したら、次は利用しているテーマフォルダ内のfunctions.phpを編集します。
非エンジニアのかた向けに、WordPress管理画面からfunctions.phpを編集する方法で書いていきます。
WordPress管理画面 外観 > テーマエディターをクリック。
画面右側カラムにある「テーマのための関数(functions.php)」をクリック。
Ctrl + Fキー(MacはCommand + Fキー)を押し、"mce_external_plugins"と検索して修正する行を見つける。
上記の例だと、371行目を以下に書き換えます。
functions.php$plugins['table'] = get_template_directory_uri() .'/js/plugin.min.js';上記コードは、yuki.world/wp-content/themes/<テーマ名>/jsフォルダ配下にplugin.min.jsファイルをアップロードした場合の例です。
もし <ドメイン名>/wp-content/themes/<テーマ名>/xx/yy フォルダ配下にplugin.min.jsファイルをアップロードした場合は、
$plugins['table'] = get_template_directory_uri() .'/xx/yy/plugin.min.js';
となる点に注意してください。あなたがテーマフォルダー内のどのフォルダーにアップロードしたかによって、上記赤文字部分が変わるということです。
以下、書き換え後の例。
忘れずに保存し、「編集に成功しました」と表示されればOKです。
これで、WordPress記事編集画面をもう一度開くと、無事にエラーメッセージが消えてテーブルが表示されていました。
つまり、サーバーへアップロードした"テーブル機能を提供しているJavaScriptのファイル(plugin.min.js)"を正しく読み込むことができるようになった、ということです。
これで一安心。
