「Word Press」カテゴリーアーカイブ

アドミンバーの右上の吹き出しっぽいJetpack wordpress.comからの通知(stats)を消す方法 WordPress BuddyPressカスタマイズメモ your stats are booming!とか getting lots of traffic

WordPress管理画面のアドミンバーの右上にでてくる all とか unreadとかの通知を非表示に

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

jetpackのakismet(つまりwordpress.com の API キー)で、複数サイトで同じアカウントを使いまわしていると、この通知で

Your stats are booming! [他のサイトの名前] is getting lots of traffic.
とか
Someone commented on [他のサイトの名前]とか表示されて嫌な感じになる。

functions.php への記述で非表示に

//アドミンバーの右上の吹き出しっぽいwordpress.comからの通知を消す
if (!current_user_can('administrator')) {
function admin_bar_remove_item( $wp_admin_bar ) {
 $wp_admin_bar->remove_menu('notes');
}
add_action( 'admin_bar_menu', 'admin_bar_remove_item', 1000 );
}

“管理者”も非表示にする場合は、一番上と一番下の

if (!current_user_can('administrator')) {

}

を削除すればいい。

この記事も読まれています

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

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

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を上書きする)

コメント通知メールのreply-toヘッダーに出る、著者の返信用メールアドレスを削除、Better Notifications for WordPressの設定の問題点を修正するため、管理画面で特定のページの時のみ、jsを上書きする BuddyPressカスタマイズメモ

WordPressのコメント通知メールに返信すると、コメントを書いた人のメールアドレスが表示されるのを防ぐ方法

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

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

その通知メールに、返信すると、コメントを書いた人のメールアドレスへの返信になってしまう。

投稿者同士のメールアドレスは知らせたくないのでこれを削除したい。
 

プラグインの Better Notifications for WordPress を使うことで実現できそうなのだが、プラグインにバグ(?)があり、それを修正しないと、適切に設定ができないので修正する方法を紹介。

バグは、誰に通知を送るのかを選ぶ時に、なぜか、権限ごとにしか選べない。例えば Author で選ぶと、投稿者全員に通知がいってしまう。

これを、著者のみへの通知とする。
 

functions.php へ記述

・Better Notifications for WordPressの設定の問題点を修正するため、管理画面で特定のページの時のみ、jsを上書きする

//Notificationsの選択肢のpost-author非表示を表示するよう上書きする。wp-plugin/bnfw/assets/js/bnfw.js

if ( 'post-new.php' == $pagenow ) { //現在の画面がNotificationsの時のみ
function yuya_bnfw_overwrite() {
?>
<script type="text/javascript">
jQuery(document).ready(function() {
$notification = document.getElementByName(notification).value;
if ( $notification === 'new-comment' ) {
 $( '#post-author' ).show(); //元々は非表示にされているが、これを上書きして表示させる
}});
</script>
<?php
}
add_action( 'admin_head-post.php', 'yuya_bnfw_overwrite', 20 );
}

これで、 Send to Author で、 Send this notification to the Author (著者にこの通知メールを送る)を選べるようになる。

Better Notifications for WordPress の設定

Notification For
New Comment (新しいコメント)

Additional Email Fields
チェックを入れて、返信メールアドレスや、送信者を入力する。

From Name and Email
差出人名、メールアドレス

Reply To
通知メールに「返信」した時の返信先

Send to Author
Send this notification to the Author(著者に通知を送る)チェック
Do not send this Notification to the User that triggered it(起点となった人には通知を送らない:つまり、「自分で自分の記事にコメントした場合」は通知を送らない)

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

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

この記事も読まれています

コメント通知メールの差出人(wordpress@yourdomain.com)のメールアドレスを変更 WordPress BuddyPressカスタマイズメモ

wordpressからの通知メールと通知内容を変更する方法

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

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

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

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

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

functions.php へ記述

//通知メールの差出人の名前を「管理人からのお知らせ」へ変更

function custom_mail_from_name( $from_name ) {
 return '管理人からのお知らせ';
}
add_filter( 'wp_mail_from_name', 'custom_mail_from_name' );

//通知メールのメアド変更

function custom_mail_from( $from_email ) {
 return 'no-reply@xxxxxxxx.com';
}
add_filter( 'wp_mail_from', 'custom_mail_from' );

//返信のメールアドレス変更

