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

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

edita-button

WordPressの投稿編集画面のビジュアルリッチエディタってとても便利でいいのですが、あとひと押しのところがあるんですよね。
特にフォントのカラー指定は出来るのに、フォントサイズを変更出来るボタンが無いみたいな・・・
プラグインなどを使えば、簡単にエディタを強化出来るのですが、そんなに色々なボタンがあったとしても全てを使うわけでもなく、欲しいのはフォントサイズのボタンだけだった場合は、プラグインはなるべくなら使いたくないですよね。
そこで今回は、ビジュアルリッチエディタに、フォントサイズや背景色の変更ボタンを追加してみたいと思います。
また、フォントサイズのボタンを追加するとデフォルトでは、PXではなくptにサイズ指定になっていますので、ここをpxのサイズ指定にも変更します。

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

ビジュアルリッチエディタにフォントサイズ・背景色のボタンを追加

下記コードをfunctions.phpに追加します。

if ( ! function_exists( 'wpex_mce_buttons' ) ) {
    function wpex_mce_buttons( $buttons ) {
        array_unshift( $buttons, 'fontsizeselect' ); // フォントサイズ追加
	array_unshift( $buttons, 'backcolor'); //背景色追加
        return $buttons;
    }
}
add_filter( 'mce_buttons_3', 'wpex_mce_buttons' );

フォントサイズを【px】にする

上記のコードを記載したままだと、フォントサイズが【pt】となっていますので、ここを【px】に変更したほうが良さそうなので、下記コードをfunctions.phpに追加します。

if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
    function wpex_mce_text_sizes( $initArray ){
        $initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
        return $initArray;
    }
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );

edita-button1

上記コードまでをfunctions.phpに追加すればビジュアルリッチエディタに【フォントサイズ(px)】と【背景色】のボタンが追加されていると思います。
あとは、自分で作ったオリジナルのclassやidなんかも選択出来て適応出来ればいいかなぁーなんて思ってます。

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

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

About

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

関連記事

コメント

コメントをどうぞ

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

PREVIOUS hunterxhunter

HUNTER×HUNTER バトルオールスターズ オカルト現象!? 朝方5時台にガシャを引いて【ピトー】GET!!

NEXT edita-custom-sytle

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