Tek Bir Kod Satırı Yazmak zorunda kalmadan WordPress'te Herhangi Bir Öğeyi Yapışkan Hale Getirme

Sayfalarındaki öğeler için yapışkan konum özelliğini kullanan siteleri giderek daha sık görüyoruz. Adından da anlaşılacağı gibi, özellik, siz orijinal konumundan uzaklaştıktan sonra bile belirlenen öğenin sayfada "yapışmasına" izin verir. Konum yapışkanı aslında klasikler gibi başka bir CSS konum özelliğidir – statik, göreli, mutlak ve sabit.

Bir sayfada sahip olduğunuz herhangi bir öğe, kodunuzda CSS kullanımı ile bu şekilde konumlandırılabilir. CSS'nin HTML çerçevesinde nasıl çalıştığını bilenler için süreç oldukça basittir - doğru yerde birkaç satır kod.

Ancak bu noktada bahsetmeye değer iki önemli şey var. Çoğunlukla bir üst öğe (menü çubuğu, arama alanı, başlık vb.) için kullanılmasına rağmen, yapışkan konum özelliği sayfanın herhangi bir yerinde kullanılabilir, yani bir öğeyi sayfanın sağına, soluna veya altına yapıştırabilirsiniz. sayfa – genellikle dikkate alınmayan bir şey. Diğer bir nokta da, günümüzde herkesin, ister iş ister özel olsun, bir web sitesine ihtiyacı olduğu, ancak insanların yalnızca küçük bir yüzdesinin CSS kullanmayı gerçekten bildiği gerçeğidir.

Ne de olsa, her zaman daha derine inmek için zaman vardır, ancak sitenin şu anda hazır olmasını istiyorsanız, basitleştirilmiş bir çözüme başvurmanız gerekir. Çoğu insan bu tür girişimlere başlamak için tercih edilen platform olarak WordPress'i seçtiğinden, aramamızı uygun eklentilere odakladık ve bir tanesi hemen ortaya çıktı – WP Sticky. Yapıştıracak bir şeye ihtiyacınız varsa, WP Sticky bunu halleder.

Kodlama yok, sorun yok

Daha önce de belirttiğimiz gibi, site yönetimindeki en büyük sorunlardan biri fikir eksikliği değil, bu fikirleri hayata geçirecek bilgi eksikliğidir. Çeşitli sayfa oluşturucular, hepsi bir arada barındırma hizmetleri, arka plan ve tema paketleri vb. gibi şeylerle, bir şeyin görünmesi ve hissedilmesi için temel kod hakkında gerçekten fazla bir şey bilmenize gerek olmadığı bir noktaya geldik. iyi.

Purists yine de bunların hepsinin iyi bir çekirdek betiğin yerini alamayacağını söyleyecek ve muhtemelen haklılar, ancak dışarıda bir web varlığına ihtiyaç duyan, ancak kodlama zahmetine ihtiyaç duymayan çok sayıda işletme/kişi var. bu onunla birlikte gelir.

Çalışacağınız temel işlevler üç gruba ayrılır - temel, görsel ve gelişmiş, ilk etapta yapışkan bir öğe ekleyen ayrı bir düğme ve hemen hemen açıklayıcı olan bir silme seçeneği.

O halde en baştan başlayalım…

Öğe ekleme ve temel ayarlar

Bir sayfaya yapıştırmak istediğiniz bir öğeyi eklemek için, yalnızca “Yeni Yapışkan Öğe Ekle” düğmesine tıklamanız yeterlidir – bu gerçekten hiç de kolay olmuyor. Bu yapıldıktan sonra, onu adlandırmanız ve sayfada hangi öğenin olacağını seçmeniz gerekir.

Birden çok yapışkan öğe oluşturabildiğiniz için, türlerine ve/veya işlevlerine (örneğin, menü, başlık, arama vb.) bağıntılı olarak adlandırmanızı öneririz; bu sayede, yalnızca öğeye bakarak hangi öğelere sahip olduğunuzu bilebilirsiniz. listelendikleri kenar çubuğu.

Öğeyi adlandırdınız, şimdi sayfadan birini seçme zamanı (bu eylemler her iki sırayla da yapılabilir). Bir öğe seçmek için, sizi sitenizin bir önizlemesine götüren "Eleman Seç" düğmesine tıklamanız yeterlidir, ardından üzerine tıklayarak yapıştırmak istediğiniz öğeyi seçersiniz. İlerlemenizi seçip kaydettikten sonra, bu öğe siteye ön uçtan erişen herkes için yapışkan olacaktır.

