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

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

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

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

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

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

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

WordPressのコメントページ上の、コメントメニュー(スパム、承認待ち等)を非表示に BuddyPressカスタマイズメモ

コメントページ上の、コメントメニュー(スパム、承認待ち等)を非表示にする方法

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

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

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

で追加した、自分が「人の記事に対して」書いたコメント一覧を表示するページの上のメニューをシンプルにする。

functions.php へ記述

下記の例では、trash(ゴミ箱)、spam(スパム)、approved(承認済み)、moderated(承認待ち)、mine(自分)、all(全て)のうち、ゴミ箱と、全て、以外はコメントアウト「//」して削除している

//「あなたのコメント」の上のメニュー削除

if ( current_user_can( 'author' ) && ($pagenow == 'edit-comments-mine.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-mine.php?comment_status=trash') ),
  __( 'ゴミ箱' )
);
$status_links['spam'] = sprintf(
//  "<a href=%s>%s <span class='count'></span></a>",
//  esc_url( admin_url( 'edit-comments-mine.php?comment_status=spam') ),
//  __( 'スパム' )
);
$status_links['approved'] = sprintf(
//  "<a href=%s>%s <span class='count'></span></a>",
//  esc_url( admin_url( 'edit-comments-mine.php?comment_status=approved') ),
//  __( '承認済み' )
);
$status_links['moderated'] = sprintf(
//  "<a href=%s>%s <span class='count'></span></a>",
//  esc_url( admin_url( 'edit-comments-mine.php?comment_status=moderated') ),
//  __( '承認待ち' )
);
$status_links['mine'] = sprintf(
//  "<a href=%s>%s <span class='count'></span></a>",
//  esc_url( admin_url( 'edit-comments-mine.php?comment_status=mine') ),
//  __( '自分' )
);
$status_links['all'] = sprintf(
  "<a href=%s>%s <span class='count'></span></a>",
  esc_url( admin_url( 'edit-comments-mine.php?comment_status=all') ),
  __( 'All' )
);
return $status_links; 
} );
}

ついでに、一括操作、スパムとしてマーク、などのメニュー(バルクメニュー)か下記で非表示にできる。

その方法はこちらで紹介。

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

WordPressメニューの変更、非表示、IDの調べ方「投稿」→「記事」、「コメント」→「あなたの記事へのコメント」へ、メニューの文言変更 WordPress BuddyPressカスタマイズメモ

WordPressのメニューの文言を変更する方法

WordPressのSNSプラグイン、BuddyPressを導入してSNSを構築する場合、「コメント」だけだと自分が書いたコメントなのか、人が自分に対して書いたコメントなのかが分からないのでメニューを変更したい。

今回は、「投稿」→「記事」へ変更。
「コメント」→「あなたの記事へのコメント」に変更する。

 

functions.php へ記述

管理画面のメニューの文言を変更。
ちなみに順番を入れ替えたり、サブメニューの文言を変更したりもできる。

//投稿→記事、コメント→あなたの記事へのコメント

function change_post_label() {
global $menu;
global $submenu;
$menu[5][0] = '記事';
$menu[25][0] = 'あなたの記事へのコメント';
}
add_action( 'admin_menu', 'change_post_label' );
global $sabmenu;

サブメニューを変更しないのであれば、この1行は別になくてもいい。
 

メニューID一覧とサブメニューのID一覧を紹介

メニューとサブメニューのID(key/キー)一覧

$menu[2] // ダッシュボード
  $submenu['index.php'][0] //ホーム
  $submenu['index.php'][10] //更新
$menu[4] // セパレーター(区切り線)
$menu[5]  // 投稿
  $submenu['edit.php'][5] //投稿一覧
  $submenu['edit.php'][10] //新規投稿
  $submenu['edit.php'][15] //カテゴリー
  $submenu['edit.php'][16] //タグ
$menu[10] // メディア
  $submenu['upload.php'][5] //タグ
  $submenu['upload.php'][10] //新規追加
$menu[15] // リンク
  $submenu['link-manager.php'][5] //リンク一覧
  $submenu['link-manager.php'][10] //新規追加
  $submenu['link-manager.php'][15] //リンクカテゴリー
