WordPress'te Yapışkan Başlık Nasıl Yapılır?

Son on yılda, web sitesinde gezinmeye giderek artan bir vurgu yapıldı. Bu, geleneksel masaüstü arayüzüne kıyasla sınırlı gezinme seçeneklerine sahip akıllı telefonların yaygın kullanımıyla çakıştı. 2011'den bir site ile şimdi yapılmış bir site arasındaki karşılaştırmaya bakarsanız, web sitesi tasarımındaki fark barizdir.

Site düzenlerini yeniden yapılandırmada kullanılan ana yöntemlerden biri yapışkan öğelerdi. Uygun şekilde adlandırılmış bu öğeler, siz hareket ettiğinizde sayfanın kenarlıklarına yapışır, yani orijinal konumlarını korurlar (Excel'deki donmuş bölmeleri düşünün ve nasıl çalıştığı hakkında iyi bir fikriniz olur).

Üst, alt, sol ve sağ

Yapışkan öğeler genellikle menüler, başlıklar ve/veya durum çubukları için ayrılmıştır; bunlar, ziyaretçiye büyük bir esneklik sağlar çünkü o, geri dönmek zorunda kalmadan anında bir sayfadan diğerine geçebilir. Ayrıca, bunların tümü, başlangıçta, tüm öncül ile iyi çalışan, üst ve alt sayfa kenarlıklarına yerleştirilmiştir. Bir sayfanın ortasına yerleştirilmiş yapışkan bir öğenin etrafında bir sayfa oluşturmak son derece zor olurdu.

Nadiren aynı işlevlerle, sadece farklı bir düzende sol ve sağ sınırlarda da bulunabilirler. Bu durumlarda, imlecinizle üzerlerine gelene veya ekranda dokunana kadar gizlenirler.

Yer tasarrufu sağlayanlar

Yapışkan öğelerle ilgili ilginç olan şey, sayfada ve bir bütün olarak sitede size yer kazandırmasıdır – aslında tüm sayfaları değiştirmek için kullanılabilirler. Bunun nedeni, sitenin ana gövdesini olduğu gibi bırakmaları ve sayfanın birçok işlevini üstlenen kenarlıkları çok işlevli araçlar haline getirmeleridir. Bir an için ortalama site düzeninizi düşünün.

Üst kısım, belirlenmiş kategorilere göre sıralanmış sayfaları ve bir arama çubuğunu içeren menüler için ayrılmıştır. Bunlar, kaydırma sırasında bir çubuğun arkasına gizlenir ve gerektiğinde genişler. Durum böyle olmasaydı, yalnızca menü ağacı sayfanızın tüm üst bölümünü kaplar ve aşağı kaydırırken “takip etmez”, bu nedenle ziyaretçinizin yalnızca sayfalar arasında gezinmek için sürekli olarak yukarı ve aşağı hareket etmesi gerekirdi. .

Öte yandan, yapışkan bir alt öğe, tüm destek sayfasını oldukça kolay bir şekilde değiştirebilir - sadece e-postayı ve/veya numarayı bir sohbet düğmesiyle ekleyin ve hazırsınız. Ziyaretçilerinize sizinle iletişim kurmak için sürekli mevcut bir yol sağlıyorsunuz. Bir kez daha, pratik uygulama harika - bir müşteri ürün sayfalarınızda geziniyor, bir sorusu var ve sohbet düğmesine tıklayarak neye ihtiyacı olduğunu anında öğrenebiliyor.

Yapışkan öğeler oluşturma

WordPress hakkında konuştuğumuzda, aklınıza gelebilecek her şeyi yapmanın her zaman sayısız yolu vardır ve aynısı burada da geçerlidir. Varsayılan düzenleyicide manuel olarak yapışkan öğeler oluşturabilir veya kodlama ihtiyacını yeni başlayanlara uygun bir arayüzle değiştiren bir eklenti kullanabilirsiniz. Nihai sonuçlar arasındaki kontrast minimumdur, ancak oraya gitme şekliniz tüm farkı yaratır. Örneğimizde, açık ara en yaygın olarak yapıştırılan öğe oldukları için yapışkan başlıklar kullanacağız.

El ile yapışkan bir başlık oluşturma

WordPress'te manuel olarak yapışkan bir başlık oluşturmak, CSS kodunun kullanılmasını gerektirir. Çok teknik olmadan, CSS kodu, özelliklerini değiştirmek için bir sayfadaki hemen hemen her öğeye ekleyebileceğimiz bir şeydir. Manuel olarak kodlarken, bu bizim ana özelleştirme yöntemimizdir. CSS'yi kullanmak için öncelikle bir sayfada başlığın bulunması gerekir, bu nedenle ilk etapta özelleştirilecek bir şey olduğundan emin olun. WordPress bu işlemi basitleştirir, çünkü varsayılan düzenleyici bile bir tıklama ile ekleme seçeneği sunar.

Çalışmak için bir başlığınız olduğunda, konsola erişmeniz gerekir. Kontrol panelinizin sol tarafında bulunan görünüm bölümüne gidin, "özelleştir"i seçin ve ardından "ek CSS"ye tıklayın. Konsol şimdi açıkken, başlığınızı yapışkan hale getiren kodu girmeniz gerekir:

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

Yukarıdaki kod, genel olarak nasıl görünmesi gerektiğine dair bir örnektir, her şeyin sonu kesin bir komut değil. İlk satırın her zaman her siteye özel olduğunu unutmayın – sayfa düzenleyiciye geri dönmeden önce #website-navigation öğesini gezinme başlığınızın CSS sınıfı veya kimliği ile değiştirin.

Sayfa/önizleme sonrası penceresindeki işlevselliği kontrol ettikten sonra, yayınlayın ve kendinize yapışkan bir başlık elde edin. Bunun gibi bir başlık için CSS kodunu yalnızca "yapışkan" özelliğinden daha fazlasını kapsayacak şekilde genişletmek isteyeceğinizi belirtmek zorundayız - renkli yazı tipleri, boyut gibi başlığı görsel olarak vurgulayacak şeyler eklemeniz önerilir. girinti, vb. Sayfada kalıcı bir bağlantı olduğu için kolayca gözden kaçabilir, bu yüzden denemeli ve öne çıkarmalısınız.

Eklenti ile yapışkan bir başlık oluşturma

İşletmeleri veya blogları için bir web sitesine ihtiyaç duyanlar ile profesyonel görünen ve hissettiren bir şey oluşturma bilgisine sahip olmayanlar arasında büyük bir örtüşme var. Neyse ki WordPress ile hayatı herkes için kolaylaştıran pek çok eklenti var; Hedeflerinize ulaşmak için temel yazılım bilgisinden daha fazlasına sahip olmanıza neredeyse hiç gerek yok. WP Sticky, yukarıda ele aldığımız tüm kodlamayı, herkesin hızlı bir şekilde elde edebileceği kullanıcı dostu bir arayüzle değiştiren harika bir eklenti örneğidir. Aynı zamanda, manuel olarak yapışkan bir başlık oluştururken sahip olacağınız aynı miktarda işlevsellik sunar. Hadi parçalayalım.

eleman oluşturma

Tıpkı CSS kullanırken başlamak için bir başlığa sahip olmanız gerektiği gibi, daha sonra yapışkan niteliği ekleyeceğiniz bir öğe oluşturmanız gerekir.

Öğeyi ayırmanın iki farklı yolu vardır - gerekli alana atamayı girebilir veya öğeye tıklayarak bir önizleme penceresinden öğeyi seçebilirsiniz (belirtileri bulmakta sorun yaşıyorsanız bu harika çalışır) . Önizleme penceresinde öğenizi seçerken, ekranınızın üstünde değişen gösterimleri göreceksiniz.

Eklentiyle bir süre çalıştıktan sonra, görsel seçiciyi neredeyse hiç kullanmayacağınızı fark ettik. Tanımlamalar tanıdık hale gelecek, bu da onları basit ve manuel olarak girerek size zaman kazandıracak. Bu boyuta aşina olana kadar, görsel seçici en iyi arkadaşınız olacaktır. Sonuçta, her iki yöntem de sizi aynı yere götürecektir - ön uçta yapışkan bir başlık.

iyi görünmesini sağla

Tüm yapışkan öğeler eşit yaratılmamıştır ve sizinki de sıradan bir örnek olmamalıdır. Görsel ayarlar bölümü, yapışkan başlığınızı her şekilde benzersiz kılmak için birlikte çalışabileceğiniz çok sayıda özelleştirme seçeneği sağlayacaktır.

Hesaplamanız gereken ilk şey, öğenizin konumudur. Bir başlık oluşturduğumuz için bu kolay bir karar olacak - bunu sayfanın en üstüne yapıştırıyoruz. Konumlandırma, iyi bir başlığın anahtarıdır, bu nedenle sayfanın en üst kısmına sarılmasını istemiyorsanız, daha iyi bir uyum için birkaç piksel aşağı taşıyabilirsiniz. Ek olarak, siteniz kayıtlı kullanıcılar için bir yönetici araç çubuğu kullanıyorsa, eklentinin bunu otomatik olarak kontrol etmesini ve başlığı buna göre ayarlamasını sağlayabilirsiniz.

Potansiyel ziyaretçilerin internette gezinmek için pek çok yolu olduğundan, bir sitenin tamamen duyarlı olması gerekliliğine biraz değindik. Sitenizi tamamen uyarlanabilir hale getirmek için, başlığın hangi ekranlarda yapışkan olacağını seçebilirsiniz.

Genellikle, daha küçük ekranlar yapışkan başlıklardan en iyi şekilde yararlanırken, daha fazla gezinme seçeneğine sahip geleneksel masaüstlerinde kullanılan daha büyük ekranlar onlarsız gayet iyi. Boyutlar, tüm ana ekran boyutlarını kapsayan dört gruba ayrılmıştır.

Z-endeksi, ilk bakışta birçok kişinin kafasını karıştırabilecek isteğe bağlı bir ayardır. Bu ve isteğe bağlı bir özellik olması nedeniyle, çoğu kişi muhtemelen onu sallayacak ve görmezden gelecektir. Her şey yolunda giderse, muhtemelen arkana bile bakmayacaksın; ancak, ekranla ilgili sorunlar varsa, Z-endeksi potansiyel olarak hızlı bir çözüm olabilir. Esasen, bir sayfayı, üstteki yığınların, alttakilerden daha yüksek sayılara sahip olduğu yığınlar topluluğu olarak düşünün. Bu nedenle, yapışkan başlığınızı engelleyen bir şey varsa, Z-endeksini yükseltmeye çalışın (işe yarayan bir değer olarak 99999 önerilir)

"Yığınların en üstünde" yapışkan başlığınızla, aşağı kaydırırken efektler ekleyerek daha da yaratıcı olmanın zamanı geldi. Her iki seçenek de devre dışı bırakıldığında, başlık, orijinal sayfanın kesilmiş bir parçası gibi konumunu en üstte tutacaktır. Soldurma veya aşağı kaydırma gibi efektlerle daha fazla parlama ekleyebilirsiniz. Bu tür efektleri seçmeden önce sitenizin genel görsel tasarımını düşünün; ancak - çoğu zaman, daha azı daha fazladır.

Görsel efektler sadece harekete bağlı olanlarla sınırlı değildir. Ayrıca başlığın kendisini de özelleştirebilirsiniz (başlığı oluştururken yaptığınız hareketlere ek olarak). Opaklık, başlığın sayfadaki diğer içerikleri gizlemesini istemiyorsanız kullanışlıdır. Bunu yaklaşık %50'ye ayarlamak, hem başlığı hem de altındaki içeriği nispeten görünür hale getirecektir.

Opaklıktan daha kullanışlı bir özellik, kaydırma aralığını ayarlamaktır. Blogların genellikle sahip olduğu gibi çok uzun sayfalarınız varsa, sabit bir başlığa sahip olmanın artık bir anlam ifade etmediği yerlerde gezinmenin belirli bir noktası vardır. Bunlar, ziyaretçiniz yeterince aşağı kaydırdıktan sonra üstbilgiyi kaldırmanın iyi bir fikir olduğu zamanlardır.

Son olarak, yapışkan olduğunda başlığın arka plan rengini değiştirerek daha da öne çıkarma, ancak başlık artık yapışkan olmadığında orijinal değerlerine döndürme seçeneği vardır.

Görsel düzenlemenin en son kısmı, bizi yapışkan üstbilgiyi CSS aracılığıyla manuel olarak düzenlemeye geri getiriyor.

WP Sticky'yi başarılı bir şekilde kullanmak için önceden herhangi bir kodlama bilgisine sahip olmanız gerekmese de, kullanırsanız işinizi yükseltebilir. Özellik isteğe bağlıdır, bu nedenle onu kullanmak isteyip istemediğiniz ve ne ölçüde kullanacağınız tamamen size bağlıdır.

Gelişmiş seçenekler

Gelişmiş seçenekler bölümü, hemen hemen tamamen hariç tutma ile ilgilidir, yani, hangi durumlarda yapışkan bir başlığın yapışkan olmayı bırakacağı ve “orijinal programlamaya” geri döneceği.

Başlığın yapışkan olmadığı bir yerde ekran boyutunu manuel olarak ayarlamak, görsel ayarlar bölümünde size sunulan dört varsayılan boyutun üzerinde bir adımdır. Burada istediğiniz kadar spesifik olacaksınız, bu nedenle gelecekte önceden belirlenmiş boyutların hiçbirine uymayan bir vahşi ekran varsa, bunun için işe yarayacak kurallar koyabilirsiniz.

Bir başlığın yapışkan olmaması tamamen ekran boyutuyla değil, aynı zamanda sitenizdeki içerikle, daha spesifik olarak kategorizasyonla da ilgilidir. Başlığınızın belirlenmiş sayfalara, gönderilere ve gönderi türlerine, belirli kategorilere veya belirli etiketlere sahip içeriğe yapışmamasını sağlayabilirsiniz. Tüm bu koşullar, yapışkan başlık kullanıldığında ve kullanılmadığında mükemmel bir özet oluşturmak için karıştırılabilir ve eşleştirilebilir.

Yapışkan öğeyi (bizim durumumuzda, başlık) en başta seçmiş olmanıza benzer şekilde, sayfanın alt kısmında, başlığınızın yukarı itilmesini istediğiniz bir push-up öğesi de seçebilirsiniz. Bu, esasen başlığınızı, aralarında dolgu veya herhangi bir boşluk olmadan bu öğenin en sınırına hareket ettirecektir.

Her şeyi sona erdirmek için, bıktığınızda ve artık yapışkan öğenizi istemiyorsanız, onu tamamen silmek için her zaman son seçenek vardır. Bunun kalıcı bir işlem olduğu ve öğede (bu durumda başlık) yaptığınız tüm özelleştirmelerin kaybolacağı konusunda uyarılırsınız.

Özet

İşleri yapmanın hangi yolunun daha iyi olduğunu söylemek zor. CSS kullanarak kesinlikle daha fazla seçeneğiniz var, ancak bu genel olarak çok az insan için bir çözüm. Öte yandan, WP Sticky gibi bir eklenti, kullanım kolaylığını hala sağlam işlevsellik ile birleştirerek, yeni başlayanlar veya sıfırdan kodlama konusunda hala emin olmayanlar için mükemmel bir seçim olmasını sağlar. Muhtemelen yapışkan, çalışan bir başlık oluşturmanın en iyi yolu, ikincisinden başlamak ve kendinizi birincisine kadar çalışmaktır.

Yazar: Matej Milohnoja

Genel olarak oyunlar ve oyunlar hakkında yazardı, ancak o zamandan beri web geliştirme yazılımı hakkında test etmeye ve yazmaya geçti. Hâlâ eğlenmek için çok fazla oyun oynuyor.