WordPressのプラグインの作成
WordPressに関する日本語のドキュメントはWordPress Codex 日本語版のサイトで参照できる。
プラグイン作成に関するドキュメントもプラグインの作成 – WordPress Codex 日本語版で確認できる訳だけれど、参照コードのみで実例が無いのが悩ましい。
このたび、小さなプラグインを作成する機会があったので、それを元に、作成してから公式ディレクトリに公開するまでの過程を、実例を元に解説して行くことにします。
今回扱うのはTinyMCEに範囲選択を拡張するボタンを設置するEasy Block Selectorプラグインです。
WordPress › Easy Block Selector « WordPress Plugins
http://wordpress.org/plugins/easy-block-selector/
構成が非常にシンプルなためローカライズ用のファイルは存在しません。
ファイル構成は以下のようになり、これを用意するところから始めます。
[tvoncmeta {animated: “fast"} ]
- easy-block-selector
- tinymce3
- ebs_mce_icon.png
- editor_plugin.js
- easy-block-selector-button.php
- readme.txt
- tinymce3
[/tvoncmeta]
公開ディレクトリ（wordpress.orgの自分のプラグインページ）とSVNの連携に使用される部分にコメントを入れました。
=== Easy Block Selector === ; プラグインタイトル
Contributors: sekishi
Donate link: https://lab.planetleaf.com/donate/
Tags: tinymce, editor , select , text , short code , contents
Requires at least: 3.0 ; 動作に必要なWPの最低バージョン番号
Tested up to: 3.5.1 ; テストを行ったWPの最上位バージョン番号
Stable tag: 0.1.0 ; 公開するプラグインの安定板バージョン番号
; この番号と同一のSVN内のファイルが公式ディレクトリに公開されます。
License: GPLv2 ; ライセンスに関する事項
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Extend the range selection of TinyMCE. ; プラグインタイトルの下に表示される概要
== Description ==
; == でインデントされている項目は公開ディレクトリ上のタブにあたります。
Enable to simplify the selection of the enclosing shortcode and html element on TinyMCE richedit.
This is simple plugin.
but it's a very useful plugin.
== Installation ==
1. Upload the entire `treeview-on-contents` folder to the `/wp-content/plugins/` directory.
1. Activate the plugin through the 'Plugins' menu in WordPress
== Frequently Asked Questions ==
== Screenshots ==
== Changelog ==
= 0.1.0 =
* NEW: Initial release.
== Upgrade Notice ==
No upgrade, so far.
<?php
/*
* Plugin Name: Easy Block Selector
* Plugin URI: http://wordpress.org/extend/plugins/easy-block-selector/
* Description: Extend the range selection of TinyMCE.
* Version: 0.1.0 // readme.txtと対になっていて同じバージョンのものが公開されます。
* Author: sekishi
* Author URI: https://lab.planetleaf.com/
* Text Domain: easy-block-selector
* License: GPLv2
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
function wp_ebs_plugin_url( $path = '' ) {
$url = untrailingslashit( WP_EASYBLOCKSELECTOR_PLUGIN_URL );
if ( ! empty( $path ) && is_string( $path ) && false === strpos( $path, '..' ) )
$url .= '/' . ltrim( $path, '/' );
return $url;
}
//
// プラグインを登録するまでの処理を一つのクラスにまとめてあります。
// TinyMCEにボタンを追加するのであればこの程度で十分です。
//
class EasyBlockSelector {
var $version = '0.1.0';
var $buttons = array();
function EasyBlockSelector() {
if ( ! defined( 'WP_EASYBLOCKSELECTOR_PLUGIN_URL' ) )
define( 'WP_EASYBLOCKSELECTOR_PLUGIN_URL', untrailingslashit( plugins_url( '', __FILE__ ) ) );
$this->ebs_addbuttons();
}
function ebs_addbuttons() {
global $wp_version, $wpmu_version, $shortcode_tags, $wp_scripts;
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') );
add_filter( 'mce_buttons', array(&$this, 'mce_buttons') );
}
}
// Load the custom TinyMCE plugin
function mce_external_plugins( $plugins ) {
$plugins['EasyBlockSelector'] = wp_ebs_plugin_url('tinymce3/editor_plugin.js');
return $plugins;
}
// Add the custom TinyMCE buttons
function mce_buttons( $buttons ) {
array_push( $buttons, 'easy-block-selector-button' );
return $buttons;
}
}
// Start this plugin once all other plugins are fully loaded
add_action('init', 'EasyBlockSelector' );
function EasyBlockSelector() {
global $EasyBlockSelector;
$EasyBlockSelector = new EasyBlockSelector();
}
?>
(function() {
// Load plugin specific language pack
tinymce.create('tinymce.plugins.EasyBlockSelector', {
/**
* Initializes the plugin
*/
init : function(ed, url) {
ed.addButton('easy-block-selector-button', {
title : 'Easy Block Selector',
image : url + '/ebs_mce_icon.png',
onclick : function() {
// ここにボタンがクリックされた時の処理を書く
// IEやSafariは範囲選択を変更したらaddRangeしてやらないと選択範囲が有効にならない。
window.getSelection().addRange(range);// fixed IE and Safari
}
});
},
/**
* Creates control instances based in the incomming name.
*/
createControl : function(n, cm) {
return null;
},
/**
* Returns information about the plugin.
*/
getInfo : function() {
return {
longname : 'Easy Block Selector',
author : 'sekishi',
authorurl : 'https://lab.planetleaf.com',
infourl : 'https://lab.planetleaf.com'
};
}
});
// Register plugin
tinymce.PluginManager.add('EasyBlockSelector', tinymce.plugins.EasyBlockSelector);
})();
あとはボタンのアイコンファイルを用意すれば必要なファイルはすべて揃います。
次回はプラグインの登録申請を行います。