「投稿」タグアーカイブ

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

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

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

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

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

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

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


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

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

editor-style.css の中に

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

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

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

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

PCでやると、入れ子構造になって、色々な文字修飾が選べて便利。

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

 

諸悪の根源、問題の箇所

サンゴのビジュアルエディター文字修飾は、

themes/sango-theme/library/functions/style-shortcode.php の中の

という記述のファンクションで規定されている。

これを自分の子テーマの functions.php で上書きする。
 

functions.php へ記述

サンゴのバグだと書いたが、実は問題は入れ子構造にある。

スマホでは、TinyMCEの入れ子構造の選択ができない。

スマホの時は、これを上書きして入れ子構造をなくす以外に方法はない。

上記は一例で、極端な話、入れ子構造をなくして、全ての文字修飾を表示することもできる。

しかしそうすると、あまりにも長くなるので、よく使う20個ぐらいを選んで並べておいて、他はスマホでは非表示にする方が使いやすいかもしれない。

何を残すかは、

themes/sango-theme/library/functions/style-shortcode.php の中の

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

「コメント」に、「あなたの記事に他ユーザーが書いたコメント」のみを表示させる WordPress BuddyPressカスタマイズメモ

「コメント一覧」に「あなたの記事に他ユーザーが書いたコメント」のみを表示する方法

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

そのままの状態では、投稿者でも、全員のコメントが見えるし、編集、削除もできてしまう。

管理画面のコメントには、自分の投稿記事に対してつけられたコメントのみを表示する。

コメントの編集権に関しては、人が書いたコメントは編集できないようにしておく。
 

functions.php へ記述

//投稿者のみ、「自分の投稿」へのコメントのみ表示

“管理者”でも非表示にしたい場合は、一番上と一番下の

を削除すればいい。

なお、
投稿者が人のコメントを編集、削除できないようにする方法はこちらを参照。