Yanıt olarak: WordPress yönetici çubuğu çakışan twitter bootstrap navigasyonu
Sordu: @TheWebs
WordPress ile Twitter Bootstrap kullanıyorsanız ve gezinme çubuğunuzla çakışan WordPress yönetici çubuğuyla ilgili bir sorununuz varsa, muhtemelen bu cevapların bazılarından oldukça sinirli olursunuz. Nihayetinde daha düşük bir vitese geçmeye karar vermeden önce her yerde çözüm aradım ve tam olarak yapmam gereken şeyi yapan bir çözüm buldum.
İşte WordPress yönetici çubuğunu gizlemeyen veya WordPress yönetici çubuğunu sayfalarınızın altına taşımayan bir yanıt. Bu yanıt WordPress yönetici çubuğunu ait olduğu yerde tutacaktır ... Sayfalarınızın üstünde.
Bunun tamamlanması için birkaç kısa adım alacağını lütfen unutmayın, ancak buna değer. Gerçekten karmaşık veya zaman alıcı bir süreç değil. Sadece bunun nasıl yapılacağına dair açıklamanın takip edilmesi ve anlaşılması kolay olduğundan emin olmak istedim.
Aşama 1
Temalarda gövde etiketi için tema yazarlarının CSS ile daha etkili bir şekilde stil oluşturmalarına yardımcı olacak bir şablon etiketi vardır. Şablon Etiketi denir
body_class. Bu işlev gövde elemanına farklı sınıflar verir ve genellikle header.phpHTML gövde etiketine eklenebilir .
- Şu anda etkin WordPress temanızı Twitter Bootstrap dizinini kullanarak açın . Bulun
header.phpve açın.
- Bul
<body> .
- Şununla değiştir
<?php echo '<body class="'.join(' ', get_body_class()).'">'.PHP_EOL; ?>
Yukarıdaki üç adımı tamamladıktan sonra, WordPress temanızı WordPress gövde sınıflarıyla başarıyla etkinleştirdiniz.
Adım 2 (İSTEĞE BAĞLI!)
<body>Etikete özel koşullu CSS sınıfları ekleyin .
Varsayılan olarak, body_class()veya get_body_class()işlevlerini kullanıyorsanız WordPress zaten HTML etiketine varsayılan sınıfların bir listesini sağlar .
WordPress web sitenizde oluşturulmuş herhangi bir ön uç sayfanın kaynak kodunu görüntülerseniz, HTML <body>etiketine otomatik olarak eklenen CSS sınıflarından ikisinin "oturum açıldı " ve "yönetici çubuğu" olduğunu göreceksiniz .
Ayrıca, CSS sınıf adlarının HTML <body>etiketine yalnızca kullanıcı oturum açtıysa eklendiğini fark edersiniz , aksi takdirde HTML <body>etiketine eklenmezler .
Dolayısıyla, varsayılan WordPress CSS sınıf adlarını kullanmak istemiyorsanız, kendinizinkini kolayca ekleyebilirsiniz.
- Şu anda etkin WordPress temanızı Twitter Bootstrap dizinini kullanarak açın . Bulun
functions.phpve açın.
-
add_filter('body_class', 'mbe_body_class');Dosyanın en üstüne ekleyin .
- Aşağıdaki kodu dosyanın altına ekleyin .
Kod:
function mbe_body_class($classes){
if(is_user_logged_in()){
$classes[] = 'body-logged-in';
} else{
$classes[] = 'body-logged-out';
}
return $classes;
}
Şimdi, WordPress web sitenizde oluşturulmuş herhangi bir ön uç sayfanın kaynak kodunu görüntülerseniz, kullanıcı oturum açtıysa, HTML <body>etiketine "gövde oturum açıldı" ifadesinin eklendiğini ve kullanıcı oturumu kapattıysanız, HTML gövdesine "gövde oturumu kapatıldı" ifadesinin eklendiğini göreceksiniz <body>.
Aşama 3
- CSS kodunu temanıza ekleyin.
Bu, kullanıcının web sitenizde oturum açmış veya oturumu kapatmış olsun, temanızı hem WordPress yönetici çubuğunu hem de Twitter Bootstrap gezinmenizi düzgün bir şekilde görüntüleyecek şekilde düzelten bölümdür.
- Şu anda etkin WordPress temanızı Twitter Bootstrap dizinini kullanarak açın . Bulun
functions.phpve açın.
-
add_action('wp_head', 'mbe_wp_head');Dosyanın en üstüne ekleyin .
- Aşağıdaki kodu dosyanın altına ekleyin .
Kod:
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;
}
KODU DÜZENLE
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 işlevinin bu sürümü, başlığınızın uygun mesafeyi aşağı itmesini sağlamak için önce mobil ortam sorgusu içerir. Mobil cihazlar için WP yönetici çubuğu 48 piksel uzunluğundadır. 783 piksel kesme noktasından sonra, yönetici çubuğu yalnızca 28 piksel yüksekliğe kısalır.
İşte aldın. Kullanıcı oturum açtıysa, artık sayfanızın en üstünde WordPress yönetici çubuğuna ve hemen ardından Twitter Bootstrapped navigasyonuna sahip olmalısınız. Kullanıcı WordPress web sitenizden çıkış yaptıysa, Twitter Bootstrap navigasyonunuz yine de web sitenizin üstünde uygun şekilde görüntülenmelidir.