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

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段メニューデモページ