「ビジュアルエディター」タグアーカイブ

ビジュアルエディターにオリジナルのプルダウンメニューを追加する方法 WordPress BuddyPressカスタマイズメモ SANGOテンプレート

サンゴのテーマのビジュアルエディターで、スマホの「スタイル」のバグを修正する

WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが参加することになる。

メンバーにストレスなく投稿してもらうために、SANGOのデフォルトで入っている「スタイル」は複雑な入れ子構造になっていて、しかもスマホではバグでまともに使えない。

というわけで、この文字修飾のSANGOの「スタイル」は基本使わずに、シンプルなオリジナル文字修飾の「よく使うスタイル」を追加したい。
 
こんな感じでね。

 

jsファイルへ記述して、メニューのテンプレートを作る

WordPressのビジュアルエディター(TinyMCE)のメニューにオリジナルのプルダウンメニューを追加するには、
jsファイルでプルダウンのテンプレートファイルを作り
テーマフォルダにアップロードして、
それを投稿画面で呼び出す必要がある。

js ファイルの中身に下記の内容を書く。ここでは仮に originalpulldown.jp とするが、好きな名前でいい。

今回は元々SANGOの「スタイル」で使われている などを使っているので、CSSファイルは変更・新たに記述はしない。

CSSから完全にオリジナルの文字修飾を入れる場合は、管理画面の「外観」→「CSS編集」などから修飾も追加する必要がある。

originalpulldown.jp の中身

(function() {
 // ビジュアルエディタにプルダウン追加
 tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
  editor.addButton( 'my_mce_button', {
   text: 'よく使うスタイル',
   icon: false,
   type: 'menubutton',
   menu: [
    {
     text: '文字大きめ',
     onclick: function() {
      var selected_text = editor.selection.getContent();
      var return_text = '';
      return_text = '<span class="big">' + selected_text + '</span>';
      editor.insertContent(return_text);
     }
    },
    {
     text: 'ラベル(メインカラー)',
     onclick: function() {
      var selected_text = editor.selection.getContent();
      var return_text = '';
      return_text = '<span class="labeltext main-bc">' + selected_text + '</span>';
      editor.insertContent(return_text);
     }
    },
    {
     text: 'ラベル(アクセントカラー)',
     onclick: function() {
      var selected_text = editor.selection.getContent();
      var return_text = '';
      return_text = '<span class="labeltext accent-bc">' + selected_text + '</span>';
      editor.insertContent(return_text);
     }
    },
    {
     text: '見出し6:囲い枠',
     onclick: function() {
      var selected_text = editor.selection.getContent();
      var return_text = '';
      if(selected_text.length > 0){
       return_text = '<p class="hh hh6 main-c main-bdr">' + selected_text + '</p>';
      }else{
       return_text = '<p class="hh hh6 main-c main-bdr">見出し:囲い枠</p>';
      }
      editor.insertContent(return_text);
     }
    },
    {
     text: '見出し7:背景塗りと下線',
     onclick: function() {
      var selected_text = editor.selection.getContent();
      var return_text = '';
      if(selected_text.length > 0){
       return_text = '<p class="hh hh7 pastel-bc main-bdr">' + selected_text + '</p>';
      }else{
       return_text = '<p class="hh hh7 pastel-bc main-bdr">見出し:背景塗りと下線</p>';
      }
      editor.insertContent(return_text);
     }
    },
    {
     text: '見出し8:オレンジ見出し',
     onclick: function() {
      var selected_text = editor.selection.getContent();
      var return_text = '';
      if(selected_text.length > 0){
       return_text = '<p class="hh hh8">' + selected_text + '</p>';
      }else{
       return_text = '<p class="hh hh8">見出し8:オレンジ見出し</p>';
      }
      editor.insertContent(return_text);
     }
    },
    {
     text: '2.グレイの囲み線',
     onclick: function() {
      var selected_text = editor.selection.getContent();
      var return_text = '';
      if(selected_text.length > 0){
       return_text = '<div class="sng-box box2">' + selected_text + '</div>';
      }else{
       return_text = '<div class="sng-box box2">グレイの囲み線</div>';
      }
      editor.insertContent(return_text);
     }
    },
   ]
  });
 });
})();

 

originalpulldown.jp をアップロードする場所

wp-content/themes/sango-theme-child/originaljs/
(テーマフォルダは、上記ではsango-theme-childとなっているが、テーマによっては twentynineteen とかそういう名前。)

WordPressのテーマフォルダの中(子テーマがあるなら子テーマフォルダの中)に、originaljs というフォルダを作る。

