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');

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

What’s your Reaction?
+1
0
+1
0
+1
0
You May Also Like