[wp] 自作したショートコードをビジュアルエディタ内で置換する

WordPressに標準搭載されているGalleryショートコードでは、
HTMLエディタの時は［gallery］なんだけど、ビジュアルエディタにした時には画像が表示されるようになっている。

ギャラリーに限らずとも、この置換が再現出来れば自作したショートコードの見やすさが段違い。

で、実際やってみたら今まで記事に書いた事の範囲でさっくり出来てしまったので、
アクティブテーマディレクトリ下にあるイメージディレクトリのURLを出力するショートコードを例にして、方法を書いてみます。

2019年時点ではこのコード動かないので、TinyMCE(v5)バージョンも書きました

概要

アクティブテーマディレクトリ下にあるイメージディレクトリのURLを出力するショートコード使用例

<img src="[template_image_directory]/icon.png" width="32" height="32" alt="New" />

ショートコードの作成

詳しくは　ショートコードAPI仕様メモ　を見て頂くとして、ソースは以下です。

functions.php:

function convert_temp_shortcode(){
	
	return get_bloginfo('template_directory')."/images";
}

add_shortcode('template_image_directory', 'convert_temp_shortcode');

最後のスラッシュをどうするかはお好みで。

上記ソースをfunctions.phpにコピペすればtemplate_image_directoryというショートコードが使用可能になり、
テンプレートディレクトリにある画像が記事内に出せるようになるんだけども、
ビジュアルエディタで見ると割れてしまうんですよね…

このほかにも、ビジュアルタブクリックしたらプレビュー的に実際表示されるソースが出た方が分かりやすい。

エディタープラグインの作成

要はWordPressのGalleryと同じ事をすればいいので、TinyMCEのエディタープラグインをテーマに追加してショートコードを置換します。
TinyMCEプラグインの作り方と適用の仕方は　TinyMCEのビジュアルリッチエディタにカスタムボタンを追加する　という記事で書いてますので説明は割愛。

functions.php:

class EditorPlugin {
	function EditorPlugin() {
		add_action('init', array(&$this, 'addplugin'));
	}
	function sink_hooks(){
		add_filter('mce_plugins', array(&$this, 'mce_plugins'));
	}
	function addplugin() {
	   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
		 return;
	   //リッチエディタの時だけ追加
	   if ( get_user_option('rich_editing') == 'true') {
		 add_filter("mce_external_plugins", array(&$this, 'mce_external_plugins'));
	   }
	}
	// TinyMCE プラグインファイルを読み込む: editor_plugin.js
	function mce_external_plugins($plugin_array) {
	   //プラグイン関数名＝ファイルの位置
	   $plugin_array['ShortcodeConv'] = get_bloginfo('template_directory').'/js/editor_plugin.js';
	   return $plugin_array;
	}
}
$myeditorplugin = new EditorPlugin();
add_action('init',array(&$myeditorplugin, 'EditorPlugin'));

テーマのjsディレクトリにeditor_pluguin.jsというファイルを追加。

editor_plugin.js:

(function() {
	tinymce.create('tinymce.plugins.ShortcodeConv', {
		getInfo : function() {
			return {
				longname : 'Template Image Directory short-code convert',
				author : 'Tenderfeel',
				authorurl : 'http://tenderfeel.xsrv.jp',
				infourl : 'http://tenderfeel.xsrv.jp',
				version : "1.0"
				};
		},
		init : function(ed, url) {
			var t = this;
			
			ed.onBeforeSetContent.add(function(ed, o) {
				o.content = t._do_code(o.content);
			});
			
			ed.onPostProcess.add(function(ed, o) {
				if (o.get)
					o.content = t._get_code(o.content);
			});
		},
			_do_code : function(co) {
				//http://[wp-root]/wp-includes/js/tinymce/
				return co.replace(/\[template_image_directory\]/g, function(a,b){
						str = tinymce.baseURL.replace(/(.+?)wp-includes\/js\/tinymce/i,'$1wp-content/themes/original/images');
					return str;
				});
			},
			_get_code : function(co) {
				
				str = tinymce.baseURL.replace(/(.+?)wp-includes\/js\/tinymce/i,'$1wp-content/themes/original/images');
				
				reg = new RegExp('<img([^>]+)('+str+')([^>]+)>','g');
		
				//a = RegExp全文 b～c = ()の中身
				return co.replace(reg, function(a,b,c,d) {
					if ( c != "")
						return '<img'+b+'[template_image_directory]'+d+'>';
					
					return a;
				});
			}
		});
	tinymce.PluginManager.add('ShortcodeConv', tinymce.plugins.ShortcodeConv);
})();

_do_code()がショートコードを実際のソースに置換する関数で、
_get_code()がショートコードに戻す関数です。

wordpressのgalleryプラグインはtinymce/plugins/wpgalleryにあります。