イインターネット

WordPressのログイン時のアドミンバーと要素が重なるのを避ける方法

これは全く個人的なメモですが、先の記事でヘッダーに虫眼鏡アイコンを置きましたが、

https://samjc.jp/archives/2447

positon:absolueを使っているため、ログインしている状態だと虫眼鏡がアドミンバーにめり込んで表示されてしまいます。

自分のためだけなのですが、ログインしている状態でも適切な位置に虫眼鏡が表示されるためには、フックを使ってfunctions.phpに以下を追記しました。

function custom_header_style() {
    if (is_user_logged_in()) {
        echo '<style type="text/css">';
        echo '.search-icon {';
        echo '    margin-top: 32px;';
        echo '}';
        echo '@media screen and (max-width: 782px) {';
        echo '    .search-icon {';
        echo '        margin-top: 46px;';
        echo '    }';
        echo '}';
        echo '</style>';
    }
}
add_action('wp_head', 'custom_header_style');

これでスッキリしました〜。

WordPressのツールバー（アドミンバー）を非表示にしたりカスタマイズする方法
What’s your Reaction?
+1
0
+1
0
+1
0

WordPressのカスタマイズを楽しみながら試行錯誤しています。

— Previous article

WordPressテーマCocoonのヘッダーに検索窓を設置するカスタマイズ

Next article —

占い信じていない人ですが、エンターテイメントとしてならありかもと思い直しました。

You May Also Like