「メニュー」タグアーカイブ

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

WordPress BuddyPressカスタマイズメモ 返信メール、メニュー、管理画面、投稿画面など (SANGOテンプレート)

BuddyPressのカスタマイズメモ

基本設定と運用の前提

・BuddyPressでユーザー登録(投稿者として)してもらい、みんなで記事を投稿してもらう

・ユーザー同士は顔見知りじゃないので、それぞれの記事は、管理画面では見えないように

・ユーザー(投稿者権限)の管理画面でのメニューを一部非表示に

・ユーザーの投稿画面で表示オプションを非表示に

・Buddypressのmemberページを使わずに、SangoのAuthorページを活用

・アップデートの通知などをユーザーに見えないように

・コメント時のメール通知などの最適化

・アップデート時に問題が起こらないように、子テーマ化して、コアファイルは極力触らず、functions.phpを使う
 

BuddyPressで実現したカスタマイズ一覧

サイトフロント(管理画面以外の見えるWebサイト全て)

・サイドバーにオリジナルWidget、ユーザーごとの記事PVランキング「人気のメンバー」を追加

・サイトフロントのアドミンバー非表示

・ログイン直後に管理画面ではなくサイトフロントへ飛ばす

・サイトフロントのコメントの編集ボタンを削除

・ログイン時は、非ログイン時と違うメニューを表示させる

 

管理画面全体

・管理画面の一部メニュー非表示

・管理画面のサブメニューの非表示

・管理画面のメニューのアドミンバーの、BuddyPress通知の吹き出しを削除

・管理画面のアドミンバー内の「ヘルプ」「表示オプション」「Wロゴ」などのメニューを非表示

・Wordpressやプラグインのアップデート通知を非表示

・「投稿」→「記事」、「コメント」→「あなたの記事へのコメント」へ、メニューの文言変更

・ダッシュボード画面の「アクティビティ」「クイックドラフト」などを非表示

・管理画面用のCSSファイルを、子テーマ化する

・ログイン画面の「W」のロゴを他の画像に変え、リンク先、マウスホバーの文言変更

・管理画面のプロフィール項目でいらない部分を消す

 

投稿画面、投稿権限

・記事投稿でタイトルの入力を必須にする

・投稿者の「投稿」では、自分の投稿のみ表示させる(他ユーザーの投稿は管理画面の投稿一覧では見えない)

・自分のもののみの投稿数を取得して、記事数に代入

・upした画像は投稿者本人しか見えないようにする

・投稿画面で、メタディスクリプション、トラックバック、リビジョン、フォーマットなどの不要なオプションを削除

・cssで投稿画面の不要な文字修飾オプションを非表示に ※・sango のビジュアルエディターのバグ修正(スマホでTinyMCEの文字修飾がおかしい)へリンク

 

コメント関連

・「あなたのコメント」を管理画面のメニューに追加

・「あなたのコメント」に投稿者自身が、人の記事に書いたコメントを表示

・「あなたのコメント」の上のコメントメニュー(スパム、承認待ち等を)削除

・「あなたのコメント」の上のコメントメニュー(スパムチェック、一括操作も)削除

・「あなたのコメント」「あなたの記事へのコメント」の編集権を調整して、「あなたのコメント」に編集権限を与え、「あなたのコメント」に「削除する」だけ残す

・「コメント」に、「あなたの記事へのコメント」のみを表示させる

・コメントページの上のコメント数を「あなたの記事に書かれた、人からのコメント数」のみカウントする

・「あなたの記事に書かれた、人からのコメント」で上のコメントメニュー削除

 

BuddyPressのメンバー機能

・メンバーなどWidget/ウィジェットのURLの文字列を、別の文字列に置換する

・メンバーなどWidget/ウィジェットのURLをリダイレクトさせる

・メンバー登録時の、ユーザー名で禁止文字列を設定する

・メンバーのタイトルの名前(ユーザーID)に「さん」を追加して表示

・文言変更「登録」→「新規登録」に

 

Sangoのバグ修正・カスタマイズ

・sango のビジュアルエディターのバグ修正(スマホでTinyMCEの文字修飾がおかしい)

・新たなプルダウン(フォントサイズ)追加

・管理画面のプロフィールで、sangoによる追加項目を一旦削除

・管理画面のプロフィールで、Sangoの「肩書」の部分を「出身地」などに変更、管理画面のプロフィールでいらない部分を消す

Sangoの著者ページ「author/…」でその著者の投稿が無いと、プロフィール詳細とアバターが正しく表示されないバグ修正

 

通知メールのカスタマイズ

・コメント通知メールの差出人(wordpress@yourdomain.com)を変更

・トラックバック、ピンバック、コメントの通知メール内容を変更

 

プラグインのカスタマイズ(子テーマ及びfunctions.phpで)

・メールに返信した時にコメントを書いた人のメールアドレスが出ないようにする(Better Notifications for WordPressの設定の問題点を修正するため、管理画面で特定のページの時のみ、jsを上書きする)

「あなたの記事に書かれた、人からのコメント」で上のコメントメニューの調整・非表示 WordPress BuddyPressカスタマイズメモ

コメントページの上のメニューを非表示にしたりする方法

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

投稿者権限の一般参加ユーザーには、コメントの承認や非承認の権限は必要ないので、メニューごと非表示にしてしまおう。


 ↓↓↓

 

functions.php へ記述

人の書いたコメントの編集権限は一切必要ないので、ゴミ箱、スパム、承認待ち、などを全て非表示にしている。

//あなたの記事へのコメントで上メニュー削除

if ( current_user_can( 'author' ) && ($pagenow == 'edit-comments.php')) {
add_filter( 'comment_status_links',
function( $status_links ) {
$status_links['trash'] = sprintf(
//  "<a href=%s>%s <span class='count'></span></a>",
//  esc_url( admin_url( 'edit-comments.php?comment_status=trash') ),
//  __( 'ゴミ箱' )
);
$status_links['spam'] = sprintf(
//  "<a href=%s>%s <span class='count'></span></a>",
//  esc_url( admin_url( 'edit-comments.php?comment_status=spam') ),
//  __( 'スパム' )
);
$status_links['moderated'] = sprintf(
//  "<a href=%s>%s <span class='count'></span></a>",
//  esc_url( admin_url( 'edit-comments.php?comment_status=moderated') ),
//  __( 'コメント一覧' )
);
$status_links['mine'] = sprintf(
//  "<a href=%s>%s <span class='count'></span></a>",
//  esc_url( admin_url( 'edit-comments.php?comment_status=mine') ),
//  __( '自分' )
);
$status_links['all'] = sprintf(
//  "<a href=%s>%s <span class='count'></span></a>",
//  esc_url( admin_url( 'edit-comments.php?comment_status=all') ),
//  __( 'All' )
);
return $status_links; 
} ); }

頭に「//」がついている場合は、コメントアウトされて空っぽになる(つまり非表示になる)、上のコードで、例えば「全て」も残したい場合は、
頭の

//  "<a href=%s>%s <span class='count'></span></a>",
//  esc_url( admin_url( 'edit-comments.php?comment_status=all') ),
//  __( 'All' )

の行のはじめの「//」を全て消しておく。
 

関連記事:
スパムチェック、一括操作などのバルクメニューと呼ばれるものを削除する方法はこちら参照。

「コメント」に、「あなたの記事に他ユーザーが書いたコメント」のみを表示させる方法はこちらを参照。

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