add_filter( 'bp_email_set_reply_to', function( $retval ) {
 return new BP_Email_Recipient( 'no-reply@xxxxxxx.com' );
} );

これで、コメント承認通知メールと、コメントがつけられた時の通知メールの、差出人が変更できる。

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

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

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

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

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

Sangoの著者ページ「author/…」でその著者の投稿が無いと、アバターが正しく表示されないバグ修正 WordPress BuddyPressカスタマイズメモ

サンゴのバグ修正、著者ページで投稿がないとアバターやプロフィールが表示されない

そのユーザー(著者)の投稿した記事があれば、記事一覧の上に、アバターの写真とユーザー名、プロフィールの詳細が表示されるが…

投稿した記事がない場合は、アバターもデフォルトのものになるし、プロフィールの詳細が表示されない…

 

修正するファイル

wp-content/themes/sango-theme/parts/archive に入っている

archive-header.php

がこれにあたる。

これを同じ階層で子テーマにコピペで突っ込む。
 

修正する箇所

元の4行目あたり

 <p class="author_page_img">
  <?php
   //著者画像
   $iconimg = get_avatar( get_the_author_meta( 'ID' ), 125 );
   if($iconimg) echo $iconimg;
  ?>
 </p>

 ↓↓↓

 <p class="author_page_img">
   <?php
   //著者画像
   $iconimg = get_avatar( get_the_author_meta('ID',$author) );
   if($iconimg) echo $iconimg;
  ?>
 </p>

get_avatar( get_the_author_meta( ‘ID’ ), 125 );

だと、その記事の著者になってしまうので、

$iconimg = get_avatar( get_the_author_meta(‘ID’,$author) );

として、そのURL author/userID の userID 部分の人のアバターを取得するように変更。