このフォルダ名も別に何でもいい。

その中に originalpulldown.jp をアップロードする。

 

functions.php に記述して、投稿画面で originalpulldown.jp を呼び出す

// よく使うスタイルプラグインを読み込む
function my_add_tinymce_plugin( $plugin_array ) {
 $plugin_array['my_mce_button'] = get_stylesheet_directory_uri() .'/originaljs/originalpulldown.jp';
 return $plugin_array;
}

これで、my_mce_button として、originalpulldown.jp を読み込んでいる。

ちなみに、jsファイルを子テーマフォルダにupした想定なので get_stylesheet_directory_uri() だが、
親テーマフォルダの中だと get_template_directory_uri() になる。

// リッチテキストエディタに my_mce_button「よく使うスタイル」を追加
function my_register_mce_button( $buttons ) {
 unset($buttons);
 $buttons = array( 'formatselect', 'my_mce_button', 'undo', 'redo', 'styleselect', 'bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'alignleft', 'aligncenter', 'alignright', 'link', 'wp_more', 'wp_adv', 'fullscreen');
 return $buttons;


これで、こんな感じのメニューになる。

formatselect は「段落」
my_mce_button は「よく使うスタイル」(オリジナルで追加したもの)
undo は「取り消し(Ctl+Z)」
redo は「やり直し(Ctl+Y)」
styleselect は「スタイル」(SANGOで標準に追加されるもの)
bold は「太字(Ctl+B)」
italic は「イタリック(Ctl+I)」
strikethrough は「打ち消し(Shift+Alt+D)」
bullist は「番号無しリスト(Shift+Alt+U)」
numlist は「番号付きリスト(Shift+Alt+O)」
blockquote は「引用(Shift+Alt+Q)」
alignleft は「左寄せ(Shift+Alt+L)」
aligncenter は「中央揃え(Shift+Alt+C)」
alignright は「右寄せ(Shift+Alt+R)」
link は「リンクの挿入/編集(Ctl+K)」
wp_more は「続きを読むタグを挿入(Shift+Alt+T)」
wp_adv は「ツールバー切替(Shift+Alt+Z)」
fullscreen は「フルスクリーン」

この他にもたくさんのメニューがあるが、公式データを参照してほしいものを追加、不要なモノは削除してほしい。

スマホ版のメニューとPCのメニューを別にしたい場合は

if ( wp_is_mobile() ) { //スマホ版のメニューここから

function my_register_mce_button( $buttons ) {
 unset($buttons);
 $buttons = array( 'formatselect', 'my_mce_button', 'undo', 'redo');
 return $buttons;

}

if ( !wp_is_mobile() ) { //PC版のメニューここから

function my_register_mce_button( $buttons ) {
 unset($buttons);
 $buttons = array( 'formatselect', 'my_mce_button', 'undo', 'redo', 'styleselect', 'bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'alignleft', 'aligncenter', 'alignright', 'link', 'wp_more', 'wp_adv', 'fullscreen');
 return $buttons;

}

こんな感じで、それぞれ書けばOK。

この記事も読まれています

ビジュアルエディターの文字修飾で新たなプルダウン(フォントサイズ)追加 WordPress BuddyPressカスタマイズメモ

ビジュアルエディターの文字修飾で新たなプルダウン(フォントサイズ)追加

WordPressのテーマ、SANGOのビジュアルエディター(スマホ版)の「スタイル」で文字修飾が使えないバグを修正する方法は紹介した。

スマホでやると、入れ子構造が表示できず、全く使えないので、入れ子構造をやめた。

入れ子をやめると文字修飾の数が少なくなってしまうので、フォントサイズだけ別で追加する。
 

functions.php へ記述

フォントサイズなど、一部のプルダウンメニューは、TinyMCEとは別に、追加する。
//新たなプルダウン追加(フォントサイズ)

if ( !function_exists( 'add_ilc_mce_buttons_to_bar' ) ):
function add_yuya_mce_buttons($buttons){
  array_push($buttons, 'backcolor', 'fontsizeselect', 'cleanup');
  return $buttons;
}
endif;
add_filter('mce_buttons', 'add_yuya_mce_buttons');
}

sango のビジュアルエディターのバグ修正(スマホでTinyMCEの文字修飾が変) WordPress BuddyPressカスタマイズメモ

サンゴのテーマのビジュアルエディターで、スマホの「スタイル」のバグを修正する

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) {
...以下略

の中から選んで、順にコピペしていけばいい。