こんにちは、かりえっとのしゅうです。

早速ですが今回は、WordPressの管理画面側、
投稿作成画面で発生したエラーについての備忘録となります。
サイトの表示自体に問題はないけど、投稿作成画面でテーブル機能が使えなくなる、
そんなエラーを解消する記事内容となっております。

みなさんいかがお過ごしでしょうか？
福岡県やその他地域でも緊急事態宣言が発令される中、お出掛けする事もままならず、おうち時間が増えているかと思いますが、
夏に近づく今、涼しい場所にいても水分・塩分補給を忘れずに！
日々を健康に過ごしましょう(*’ω’*)


ではいく (ง ˙˘˙ )ว

目次

１．エラーの発見
２．発生条件
３．根本的な原因
４．解決法
５．あとがき

１．エラーの発見

WordPressの管理画面側、投稿作成画面に下図の様なエラー文が表示されていました。

２．発生条件

今回のこのエラーは、使用している特定のWordPressテーマの投稿作成画面に【テーブル作成機能】を追加するため、【TinyMCE】というプラグインのJavaScriptを、functions.phpファイルに【cdn.tinymce.com】を経由し読み込むことで発生していました。

■エラーの発生条件

■エラー文

３．根本的な原因

前述したとおり、今回エラーが発生した特定のWordPressテーマは、投稿作成画面に【テーブル作成機能】を追加するため、【TinyMCE】というプラグインのJavaScriptを、functions.phpファイルに【cdn.tinymce.com】を経由し読み込んでいました。

ですが、最近【TinyMCE】のバージョンが【5】にバージョンアップしたことで、利用にAPIキーが必要となりました。
その変更にテーマの更新が追いついておらず、APIキーがないことで認証が通らず、JavaScriptを【cdn.tinymce.com】を経由し読み込む際にエラーが発生していたのです。

４．解決法

CDNでjsファイルの読み込みができなくなったので、ローカルにファイルをダウンロードして、ファイルを読み込みなおす事でエラーを解消していこうと思います。
テーマ自体を触るとテーマに更新があった場合、今回の変更が上書きされ消えてしまうので、子テーマを作成し、子テーマ内で作業していきます。

※子テーマについての説明や作成方法は割愛させていただきます。

まず、TinyMCEのソースコードをアーカイブからダウンロードします。
ページにアクセスし、TinyMCE【4.3.3】の [Prod] をクリックします。

2-1．先ほどダウンロードしたzipファイルを解凍し、
【tinymce – js – tinymce – plugins – table】という順番にフォルダを開いていきます。

すると【plugin.min.js】というjsファイルが見つかります。

2-2．これを、子テーマの【js】フォルダ内にアップロードします。
【js】フォルダまでのパスは【wp – wp-content – themes – 子テーマ名 – js】です。
★【js】フォルダがない場合は作成してください。

3-1．まず、親テーマのfunctions.php内で【mce_external_plugins】を検索します。
検索にかかった下図コードをコピーします。

3-2．次に、コピーしたソースコードを以下のように書き変え、子テーマfunctions.phpの末尾に張り付け保存します。
今回使用しているテーマでは、親テーマの関数を子テーマでそのまま使用してしまうとエラーとなってしまいます。
なので、親テーマの関数を無効化し、子テーマの関数を有効化させる必要がありました。

修正したfunctions.phpをアップロードして作業完了です。

修正後、投稿作成画面を確認するとエラー文は消えていました。
これにて作業完了です。

５．あとがき

今回のエラーはサイトの表示自体に問題はありませんが、テーブル機能が使えなくなります。
機能が使えないのもエラーが表示されたままなのも気持ち悪いので、無事に解決できてよかったです。

以上、最後までお読みくださりありがとうございました。

=======================
【かりえっとWeb&Designが大切にしているコト】
１．お客様の想いを丁寧に聴くこと　
２．戦略を追求すること　
３．細部まで気を配る対応をすること
========================

かりえっとは、ホームページ制作、ロゴ・チラシ・パンフレットなどのデザインを通してブランディングのお手伝いを行っております。
お気軽ご相談くださいませ。