Twitter 부트 스트랩 탐색이 겹치는 WordPress 관리 모음 [닫기]

10

WordPress 관리 막대가 Twitter 부트 스트랩 ( 2.3.0) 탐색 모음 과 겹치는 문제가 있습니다. 이 수정을 시도했습니다 :

body.admin-bar .navbar-fixed-top {
    top: 28px;
}

.navbar .brand {
    color: #000 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px
        rgba(255, 255, 255, 0.125);
    font-weight: bold !important;
}

.nav-container {
    padding-left: 0;
    padding-right: 0;
}

.nav-tabs, .nav-pills {
    margin-top: -6px;
}

.dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a
    {
    color: #fff !important;
}

#inner-header {
    width: 100%;
}

input,textarea,select,.uneditable-input {
    margin-bottom: 0;
}

.navbar-form,.navbar-search {
    margin: 0 0 9px;
}

.navbar-search {
    padding-left: 0;
}

#s {
    width: 100px;
}

그러나 아쉽게도 여전히 문제가되고 있습니다. 어떤 수정 프로그램을 사용할 수 있는지 궁금합니다.

css  html  navigation  twitter-bootstrap  admin-bar 
— 웹
소스

답변:

17

WordPress 관리 막대가 Twitter 부트 스트랩 탐색 막대와 겹치는 것을 방지하는 방법

트위터 부트 스트랩 탐색이 겹치는 WordPress 관리 막대에 대한 답변

질문 : @TheWebs

WordPress에서 Twitter Bootstrap 을 사용 하고 있고 WordPress 관리 막대가 탐색 막대와 겹치는 문제가있는 경우 이러한 답변 중 일부에 상당히 실망 할 것입니다. 나는 궁극적으로 더 낮은 기어로 다운 시프 팅하기로 결정하고 내가해야 할 일을 정확하게 수행하는 솔루션을 결정하기 전에 모든 곳에서 솔루션을 찾았습니다.

여기에 WordPress 관리 막대를 숨기거나 WordPress 관리 막대를 페이지 맨 아래로 이동하지 않는 답변이 있습니다. 이 답변은 WordPress 관리 표시 줄이 속한 곳을 그대로 유지합니다 ... 페이지 상단에.

이 작업을 완료하는 데 몇 가지 간단한 단계가 필요하지만 그만한 가치가 있습니다. 실제로 복잡하거나 시간이 많이 걸리는 프로세스는 아닙니다. 나는 그렇게하는 방법에 대한 설명이 명확하고 따르기 쉽고 이해하기 쉽도록하고 싶었습니다.

1 단계

테마에는 body 태그에 대한 템플릿 태그가있어 테마 작성자가 CSS로보다 효과적으로 스타일을 지정할 수 있습니다. 템플릿 태그는이라고 body_class합니다. 이 함수는 body 요소에 다른 클래스를 제공하며 일반적으로 header.php의 HTML body 태그 에 추가 할 수 있습니다 .

  1. Twitter Bootstrap 디렉토리를 사용하여 현재 활성화 된 WordPress 테마를 엽니 다 . 찾아서 header.php엽니 다.
  2. 찾기 <body> .
  3. 로 교체 <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

위의 세 단계를 완료 한 후에는 WordPress 본문 클래스를 사용하여 WordPress 테마를 활성화했습니다.

2 단계 (선택 사항)

  • <body>태그에 사용자 정의 조건부 CSS 클래스를 추가하십시오 .

body_class()또는 get_body_class()기능을 사용하는 경우 기본적으로 WordPress는 이미 기본 클래스 목록을 HTML 태그에 제공 합니다.

WordPress 웹 사이트에서 렌더링 된 프런트 엔드 페이지의 소스 코드를 보면 HTML <body>태그에 자동으로 추가 된 두 개의 CSS 클래스 가 "로그인"및 "관리자 막대"인 것을 알 수 있습니다.

또한 <body>사용자가 로그인 한 경우 해당 CSS 클래스 이름이 HTML 태그 에만 추가되고 그렇지 않으면 HTML <body>태그에 추가되지 않습니다 .

