管理メニューを必要ないとき隠す

Tweet

[`evernote` not found]

WordPress3.1からの新機能の管理メニューは便利ですが、出しっぱなしだと結構じゃまになってきます。
そこで必要無いときに隠したいなあと思い、色々作ってみました。

ページ上部にカーソルを持って行くと管理メニューを表示

add_action("wp_footer","hide_adminbar_js",1010);
add_action("admin_footer","hide_adminbar_js",1010);
function hide_adminbar_js(){
global $wp_admin_bar;

	?>
	<?php if (is_admin_bar_showing()&& is_object( $wp_admin_bar ) ):?>
	<div id="wpadminbar_hide" style="left:0;height:28px;position:fixed;width:100%;top:0"></div>
	<script type="text/javascript">
	jQuery(function(){
		jQuery("#wpadminbar_hide").mouseover(function(){
			jQuery("#wpadminbar").show();
			jQuery("#wpadminbar_hide").hide();
			jQuery('html').css("cssText","margin-top:28px !important;");	
		});
		jQuery("#wpadminbar").mouseout(function(){
			jQuery("#wpadminbar").hide();
			jQuery("#wpadminbar_hide").show();
			jQuery('html').css("cssText","margin-top:0 !important;");
		});
						
		jQuery("#wpadminbar").hide();
		jQuery('html').css("cssText","margin-top:0 !important;");
	});
	</script>
	<?php endif;?>
	<?php	
}

ダブルクリックで管理メニューの表示をオンオフ

add_action("wp_footer","hide_adminbar_js",1010);
add_action("admin_footer","hide_adminbar_js",1010);
function hide_adminbar_js(){
global $wp_admin_bar;

	?>
	<?php if (is_admin_bar_showing()&& is_object( $wp_admin_bar ) ):?>
	<div id="wpadminbar_hide" style="left:0;height:28px;position:fixed;width:100%;top:0"></div>
	<script type="text/javascript">
	jQuery(function(){		
		jQuery("html").dblclick(function(){
			jQuery("#wpadminbar").toggle();
			jQuery("#wpadminbar_hide").toggle();
			if(jQuery("#wpadminbar").css("display")=="none"){
				jQuery('html').css("cssText","margin-top:0 !important;");
			}else{
				jQuery('html').css("cssText","margin-top:28px !important;");
			}	
		});				
		jQuery("#wpadminbar").hide();
		jQuery('html').css("cssText","margin-top:0 !important;");
	});
	</script>
	<?php endif;?>
	<?php	
}

CTRLキーを押したときに管理メニューをオンオフ

add_action("wp_footer","hide_adminbar_js",1010);
add_action("admin_footer","hide_adminbar_js",1010);
function hide_adminbar_js(){
global $wp_admin_bar;

	?>
	<?php if (is_admin_bar_showing()&& is_object( $wp_admin_bar ) ):?>
	<div id="wpadminbar_hide" style="left:0;height:28px;position:fixed;width:100%;top:0"></div>
	<script type="text/javascript">
	jQuery(function(){		
		jQuery(window).keydown(function(e){
			if(e.keyCode == 17){
				jQuery("#wpadminbar").toggle();
				jQuery("#wpadminbar_hide").toggle();
				if(jQuery("#wpadminbar").css("display")=="none"){
					jQuery('html').css("cssText","margin-top:0 !important;");
				}else{
					jQuery('html').css("cssText","margin-top:28px !important;");
				}
			}
		});				
		jQuery("#wpadminbar").hide();
		jQuery('html').css("cssText","margin-top:0 !important;");
	});
	</script>
	<?php endif;?>
	<?php	
}

お好きなのをfunctions.phpに挿入してください。
どれも前提条件として
・wp_footerが記述されている（管理メニュー事態がwp_footer必要ですが）
・jQueryが事前に読み込まれている。
・管理メニュー機能をオンにしている。
というのがあります。