「スマホ・パソコン・Web関連」カテゴリーアーカイブ

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

【解決済み】Windowsアップデート後に画面が真っ黒になった時の対処法

アップデート後に画面が真っ黒になった時の解決方法

Windowsアップデートが自動で走り「更新をしてシャットダウン」をした次に起動すると、画面が真っ黒になることがある。

結構頻繁になる機種もある…
 

確認事項

・壁紙やアイコンは見えているか?
→見えてない。アップデート直後だからかとそのまま10分程待っても同じ。

・マウスかタッチパッドを動かしてマウスカーソルが表示されるか?
→表示されるし、動く。

・画面で Ctl + Alt + Del を押して反応があるか?
→タスクマネージャーは出る。操作もできるが、タスクマネージャーを消すとまた真っ黒。

・HDDへのアクセス(書き込み、読み込みのチカチカ光ってるのが見える場合)があるのか?
→しばらくチカチカするが、その後止まる。つまり正常起動と同じ。

解決法

画面真っ黒のまま、電源ボタン長押しで強制終了。

電源を入れる。

黒画面にWindowsのマークが出たらまた電源ボタン長押しで強制終了。これを2回繰り返す。

3回目の電源投入で、「自動修復モード」で起動される。

自動修復のメニューが出たら「詳細オプション」

「トラブルシューティング」

「システムの復元」

コンピュータ名を選択。大体1個しか出てこない。

パスワードがある場合はここで入力。出てこない時もある。

システムファイルと設定の復元で「次へ」

復元ポイントを選ぶ。日付が表示sれているので、適当に3日前ぐらいのを選ぶと良い。
なお、これで症状が回復しない場合は、更に前のモノを選ぶといい。
ちなみに、「他の復元ポイントを表示する」を選ぶと、しばらく前の分まで表示してくれる。

システムの復元を実行するので「完了」をクリック。
ここで「影響を受けるプログラムの検出」で、巻き戻すアップデートなどを確認することもできる。

「次へ」とか「はい」とか押して、システム復元を開始。
あとは自動的に復元され、再起動されるのを待つだけ。最低でも15分ぐらいはかかる。

復元後の、自動再起動時にビデオカードも更新される場合があり、しばらく画面が暗いこともあるが、5分ぐらいはそのまま待ってみよう。

トラックバック、ピンバック、コメントの通知メール内容を変更 WordPress BuddyPressカスタマイズメモ

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

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

コメントがついた時に、投稿者にコメントが来たという通知メールが届く。

そこにIPアドレスが表示されたり、著者のURLや、コメントを書いた人のメールアドレスが表示される。

投稿者にIPメールアドレスなどは知らせる必要はないのでこれを削除したい。

ということで、メールの内容変更する。
 

functions.php へ記述

そこにIPアドレスが表示されたり、著者のURLや、コメントを書いた人のメールアドレスが表示される。

投稿者にIPメールアドレスなどは知らせる必要はないのでこれを削除したい。

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

function custom_comment_moderation_text( $notify_message, $comment_id ) {
 global $wpdb;
 $comment = get_comment($comment_id);
 $post = get_post($comment->comment_post_ID);
 $comment_author_domain = @gethostbyaddr($comment->comment_author_IP);
 $comments_waiting = $wpdb->get_var("SELECT count(comment_ID) FROM $wpdb->comments WHERE comment_approved = '0'");
 $blogname = wp_specialchars_decode(get_option('blogname'), ENT_QUOTES);
 $comment_content = wp_specialchars_decode( $comment->comment_content );
 switch ( $comment->comment_type ) {
  case 'trackback': // トラックバック
  $notify_message = "「{$post->post_title}」に新しいトラックバックがありました。\r\n";
  $notify_message .= get_permalink($comment->comment_post_ID) . "\r\n\r\n";
  $notify_message .= "\r\n";
  $notify_message .= "トラックバック元: {$comment->comment_author}\r\n";
  //$notify_message .= "IP: {$comment->comment_author_IP} ({$comment_author_domain})\r\n";
  //$notify_message .= "URL: {$comment->comment_author_url}\r\n";
  $notify_message .= "トラックバックの概要: \r\n";
  $notify_message .= "{$comment_content}\r\n";
  $notify_message .= "\r\n";
  break;
 case 'pingback': // ピンバック
  $notify_message = "「{$post->post_title}」に新しいピンバックがありました。\r\n";
  $notify_message .= get_permalink($comment->comment_post_ID) . "\r\n\r\n";
  $notify_message .= "\r\n";
  $notify_message .= "ピンバック元: {$comment->comment_author}\r\n";
  //$notify_message .= "IP: {$comment->comment_author_IP} ({$comment_author_domain})\r\n";
  //$notify_message .= "URL: {$comment->comment_author_url}\r\n";
  $notify_message .= "ピンバックの概要: \r\n";
  $notify_message .= "{$comment_content}\r\n";
  $notify_message .= "\r\n";
  break;
 default: // コメント
  $notify_message = "「{$post->post_title}」に新しいコメントがありました。\r\n";
  $notify_message .= get_permalink($comment->comment_post_ID) . "\r\n\r\n";
  $notify_message .= "\r\n";
  $notify_message .= "投稿者: {$comment->comment_author}\r\n";
  //$notify_message .= "IP: {$comment->comment_author_IP} ({$comment_author_domain})\r\n";
  //$notify_message .= "メールアドレス: {$comment->comment_author_email}\r\n";
  //$notify_message .= "URL: {$comment->comment_author_url}\r\n";
  $notify_message .= "コメント: \r\n";
  $notify_message .= "{$comment_content}\r\n";
  $notify_message .= "\r\n";
  break;
 }
 return $notify_message;
}
add_filter( 'comment_moderation_text', 'custom_comment_moderation_text', 10, 2 );
add_filter( 'comment_notification_text', 'custom_comment_moderation_text', 10, 2 );

これで、コメント承認通知メールと、コメントがつけられた時の通知メールの、内容を変更してIPアドレスなどを表示しないようにする。

しかし、実は、問題があり、
通知メールに「返信」した時には、コメントをくれた人のメールアドレスへの返信となってしまう

メールヘッダーに reply-to 要素に、コメントを書いた人のメールアドレスが入っているからだ。

これを変更するには下記関連記事の、メールに返信した時にコメントを書いた人のメールアドレスが出ないようにする を参照。

関連記事:
・コメント通知メールの差出人(wordpress@yourdomain.com)のメールアドレスを変更

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