「バグ」タグアーカイブ

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) {
...以下略

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

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