$menu[20] // 固定ページ
  $submenu['edit.php?post_type=page'][5] //固定ページ一覧
  $submenu['edit.php?post_type=page'][10] //新規追加
$menu[25] // コメント
  $submenu['edit-comments.php'][0] //すべてのコメント
$menu[26] // お問い合わせ
$menu[59] // セパレーター(区切り線)
$menu[60] // 外観
  $submenu['themes.php'][5] //テーマ
  $submenu['themes.php'][7] //ウィジェット
  $submenu['themes.php'][10] //メニュー
$menu[65] // プラグイン
  $submenu['plugins.php'][5] //インストール済みプラグイン
  $submenu['plugins.php'][10] //新規追加
  $submenu['plugins.php'][15] //プラグインエディター
$menu[70] // プロフィール
  $submenu['users.php'][5] //ユーザー一覧
  $submenu['users.php'][10] //新規追加
  $submenu['users.php'][15] //あなたのプロフィール
$menu[75] // ツール
  $submenu['tools.php'][5] //利用可能なツール
  $submenu['tools.php'][10] //インポート
  $submenu['tools.php'][15] //エクスポート
$menu[80] // 設定
  $submenu['options-general.php'][10] //一般
  $submenu['options-general.php'][15] //投稿設定
  $submenu['options-general.php'][20] //表示設定
  $submenu['options-general.php'][25] //ディスカッション
  $submenu['options-general.php'][30] //メディア
  $submenu['options-general.php'][35] //プライバシー
  $submenu['options-general.php'][40] //パーマリンク設定
$menu[99] // セパレーター(区切り線)

 

プラグインなどで勝手に追加されるメニューのIDを調べる方法

functions.phpへ

function check_post_label_id() {
    global $menu;
    global $submenu;

    var_dump($menu);
    var_dump($submenu);
}
add_action( 'admin_menu', 'check_post_label_id' );

これを書いて、ページ(ソース)を見ると

array(数字) {[0]->string(数字)"メニューの単語"[1]=>string(数字)"スラッグ"......}

って感じの文字の羅列が見えるので、

“メニューの単語” の前にある array(数字)数字が”メニューの単語”のIDになっている。

WordPress BuddyPressカスタマイズメモ 管理画面のサブメニューの非表示。管理者以外

管理者以外は、プラグイン、ユーザーなどのサブメニューを非表示にする

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

管理者以外の、編集者や投稿者には、非表示にしておきたいメニューがある。

管理画面の一部のメニューを非表示にするで、メニューごと非表示にする方法は商会した。

今回はサブメニューだけを非表示にする方法。

functions.php へ記述

//管理画面のサブメニューの非表示(管理者以外)