次にプロフィールの詳細の部分で、記事投稿がない場合には、別途プロフィールの詳細を表示させる。(投稿がある場合は、従来のSANGOのテンプレのものがそのまま表示される)

 <h1 class="dfont">
  <?php echo esc_attr(get_the_author_meta('display_name',$author)); ?> <?php fa_tag("check-circle","check-circle",false) ?>
 </h1>
 <?php else : //著者ページ以外?>
 <h1>
  <?php
   if( output_archive_title() ){

 ↓↓↓

 <h1 class="dfont">
  <?php echo esc_attr(get_the_author_meta('display_name',$author)); ?> <?php fa_tag("check-circle","check-circle",false) ?>
 </h1>
 <?php 
  if( !have_posts() ) { //投稿がない場合以下を実行
   echo '<div class="taxonomy-description entry-content">'.strip_tags(get_the_author_meta( 'description', get_the_author_meta('ID',$author) )).'</div>'; // プロフィールの詳細を表示
  }
 ?>
 <?php else : //著者ページ以外?>
  <h1>
   <?php
    if( output_archive_title() ){

これで、記事がなくてもプロフィールアバターとプロフィールの詳細が表示される。

管理画面のプロフィールで、Sangoの「肩書き」の部分を「出身地」などに変更し、管理画面のプロフィールでいらない部分を消す WordPress BuddyPressカスタマイズメモ

自分が、人の記事に書いたコメントだけをまとめて表示するページを作る

WordPressのSNSプラグイン、BuddyPressを導入しサンゴのテーマで運用する。

肩書き(入力するとプロフィールに表示)という欄があるのだが、これを出身地にしてみる。

地域コミュニティSNSなので。
 

functions.php へ記述

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

で紹介した通り、子テーマ → 親テーマ の順で functions.php が適用されるので、まずsangoによる追加項目を一旦削除してからの追加とすること。

//プロフィールの肩書の部分を出身地に変更

function yuya_add_profile($user_contactmethods)
{
 return array(
 'yourtitle' => '出身地',
 'twitter' => 'TwitterのURL',
 'facebook' => 'FacebookのURL',
 'instagram' => 'InstagramのURL',
 'feedly' => 'FeedlyのURL',
 'youtube' => 'YouTubeのURL',
 'line' => 'LINEのURL',
 );
}
add_filter('user_contactmethods', 'yuya_add_profile');

 

ついでに

管理画面のプロフィールでいらないものを消す方法

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

function user_profile_hide_style() {
  echo '<style>
  #your-profile .user-rich-editing-wrap, /* ビジュアルエディター */
  #your-profile .user-comment-shortcuts-wrap, /* キーボードショートカット */
  #your-profile .show-admin-bar, /* ツールバー */
  #your-profile .user-first-name-wrap, /* 名 */
  #your-profile .user-last-name-wrap, /* 姓 */
  //#your-profile .user-profile-picture, /* プロフィール写真 */
  #your-profile .user-sessions-wrap /* セッション */ {
    display: none;
  }
  </style>'.PHP_EOL;
}
add_action('admin_print_styles', 'user_profile_hide_style');

頭に「//」がついている場合は、コメントアウトされて非表示にならないので、上のコードで、例えば「コメント」も非表示にしたい場合は、
頭の

//#your-profile .user-profile-picture, /* プロフィール写真 */

の//を消しておく。

管理画面のプロフィールで、子テーマのfunctions.phpでsangoの親テーマによるfunctionsの追加項目を削除する WordPress BuddyPressカスタマイズメモ

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

WordPressの管理画面のプロフィールで、親テーマによって追加される項目を削除したい。

remove_filter('user_contactmethods', 'add_user_contactmethods');

でフィルターフックを削除できるのだが、

functions.phpに記述したものは、子テーマ → 親テーマ の順で適用される。

子テーマでいくら remove_filter しても、親テーマで上書き add_filter されてしまうので、効果がない。

親テーマの後に remove する必要がある。
 

functions.php へ記述

add_action( 'after_setup_theme', '' );

にフックすると、テーマの読み込み後(つまり、親テーマのfunctions.php後)に処理してくれる。

//管理画面のプロフィールのsangoの追加項目を一旦削除

function remove_sango_add_user_contactmethods()
{
 remove_filter('user_contactmethods', 'add_user_contactmethods');
}
add_action( 'after_setup_theme', 'remove_sango_add_user_contactmethods' );

これで、OK

ビジュアルエディターの文字修飾で新たなプルダウン(フォントサイズ)追加 WordPress BuddyPressカスタマイズメモ

ビジュアルエディターの文字修飾で新たなプルダウン(フォントサイズ)追加

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

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

入れ子をやめると文字修飾の数が少なくなってしまうので、フォントサイズだけ別で追加する。
 

functions.php へ記述

フォントサイズなど、一部のプルダウンメニューは、TinyMCEとは別に、追加する。
//新たなプルダウン追加(フォントサイズ)

if ( !function_exists( 'add_ilc_mce_buttons_to_bar' ) ):
function add_yuya_mce_buttons($buttons){
  array_push($buttons, 'backcolor', 'fontsizeselect', 'cleanup');
  return $buttons;
}
endif;
add_filter('mce_buttons', 'add_yuya_mce_buttons');
}

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

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

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

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

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

 

諸悪の根源、問題の箇所

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

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