따라서 기본 WordPress CSS 클래스 이름을 사용하지 않으려는 경우 고유 한 이름을 쉽게 추가 할 수 있습니다.

  1. Twitter Bootstrap 디렉토리를 사용하여 현재 활성화 된 WordPress 테마를 엽니 다 . 찾아서 functions.php엽니 다.
  2. add_filter('body_class', 'mbe_body_class');파일 맨 위에 추가 하십시오.
  3. 파일 맨 아래에 다음 코드를 추가 하십시오.

코드:

function mbe_body_class($classes){
    if(is_user_logged_in()){
        $classes[] = 'body-logged-in';
    } else{
        $classes[] = 'body-logged-out';
    }
    return $classes;
}

이제 WordPress 웹 사이트에서 렌더링 된 프런트 엔드 페이지의 소스 코드를 볼 경우 사용자가 로그인 한 경우 "body-logged-in"이 HTML <body>태그 에 추가되었고 사용자가 로그 아웃하면 "body-logged-out"이 HTML <body>태그에 추가 된 것을 볼 수 있습니다.

3 단계

  • 테마에 CSS 코드를 추가하십시오.

이것은 사용자가 웹 사이트에 로그인했는지 또는 로그 아웃했는지에 관계없이 테마를 수정하여 WordPress 관리 막대와 Twitter Bootstrap 탐색을 모두 표시하도록하는 코드 섹션입니다.

  1. Twitter Bootstrap 디렉토리를 사용하여 현재 활성화 된 WordPress 테마를 엽니 다 . 찾아서 functions.php엽니 다.
  2. add_action('wp_head', 'mbe_wp_head');파일 맨 위에 추가 하십시오.
  3. 파일 맨 아래에 다음 코드를 추가 하십시오.

코드:

function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

코드 편집

add_action('wp_head', 'mbe_wp_head');
function mbe_wp_head(){
    echo '<style>'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'@media only screen and (min-width: 783px) {'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'}</style>'
    .PHP_EOL;
}

이 버전의 mbe_wp_head 함수에는 모바일 우선 미디어 쿼리가 포함되어있어 헤더가 적절한 거리를 누를 수 있도록합니다. 모바일의 경우 WP 관리 막대의 크기는 48 픽셀입니다. 783px 중단 점 이후에 관리자 막대는 키가 28px로 줄어 듭니다.

거기 있어요 사용자가 로그인 한 경우 이제 페이지 맨 위에 WordPress 관리 표시 줄이 있고 Twitter 부트 스트랩 탐색 바로 다음에 표시됩니다. 사용자가 WordPress 웹 사이트에서 로그 아웃 한 경우 웹 사이트 상단에 Twitter Bootstrap 탐색이 여전히 적절하게 표시되어야합니다.

— 마이클 에클 런드
소스
1
예를 들어 CSS를 html에 포함시키는 대신 CSS를 style.css에 넣지 않은 이유는 무엇입니까? 더 우아한 솔루션이 될 것입니다. 또한 귀하의 작업과 아이디어에 감사드립니다!
— Max Ruf
@MaxRuf 당신은 절대적으로 맞습니다. 별도의 대기열에있는 CSS 파일이 더 좋습니다. 이 게시물을 찾는 사람들에 대해 생각하고 있었기 때문에 쉽게 복사 / 붙여 넣기 할 수있었습니다. 문제가 발생할 가능성이 적습니다.
— Michael Ecklund
25

나를 위해 작동하지 않았지만 좋은 해결책을 찾았습니다. header.php에서 wordpress 함수를 사용하여 툴바가 표시되는지 쿼리 한 다음 navbar div 아래에 빈 div를 만듭니다.

<div class="navbar navbar-inverse navbar-fixed-top">
<?php 
  // Fix menu overlap
  if ( is_admin_bar_showing() ) echo '<div style="min-height: 32px;"></div>'; 
