実際のサイトを見てみないとわかりません。サイトの URL またはテーマ名をご提示されると回答を得やすいと思います。
CG 様
早速、ご回答ありがとうございます。
おそらく、ヘッダーを固定しているために起きている現象だと思いますが、
adminbarの要素を調べると下記のようなスタイルが出てきますが、
テーマのスタイルでなく、wordpressoのファイルを変更するという意味でしょうか？
load-styles.php:4というファイルが表示されていますが、
そのファイルがどこにあるのかわかりません。
（昨日調べた時とファイル名が違ってます）
#wpadminbar {
direction: ltr;
color: #ccc;
font-size: 13px;
font-weight: 400;
font-family: -apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,”Helvetica Neue”,sans-serif;
line-height: 32px;
height: 32px;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 600px;
z-index: 99999;
background: #23282d;
}
ishitaka様
ご回答ありがとうございます。
非公開のサイトなのですが、ログインした状態のプレビュー画面でのみ
そのような表示になります。
ログアウトした状態では、問題なく表示されます。
CG
(@du-bist-der-lenz)
ヘッダーを固定していれば、問題箇所は確かでしょうね。ログアウト状態ではアドミンバーは表示されませんよね。ログインユーザーに対して、アドミンバー分ヘッダーを下げるであるとかしましょう。特殊な固定ヘッダーをもつテーマの場合、わたしは折りたたみのアドミンバーにしています。
基本的には、管理バーに重ならないように下記のような CSS が出力されます。ただし、テーマによっては出力されなかったり、内容が異なる場合があります。
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
テーマは何をお使いですか？
CG 様
ご回答ありがとうございます。
隠れてしまう分、ヘッダーを下げると表示は正常になりますが、ログアウトしたら、ヘッダー上部に余白が空いてしまいます。特殊な固定ヘッダーなのかもしれません。
ishitaka様
ご回答ありがとうございます。
下記のコードをスタイルに書き込んでもなぜか反映されませんでした。
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
使っているテーマは、Firstになります。
これに手を加えています。
http://demo.themehaus.net/first-ja/
CG
(@du-bist-der-lenz)
ログインユーザーに対して、アドミンバーは表示されるのですよね。
下記コードをテーマの functions.php に追記してみてください。
margin-top の値（32px, 46px）を調整してください。
function my_admin_bar_bump_cb() {
?>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
</style>
<?php
}
function my_admin_bar_init() {
// remove_action( 'wp_head', '_admin_bar_bump_cb' );
add_action( 'wp_head', 'my_admin_bar_bump_cb' );
}
add_action( 'admin_bar_init', 'my_admin_bar_init' );
CG 様
ログインユーザーに対して、アドミンバーは表示されています。
その状態で、ヘッダーに被ってしまいます。
ishitaka 様
親切にコードをお書きくださり、ありがとうございます。
お知らせいただいたコードをfunctionに書いたのですが、あいにく「サイトに技術的な問題が発生しています。」になってしまいました。
なおfunction.phpに記述したスクロール時のヘッダーの固定の記述は、下記のようなものです。
参考になるかわかりませんが。
/* スクロール時のヘッダーclass名を制御 */
function my_wp_footer(){
?>
<script>
jQuery(function() {
var header = jQuery(‘#masthead’);
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 0) {
header.addClass(‘header-extra-css’);
} else {
header.removeClass(‘header-extra-css’);
}
});
});
/* スクロール時のヘッダーのロゴ縮小*/
(function($){
$(function(){
$(window).scroll(function(){
var scr = $(window).scrollTop();
if(scr > 1){
$(‘#logo’).addClass(‘mini’);
}else{
$(‘#logo’).removeClass(‘mini’);
}
})
})
})(jQuery);
</script>
<?php
}
add_action(‘wp_footer’, ‘my_wp_footer’);
お知らせいただいたコードをfunctionに書いたのですが、あいにく「サイトに技術的な問題が発生しています。」になってしまいました。
提示したコードに関してはエラーはないと思います。
エラーメッセージを提示してもらえませんか？
ヘッダーの固定に
.header-extra-css {
position: fixed;
top: 0px;
}
のようなCSSが当たっていませんか？
この場合
.header-extra-css { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
.header-extra-css { margin-top: 46px !important; }
}
を追記してやれば、ヘッダーが下がりますがログアウトすると上部に余白が出来てしまいます。
管理バーが表示されている時は、body 要素に admin-bar という class が付きますので、これを利用して
.admin-bar .header-extra-css { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
.admin-bar .header-extra-css { margin-top: 46px !important; }
}
にすれば、管理バーが表示されている（ログインしている）時だけ、ヘッダーを下げることができます。
Toshiyuki Honda様
親切なご回答ありがとうございます。
該当のヘッダーのスタイルは、「site-header」という箇所で、
admin-barのスタイルは、要素を調べたら「#wpadminbar」でした。
そのため、下記のように変更したいのですが、ログイン画面では正常に表示されるのですが、
ログアウト画面では、上部に32pxの余白が出てしまいました。
.site-header {
position: fixed;
top: 0px;
.header-extra-css → .site-header
.admin-bar → #wpadminbar
.site-header { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
.site-header { margin-top: 46px !important; }
}
#wpadminbar { margin-top: 32px !important; }
.site-header { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
#wpadminbar{ margin-top:32px !important; }
.site-header { margin-top: 46px !important; }
}
管理バーが表示されている時は、body 要素に admin-bar という class が付きますので、これを利用して
の意味が通じていないようですね。
.admin-bar は、body.admin-bar です。
ログインしている時は、
<body id="〇〇" class="〇〇 logged-in admin-bar 〇〇">
のように、body 要素に admin-bar という class が付きます。
#wpadminbar は、ここでは関係ありません。
.site-header {
position: fixed;
top: 0px;
}
で、ヘッダーを上部固定しているのであれば、
.admin-bar .site-header { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
.admin-bar .site-header { margin-top: 46px !important; }
}
を CSS に追加してください。