Görsel ayarlar

Bu, yapışkan öğenizin nasıl görüntüleneceğini yönettiğinden ve tüm bunları görsel işlevsellik nedeniyle yaptığınız için muhtemelen zamanınızın çoğunu geçireceğiniz bölümdür.

Seçeceğiniz ilk şey, elemanın yapışacağı konumdur. Daha önce de belirttiğimiz gibi, çoğu zaman bir sayfanın üstünde olur, ancak böyle olması şart değildir – bir öğeyi neredeyse sayfanın herhangi bir yerine yapıştırabilirsiniz.

Konum hakkında konuşurken, isteğe bağlı olarak öğeyi (piksel olarak) sayfanın üst kısmından ayırabilir veya isterseniz ekranın üst sınırına yapıştırabilirsiniz. Ek olarak, öğeler arka uç kullanıcıları için de geçerli olduğundan, bir sayfada aşağı doğru gezinirken araç çubuğunu görünür tutmak için her zaman yönetici araç çubuğunun altında olacak şekilde ayarlayabilirsiniz.

Bu sonraki bölüm ilginç. Yani, söz konusu sayfanın görüntülendiği ekranın boyutuna bağlı olarak öğenin sayfaya ne zaman yapışacağını ayarlayabilirsiniz. Bir ekran, ayarlanan gösterimden daha büyükse, eleman, hiçbir yapışkan konum yokmuş gibi davranacaktır.

Dört farklı varsayılan boyut vardır (piksel olarak görüntülenir) ve gelişmiş ayarlarda (buna gireceğiz) özel boyutlar bile ayarlayabilirsiniz.

Bunun gibi bir özellik, sitenizin yanıt verme hızına doğru uzun bir yol kat ederek onu telefon, tablet ve masaüstü kullanıcıları için uygun hale getirir. Web'de gezinmenin cihazlar arasında eşit şekilde çeşitlendiğini (son zamanlarda daha küçük ekranlara yöneliyor olsa bile) dikkate alın ve muhtemelen bu özellik için sunulan diğer özelliklerden daha fazla minnettar olacaksınız.

İlginç bir bilgi, boyutların görüntülenme şeklidir ("piksel sayısından daha küçük"); bu, yapışkan öğelerin daha büyük ekranlara kıyasla daha küçük ekranlarda daha fazla tercih edildiğini gösterir.

Belirlenen yapışkan öğeyi muhtemelen gizleyebilecek öğeleriniz varsa, Z-endeksi oradadır. Sayfayı, belirli öğelerin diğerlerinin üzerine yerleştirildiği yığınlardan oluşan bir koleksiyon olarak düşünün. Z-endeksi ne kadar yüksek olursa, bu yığınlar içindeki öğe o kadar yüksek olur.

Bu nedenle, kendinizi yapışkan öğenin gizlendiği bir durumda bulursanız, her şeyi düzeltmek için gülünç derecede yüksek bir sayıyı manuel olarak girin (seçeneklerin hemen altında 99999 önerilir).

Şimdi, öğenin görüntüleneceği bir efekt ekleme seçeneği geliyor, daha spesifik olarak nasıl görüneceği. İki seçenek, soldurma ve aşağı kaydırmadır. Yapışkan konum, aşağı kaydırırken görünür durumda kalan bir üst öğede kullanıldığından, aşağı kaydırma efekti kendini doğal bir seçim olarak sunar, ancak soldurmayla gidebileceğiniz durumlar da vardır. Her iki durumda da, korunuyorsun.

Yapışkan bir öğenin gösterilmesini istiyorsanız, ancak yine de sayfayı çok fazla işgal etmiyorsanız, opaklığını özelleştirebilirsiniz. Yaklaşık %50'ye ayarlayın ve altındaki öğe ve içerik görünür olmalıdır. Gerçekten gizlemek istemediğiniz bir şeyiniz varsa, kullanmanız gereken özellik budur.

