サンゴのテーマのビジュアルエディターで、スマホの「スタイル」のバグを修正する
WordPressのテーマ、SANGOのビジュアルエディター（スマホ版）の「スタイル」で文字修飾が使えないバグを修正する。
PCでやると、入れ子構造になって、色々な文字修飾が選べて便利。
スマホでやると、入れ子構造が表示できず、全く使えない。
諸悪の根源、問題の箇所
サンゴのビジュアルエディター文字修飾は、
themes/sango-theme/library/functions/style-shortcode.php の中の
add_filter('widget_text', 'do_shortcode' );
function sng_editor_setting($init) {
//ビジュアルエディターの選択肢からh1見出しを削除（h1は記事本文では使用しない）
$init['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Preformatted=pre';
$style_formats = array(
array(
'title' => '画像のスタイル',
'items' => array(
array(
'title' => '画像を小さく',
'selector' => 'img',
'classes' => 'img_so_small'
),...以下略という記述のファンクションで規定されている。
これを自分の子テーマの functions.php で上書きする。
functions.php へ記述
サンゴのバグだと書いたが、実は問題は入れ子構造にある。
スマホでは、TinyMCEの入れ子構造の選択ができない。
スマホの時は、これを上書きして入れ子構造をなくす以外に方法はない。
if ( wp_is_mobile() ) { // スマホ(タッチパネルデバイスのタブレット含む)の時だけ
function yuya_style_init( $init ) {
$style_formats_headlines = array(
array(
'title' => 'Q&Aの「Q」',
'block' => 'p',
'classes' => 'hh hhq',
),
array(
'title' => 'Q&Aの「A」',
'block' => 'p',
'classes' => 'hh hha',
),
array(
'title' => '見出し1：下線',
'block' => 'p',
'classes' => 'hh hh1',
),
array(
'title' => '見出し32：フラット塗りつぶし',
'block' => 'p',
'classes' => 'hh hh32',
),
array(
'title' => '見出し33：角丸ぬりつぶし',
'block' => 'p',
'classes' => 'hh hh33',
),
array(
'title' => '見出し34：肉球',
'block' => 'p',
'classes' => 'hh hh34',
),
array(
'title' => '見出し35：リボン（1行のみ）',
'block' => 'p',
'classes' => 'hh hh35',
),
array(
'title' => '見出し36：片側リボン（1行のみ）',
'block' => 'p',
'classes' => 'hh hh36',
),array(
'title' => '1.黒の囲み線',
'block' => 'div',
'classes' => 'sng-box box1',
'wrapper' => true,
),
array(
'title' => '2.グレイの囲み線',
'block' => 'div',
'classes' => 'sng-box box2',
'wrapper' => true,
),
array(
'title' => '3.薄い水色の背景',
'block' => 'div',
'classes' => 'sng-box box3',
'wrapper' => true,
),
array(
'title' => '4.薄い水色＋上下線',
'block' => 'div',
'classes' => 'sng-box box4',
'wrapper' => true,
),
array(
'title' => '5.二重線囲み',
'block' => 'div',
'classes' => 'sng-box box5',
'wrapper' => true,
),
array(
'title' => '6.青の点線囲み',
'block' => 'div',
'classes' => 'sng-box box6',
'wrapper' => true,
),
array(
'title' => '7.背景グレイ＋両端二重線',
'block' => 'div',
'classes' => 'sng-box box7',
'wrapper' => true,
),
array(
'title' => '8.橙色の背景+左線',
'block' => 'div',
'classes' => 'sng-box box8',
'wrapper' => true,
),
array(
'title' => '9.赤の背景+上線',
'block' => 'div',
'classes' => 'sng-box box9',
'wrapper' => true,
),
array(
'title' => '10.ミントカラー+上線',
'block' => 'div',
'classes' => 'sng-box box10',
'wrapper' => true,
),array(
'title' => '11.影＋ネイビー上線',
'block' => 'div',
'classes' => 'sng-box box11',
'wrapper' => true,
),
array(
'title' => '12.水色立体',
'block' => 'div',
'classes' => 'sng-box box12',
'wrapper' => true,
),
array(
'title' => '13.青の立体',
'block' => 'div',
'classes' => 'sng-box box13',
'wrapper' => true,
),
array(
'title' => '14.水色ステッチ',
'block' => 'div',
'classes' => 'sng-box box14',
'wrapper' => true,
),
array(
'title' => '15.ピンクステッチ',
'block' => 'div',
'classes' => 'sng-box box15',
'wrapper' => true,
),
array(
'title' => '16.水色ストライプ',
'block' => 'div',
'classes' => 'sng-box box16',
'wrapper' => true,
),
array(
'title' => '17.シャープ型',
'block' => 'div',
'classes' => 'sng-box box17',
'wrapper' => true,
),
array(
'title' => '18.左上と右下くるん',
'block' => 'div',
'classes' => 'sng-box box18',
'wrapper' => true,
),
array(
'title' => '19.カギカッコ',
'block' => 'div',
'classes' => 'sng-box box19',
'wrapper' => true,
),
array(
'title' => '20.両端ドット点線囲み',
'block' => 'div',
'classes' => 'sng-box box20',
'wrapper' => true,
),
array(
'title' => '21.グラデーション',
'block' => 'div',
'classes' => 'sng-box box21',
'wrapper' => true,
),
array(
'title' => '22.影付き+左に青線',
'block' => 'div',
'classes' => 'sng-box box22',
'wrapper' => true,
),
array(
'title' => '23.丸い吹き出し',
'block' => 'div',
'classes' => 'sng-box box23',
'wrapper' => true,
),
array(
'title' => '24.吹き出し水色',
'block' => 'div',
'classes' => 'sng-box box24',
'wrapper' => true,
),
array(
'title' => '25.右上に折り目',
'block' => 'div',
'classes' => 'sng-box box25',
'wrapper' => true,
)
);
$init['style_formats'] = json_encode($style_formats_headlines);
return $init;
}
add_filter( 'tiny_mce_before_init', 'yuya_style_init', 30 );上記は一例で、極端な話、入れ子構造をなくして、全ての文字修飾を表示することもできる。
しかしそうすると、あまりにも長くなるので、よく使う20個ぐらいを選んで並べておいて、他はスマホでは非表示にする方が使いやすいかもしれない。
何を残すかは、
themes/sango-theme/library/functions/style-shortcode.php の中の
function sng_editor_setting($init) {
...以下略の中から選んで、順にコピペしていけばいい。
