Admin Bar WordPress Tumpang tindih Navigasi Bootstrap Twitter [ditutup]

10

Saya mengalami masalah dengan bilah admin WordPress yang tumpang tindih dengan 2.3.0nav bar Twitter Bootstrap ( ). Saya sudah mencoba perbaikan ini:

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

tapi sayangnya itu masih menjadi masalah. Saya bertanya-tanya perbaikan apa yang tersedia?

css  html  navigation  twitter-bootstrap  admin-bar 
— TheWebs
sumber

Jawaban:

17

Cara mencegah bilah admin WordPress tumpang tindih dengan bilah navigasi Bootstrap Twitter Anda.

Menanggapi: Admin bar WordPress tumpang tindih navigasi bootstrap twitter

Ditanyakan oleh: @TheWebs

Jika Anda menggunakan Twitter Bootstrap dengan WordPress dan memiliki masalah dengan bilah admin WordPress yang tumpang tindih dengan bilah navigasi Anda, Anda mungkin cukup frustrasi dengan beberapa jawaban ini. Saya mencari solusi di mana-mana sebelum akhirnya memutuskan untuk beralih ke gigi yang lebih rendah dan mencari solusi yang melakukan apa yang saya butuhkan.

Jadi, inilah jawaban yang tidak menyembunyikan bilah admin WordPress, atau memindahkan bilah admin WordPress ke bagian bawah halaman Anda. Jawaban ini akan membuat bar admin WordPress tetap di tempatnya ... Di bagian atas halaman Anda.

Harap dicatat bahwa ini akan mengambil beberapa langkah singkat untuk diselesaikan, tetapi itu sepadan. Ini bukan proses yang rumit atau memakan waktu. Saya hanya ingin memastikan bahwa penjelasannya jelas dan mudah diikuti / dimengerti.

Langkah 1

Tema memiliki tag template untuk tag tubuh yang akan membantu penulis tema untuk mendesain lebih efektif dengan CSS. Tag Templat disebut body_class. Fungsi ini memberikan elemen tubuh kelas yang berbeda dan dapat ditambahkan, biasanya, dalam header.phptag tubuh HTML.

  1. Buka tema WordPress Anda yang sedang aktif menggunakan direktori Twitter Bootstrap. Temukan header.phpdan buka.
  2. Temukan <body> .
  3. Ubah dengan <?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>

Setelah menyelesaikan tiga langkah di atas, Anda sekarang telah berhasil mengaktifkan tema WordPress Anda dengan kelas tubuh WordPress.

Langkah 2 (OPTIONAL!)

  • Tambahkan kelas CSS khusus bersyarat ke <body>tag.

Secara default, WordPress sudah menyediakan daftar kelas default untuk tag HTML, jika Anda menggunakan body_class()atau get_body_class()fungsinya.

Jika Anda melihat kode sumber dari setiap halaman depan yang dirender di situs WordPress Anda, Anda akan melihat dua kelas CSS yang secara otomatis ditambahkan ke <body>tag HTML adalah "login" dan "admin-bar".

Anda juga akan melihat bahwa nama-nama kelas CSS hanya ditambahkan ke <body>tag HTML jika pengguna masuk, jika tidak mereka tidak akan ditambahkan ke <body>tag HTML .

Jadi jika Anda tidak ingin menggunakan nama kelas WordPress CSS default, Anda dapat menambahkan sendiri dengan sangat mudah.

  1. Buka tema WordPress Anda yang sedang aktif menggunakan direktori Twitter Bootstrap. Temukan functions.phpdan buka.
  2. Tambahkan add_filter('body_class', 'mbe_body_class'); ke bagian atas file.
  3. Tambahkan kode berikut, ke bagian bawah file.

Kode:

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

Sekarang, jika Anda melihat kode sumber dari setiap halaman front-end yang dirender di situs web WordPress Anda, jika pengguna masuk, Anda akan melihat "tubuh-masuk" telah ditambahkan ke <body>tag HTML , dan jika pengguna logout, Anda akan melihat "body-log-out" telah ditambahkan ke <body>tag HTML .

Langkah 3

  • Tambahkan kode CSS ke tema Anda.

Ini adalah bagian dari kode yang akan memperbaiki tema Anda untuk menampilkan bar admin WordPress, dan navigasi Bootstrap Twitter Anda dengan benar, apakah pengguna masuk atau keluar dari situs web Anda.

  1. Buka tema WordPress Anda yang sedang aktif menggunakan direktori Twitter Bootstrap. Temukan functions.phpdan buka.
  2. Tambahkan add_action('wp_head', 'mbe_wp_head'); ke bagian atas file.
  3. Tambahkan kode berikut, ke bagian bawah file.

