WordPressのTinyMCEに改行ボタンを追加する
WordPressの管理画面はレスポンシブに対応しているので、スマホで記事更新を行いたいということありませんか？
ですが、その場合の問題として、Enterdでの段落と改行をどうするのか！？
普通にEnterをクリックすると、段落になって、改行をすることができません。
PCであれば、「Shift + Enter」で、改行することが出来ますが、スマホでは、Shift機能ができません。
下記を入れることで、Enterだけで改行することができるようになりますが、逆に段落にすることができなくなります。
|
1 2 3 4 5 6 7 8 |
function TinyMceInitOptions4BrOnly( $initArray ){ $initArray = array_merge( $initArray, array('force_br_newlines' => true) ); $initArray = array_merge( $initArray, array('forced_root_block' => '') ); $initArray = array_merge( $initArray, array('force_p_newlines' => false) ); return $initArray; } add_filter('teeny_mce_before_init', 'TinyMceInitOptions4BrOnly'); add_filter('tiny_mce_before_init', 'TinyMceInitOptions4BrOnly'); |
セキュリティ上、XML-RPCやREST APIを無効にしてアプリが使えない！
でも、どうしてもスマホで更新をしたい！
段落も改行もしたい！
という要望に対して、WYSIWYGエディタのボタンに「改行用ボタン」を追加してしまうという方法です。
funtcions.php に追加。
|
1 2 3 4 5 6 7 8 9 10 |
add_filter( 'mce_external_plugins', 'add_original_tinymce_button_plugin' ); function add_original_tinymce_button_plugin( $plugin_array ) { $plugin_array[ 'original_tinymce_button_plugin' ] = get_template_directory_uri() . '/js/tinymce.js'; return $plugin_array; } add_filter( 'mce_buttons', 'add_original_tinymce_button' ); function add_original_tinymce_button( $buttons ) { $buttons[] = 'br'; return $buttons; } |
上記処理で指定したところに js ファイルを追加。
例）テーマ内 /js/tinymce.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(function() { tinymce.create( 'tinymce.plugins.original_tinymce_button', { init: function( ed, url ) { ed.addButton( 'br', { title: '改行', text: '改行', cmd: 'br_cmd' }); ed.addCommand( 'br_cmd', function() { var return_text = '<br>'; ed.execCommand( 'mceInsertContent', 0, return_text ); }); }, createControl : function( n, cm ) { return null; }, }); tinymce.PluginManager.add( 'original_tinymce_button_plugin', tinymce.plugins.original_tinymce_button ); })(); |
ちなみにこの方法は、Gutenbergでは使用できません。
Ver4系か、Classic Editer使用時の方法となります。
デメリットとして、ボタンエリア部分が追随しないので、入力毎にボタン位置まで戻らないといけないという非常に使いづらい感じになります。
もっと良いやり方をご存知の方いれば、コメントください！！
コメントを残す