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

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: '見出し６：囲い枠',
　　　　　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: '見出し７：背景塗りと下線',
　　　　　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: '見出し８：オレンジ見出し',
　　　　　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">見出し８：オレンジ見出し</p>';
　　　　　　}
　　　　　　editor.insertContent(return_text);
　　　　　}
　　　　},
　　　　{
　　　　　text: '２．グレイの囲み線',
　　　　　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。