add_filter('widget_text', 'do_shortcode' );
function sng_editor_setting($init) {
 //ビジュアルエディターの選択肢からh1見出しを削除(h1は記事本文では使用しない)
 $init['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Preformatted=pre';
 $style_formats = array(
 array(
 'title' => '画像のスタイル',
 'items' => array(
  array(
  'title' => '画像を小さく',
  'selector' => 'img',
  'classes' => 'img_so_small'
  ),...以下略

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

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

functions.php へ記述

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

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

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

if ( wp_is_mobile() ) { // スマホ(タッチパネルデバイスのタブレット含む)の時だけ
function yuya_style_init( $init ) {
	$style_formats_headlines = array(
      array(
        'title' => 'Q&Aの「Q」',
        'block' => 'p',
        'classes' => 'hh hhq',
      ),
      array(
        'title' => 'Q&Aの「A」',
        'block' => 'p',
        'classes' => 'hh hha',
      ),
      array(
        'title' => '見出し1:下線',
        'block' => 'p',
        'classes' => 'hh hh1',
      ),
      array(
        'title' => '見出し32:フラット塗りつぶし',
        'block' => 'p',
        'classes' => 'hh hh32',
      ),
      array(
        'title' => '見出し33:角丸ぬりつぶし',
        'block' => 'p',
        'classes' => 'hh hh33',
      ),
      array(
        'title' => '見出し34:肉球',
        'block' => 'p',
        'classes' => 'hh hh34',
      ),
      array(
        'title' => '見出し35:リボン(1行のみ)',
        'block' => 'p',
        'classes' => 'hh hh35',
      ),
      array(
        'title' => '見出し36:片側リボン(1行のみ)',
        'block' => 'p',
        'classes' => 'hh hh36',
      ),array(
        'title' => '1.黒の囲み線',
        'block' => 'div',
        'classes' => 'sng-box box1',
        'wrapper' => true,
      ),
      array(
        'title' => '2.グレイの囲み線',
        'block' => 'div',
        'classes' => 'sng-box box2',
        'wrapper' => true,
      ),
      array(
        'title' => '3.薄い水色の背景',
        'block' => 'div',
        'classes' => 'sng-box box3',
        'wrapper' => true,
      ),
      array(
        'title' => '4.薄い水色+上下線',
        'block' => 'div',
        'classes' => 'sng-box box4',
        'wrapper' => true,
      ),
      array(
        'title' => '5.二重線囲み',
        'block' => 'div',
        'classes' => 'sng-box box5',
        'wrapper' => true,
      ),
      array(
        'title' => '6.青の点線囲み',
        'block' => 'div',
        'classes' => 'sng-box box6',
        'wrapper' => true,
      ),
      array(
        'title' => '7.背景グレイ+両端二重線',
        'block' => 'div',
        'classes' => 'sng-box box7',
        'wrapper' => true,
      ),
      array(
        'title' => '8.橙色の背景+左線',
        'block' => 'div',
        'classes' => 'sng-box box8',
        'wrapper' => true,
      ),
      array(
        'title' => '9.赤の背景+上線',
        'block' => 'div',
        'classes' => 'sng-box box9',
        'wrapper' => true,
      ),
      array(
        'title' => '10.ミントカラー+上線',
        'block' => 'div',
        'classes' => 'sng-box box10',
        'wrapper' => true,
      ),array(
        'title' => '11.影+ネイビー上線',
        'block' => 'div',
        'classes' => 'sng-box box11',
        'wrapper' => true,
      ),
      array(
        'title' => '12.水色立体',
        'block' => 'div',
        'classes' => 'sng-box box12',
        'wrapper' => true,
      ),
      array(
        'title' => '13.青の立体',
        'block' => 'div',
        'classes' => 'sng-box box13',
        'wrapper' => true,
      ),
      array(
        'title' => '14.水色ステッチ',
        'block' => 'div',
        'classes' => 'sng-box box14',
        'wrapper' => true,
      ),
      array(
        'title' => '15.ピンクステッチ',
        'block' => 'div',
        'classes' => 'sng-box box15',
        'wrapper' => true,
      ),
      array(
        'title' => '16.水色ストライプ',
        'block' => 'div',
        'classes' => 'sng-box box16',
        'wrapper' => true,
      ),
      array(
        'title' => '17.シャープ型',
        'block' => 'div',
        'classes' => 'sng-box box17',
        'wrapper' => true,
      ),
      array(
        'title' => '18.左上と右下くるん',
        'block' => 'div',
        'classes' => 'sng-box box18',
        'wrapper' => true,
      ),
      array(
        'title' => '19.カギカッコ',
        'block' => 'div',
        'classes' => 'sng-box box19',
        'wrapper' => true,
      ),
      array(
        'title' => '20.両端ドット点線囲み',
        'block' => 'div',
        'classes' => 'sng-box box20',
        'wrapper' => true,
      ),
      array(
        'title' => '21.グラデーション',
        'block' => 'div',
        'classes' => 'sng-box box21',
        'wrapper' => true,
      ),
      array(
        'title' => '22.影付き+左に青線',
        'block' => 'div',
        'classes' => 'sng-box box22',
        'wrapper' => true,
      ),
      array(
        'title' => '23.丸い吹き出し',
        'block' => 'div',
        'classes' => 'sng-box box23',
        'wrapper' => true,
      ),
      array(
        'title' => '24.吹き出し水色',
        'block' => 'div',
        'classes' => 'sng-box box24',
        'wrapper' => true,
      ),
      array(
        'title' => '25.右上に折り目',
        'block' => 'div',
        'classes' => 'sng-box box25',
        'wrapper' => true,
      )
    );
 $init['style_formats'] = json_encode($style_formats_headlines);
 return $init;
}
add_filter( 'tiny_mce_before_init', 'yuya_style_init', 30 );

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

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

何を残すかは、

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

function sng_editor_setting($init) {
...以下略

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