WordPress Admin Bar ที่ทับซ้อนกันการนำทาง Bootstrap ของ Twitter [ปิด]

10

ปิด. คำถามนี้เป็นคำถามปิดหัวข้อ ไม่ยอมรับคำตอบในขณะนี้

ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ WordPress Development Stack Exchange

ปิดให้บริการใน5 ปีที่ผ่านมา

ฉันมีปัญหากับแถบผู้ดูแลระบบ WordPress ซ้อนทับแถบการนำทาง Twitter Bootstrap ( 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;
}

แต่ก็ยังเป็นปัญหาอยู่ ฉันสงสัยว่ามีการแก้ไขอะไรบ้าง

— TheWebs
แหล่งที่มา

17

วิธีป้องกันแถบผู้ดูแลระบบ WordPress ซ้อนทับกับแถบนำทาง Twitter Bootstrap ของคุณ

ในการตอบสนองต่อ: WordPress admin bar ที่ทับซ้อนกันทวิตเตอร์การนำทาง bootstrap

ถามโดย: @TheWebs

หากคุณใช้Twitter BootstrapกับWordPressและมีปัญหากับ WordPress admin bar ที่ซ้อนทับกับแถบการนำทางของคุณคุณอาจจะค่อนข้างผิดหวังกับคำตอบเหล่านี้ ฉันมองหาวิธีแก้ปัญหาทุกที่ก่อนที่จะตัดสินใจลดเกียร์ลงในที่สุดและหาวิธีแก้ปัญหาที่ทำในสิ่งที่ฉันต้องการ

ดังนั้นนี่คือคำตอบที่ไม่ซ่อนแถบผู้ดูแลระบบของ WordPress หรือย้ายแถบผู้ดูแลระบบของ WordPress ไปที่ด้านล่างของหน้าเว็บของคุณ คำตอบนี้จะทำให้แถบผู้ดูแลระบบ WordPress อยู่ในตำแหน่งที่เหมาะสม ... ที่ด้านบนของหน้าเว็บของคุณ

โปรดทราบว่าการดำเนินการนี้จะใช้เวลาไม่กี่ก้าว แต่ก็คุ้มค่า ไม่ใช่กระบวนการที่ซับซ้อนหรือใช้เวลานาน ฉันแค่ต้องการทำให้แน่ใจว่าคำอธิบายเกี่ยวกับวิธีการทำนั้นชัดเจนและง่ายต่อการติดตาม / เข้าใจ

ขั้นตอนที่ 1

เพิ่มget_body_class();ใน<body>แท็กของธีมของคุณ

ชุดรูปแบบมีแท็กเทมเพลตสำหรับแท็กเนื้อความซึ่งจะช่วยให้ผู้สร้างชุดรูปแบบสามารถออกแบบ CSS ได้อย่างมีประสิทธิภาพยิ่งขึ้น body_classแท็กแม่แบบที่เรียกว่า ฟังก์ชั่นนี้ให้คลาสร่างกายแตกต่างกันและสามารถเพิ่มได้ตามปกติในheader.phpแท็กเนื้อหา HTML

เปิดธีม WordPress ที่ใช้งานอยู่ในปัจจุบันโดยใช้ไดเรกทอรี Twitter Bootstrap ค้นหาheader.phpและเปิด
<body>พบ
แทนที่ด้วย <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

หลังจากทำตามขั้นตอนสามขั้นตอนด้านบนเรียบร้อยแล้วคุณได้เปิดใช้งานชุดรูปแบบ WordPress ของคุณด้วยคลาสร่างกายของ WordPress แล้ว

ขั้นตอนที่ 2 (ตัวเลือก!)

เพิ่มคลาส CSS แบบมีเงื่อนไขที่กำหนดเองไปยัง<body>แท็ก

ตามค่าเริ่มต้น WordPress จะแสดงรายการคลาสเริ่มต้นให้กับแท็ก HTML หากคุณใช้body_class()หรือget_body_class()ฟังก์ชั่น

หากคุณดูซอร์สโค้ดของหน้า front-end ใด ๆ ที่แสดงผลบนเว็บไซต์ WordPress ของคุณคุณจะสังเกตเห็นว่า CSS คลาสที่สองถูกเพิ่มไปยัง<body>แท็กHTML โดยอัตโนมัติคือ "เข้าสู่ระบบ" และ "admin-bar"

คุณจะสังเกตเห็นว่าชื่อคลาส CSS นั้นถูกเพิ่มไปยัง<body>แท็กHTML เฉพาะเมื่อผู้ใช้ลงชื่อเข้าใช้มิฉะนั้นจะไม่ถูกเพิ่มใน<body>แท็กHTML

ดังนั้นหากคุณไม่ต้องการใช้ชื่อคลาส CSS CSS เริ่มต้นคุณสามารถเพิ่มชื่อของคุณเองได้อย่างง่ายดาย

เปิดธีม WordPress ที่ใช้งานอยู่ในปัจจุบันโดยใช้ไดเรกทอรี Twitter Bootstrap ค้นหาfunctions.phpและเปิด
เพิ่ม add_filter('body_class', 'mbe_body_class');ไปที่ด้านบนของไฟล์
เพิ่มรหัสต่อไปนี้ที่ด้านล่างของไฟล์

