MakeUseOf gibi kendi yapışkan başlık çubuğunuzu nasıl

İlan

Yaklaşık bir ay önce, yüzen bir gezinme ve arama çubuğu olan MakeUseOf'a yeni bir arayüz öğesi ekledik. Aldığımız geri bildirimler neredeyse tamamen olumlu, dahili arama trafiği roketlendi ve bazı okuyucular kendi siteleri için nasıl bir tane yapılacağını soruyorlar, bu yüzden paylaşacağımı düşündüm.

Çubuğu ekranın üstüne yapıştırmak için jQuery kullanacağız - ancak yalnızca belirli bir noktayı geçeceğiz. Tüm bunları varsayılan WordPress temasında yapacağım - Yirmi Onbir, tabii ki nasıl değiştireceğinizi yeterince anladığınız herhangi bir temaya veya web sitesine uygulanabilir.

HTML

Öncelikle, temalar header.php dosyasını açın ve yapışkan hale getireceğimiz gezinme çubuğunu belirleyin. Dediğim gibi, aşağıdaki kod varsayılan yirmi onbir içindir; sizinki değişebilir.

İlk olarak, tüm bu NAV bölümünü çevreleyen yeni bir DIV kabı ekleyin.

Ayrıca, varsayılan arama çubuğunu buraya taşıyalım. Varsayılan olarak temanın sağ üst kısmına eklendiğini fark edeceksiniz; hattı bul php get_search_form (); ve navigasyon bölümümüze yapıştırın. Bu dosyadaki diğer tüm örneklerini silin.

Şimdi kaydedip yenilerseniz, arama formunun gerçekten gezinme çubuğunda görünmediğini görürsünüz - yine de sağ üstte gösterilir. Bunun nedeni, kesinlikle CSS ile konumlandırılmış olması ve tüm bunları bir saniyede sileceğiz.

CSS

Ana style.css dosyasını açın ve arama formu bölümünü bulun:

#branding #searchform {... }

İçinde ne varsa değiştirin (bazı mutlak konumlandırma da dahil olmak üzere dört satırdan oluşabilmelidir):

#branding #searchform { şamandıra: sol; arka plan: beyaz; kenar boşluğu: 7 piksel; }

Rengi veya kenar boşluğunu ayarlamaktan çekinmeyin. Çubuğun sağında görünmesini istiyorsanız şamandırayı değiştirin. Bu temada, kullanıcı içine tıkladığında arama genişleyecek şekilde ayarlanmıştır; bu öğreticinin kapsamı dışındadır, ancak MakeUseOf Aramamızda benzer bir etki görebilirsiniz.

jQuery

Bunu yapmak için neden jQuery kullandığımızı merak ediyorsanız, basit: CSS sabittir ve dinamik olarak ayarlanamaz. Yapışkan bir başlık oluşturmak için CSS'yi kullanabilmemize rağmen, sayfanın en üst öğesi olması gerekir. Sahip olduğumuz sorun, menümüzün en üst öğe olmamasıdır, bu yüzden yapışkan olarak başlayamayız. Burada jQuery kullanılır; kullanıcının belirli bir noktayı ne zaman geçtiğini kontrol edebiliriz; sonra ve ancak o zaman yapışkan hale getirin.

Temanıza jQuery ekleyerek başlayın. Temanız zaten yüklenmiş olabilir; değilse endişelenmeyin. İşlevlerinize aşağıdaki kodu ekleyerek bu kodu sıralayabilirsiniz. Php, şöyle:

php. işlev my_scripts_method () { wp_deregister_script ('jquery'); wp_register_script ('jquery', ' http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'); wp_enqueue_script ('jquery'); } add_action ('wp_enqueue_scripts', 'my_scripts_method');

Veya WordPress'i tamamen atlayabilir ve bunu başlık dosyasına ekleyebilirsiniz. Baş bölümünüzün herhangi bir yerinde bu satırı ekleyin:

İlk yöntemi kullanırsanız, bu yöntem yüklenir çatışma yok jQuery işlevlerine erişmek için kodunuzda "jQuery" kullanmanız gerekeceği anlamına gelir. Başlığınıza doğrudan eklemek için ikinci yöntemi kullanırsanız, standart jQuery erişimcisini $. Aşağıdaki kodda ikinci yöntemi varsayacağım.

Yani, bazı gerçek jQuery kodu eklemek için aşağıdakileri bir yere yerleştirin: header.php - Benimkini hemen

Komut dosyasının yaptığı ilk şey, gezinme çubuğunun nereden başladığını bulmak ve bu değeri hatırlamaktır. İkincisi, scroll olayına ekliyoruz - bu, kullanıcı sayfayı her kaydırdığında, bu kod bloğunu çalıştırabileceğimiz anlamına gelir. Kod çalıştığında, iki yol vardır:
1. Pencere gezinme çubuğunu geçtiyse, onu sabit bir CSS yaparız (bu “yapışkan” kısımdır).
2. Pencerenin üstü gezinme çubuğunun orijinal konumundan daha yüksekse (yani kullanıcı tekrar yukarı kaydırılır), varsayılan statik konuma geri koyarız.

Dikkatinizi çekmek istediğim iki nokta var:

• +288 yanlış pozisyon alma hatasını düzeltmek için orada; onsuz, çubuk yapışkan durumunu çok erken tetikliyor - ne demek istediğimi görmek için kaldırın. Bu, tüm temalarda gerekli olmayacak ve muhtemelen daha iyi bir çözüm bulabilirsin.
• Gezinme çubuğunun yapışkan duruma geçtiğinde genişlik değiştirme sorununu gidermek için, okunmak üzere style.css, satır 550'yi düzenleyin 1000 piksele onun yerine 100%

İşte bu, gezinme çubuğunuz artık oldukça yapışkan olmalıdır.

Özet:

Tam değiştirme header.php bu öğreticinin kodu şu adreste bulunabilir: bu macun; ve değiştirme style.cssburaya. Bu küçük öğreticiden keyif aldığını umuyordum; sorun yaşıyorsanız, yorumlarda yayın yapın, ancak devam edip kendime bir göz atabilmek için lütfen sitenizi herkese açık hale getirmeyi unutmayın. Burada yeniyseniz, diğer tüm sitemizi kontrol ettiğinizden emin olun. blog yazarı ve web geliştirme makaleleri.