:: WordPress(ワードプレス) プラグインを使わずに好きなタグをボタン１つで本文に貼りつける方法

WordPessでブログを書いていると、テーブルやGoogle Adsenseのコードなどの決まったスタイルやhtmlタグを追加することがあります。その際に毎度予めテキストファイルで保存していたソースコードを開いてコピペしていたのですが、それがとっても煩わしい。。。

それを解決する方法として、以前このブログで記事を書きました。

:: WordPressでプラグインを使わずにオリジナルのタグをエディターで使えるようにする方法

その時の紹介内容は、ビジュアルからテキストに表示を切り替えなければ出来ませんでしたが、今回はビジュアルエディタのままボタンを追加するもっと便利で簡単なやり方のエントリーです。

このブログでは、テーブルとGoogle Adsenseのテキスト広告を表示する際に使用しています。わざわざテキストエディタに切り替える必要がないのでとっても便利です！

実現方法

jsとphpを使って実現します。といってもとっても簡単なのでご安心ください。コピペで対応出来ます！

functions.php

まずはfunctions.phpに以下のソースコードを貼り付けます。

/**
 * 独自ボタンを追加
 * @return 
 */
function custom_mce_buttons( $buttons ) {
  $buttons[] = 'button_text';
  return $buttons;
}
 
/**
 * 独自ボタン用のスクリプトの読み込み
 * @return 
 */
function custom_mce_external_plugins( $plugin_array ) {
	$plugin_array['custom_button_script'] = get_template_directory_uri() . "/assets/tinymce/tinymce.js";
	return $plugin_array;
}
 
add_filter( 'mce_buttons', 'custom_mce_buttons' );
add_filter( 'mce_external_plugins', 'custom_mce_external_plugins' );

/**

* 独自ボタンを追加

* @return

function custom_mce_buttons( $buttons ) {

$buttons[] = 'button_text';

return $buttons;

}

/**

* 独自ボタン用のスクリプトの読み込み

* @return

function custom_mce_external_plugins( $plugin_array ) {

$plugin_array['custom_button_script'] = get_template_directory_uri() . "/assets/tinymce/tinymce.js";

return $plugin_array;

}

add_filter( 'mce_buttons', 'custom_mce_buttons' );

add_filter( 'mce_external_plugins', 'custom_mce_external_plugins' );

上記は、jsを読み込ませるfunction（ここではcustom_mce_external_plugins）と、jsで定義したfunctionを発動させるfunction（ここではcustom_mce_buttons）の2つのfunctionを書きます。

次に、15行目で読み込んでいるtinymce.jsを作成します。
※ディレクトリはthemes/assets/tinymce/配下に作成していますが、こちらはお好きな場所で作成してください。

tinymce.js

新しく作成したtinymce.jsに以下のソースコードを貼り付けます。

(function() {
	tinymce.create('tinymce.plugins.MyButtons', {
		init : function(ed, url) {

			// Google Ad Text
			ed.addButton( 'button_text', {
				title : 'text',
				image : url + '/text.png',
				cmd: 'button_text_cmd'
			});
			ed.addCommand( 'button_text_cmd', function() {
				var selected_text = ed.selection.getContent();
				var return_text = '';
				return_text = ('\
					&nbsp;\
					<script type="text/javascript">\
						google_ad_client = *******************************************************************************************************\
						google_ad_width = *******************************************************************************************************\
						google_ad_height = *******************************************************************************************************\
					</script>\
					&nbsp;\
					');
				ed.execCommand('mceInsertContent', 0, return_text);
			});

		},
		createControl : function(n, cm) {
			return null;
		},
	});
	/* Start the buttons */
	tinymce.PluginManager.add( 'custom_button_script', tinymce.plugins.MyButtons );
})();

(function() {

tinymce.create('tinymce.plugins.MyButtons', {

init : function(ed, url) {

// Google Ad Text

ed.addButton( 'button_text', {

title : 'text',

image : url + '/text.png',

cmd: 'button_text_cmd'

});

ed.addCommand( 'button_text_cmd', function() {

var selected_text = ed.selection.getContent();

var return_text = '';

return_text = ('\

google_ad_client = *******************************************************************************************************\

google_ad_width = *******************************************************************************************************\

google_ad_height = *******************************************************************************************************\

</script>\

');

ed.execCommand('mceInsertContent', 0, return_text);

});

createControl : function(n, cm) {

return null;

});

/* Start the buttons */

tinymce.PluginManager.add( 'custom_button_script', tinymce.plugins.MyButtons );

})();

上記は、

6〜10行目でボタンを追加しています。7行目のtitleはエディタのタイトルで、8行目でアイコンを定義しています。ここでは、text.pngとして作成し、tinymce.jsと同じ階層に置いています。

ちなみに作成したアイコンはこちらです↓↓

11〜24行目でボタンを押した時に挿入するタグを定義しています。実際に挿入されるタグは15〜21行目です。

注意事項

tinymce.jsの6行目で定義している「ed.addButton( ‘button_text’, {」のbutton_textと、functions.phpの6行目で定義している「$buttons[] = ‘button_text’;」のbutton_textは必ず同じにしてください。

ソースコードは以上です。投稿エディターに追加されていて、アイコンを押下すると指定したソースコードが追加されれば完成です！