Kode:

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

Sunting ke kode

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

Versi fungsi mbe_wp_head ini mencakup kueri media pertama-seluler, untuk memastikan bahwa tajuk Anda didorong ke bawah dengan jarak yang tepat. Untuk seluler, bilah admin WP tingginya 48px. Setelah breakpoint 783px, bar admin memendek menjadi hanya 28px.

Itu dia. Jika pengguna masuk, Anda sekarang harus memiliki bar admin WordPress di bagian paling atas halaman Anda, segera diikuti oleh navigasi Bootstrapped Twitter Anda. Jika pengguna keluar dari situs WordPress Anda, navigasi Bootstrap Twitter Anda masih harus ditampilkan dengan tepat di bagian atas situs web Anda.

— Michael Ecklund
sumber
1
Mengapa Anda tidak memasukkan css ke style.css misalnya, alih-alih menanamkannya ke dalam html? Itu akan menjadi solusi yang lebih elegan. Juga terima kasih atas pekerjaan dan idenya!
— Max Ruf
@ MaxRuf Anda benar sekali. Memisahkan file CSS enqueued akan lebih baik. Saya hanya memikirkan orang-orang yang menemukan posting ini, sehingga mereka dapat dengan mudah menyalin / menempel. Lebih kecil kemungkinannya menghadapi masalah.
— Michael Ecklund
25

Tidak bekerja untuk saya, tetapi saya menemukan perbaikan yang bagus. Di header.php Anda gunakan fungsi wordpress untuk meminta jika bilah alat ditampilkan, dan kemudian buat div kosong di bawah div navbar:

<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
sumber
Perbaikan hebat. Saya suka bahwa ini jauh lebih sederhana daripada jawaban yang diterima dan yang is_admin_bar_showing()dicari, bukan hanya jika pengguna masuk, yang bagus mengingat seseorang mungkin masuk, tetapi mematikan bilah admin. Terima kasih!
— Mark Rummel
3
Pada WordPress 3.8, tinggi admin bar adalah 32px.
— cowgill
Ini sedikit Hacky tetapi saya telah menemukan ini menjadi solusi terbaik. Terpilih
— plushyObject
Solusi yang sedikit dimodifikasi menggunakan logika terner dan gaya inline:<nav class="navbar navbar-default navbar-fixed-top"<?php echo (is_admin_bar_showing()) ? ' style="top: 32px;"' : ''; ?>>
— Mark Rummel
1
Ini bagus kecuali pada perangkat seluler offset tidak 32px tetapi 46px. Untuk menjelaskan hal ini saya menggunakan kelas CSS alih-alih gaya. Inilah kelas yang dapat diterapkan:.fix_wp_overlap { min-height: 32px; } @media screen and (max-width: 782px) { .fix_wp_overlap { top: 46px !important; } }
— surfbuds
3

Anda dapat mencoba ini: 

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

jika itu bekerja untuk Anda (yang seharusnya!), maka Anda harus memindahkan bar admin wp ke bawah dengan menempelkan kode di bawah ini ke folder plugins atau file functions.php Anda:

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

sebagai alternatif, Anda dapat menggunakan plugin ini

saya tidak terlalu suka menggunakan plugin karena sebagian besar tema memuat skrip saya dengan kode palsu saya tidak perlu ... solusi 1 dan 2 di atas berfungsi dengan baik, tetapi jika itu tidak berhasil untuk Anda, Anda dapat mencoba solusi 3 di bawah ini:

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

Itu tampaknya bekerja untuk saya baik-baik saja tanpa masalah 28px ..

— Tamara
sumber
2

Itu tidak berfungsi untuk saya sampai saya menambahkan ini ke tag tubuh:

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

Kemudian itu bekerja dengan baik!

— timhc22
sumber
0

Sempurna! Hanya apa yang saya cari, bagaimanapun, saya melakukan sesuatu yang sedikit berbeda pada langkah 3. Tidak yakin itu penting tetapi kode saya terlihat seperti ini ...

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

Anda sebutkan menambahkan di tempat yang berbeda, tetapi saya selalu melakukannya seperti ini dan tampaknya berfungsi dengan baik. Terima kasih untuk perbaikannya!

— pengguna51355
sumber
1
Dan apa tepatnya yang Anda lakukan berbeda?
— kaiser
0

Perbaiki untuk Bootstrap 'navbar-fixed-top' untuk mencegah tumpang tindih menu situs dengan menu admin WordPress

.admin-bar .navbar-fixed-top { top:46px; @media screen and (min-width:782px) { top:32px; } }
— pengguna49936
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.