サンゴのテーマのビジュアルエディターで、スマホの「スタイル」のバグを修正する
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。
