WordPress ショートコードの作成とエディタへのボタン追加

仕様

• ショートコードを作る（ショートコードの中身は問わない）
• 投稿作成時にショートコードが挿入しやすいようビジュアルエディタとテキストにボタン追加

ショートコードの作成

ショートコードAPI を参考に。
コードはGenerateWPの Shortcodes Generator でオケ。

例：

// Add Shortcode [myshortcode][/myshortcode]
function my_shortcode_func( $atts , $content = null ) {

	return '<div>' . $content . '</div>';

}
add_shortcode( 'myshortcode', 'my_shortcode_func' );

ビジュアルエディタ（TinyMCE）でボタン追加

TinyMCE Custom Buttons や　Guide to Creating Your Own WordPress Editor Buttons を参考に。

• ボタン追加のPHP
• ボタン用の画像
• TinyMCE用のJavaScript

が必要

// add new buttons
add_filter( 'mce_buttons', 'myplugin_register_buttons' );

function myplugin_register_buttons( $buttons ) {
   array_push( $buttons, 'separator', 'my_shortcode' ); // separator は区切り線（オプション）
   return $buttons;
}
 
// Load the TinyMCE plugin : editor_plugin.js (wp2.5)
add_filter( 'mce_external_plugins', 'myplugin_register_tinymce_javascript' );

function myplugin_register_tinymce_javascript( $plugin_array ) {
   $plugin_array['myplugin_script'] = plugins_url( '/tinymce-plugin.js',__FILE__ ); // TinyMCE用のJS
   return $plugin_array;
}

tinymce-plugin.js

(function() {
     /* Register the buttons */
     tinymce.create('tinymce.plugins.MyButtons', {
          init : function(ed, url) {
               /**
               * Inserts shortcode content
               */
               ed.addButton( 'my_shortcode', {
                    title : 'Insert my shortcode',
                    image : url + '/images/btn.png', // アイコン　urlはこのjsのあるディレクトリまで
                    cmd: 'my_shortcode_cmd'
               });
               ed.addCommand( 'my_shortcode_cmd', function() {
                    var selected_text = ed.selection.getContent();
                    var return_text = '';
                    return_text = '[myshortcode]' + selected_text + '[/myshortcode]'; // 挿入されるコード
                    ed.execCommand('mceInsertContent', 0, return_text);
               });
          },
          createControl : function(n, cm) {
               return null;
          },
     });
     /* Start the buttons */
     tinymce.PluginManager.add( 'myplugin_script', tinymce.plugins.MyButtons );
})();

テキストエディタでボタン追加（Quicktags）

コードはGenerateWPの Quicktags Generator でオケ。

// Add Quicktags
function myshortcode_quicktags() {

	if ( wp_script_is( 'quicktags' ) ) {
	?>
	<script type="text/javascript">
	QTags.addButton( 'my_shortcode', '[myshortcode]', '[myshortcode]', '[/myshortcode]', '', 'My shortcode',  );
	</script>
	<?php
	}

}
add_action( 'admin_print_footer_scripts', 'myshortcode_quicktags' );

現場からは以上です。