以前書いた記事「改行させたり、させなかったりする」の続き。
目次
span制御は説明しにくい
<!-- html -->
<span class="block-pc">コンテンツ文章</span><span class="block-pc">コンテンツ文章</span>
/* CSS */
@media (min-width: 769px) {
.block-pc {
display: block;
}
}特定のクラス名を付けたspanで制御するのが誤動作もなく無難なのですが、
編集方法を説明するのがとてつもなく難しいです。
- PCで改行したい箇所で改行しておく。
- 1行ずつspanで囲む
- 改行を削除する
- PCのみの改行、それ以外での改行の違いを説明
これを図示するのが面倒。いっそのこと動画にしようかと思うくらい。
また、メディアクエリを3種類以上にすると、何が何だか分からなくなること間違いなし。
やっぱりbrにも対応しておこう
brで制御する場合、説明は簡単。
「PCで改行したいところでこのボタンを押す」
「小画面で改行したいところでこのボタンを押す」
ということで、独自ボタン追加。
ビジュアルエディタ
js
//editor-button.js
(function() {
tinymce.create( 'tinymce.plugins.original_tinymce_button', {
init: function( ed, url ) {
ed.addButton( 'br_pc', {
title: 'PCのみ改行',
image: url + '/br-pc.png',
cmd: 'br_pc_cmd'
});
ed.addCommand( 'br_pc_cmd', function() {
var selected_text = ed.selection.getContent(),
return_text = '<br class="br-pc">';
ed.execCommand( 'mceInsertContent', 0, return_text );
});
ed.addButton( 'br_m', {
title: '小画面のみ改行',
image: url + '/br-m.png',
cmd: 'br_m_cmd'
});
ed.addCommand( 'br_m_cmd', function() {
var selected_text = ed.selection.getContent(),
return_text = '<br class="br-m">';
ed.execCommand( 'mceInsertContent', 0, return_text );
});
},
createControl : function( n, cm ) {
return null;
},
});
tinymce.PluginManager.add( 'original_tinymce_button_plugin', tinymce.plugins.original_tinymce_button );
})();動作自体はjsなので、ボタンの動作を作っておきます。
この例ではbrボタン2種。
ファイル配置は、「テーマ/js/」としています。
ボタン画像も同じディレクトリ。
functions.php
/* ---------- 呼び出し - ビジュアルエディタに独自ボタンを追加 ---------- */
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/editor-button.js';
return $plugin_array;
}
add_filter( 'mce_buttons', 'add_original_tinymce_button' );
function add_original_tinymce_button( $buttons ) {
$buttons[] = 'br_pc';
$buttons[] = 'br_m';
return $buttons;
}参考 –
テキストモードにクイックタグを追加
functions.php
/* ---------- クイックタグを追加 ---------- */
function add_quicktags () {
if( wp_script_is( 'quicktags' ) ) { ?>
<script>
QTags.addButton('br-pc', 'br-pc', '<br class="br-pc">', '', '', 'PCのみ改行', 1);
QTags.addButton('br-m', 'br-m', '<br class="br-m">', '', '', '小画面のみ改行', 2);
</script>";
<?php }
}
add_action( 'admin_print_footer_scripts', 'add_quicktags' );こっちはとってもシンプル。いろいろ応用できそう。
参考 –
https://shu-sait.com/toukou-gamen-botton-tuika/
プラグインで追加
Visual Editor Custom Buttons
ビジュアルモード、テキストモード、両方にボタンを追加できます。
更新は2年前で止まっているけれど、特に問題なし。
AddQuicktag
こちらもビジュアルモード、テキストモード、両対応ですが、セレクト形式。
標準投稿と固定ページにしか対応していませんが、下記を参考にカスタム投稿に対応可。
http://cly7796.net/wp/cms/use-addquicktag-with-custom-post/
誤動作するケース
探すと山のように出てくる「ビジュアルエディタでbrを勝手に消させない～」のような記事。functions.phpに書いたり、「TinyMCE Advanced」を入れたり。
table中の改行が消える現象に遭遇したことがあり、私も対策したことがありますが、今は解消されている模様。
これをやっていると、改行が複数挿入され、意図通りの見栄えになりません。
これはプラグインで実装しても同じこと。
また、関連項目のバージョンによって色々な動作をすることがあるようです。
この場合はやっぱりspanで対応するのが確実と思います。
折衷
spanはいろいろ手間、brは不安定、ということで、試用中の策。
あいうえお<span class="span-block-pc"></span>かきくけここんな感じ。
/* ---------- クイックタグを追加 ---------- */
function add_quicktags () {
if( wp_script_is( 'quicktags' ) ) { ?>
<script>
QTags.addButton('span-block-pc', 'span-block-pc', '<span class="span-block-pc"></span>', '', '', 'PCのみ改行', 3);
QTags.addButton('span-block-m', 'span-block-m', '<span class="span-block-m"></span>', '', '', '小画面のみ改行', 3);
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'add_quicktags' );
/* ---------- 空タグ消去を抑止 ---------- */
if ( ! function_exists('tinymce_init') ) {
function tinymce_init( $init ) {
$init['verify_html'] = false;
$initArray['valid_children'] = '+body[style], +div[div|span|a], +span[span]';
return $init;
}
add_filter( 'tiny_mce_before_init', 'tinymce_init', 100 );
}※様子見なのでクイックタグしか書いてないです。
運用中のサイトに悪影響はないと思いますが、エクスポート、インポートをすると、消えちゃうかも。
また、空タグなので見た目悪いし、クラスが書いてあるだけで怒り出す人もいるし。
いまいちか。
参考 –
