テキストウィジェットのリッチテキストエディタにオリジナルの機能ボタンを追加する

2017年6月12日

動作環境

WordPress: 4.8

 

WordPress4.8からテキストウィジェットにリッチテキストがキター

先日メジャーアップデート?を迎えて、バージョンを4.8としたWordpressですが、今回のアップデートの目玉機能はこのテキストウィジェットがリッチテキストを対応したことではないでしょうか?!

 

この機能が搭載されたことによって、CSSとかもろもろ見直す必要がでてきましたが、上手く利用すればカスタマイズで一から作る必要が無くなるかもしれません。

さて今回は、この新たに追加された機能に、追加の機能を持たせたボタンを追加してみます。

 

リッチテキストに追加のボタンを設置

function.phpに以下の記述をします。

 


<?php
function MyButton_scripts(){
?>
<script type="text/javascript">
jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
  editor.settings.toolbar1 += ',mybutton';
  editor.addButton( 'mybutton', {
    text: 'My button',
    icon: false,
    onclick: function () {
      editor.insertContent( 'Text from my button' );
    }
  });
});
</script>
<?php
}
add_action( 'admin_footer-widgets.php', 'MyButton_scripts' );

 

これで下記の画像のように「My button」が表示されたら完了です。

 

今日はこの辺でー

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-WordPress
-, , ,