wpカスタマイズ 2014-10-21

WordPressのビジュアルリッチエディタにオリジナルスタイル(CSS)ボタンを追加するカスタマイズ

edita-custom-sytle

前回の記事に続いて、ビジュアルリッチエディタのネタなのですが、前回は【フォントサイズ】の追加をしたのですが、今回は自身で作ったオリジナルのスタイル(CSSなどの)のボタンを追加したいと思います。

例えば、ある文字に、<div class="button"></div>を囲みたいという場合があったとします。
クラスは、自身で作ったオリジナルのスタイルとします。
こんな時に、わざわざ【テキスト】画面に言って手打ちするのも面倒くさいし、このスタイルが一個ならまだいいですが、オリジナルのスタイルが何個もあったら覚えていられませんwww
そんな時に、オリジナルのスタイルをボタンとして登録し、あとは、エディタの方で1クリックで適応出来る、スタイルボタンを追加したいと思います。
このスタイルボタン本当に楽ですwww
僕は、特によく使うアイコンフォントなどを登録しています。
下記画像のようにドロップダウン形式でボタンが追加されます。

edita-custom-sytle2

※WordPress 3.9で実装しております。

ビジュアルリッチエディタにオリジナルスタイルボタンの追加

今回は、spanタグにbuttondivタグにboxというオリジナルスタイルを追加したいと思います。
まずは、下記コードをfunctions.phpに追加して下さい。

/*-------------------------------------------*/
/*リッチエディタにオリジナルスタイルボタンの追加
/*-------------------------------------------*/
function wpb_mce_buttons_2($buttons) {
	array_unshift($buttons, 'styleselect');//スタイルの追加
	return $buttons;
}
add_filter('mce_buttons_3', 'wpb_mce_buttons_2');

function my_mce_before_init_insert_formats( $init_array ) {  

	$style_formats = array(  

		array(  
			'title' => 'span .button',  //エディタ上に表示されるボタン名
			'block' => 'span',  //タグ名
			'classes' => 'button',//クラス名
			'wrapper' => true,
			
		),  
		array(  
			'title' => 'div .box',  
			'block' => 'div',  
			'classes' => 'box',
			'wrapper' => true,
		),
	);  
	
	$init_array['style_formats'] = json_encode( $style_formats );  
	
	return $init_array;  
  
} 

add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' ); 

それでは、上記のオリジナルスタイルボタンがしっかりと実装されているか確認したいと思います。
まずは、投稿の編集画面でビジュアルリッチエディタ【スタイル】というボタンが表示されていますので、クリックすると、先ほど登録したオリジナルスタイルボタンが表示されていると思います。

edita-custom-sytle3

次にオリジナルスタイルを適応したい文字選択して、先ほど登録したオリジナルスタイルをクリックします。
しっかりと適応されているか確認するため、テキストのほうで確認します。

edita-custom-sytle4

上記のようにオリジナルスタイルが適応されていれば、無事実装完了です。
簡単にビジュアルリッチエディタにオリジナルスタイルボタンが追加出来るので、わざわざタグやクラス名を覚えておく必要もなく簡単にスタイルが適応出来るのでとても楽だと思います。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS edita-button

プラグインは使わずWordPressのビジュアルリッチエディタにフォントサイズ(px)のボタンを追加する

NEXT wall1

PhotoShop 無料 蝶 バタフライのフォトショブラシ