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

ビジュアルエディター見た目を実際の投稿の色や見た目と揃える方法 WordPress BuddyPressカスタマイズメモ SANGOテンプレート

WordPressのビジュアルエディターで、H2やH3のをつけると、実際のCSSと違うようになるので、それを揃える方法

WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが投稿するようになると、投稿画面のビジュアルエディターの見た目と、サイトフロントの見た目を揃えておいた方がいい。

別のCSSを用意してそれをビジュアルエディター用のCSSとして読み込ませる必要がある。
 

投稿画面のプレビュー用の別のCSSを用意する

SANGOのテーマの場合は
library/css/editor-style.css
に投稿画面用のCSSが入っている。

それを子テーマに別のCSSを入れて読み込ませてみる。

//スタイルとビジュアルエディターの見た目を揃える
function correct_visual() {
add_editor_style(get_stylesheet_directory_uri() . '/library/css/editor-style.css');
}
add_action('admin_init', 'correct_visual', 20);
get_stylesheet_directory_uri()

とパスを書いておくことによって、子テーマのURLが取得されるのでこれでOK。

例えば、
「オレンジ見出し」を実際のページで青くした場合、オレンジのプレビューになるのに、実際のページでは青。

editor-style.css の中に

/*オレンジ見出し*/
body#tinymce.wp-editor .hh8 {
  padding: 0.5em;
  color: #494949;
  background: #fffaf4;
  border-left: solid 5px #ffaf58;
}

この color や、background の色を変えればいい。

プラグインを使わずビジュアルエディターの文字修飾(TinyMCE)から不要ボタンを削除する方法 WordPress BuddyPressカスタマイズメモ SANGOテンプレート

ビジュアルエディターで、不要な文字修飾ボタンを削除する

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

WordPressには mce_buttons というフィルターフックが用意されている。

add_filter( 'mce_buttons', 'remove_mce_buttons' );

これが、1行目にあるボタンを削除する時の記述。

add_filter( 'mce_buttons_3', 'add_mce_buttons_3' );

こっちは、3行目にボタンを追加する時の記述。

removeadd削除追加
後ろに、 _2 _3 とかをつけて、2行目、3行目を操作する。
 

functions.phpへの記述

add_filter( 'mce_buttons', 'remove_mce_buttons' );
function remove_mce_buttons( $buttons ) {
  $remove = array(
    'formatselect', // フォーマット
    'bold',         // 太字
    'italic',       // イタリック
    'bullist',      // 番号なしリスト
    'numlist',      // 番号付きリスト
    'blockquote',   // 引用
    'alignleft',    // 左寄せ
    'aligncenter',  // 中央揃え
    'alignright',   // 右寄せ
    'link',         // リンクの挿入/編集
    'unlink',       // リンクの削除
    'wp_more',      // 「続きを読む」タグを挿入
    'wp_adv',       // ツールバー切り替え
    'dfw'           // 集中執筆モード
  );
  return array_diff( $buttons, $remove );
}

add_filter( 'mce_buttons_2', 'remove_mce_buttons_2' );
function remove_mce_buttons_2( $buttons ) {
  $remove = array(
    'strikethrough', // 打ち消し
    'hr',            // 横ライン
    'forecolor',     // テキスト色
    'pastetext',     // テキストとしてペースト
    'removeformat',  // 書式設定をクリア
    'charmap',       // 特殊文字
    'outdent',       // インデントを減らす
    'indent',        // インデントを増やす
    'undo',          // 取り消し
    'redo',          // やり直し
    'wp_help'        // キーボードショートカット
  );
  return array_diff( $buttons, $remove );
}

これで全て削除になる。残したい部分だけ、消しておけばOK。

ビジュアルエディターにオリジナルのプルダウンメニューを追加する方法 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。