?>
<div class="navbar-inner">
— 필타
소스
큰 수정. 나는 이것이 허용 된 답변보다 훨씬 간단 is_admin_bar_showing()하고 사용자가 로그인 한 경우뿐만 아니라 누군가가 로그인했을 수 있지만 관리자 표시 줄을 끄는 것을 고려하는 것이 좋습니다. 감사!
— Mark Rummel
3
WordPress 3.8에서 관리자 표시 줄 높이는 32px입니다.
— cowgill
이것은 약간의 Hacky이지만 이것이 최선의 해결책이라는 것을 알았습니다. 공감
— plushyObject
삼항 논리와 인라인 스타일을 사용하여 약간 수정 된 솔루션 :<nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>
— Mark Rummel
1
이것은 오프셋이 32px가 아니라 46px 인 모바일 장치를 제외하고는 좋습니다. 이를 설명하기 위해 스타일 대신 CSS 클래스를 사용했습니다. 적용 할 수있는 수업은 다음과 같습니다..fix_wp_overlap { min-height: 32px; } @media screen and (max-width: 782px) { .fix_wp_overlap { top: 46px !important; } }
— surfbuds
3

당신은 이것을 시도 할 수 있습니다 : 

   .navbar-fixed-top { top: 0px; }
    body.admin-bar .navbar-fixed-top { top: 28px !important; }

그것이 당신을 위해 효과가 있다면 (그렇습니다!), 아래 코드를 플러그인 폴더 또는 functions.php 파일에 붙여서 wp 관리 막대를 맨 아래로 이동해야합니다.

function fb_move_admin_bar() {
    echo '
    <style type="text/css">
    body { 
    margin-top: -28px;
    padding-bottom: 28px;
    }
    body.admin-bar #wphead {
       padding-top: 0;
    }
    body.admin-bar #footer {
       padding-bottom: 28px;
    }
    #wpadminbar {
        top: auto !important;
        bottom: 0;
    }
    #wpadminbar .quicklinks .menupop ul {
        bottom: 28px;
    }
    </style>';
}
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

대안 으로이 플러그인을 사용할 수 있습니다

나는 대부분의 테마가 가짜 코드로 내 스크립트를로드하기 때문에 플러그인을 사용하는 것을 좋아하지 않습니다 ... 위의 솔루션 1과 2는 정상적으로 작동하지만 작동하지 않으면 아래 솔루션 3을 시도 할 수 있습니다.

function stick_admin_bar_to_bottom_css() {
echo "

html {
padding-bottom: 28px !important;
}

body.admin-bar {
margin-top: -28px;
}

#wpadminbar {
top: auto !important;
bottom: 0;
}

#wpadminbar .quicklinks .menupop ul {
bottom: 28px;
}

";
}

add_action('admin_head', 'stick_admin_bar_to_bottom_css');
add_action('wp_head', 'stick_admin_bar_to_bottom_css');

28px 문제없이 잘 작동하는 것 같습니다.

— 타마라
소스
2

이 태그를 body 태그에 추가하기 전까지는 작동하지 않았습니다.

<body <?php body_class(); ?>>

그런 다음 잘 작동했습니다!

— timhc22
소스
0

완전한! 그러나 내가 찾던 것은 3 단계에서 약간 다르게 행동했습니다. 그것이 중요하지만 확실하지는 않지만 내 코드는 다음과 같습니다.

    function mbe_wp_head(){
    echo '<style>'.PHP_EOL;
    echo 'body{ padding-top: 70px !important; }'.PHP_EOL;
    // Using custom CSS class name.
    echo 'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    // Using WordPress default CSS class name.
    echo 'body.logged-in .navbar-fixed-top{ top: 28px !important; }'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}
add_action('wp_head', 'mbe_wp_head');

다른 장소에 추가하는 것을 언급했지만 항상 이런 식으로 수행했으며 제대로 작동하는 것 같습니다. 수정 해 주셔서 감사합니다!

— 사용자
소스
1
그리고 정확히 무엇을 했습니까?
— 카이저
0

WordPress 관리 메뉴와 사이트 메뉴가 겹치지 않도록 부트 스트랩 'navbar-fixed-top'수정

.admin-bar .navbar-fixed-top { top:46px; @media screen and (min-width:782px) { top:32px; } }
— 사용자
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.