サポート » 使い方全般 » 管理バーを非表示にするボタンを作成したい

  • 解決済 deffdeff

    (@deffdeff)


    QueryMonitorなどを使っていると管理バーは必須だと思います。
    しかし管理バーがあると見た目が崩れるのが難点です。
    そこで、クリック一つで削除できるボタンがあればと思いました。
    作ってみたものの、jQueryが動きません。
    以下修正点教えて頂けませんでしょうか。
    宜しくお願い致します。

    
    //管理ツールバーにメニュー追加
    add_action('admin_bar_menu', 'my_admin_bar_menu', 9999);
    function my_admin_bar_menu($wp_admin_bar){
    	
      // バ-削除ボタンを追加
      $title = sprintf(
          '<button type="button" id="unset_wpadminbar">%s</button>',
          '削除'
      );
      $wp_admin_bar->add_menu(array(
          'id'    => 'unset', // li#wp-admin-bar-unset > div > button#unset_wpadminbar のようになる
          'meta'  => array(),
          'title' => $title
      ));
    }
    
    // バ-削除のjQueryを出力
    add_action( 'admin_head', 'my_admin_head' );
    function my_admin_head() {
      if (is_user_logged_in() ){
    print<<<EOF
      <script type="text/javascript">
      jQuery(function($) {
        jQuery('#unset_wpadminbar').click(function(){
    				
          // そもそもこのアラートも出ないからjQuerが効いてない
          alert('「削除」がクリックされました');
    				
          // バーを削除 → jQeuryさえ効けば下記で問題なし
          jQuery('#wpadminbar').remove();
    				
          // 上の空白を削除 → jQeuryさえ効けば下記でできるが、他のstyleまで消えてしまうので避けたい
          jQuery('html').attr('style','margin-top:0 !important');	
    				
          // 上の空白を削除 → 下記で margin-top のみ削除したいが、これはjQeuryが効いてもできない
          jQuery('html').css( {'margin-top' : '0 !important' } );	
    				
        });
       });
      </script>
    EOF;
        }
    }
    
    
5件の返信を表示中 - 1 - 5件目 (全5件中)
  • こんにちは

    admin_head アクションフックはフロントページではフックされません。
    wp_enqueue_scripts アクションフックを使用するのはどうでしょうか?

    function enqueue_admin_bar_scripts() {
    	$script = <<<SCRIPT
    jQuery(function($) {
    
    (省略)
    
    });
    SCRIPT;
    
    	wp_add_inline_script( 'admin-bar', $script, 'before' );
    }
    
    add_action( 'wp_enqueue_scripts', 'enqueue_admin_bar_scripts' );
    //add_action( 'admin_enqueue_scripts', 'enqueue_admin_bar_scripts' );
    トピック投稿者 deffdeff

    (@deffdeff)

    こんばんは、お世話になります。
    フックに相当お詳しくないとわかりませんねこれは。
    ありがとうございます。jQeuryは動作しました。

    あとはmargin-topの上書きですが、何か良い知恵ございませんでしょうか?

    jQuery('html').attr('style','margin-top:0 !important');
    ではhtmlのsyleがすべてなくなってしまいますし

    jQuery('html').css( {'margin-top' : '0 !important' } );
    ではなぜか上書きできずバーの空白は残ったままでして。

    夜分に質問申し訳ございません。

    トピック投稿者 deffdeff

    (@deffdeff)

    こうとかでしょうか?どうもすっきりさせられずお恥ずかしい限りです。

    
        jQuery('#unset_wpadminbar').click(function(){
    				
          // バーを削除
          jQuery('#wpadminbar').remove();
    				
          // 上の空白を削除
          var style_current = jQuery('html').attr('style');
          var style_new = style_current + 'margin-top:0 !important;';
          jQuery('html').attr('style',style_new);	
    
        });
    

    jQuery(‘html’).css( {‘margin-top’ : ‘0 !important’ } );

    jQuery の css() では !important は無視されるようです。
    !important を使用するには、cssText で書式を記述しないといけないようです。また、cssText では上書きされてしまうので、工夫する必要があります。

    var sourceStyle = jQuery('html').attr('style');
    jQuery('html').css({'cssText': sourceStyle + 'margin-top: 0 !important;'});

    参考ページ: jQueryでCSSの!important指定を行う – Qiita

    • この返信は2年、 3ヶ月前にishitakaが編集しました。
    トピック投稿者 deffdeff

    (@deffdeff)

    cssTextですか。ありがとうございます。良い勉強をさせて頂きました。リンクまでありがとうございました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「管理バーを非表示にするボタンを作成したい」には新たに返信することはできません。