WordPressのビジュアルエディターにプラグインなしでクライアントさん向けボタンを追加

Posted under - WordPress

24

私はビジュアルリッチエディターは使ってませんが、クライアントさんはやっぱりビジュアルリッチエディターを使ってます。 フロート解除ボタンなど、もう少しだけエディターを便利にするボタンを追加するための Tips です。

WordPressのビジュアルリッチエディター

WordPress の投稿画面のビジュアルリッチエディター。私はビジュアルエディターは使ってないのですが、クライアントさんに納入する時には、ビジュアルリッチエディターでブログの書き方を教えてます。クライアントさんは HTML が書ける人ばかりではないので…。

もともとかなりのボタンが最初からついてるビジュアルリッチエディターですが、実はアドバンスツールというものがあって、最初は表示されていないボタンもあります。

ビジュアルリッチエディターのアドバンスツール

ビジュアルリッチエディター

上記のように、デフォルトでいくつかのボタンが隠れています。

フォントカラーや undo、redo があって、クライアントさん的には使い易いボタンがあったりするみたいです。これで大幅にボタンが増えましたねー。でも実は、まだまだ隠されたボタンがあるんです!次にそれらの隠されたボタンを追加してみましょう。

ビジュアルリッチエディターにボタンを追加

ビジュアルリッチエディターにボタンを追加

コピー & ペーストやフォントサイズなど、いくつかボタンを追加してみました!

TinyMCE Advanced のような、ビジュアルリッチエディターにボタンを追加したりできるプラグインもあったりしますが、 ちょこちょこっと数行追加するだけで便利かなーと思うボタンを追加できます!やり方は簡単で、functions.php に以下のコードを記述するだけです。

functions.php
function ilc_mce_buttons($buttons){
array_push($buttons, "backcolor", "copy", "cut", "paste", "fontsizeselect", "cleanup");
return $buttons;
}
add_filter("mce_buttons", "ilc_mce_buttons");

上記のコードで追加しているボタンは以下の通り。

  • 背景色
  • コピー
  • 切り取り
  • 貼り付け
  • フォントサイズ
  • コード整形

「文字を大きくしたいんだけどー」というクライアントさんは多いですし、一番おすすめなのはコード整形ボタン(Word みたいなアイコンになってますけど …)。書いたり消したりして、いつのまにかぐちゃぐちゃになってしまったコードを、きれいに整形してくれるので、「公開ボタンを押す前にコレを押してくださいねー」と言っておくといいかも。<strong> タグの閉じ忘れで、全文太文字 … なんてことは無くなりますね!

MEMO

コピー & ペーストなど、クピップボードを利用するボタンは、ブラウザが対応していないと使えません。Chrome だと、なぜか「ショートカットキーを利用してください」というアナウンスが表示されて、コピー & ペーストはできませんでした。

alert

他に追加できるボタンは以下の通りです。

  • anchor:アンカータグ
  • code:codeタグ
  • fontselect:フォント
  • fontsizeselect:フォントサイズ
  • hr:hrタグ
  • styleselect:スタイル
  • sub:上付き文字
  • sup:下付き文字

私は知りませんが、もっとあるかもしれません。プラグインを使わなくても、これだけのボタンが隠されていたんですねー!

ビジュアルリッチエディターに、フロートをクリアするボタンを追加

WordPress のビジュアルリッチエディターには、フロートをクリアするボタンがありません。クライアントさんがどんどん画像をフロートさせまくると、とんでもないレイアウトになってしまったりしてます …。

ツイッターでもフロートをクリアするボタンが欲しいな … っていう声があったので作ってみました。

ビジュアルリッチエディターに、フロートをクリアするボタンを追加

フロートをクリアするボタンを追加

フロートを解除するボタン

Download

ダウンロードしたzipファイルを解凍すると、以下のファイルが入っています。

  • editer-button.php
  • editer_plugin.js
  • cl.gif
  • 1×1.gif

PHP ファイルJs ファイル、それから 2つの画像があります。

ファイル

cl.gif はエディターで表示するボタンの画像です。1×1.gif は、1px x 1px の、目には見えない透過 gif 画像です。

2つの画像は好きなところへアップしてください。スクリプトの中の画像へのパスは、アップロードした場所に変更してくださいね。私は your-theme/js/images フォルダの中にボタン画像(Clっていう画像)、1×1.gif は your-theme/images フォルダに入れちゃいました。

Javascript ファイルも好きなところへアップしてください。私はテーマの中に js フォルダを作って、そこにしまいました。

Js ファイル – editer_plugin.js
(function() {
tinymce.create('tinymce.plugins.newButtons', {
getInfo : function() {
return {
longname : 'Float Clear Button',
author : 'Nori Takahashi',
authorurl : 'http://webdesignrecipes.com/',
infourl : 'http://webdesignrecipes.com/',
version : "1.0.0"
};
},
init : function(ed, url) {
var t = this;
t.editor = ed;
ed.addCommand('brClear',
function() {
var str = t._newButton();
ed.execCommand('mceInsertContent', false, str);
});
ed.addButton('brClear', {
title : 'フロートクリア「',
cmd : 'brClear',
image : url + '/images/cl.gif'}); //ボタン画像 cl.gifのパス
},
_newButton : function(d, fmt) {
str = '
<div style="display: block; clear: both;"><img src="http://example.com/wp-content/themes/WebDesignRecipes/images/1x1.gif" alt="" /></div>
'; /* 1x1.gif 画像のパス */
return str;
}
});
tinymce.PluginManager.add('newButtons', tinymce.plugins.newButtons);
})();

2カ所程、あなたの環境に合わせて、ファイルへのパスを変更してください。

PHP ファイル – editer-button.php

PHP ファイルはのコードは、functions.php にペーストしてください。

/* tinyMce */
class newMceButton {
function newMceButton() {
add_action('init', array(&$this, 'addbuttons'));
}
function sink_hooks(){
add_filter('mce_plugins', array(&$this, 'mce_plugins'));
}
function addbuttons() {
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'));
}
}
function mce_buttons($buttons) {
array_push($buttons, "separator", "brClear");
return $buttons;
}
function mce_external_plugins($plugin_array) {
$plugin_array['newButtons'] = get_bloginfo('template_url') .'/js/editer_plugin.js';
/* アップしたediter_plugin.jsのパス */
return $plugin_array;
}
}
$mybutton = new newMceButton();
add_action('init',array(&$mybutton, 'newMceButton'));

上記の中の editer_plugin.js へパスだけ確認して変更してください。するとエディターに新しくボタンが追加されます!

説明

Cl ボタンを押すと、以下のような HTML が記述されます。

HTML

<div style="display: block; clear: both;"><img src="http://examle.com/wp-content/themes/yourTheme/images/1x1.gif" alt="" /></div>

初めは <br clear="all"> でいいかなと思ったんですけど、ビジュアルエディターでは空の要素は削除されるので、HTML エディタで確認すると、<br clear="all"> が削除されてしましました。<div style="clear:both"></div> と、空の div を作ってもダメでした。やむを得ず 1px四方の透過 gif を挿入しています。

ちなみに、WordPress 3.3 でも動作確認済みです。


最近では、AddQuickTag が、ビジュアルリッチエディターにも対応したみたいなので、そっちの方がいいですね ;D

Comments

Thank you for the comment.