รหัส:

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

ตอนนี้ถ้าคุณดูซอร์สโค้ดของหน้า front-end ใด ๆ ที่แสดงผลบนเว็บไซต์ WordPress ของคุณหากผู้ใช้เข้าสู่ระบบคุณจะเห็น "body-in-in-in" ถูกเพิ่มไปยัง<body>แท็กHTML และหากผู้ใช้เป็น ออกจากระบบคุณจะเห็น "ร่างกายออกจากระบบ" ได้ถูกเพิ่มใน<body>แท็กHTML

ขั้นตอนที่ 3

เพิ่มรหัส CSS ในธีมของคุณ

นี่คือส่วนของรหัสที่จะแก้ไขชุดรูปแบบของคุณเพื่อแสดงทั้งแถบผู้ดูแลระบบ WordPress และการนำทาง Bootstrap Twitter ของคุณอย่างถูกต้องไม่ว่าผู้ใช้จะเข้าสู่ระบบหรือออกจากระบบเว็บไซต์ของคุณ

เปิดธีม WordPress ที่ใช้งานอยู่ในปัจจุบันโดยใช้ไดเรกทอรี Twitter Bootstrap ค้นหาfunctions.phpและเปิด
เพิ่ม add_action('wp_head', 'mbe_wp_head');ไปที่ด้านบนของไฟล์
เพิ่มรหัสต่อไปนี้ที่ด้านล่างของไฟล์

รหัส:

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 สูง 48px หลังจากเบรกพอยต์ 783px แถบผู้ดูแลระบบจะลดความสูงเพียง 28px

ที่นั่นคุณมีมัน หากผู้ใช้ลงชื่อเข้าใช้ตอนนี้คุณควรจะมีแถบผู้ดูแลระบบ WordPress ที่ด้านบนสุดของหน้าของคุณตามด้วยการนำทาง Bootstrapped Twitter ของคุณทันที หากผู้ใช้ออกจากระบบเว็บไซต์ WordPress การนำทาง Bootstrap Twitter ของคุณควรจะแสดงอย่างเหมาะสมที่ด้านบนของเว็บไซต์

— Michael Ecklund
แหล่งที่มา

1

ทำไมคุณไม่ใส่ CSS ลงใน style.css แทนการฝังลงใน html มันจะเป็นทางออกที่หรูหรามากขึ้น ขอบคุณสำหรับการทำงานและความคิดของคุณ!

— Max Ruf

@ MaxRuf คุณพูดถูก แยกไฟล์ CSS ที่เข้าคิวจะดีกว่า ฉันแค่คิดถึงคนที่ค้นหาโพสต์นี้เพื่อให้พวกเขาสามารถคัดลอก / วาง มีโอกาสน้อยที่จะพบปัญหา

— Michael Ecklund

25

ไม่ได้ผลสำหรับฉัน แต่ฉันพบวิธีแก้ไขที่ดี ใน header.php ของคุณใช้ฟังก์ชั่น wordpress เพื่อสอบถามว่าแถบเครื่องมือปรากฏขึ้นหรือไม่แล้วสร้าง div ว่างใต้ div divbar:

<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">

— Filtah
แหล่งที่มา

การแก้ไขที่ดี ฉันชอบที่นี่ง่ายกว่าคำตอบที่ยอมรับและมองหาis_admin_bar_showing()ไม่ใช่แค่หากผู้ใช้ลงชื่อเข้าใช้ซึ่งถือว่าดีเมื่อพิจารณาว่ามีใครบางคนอาจเข้าสู่ระบบ แต่ปิดแถบผู้ดูแลระบบ ขอบคุณ!

— Mark Rummel

3

ในฐานะของ WordPress 3.8 ความสูงของแถบผู้ดูแลระบบคือ 32px

— cowgill

นี่เป็นแฮ็คเล็กน้อย แต่ฉันพบว่านี่เป็นทางออกที่ดีที่สุด upvoted

— 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; }

หากวิธีนี้ใช้ได้ผลสำหรับคุณ (ซึ่งควร!) คุณจะต้องย้ายแถบผู้ดูแลระบบ wp ไปด้านล่างโดยติดรหัสด้านล่างลงในโฟลเดอร์ปลั๊กอินหรือไฟล์ functions.php ของคุณ:

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 ..

— Tamara
แหล่งที่มา

2

มันไม่ได้ผลสำหรับฉันจนกว่าฉันจะเพิ่มสิ่งนี้ลงในแท็กเนื้อหา:

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

คุณพูดถึงการเพิ่มในที่ต่าง ๆ แต่ฉันทำแบบนี้มาตลอดและมันก็ใช้ได้ดี ขอบคุณสำหรับการแก้ไข!

— user51355
แหล่งที่มา

1

แล้วคุณทำอะไรที่แตกต่างกันบ้าง

— ไกเซอร์

0

แก้ไขสำหรับ Bootstrap 'navbar-fixed-top' เพื่อป้องกันการทับซ้อนของเมนูเว็บไซต์ด้วยเมนู WordPress admin

.admin-bar .navbar-fixed-top { top:46px; @media screen and (min-width:782px) { top:32px; } }

— user49936
แหล่งที่มา