if (!current_user_can('administrator')) {
function remove_submenus() {
// remove_submenu_page('index.php', 'index.php'); // ダッシュボード -> ホーム
// remove_submenu_page('index.php', 'update-core.php'); // ダッシュボード -> 更新
// remove_submenu_page('edit.php', 'edit.php'); // 投稿 -> 投稿一覧
// remove_submenu_page('edit.php', 'post-new.php'); // 投稿 -> 新規追加
// remove_submenu_page('edit.php', 'edit-tags.php?taxonomy=category'); // 投稿 -> カテゴリ
// remove_submenu_page('edit.php', 'edit-tags.php?taxonomy=post_tag'); // 投稿 -> タグ
// remove_submenu_page('upload.php', 'upload.php'); // メディア -> ライブラリ
// remove_submenu_page('upload.php', 'media-new.php'); // メディア -> 新規追加
// remove_submenu_page('link-manager.php', 'link-manager.php'); // リンク -> すべてのリンク
// remove_submenu_page('link-manager.php', 'link-add.php'); // リンク -> 新規追加
// remove_submenu_page('link-manager.php', 'edit-tags.php?taxonomy=link_category'); // リンク -> リンクカテゴリー
// remove_submenu_page('edit.php?post_type=page', 'edit.php?post_type=page'); // 固定ページ -> 固定ページ一覧
// remove_submenu_page('edit.php?post_type=page', 'post-new.php?post_type=page'); // 固定ページ -> 新規追加
// remove_submenu_page('themes.php', 'themes.php'); // 外観 -> テーマ
// remove_submenu_page('themes.php', 'widgets.php'); // 外観 -> ウィジェット
// remove_submenu_page('themes.php', 'theme-editor.php'); // 外観 -> テーマ編集
// remove_submenu_page('plugins.php', 'plugins.php'); // プラグイン -> インストール済みプラグイン
// remove_submenu_page('plugins.php', 'plugin-install.php'); // プラグイン -> 新規追加
// remove_submenu_page('plugins.php', 'plugin-editor.php'); // プラグイン -> プラグイン編集
// remove_submenu_page('users.php', 'users.php'); // ユーザー -> ユーザー一覧
// remove_submenu_page('users.php', 'user-new.php'); // ユーザー -> 新規追加
// remove_submenu_page('users.php', 'profile.php'); // ユーザー -> プロフィール
// remove_submenu_page('tools.php', 'tools.php'); // ツール -> 利用可能なツール
// remove_submenu_page('tools.php', 'import.php'); // ツール -> インポート
// remove_submenu_page('tools.php', 'export.php'); // ツール -> エクスポート
// remove_submenu_page('options-general.php', 'options-general.php'); // 設定 -> 一般
// remove_submenu_page('options-general.php', 'options-writing.php'); // 設定 -> 投稿設定
// remove_submenu_page('options-general.php', 'options-reading.php'); // 設定 -> 表示設定
// remove_submenu_page('options-general.php', 'options-discussion.php'); // 設定 -> ディスカッション
// remove_submenu_page('options-general.php', 'options-media.php'); // 設定 -> メディア
// remove_submenu_page('options-general.php', 'options-privacy.php'); // 設定 -> プライバシー
// remove_submenu_page('options-general.php', 'options-permalink.php'); // 設定 -> パーマリンク設定
}
add_action('admin_menu', 'remove_submenus', 102);
}

「//」を頭につけると、コメントアウトなので、メニューからは削除されない。

上の例でいくと、「ユーザー一覧」を非表示にしたいなら、

// remove_submenu_page('users.php', 'users.php'); // ユーザー -> ユーザー一覧

  ↓

 remove_submenu_page('users.php', 'users.php'); // ユーザー -> ユーザー一覧

と、頭の//を削除すればいい。

“管理者”でもメニューを削除したい場合は、一番上と一番下の

if (!current_user_can('administrator')) {

}

を削除すればいい。

 

メニューを非表示にしている場合は、サブメニューも強制非表示

例えば、メニューの「ユーザー」を

remove_menu_page('users.php');

で非表示にしている場合は、

remove_submenu_page('users.php', 'users.php');
remove_submenu_page('users.php', 'user-new.php');
remove_submenu_page('users.php', 'profile.php');

と書いていなくても、

「ユーザー」のサブメニューである
ユーザー -> ユーザー一覧
ユーザー -> 新規追加
ユーザー -> プロフィール

の3個は強制的に非表示になる。

プラグインなどで勝手に追加されるメニューのIDを調べる方法

functions.phpへ

function check_post_label_id() {
    global $menu;
    global $submenu;

    var_dump($menu);
    var_dump($submenu);
}
add_action( 'admin_menu', 'check_post_label_id' );

これを書いて、ページ(ソース)を見ると

array(数字) {[0]->string(数字)"メニューの単語"[1]=>string(数字)"スラッグ"......}

って感じの文字の羅列が見えるので、

“メニューの単語” の前にある array(数字)数字が”メニューの単語”のIDになっている。

WordPress BuddyPressカスタマイズメモ 管理画面の一部のメニューを非表示にする。管理者以外

管理者以外は、プラグイン、ユーザーなどのメニューを非表示にする

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

管理者以外の、編集者や投稿者には、非表示にしておきたいメニューがある。

ついでに、プラグインで追加されるメニューも、非表示にしたい。

functions.php へ記述

//管理画面の左のメニュー非表示

