WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが投稿するようになると、投稿画面のビジュアルエディターの見た目と、サイトフロントの見た目を揃えておいた方がいい。
別のCSSを用意してそれをビジュアルエディター用のCSSとして読み込ませる必要がある。
SANGOのテーマの場合は
library/css/editor-style.css
に投稿画面用のCSSが入っている。
それを子テーマに別のCSSを入れて読み込ませてみる。
とパスを書いておくことによって、子テーマのURLが取得されるのでこれでOK。
例えば、
「オレンジ見出し」を実際のページで青くした場合、オレンジのプレビューになるのに、実際のページでは青。
editor-style.css の中に
この color や、background の色を変えればいい。
WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが参加することになる。
WordPressには mce_buttons というフィルターフックが用意されている。
これが、1行目にあるボタンを削除する時の記述。
こっちは、3行目にボタンを追加する時の記述。
remove と add で削除と追加。
後ろに、 _2 _3 とかをつけて、2行目、3行目を操作する。
これで全て削除になる。残したい部分だけ、消しておけばOK。
WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが参加することになる。
メンバーにストレスなく投稿してもらうために、SANGOのデフォルトで入っている「スタイル」は複雑な入れ子構造になっていて、しかもスマホではバグでまともに使えない。
というわけで、この文字修飾のSANGOの「スタイル」は基本使わずに、シンプルなオリジナル文字修飾の「よく使うスタイル」を追加したい。
こんな感じでね。
WordPressのビジュアルエディター（TinyMCE）のメニューにオリジナルのプルダウンメニューを追加するには、
jsファイルでプルダウンのテンプレートファイルを作り、
テーマフォルダにアップロードして、
それを投稿画面で呼び出す必要がある。
js ファイルの中身に下記の内容を書く。ここでは仮に originalpulldown.jp とするが、好きな名前でいい。
今回は元々SANGOの「スタイル」で使われている などを使っているので、CSSファイルは変更・新たに記述はしない。
CSSから完全にオリジナルの文字修飾を入れる場合は、管理画面の「外観」→「CSS編集」などから修飾も追加する必要がある。
originalpulldown.jp の中身
wp-content/themes/sango-theme-child/originaljs/
(テーマフォルダは、上記ではsango-theme-childとなっているが、テーマによっては twentynineteen とかそういう名前。)
WordPressのテーマフォルダの中(子テーマがあるなら子テーマフォルダの中)に、originaljs というフォルダを作る。
このフォルダ名も別に何でもいい。
その中に originalpulldown.jp をアップロードする。
これで、my_mce_button として、originalpulldown.jp を読み込んでいる。
ちなみに、jsファイルを子テーマフォルダにupした想定なので get_stylesheet_directory_uri() だが、
親テーマフォルダの中だと get_template_directory_uri() になる。
これで、こんな感じのメニューになる。
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のメニューを別にしたい場合は
こんな感じで、それぞれ書けばOK。
