THE THORのビジュアルエディタ不具合の対策

2022年4月1日
Internet
WordPress, テーマ
29view

Internet

スポンサーサイト

WordPressを導入

今回このBLOG(という名の健忘禄)を書くにあたり、今までCMSはMovableTypeを利用してきましたが
初めてWordPressを利用する事にしました。

MovableTypeの利点としてはコンテンツをHTMLで掃き出して運用できるのでセキュリティー面で優位性がありました。
が、今はWordPressもPlugInが充実し、セキュリティーも確保されてきたので乗り換えることに。

昔はページレイアウトもコツコツ自分でデザインしテンプレートも作りこんできたのですが、
今となってはそこまでの気合もなく市販テーマで済ませる事に。

そこで選んだのが利用者も多く評判も良い「THE THOR」というテーマ。
欲しい機能は十分に搭載されているし、なにより利用者が多いので情報が豊富。
「Cocoon」という似たような無料テーマも試しましたが、細部のディテールの出来が素晴らしい「THE THOR」を選択しました。

THE THOR導入後の問題点

THE THORの基本的な設定とPlugin導入後、記事作成の際に次のようなエラーが発生してしまいました。

Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

こんなエラーが表示されて表組のアイコンが消えています。
どうやらplugin.min.jsが見つからない様子。

スポンサーサイト

解決方法

そこでググってみると出てくる回答は「THE THORをアップデートしましょう」という物ばかり。
現在最新版を入れたばかりなのでバージョンは問題ないはず、となれば・・・

plugin.min.jsの場所をネットで検索してみると、次の場所に本体があるとの事。

tinymce – Older releases

こちらのサイトから今現在の最新版 TinyMCE 4.3.3 をダウンロード。（[Prod]をクリック）
ダウンロードした tinymce_4.3.3.zip を解凍し、中から plugin.min.js を取り出します。

\tinymce_4.3.3\tinymce\js\tinymce\plugins\table\plugin.min.js

その後、取り出した plugin.min.js をFTP等を使いWordPressフォルダの任意の場所へ。
当初、テーマのjsフォルダへ入れたのですが、なぜかエラーになってしまった為現在はWordPressのルートフォルダへ。

そして設定ファイル visual.php の編集。

/blog/wp-content/themes/the-thor/inc/editor/visual.php

function fit_mce_external_plugins( $plugin ) {
	$plugin['table']                = '//cdn.tinymce.com/4/plugins/table/plugin.min.js';
	$plugin['custom_button_script'] = get_template_directory_uri() . "/admin/js/tinymce.js"; // ビジュアルエディタ追加機能用
	$plugin['custom_textcolor']     = get_template_directory_uri() . "/admin/js/tinymce-custom-textcolor.js";
	return $plugin;
}

こんな感じで指定されている//cdn.tinymce.com/4/plugins/table/plugin.min.jsの部分を新しく設置した場所に変更。

function fit_mce_external_plugins( $plugin ) {
	$plugin['table']                = '//設置したパス/plugin.min.js';
//	$plugin['table']                = '//cdn.tinymce.com/4/plugins/table/plugin.min.js';
	$plugin['custom_button_script'] = get_template_directory_uri() . "/admin/js/tinymce.js"; // ビジュアルエディタ追加機能用
	$plugin['custom_textcolor']     = get_template_directory_uri() . "/admin/js/tinymce-custom-textcolor.js";
	return $plugin;
}

今回は下の行に念のため原文をコメントアウトで残しましたがこんな感じで。

これで問題なくビジュアルエディタが利用できるようになりました。

スポンサーサイト