if (!current_user_can('administrator')) {
function remove_menus() {
  remove_menu_page('index.php'); // ダッシュボード
  remove_menu_page('separator1'); // セパレータ1
// remove_menu_page('edit.php'); // 投稿
// remove_menu_page('upload.php'); // メディア
  remove_menu_page('link-manager.php'); // リンク
// remove_menu_page('edit.php?post_type=page'); // 固定ページ
// remove_menu_page('edit-comments.php'); // コメント
  remove_menu_page('separator2'); // セパレータ2
  remove_menu_page('themes.php'); // 外観
  remove_menu_page('plugins.php'); // プラグイン
// remove_menu_page('users.php'); // ユーザー
  remove_menu_page('tools.php'); // ツール
  remove_menu_page('wpcf7');//plug-in contact form7
// remove_menu_page('options-general.php'); // 設定
// remove_menu_page('profile.php'); // プロフィール(管理者以外のユーザー用)
}
add_action('admin_menu', 'remove_menus');
}

「//」を頭につけると、コメントアウトなので、メニューからは削除されない。

上の例でいくと、例えば、「ユーザー」も非表示にしたいなら、

// remove_menu_page('users.php'); // ユーザー

  ↓

 remove_menu_page('users.php'); // ユーザー

と、頭の//を削除すればいい。

 

プラグインで追加されたメニューを非表示にする方法

プラグインで追加されたメニューを削除するための引数(例えば、wpcf7 みたいな)を確認したいのであれば、

管理バーに追加されたメニューの場合は

global $wp_admin_bar;

の直後に

var_dump( $wp_admin_bar );

と記入したら見えるので、確認できる。

サイドに追加されたメニューの場合は

プラグインなどで勝手に追加されるメニューのIDを調べる方法

functions.phpへ

function check_post_label_id() {
    global $wp_admin_bar;

    var_dump($wp_admin_bar;);
}
add_action( 'admin_menu', 'check_post_label_id' );

これを書いて、ページ(ソース)を見ると

array(数字) {[0]->string(数字)"メニューの単語"[1]=>string(数字)"スラッグ"......}

って感じの文字の羅列が見えるので、

“メニューの単語” の前にある array(数字)数字が”メニューの単語”のIDになっている。

引数が分かれば、

remove_menu_page('調べた引数');

で非表示にできる。

スクロールしたら途中から出てきて、スクロール戻すと消えるメニューを作る方法

画面をスクロールしたらふわっと出てくるメニューを作る

 

スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

メニューと書いたが、メニューだけでなく、単純に画像を浮かび上がらせたりページの下までスクロールした時に「ページトップへ戻る」のリンクを出したりもできる。

 
 

用意するもの

sudden.js
sudden.css

sudden.js の中身

