サポート » 使い方全般 » モバイル版の管理バーをカスタムしたい

  • 解決済 deffdeff

    (@deffdeff)


    「管理バーを削除する」という機能のボタンを作りました。
    HTMLだけだとこちらです。

    しかしこちら、モバイル版の管理画面に出力できません。
    できる案ございませんでしょうか。

    位置は最上位階層である、「筆マーク」や「プラスマーク」の横並びだと最高にいいです。
    (QueryMonitorを使うとこの並びに「QMマーク」が表示されるので、可能ではありそうに思うのですが。)

    // ボタンを出力
    add_action('admin_bar_menu', 'my_admin_bar_menu', 9999);
    function my_admin_bar_menu($wp_admin_bar){
    	
    	// 管理画面以外
    	if( !is_admin() ){
    		
    		// バー削除ボタン
    		$wp_admin_bar->add_menu( array(
    			'id'    => 'unset', // li#wp-admin-bar-unset > div > button
    			'meta'  => [],
    			'title' => '<button type="button" id="unset_wpadminbar">削除</button>'
    		));
    	}
    
    }
    
    

    尚、jQueryの機能の方はこちらになります。

    
    // バ-削除のjQueryを出力
    add_action( 'wp_enqueue_scripts', 'my_admin_bar_menu_scripts' );
    function my_admin_bar_menu_scripts() {
    	if( is_admin() ) return;
    	
    	$script = <<<SCRIPT
    jQuery(function($) {
    
    	jQuery('#unset_wpadminbar').click(function(){
    
    		// バーを削除
    		jQuery('#wpadminbar').remove();
    		
    		// 上の空白を削除
    		// jQuery('html').css( {'margin-top' : '0 !important' } ); // これでは上書きできないので次のように
    		var style_current = jQuery('html').attr('style');
    		var style_new = style_current + 'margin-top:0 !important;';
    		jQuery('html').attr('style',style_new);	
    		
    	});
    	
    });
    SCRIPT;
    
    	wp_add_inline_script( 'admin-bar', $script, 'before' );
    }
    
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

    CSS で非表示(display:none)にしているようなので、CSS で表示するように上書きすればいいかと思います。

    @media screen and (max-width: 782px) {
      #wp-admin-bar-unset {
        display: block !important;
      }
    }
    トピック投稿者 deffdeff

    (@deffdeff)

    いつもお世話になっております。CSSだったとは驚きです。どうもありがとうございます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「モバイル版の管理バーをカスタムしたい」には新たに返信することはできません。