Son olarak, kaydırma aralığını, yani elemanın yapışkanlığın başladığı ve durduğu noktaları ayarlıyoruz. Bu noktaların her ikisi de tüm sayfanın yüzdeleri olarak temsil edilir. Örneğin, öğeniz üstte bulunan bir başlıksa, ziyaretçi biraz aşağı kaydırdıktan sonra yaklaşık %10-15 oranında yapışkan olmasını istersiniz.

Ardından, yolun yarısında (%45-55), başlığın hala görünür olmasına gerçekten gerek yoktur, çünkü bu noktada gereksizdir ve yalnızca yer israfına neden olur.

Başlangıç ​​ve bitiş noktaları, iki kaydırıcılı etkileşimli bir çubuk kullanılarak kolayca tanımlanır. Çubuğun hemen yanında yüzdeler görüntülenir, böylece kaydırıcıları ne kadar yukarı veya aşağı hareket ettirdiğinizi tahmin etmenize gerek kalmaz. Sayılar yeterli değilse, her zaman önizlemeye gidebilir ve ön uçtan nasıl göründüğünü ilk elden görebilirsiniz.

Gelişmiş Ayarlar

Gelişmiş ayarlar, öncelikle ele aldığımız ayarın istisnalarına odaklanır. Daha önce değindiğimiz ilk iki seçenek, öğenin yapışmayacağı bir ekranın boyutunu temsil eder. Altında öğenin varsayılan konumuna sahip olacağı en küçük boyutu ve yukarısında aynı şeyi yapacağı en büyük boyutu tanımlayacaksınız.

Genel kullanım için, bunların hepsi dört varsayılan boyutla görsel ayarlarda hemen hemen ele alınmıştır, ancak boyutlar üzerinde biraz daha fazla kontrole ihtiyacınız olduğunu düşünüyorsanız, buradan alabilirsiniz.

Bir push-up öğesi, yapışkan öğeler için zaten kullandığınız şekilde de atanabilir. Bunlar genellikle sosyal medya simgelerine sahip altbilgiler veya satırlardır. Bu özelliğin tek yaptığı, yapışkan eleman (genellikle üstte) ile itme elemanı (genellikle altta) arasındaki görünmez çizgiyi yukarı itmektir. Bunu kullanarak güzel bir efekt yaratabilir ve aynı zamanda ekranınızı daha az kalabalık hale getirebilirsiniz.

Son seçenek yine ekran boyutlarıyla değil, sitenizin bölümleriyle ilgili olarak hariç tutma ile ilgilidir. Yapıştırmak için belirlediğiniz öğenin nereye yapışmayacağını seçebilirsiniz. Bunlar belirli sayfalar veya gönderiler, tüm kategoriler, benzersiz etiketler veya gönderi türleri olabilir.

Siteniz çok çeşitliyse ve yalnızca bazı zamanlarda bir yapışkan öğeye ihtiyaç duyuluyorsa veya her sayfada gitmeyen birden çok yapışkan öğe kullanıyorsanız, bazı şeyleri açıp kapatmanıza olanak tanıyan bir seçeneğe sahip olmak iyidir. otomatik olarak.

Gelişmiş seçenekler – modlar

Az önce bahsedilen gelişmiş öğe ayarlarıyla karıştırılmaması için, gelişmiş seçenekler genel eklenti davranışına odaklanır. Çoğu kullanıcı bunları asla kullanmaz, ancak aykırı durumlar için değerli olduklarını kanıtlayabilirler.

Neye ihtiyacınız olduğuna bağlı olarak üç modu etkinleştirebilirsiniz.

Bunların dışında, eklenti hatalarını konsolda da kaydedebilirsiniz. WP Sticky, hemen hemen tüm güncel temalar ve eklentilerle sorunsuz bir şekilde çalışır, ancak herhangi bir sorunla karşılaşırsanız, siz veya görevi atadığınız biri, bunlara neyin sebep olduğu hakkında ek bilgi alabilir.

Çözüm

WP Sticky, işini fazla uğraşmadan son derece iyi yapan özel bir araçtır. Bu nedenle, yapışkan öğeler yapmak istiyorsanız, bunları sayfalarınızda özelleştirin ve düzenleyin, bunu hızlı ve kolay bir şekilde yapabilirsiniz.

Kullanıcı arayüzünün işlenme şekli nedeniyle yeni başlayanlara yönelik olsa da, biraz bilgi edindikten sonra bile getirileri azaltmadan güvenle kullanmaya devam edebilirsiniz.