$(function() {
var navBox = $(“#menu”);
navBox.hide();
var TargetPos = 100;
$(window).scroll( function() {
var ScrollPos = $(window).scrollTop();
if( ScrollPos > TargetPos ) {
navBox.fadeIn();
}
else {
navBox.fadeOut();
}
});
});

 

sudden.css の中身

#menu {
z-index: 1000000;
width: 100%;
position: fixed;
display: none; /*最初は非表示に設定*/
top: 20px;
right: 0;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

絶対に必要なのが display:none; これで非表示にしておく必要がある。

それ以外は、場所や透過度、重なり順の設定などなので変更可。

 
 

HTMLの<head>と</head>の間で読み込む

<link rel=”stylesheet” type=”text/css” href=”css/sudden.css” /><!– menu途中で出てくる –>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><!– menu途中で出てくる –>
<script type=”text/javascript” src=”js/sudden.js”></script><!– menu途中で出てくる –>

先ほどの、sudden.csssudden.jsjqueryを読み込む。

順番に注意。
 
 

フワッと表示させるHTMLのメニューの部分

<div id=”menu”>
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>
</div>

画像は準備すること。

div=”menu” の間の部分が全て最初見えず、スクロールでふわっと表示される。
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>

この部分は任意の内容に変更可能。

 
 

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

sudden.zip

 
スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

メニュー画像オンマウスで、2段目が横並びになるメニューの作り方

CSS1個とjsファイル2個で作る簡単2段メニュー

 

2段メニューデモページ

 

色々な応用ができるが、今回は、1段目のメニューは画像、1段目にオンマウスで2段目がニョロリと表れて、文字でリンクが入れれるような形。

 
 

必要なもの

まとめてダウンロードしよう → accordionmenu.zip からダウンロード。

中身:

accordion.css ← 背景色や1段目のメニューの横幅を変える時に編集する
accordion.js
jquery.min.js
・index.html ← 必要ソースは後述
・メニュー画像数個

 

上記個別ファイルは、ファイル名を変えて .txt にしているので、こちらから右クリックでダウンロード保存した場合などは、ファイル名や拡張子を .js.css なども含めて上記の状態に戻すこと。

 
 

HTMLソースコード

 
まずは <head> ….. </head> の間で CSS と js ファイルを読み込む。

<link rel=”stylesheet” type=”text/css” href=”css/accordion.css” /><!– accordionmenu –>
<script type=”text/javascript” src=”js/jquery.min.js” ></script><!– accordionmenu –>
<script type=”text/javascript” src=”js/accordion.js”></script><!– accordionmenu –>

 
 

メニューを作りたい場所で、HTMLソースを書く。
2段メニューの文字やリンク先はここに記述。

メニュー画像の横幅や背景色を変えたい時は、 accordion.css を編集。

<div id=”gnav”>
<ul>
<li><a href=”index.html” class=”n01″><span>ホーム</span></a>
<div class=”gnavList”>
<ul>
<li><a href=”リンク先1.html”>2段メニュー1</a></li>
<li><a href=”リンク先2.html”>2段メニュー2</a></li>
</ul>
</div><!– gnavList –>
</li><!– ホーム –>
~~~~~~
以下同じ形でメニューが続いて
~~~~~~
</ul>
</div><!– gnav end –>

 
 

accordion.js、jquery.min.js、accordion.cssの3つと、メニュー画像、HTMLをサーバーにアップロード

FTPソフトを使って、ホームページ上にアップロードする。

 index.html
 jsフォルダ
  accordion.js
  jquery.min.js
 cssフォルダ
  accordion.css
 imgフォルダ
  メニュー画像など

パーミッションなどは関係ないので、644などでOK。

 

2段メニューデモページ

 

Twenty Twelveのスマホメニューが開かない場合の対処法

WordPressのスマホレイアウトでメニューボタンが動かない!

ある特定の条件下で、Wordpressのテーマ、Twentytwelveのスマホ用メニューが開かない場合がある。
twentytwelve-menu1
この修正方法を紹介。
 

 

条件1 Twentytwelveを使っている。

WordPressのテーマ(テンプレート)にtwentytwelveを使っている時にこれは発生する。TwentyelevenやTwenty thirteen fourteen fifteen…などでは起こらない(今後ずっとおこらないかどうかは不明)

条件2 子テーマを使用していて、header.phpをカスタマイズしている

親テーマのheader.phpがアップデートで変更になった。具体的には端末判定によるスマホ対応ではなく、レスポンシブデザインによるスマホ対応になった。

レスポンシブってなに?って場合はこちらのレスポンシブデザインでtableタグを制御をチェック。

この2つの条件が当てはまる場合に、Twentytwelveのスマホメニューが動かなくなる。
 

 

解決法 子テーマのheader.phpを修正

 
Wordpressの管理画面にログインし「外観」→「テーマ編集」

右上の「編集するテーマを選択:」の箇所がTwentytwelveの子テーマになっている事を確認して、「header.php」を編集する。

メニューの部分が

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></h3>
<a class=”assistive-text” href=”#content” title=”<?php esc_attr_e( ‘Skip to content’, ‘twentytwelve’ ); ?>”><?php _e( ‘Skip to content’, ‘twentytwelve’ ); ?></a>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>
</nav><!– #site-navigation –>

となっている箇所があるはずなので、その中の

<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></h3>

を、↓↓↓ に変更するだけ。

<button class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></button>

これでメニューが動くようになったはずだ。

なお、カスタマイズは自己責任で。心配ならバックアップを取っておこう。