WordPress widget’ları çok benzer bir varsayılan stili paylaşma eğilimindedir. Bu stil, özellikle özel widget’lar söz konusu olduğunda, bazen temalar ve eklentiler tarafından ayarlanır. Widget’ların varsayılan stilinde değişiklik yapmak için özel stil kuralları ve hatta özel stilizasyon seçenekleri kullanılır. Fakat yalnızca sağlanan seçenekleri kullanarak widget’larınızın tasarımını tam olarak ihtiyaçlarınıza göre özelleştirmeniz pek olası değildir. Bu yüzden widget’larınızı şekillendirmenin bir yolu olarak özel stiller oluşturmaya bakabilirsiniz.
Widget’lar her WordPress web sitesinin çok önemli bir parçası olduğundan, özel widget stillerinin nasıl ekleneceğini anlamak son derece yararlıdır. Bu yazıda, her WordPress widget’ına nasıl benzersiz bir stil uygulayabileceğinizi ayrıntılı olarak açıklayacağız. Edindiğiniz bilgilerle web sitenizin çeşitli yönlerini iyileştirebilecek, daha fazla ziyaretçi çekebilecek ve WordPress web sitenizi bir bütün olarak büyütebileceksiniz. Hatta bu konunun gezinmesini kolaylaştırmak için konuyu daha küçük adımlara ayırdık:
-
Bir WordPress widget’ını inceleme
-
WordPress widget’larına manuel olarak özel stil ekleme
-
WordPress widget’larına kimlik veya sınıf eklemek için bir eklenti kullanma
-
Ek ipuçları
Başlamadan Önce
WordPress widget’larının stilizasyonunu değiştirmek, iki yoldan biri kullanılarak yapılabilir: kodla veya uygun bir WordPress eklentisiyle. Eklentilerde öncelik, sunduğu seçeneklerin (görsel düzenleme arayüzü gibi) maliyetlerinin dengelenmesinde yatmaktadır. Öte yandan, widget stilinizi ayarlamak için kod kullanmak, sonucu tercihlerinize göre uyarlamaya odaklanmanızı sağlar ve ihtiyacınız olan tüm kaynaklara zaten sahipsiniz.
Aşağıdaki bölümlerde, WordPress widget’larını şekillendirmek için CSS kodunun nasıl oluşturulacağını ve ekleneceğini ele alacağız. Oluşturduğumuz basit bir örnek üzerinden süreci anlatacağız. Ve sitenizdeki herhangi bir WordPress widget’ını stilize etmek için eklediğimiz ipuçlarını kullanabileceksiniz.
Dalmadan önce son bir tavsiye olarak widget’larınızı şekillendirmek için oluşturduğunuz herhangi bir kodu Görünüm > Özelleştir > Ek CSS altına yerleştirmenizi öneririz. Bunu söyledikten sonra başlayalım.
Bir WordPress widget’ını inceleme
Bir HTML öğesinin nasıl inceleneceğini bilmek, herhangi bir CSS kodu oluştururken önemli bir adımdır. Sayfanın yapısını daha iyi anlamanıza ve kodunuz için uygun CSS seçiciyi oluşturmanıza yardımcı olacaktır. Bir sayfanın nasıl düzgün bir şekilde inceleneceğini bilmek bu konu için hayati önem taşıdığından, önce nasıl yapıldığını açıklayacağız ve ardından kod parçacıklarına geçeceğiz.
Denetim süreci için bir vitrin olarak kullanmaya karar verdiğimiz pencere öğesi, etiket bulutu bileşenidir. Fakat diğer herhangi bir widget için de aynı adımları kullanabilirsiniz.
Bir widget’ı incelemek için, web sitenizde o widget’ı görüntüleyen sayfalardan birini açın ve widget’ın içeriğinde bir yere sağ tıklayın. Daha sonra beliren menüden İncele seçeneğini seçin. Bu durum tarayıcınızın geliştirici araçlarını açacaktır.
Geliştirici araçlarında, sayfanın HTML yapısını görüntüleyen Öğeler sekmesine otomatik olarak yerleştirileceksiniz. İncelemek için sağ tıkladığınız içeriğin tam olarak üzerinde bulunacaksınız.
Tam olarak stil vermek istediğiniz öğeyi bulana kadar HTML yapısında yukarı veya aşağı hareket edebilirsiniz. Bu süreçte size yardımcı olmak için, HTML yapısında üzerine geldiğiniz her öğe sayfada vurgulanacaktır. Hatta sayfada o öğenin boyutlarını, sahip olduğu dolgular, kenarlıklar ve kenar boşluklarıyla birlikte göreceksiniz.
Stilize etmek istediğiniz öğeyi bulduğunuzda, onu uygun CSS koduyla hedeflemeniz gerekir. CSS kodu aşağıdaki şekilde uygulanır:
css-selector {
// Insert CSS rules here
}
Bu durum hem o öğeyi hedeflemek için benzersiz bir CSS seçici hem de ona uygulamak istediğiniz CSS kurallarını bulmanız gerektiği anlamına gelir. CSS seçicinizi belirlemek için, öğenin kimliğine veya sınıflarına bakarak başlayabilirsiniz.
Örneğin yukarıda incelediğimiz etiket bulutu widget’ını stilize etmek için, ID tag_cloud-2’yi veya sınıf widget’ını ve widget_tag-cloud’u kullanabilirsiniz.
Bunun dışında, uygun CSS kurallarını ekleyebilmek için CSS’ye aşina olmanız gerekecektir. Aşağıdaki parçacıklarımızda, süreci göstermek için birkaç basit CSS kuralı göstereceğiz.
WordPress widget’larına manuel olarak özel stil ekleme
Genel olarak bir WordPress web sitesinin herhangi bir bölümüne özel stil eklemek, uygun bir CSS kodu oluşturarak yapılabilir. Buna WordPress widget’ları da dahildir. Bir widget’ın stilini değiştirmek, uygun bir CSS seçici bulmak için widget’ın HTML işaretlemesini incelemekle başlar. Daha sonra istediğiniz tasarımı elde etmenizi sağlayacak uygun bir dizi CSS kuralı uygulamak.
Bütün bunlar, iyi bir HTML ve CSS anlayışı gerektirir. Daha önceki aynı etiket bulutu widget’ını kullanmayı açıklayacağız.
Bu sürecin ilk adımı, parçacığın HTML işaretlemesini dikkatli bir şekilde incelemenizi gerektirir. Bunu yaptıktan sonra, widget’ın iki bölümden oluştuğunu fark ettik. İlki, qodef-widget-title sınıfına sahip olan
başlığıdır. İkincisi ise tagcloud sınıfı ile tag linklerini gösteren alttaki
kısmıdır. Her ikisi de kimliği tag_cloud-2 olan bir
etiketi ve iki sınıfla (widget ve widget_tag_cloud) sarmalanmıştır. Etiketleri olan iç kısma stiller uygulamak istemediğimiz için, sarma div’i ve başlığını hedefleyen CSS’yi yazdık.
Bu yazı için oluşturduğumuz CSS kodunu aşağıda görebilirsiniz.
#tag_cloud-2 {
text-align: center;
background-color: #f7f5ff;
padding: 20px;
}
#tag_cloud-2 .qodef-widget-title {
color: #000;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 15px !important;
}
Bu CSS iki bölüme ayrılabilir. İlk bölüm, tag_cloud-2 (#tag_cloud-2) kimliğiyle belirtilen tüm etiket bulutu pencere öğesi (onun sarma
etiketi) için geçerli olan kurallardır. İkinci kısım, widget’ın qodef-widget-title sınıfı (.qodef-widget-title) ile belirtilen iç başlığına uygulanan kurallardır. Stilizasyon kurallarını uygulamadan önce widget’ın görünümünün yanı sıra kimlik ve sınıf da aşağıda gösterilmiştir.
Bu örnekte, widget’larınızı nasıl şekillendirebileceğinizi göstermek için birkaç basit CSS kuralı kullandık. İçeriği etiket bulutu widget’ında ortaladık, ona açık tonlu bir arka plan rengi verdik ve her taraftaki dolguları ayarladık. Widget başlığı için rengini, yazı tipi boyutunu ve harfler arasındaki boşluğu değiştirecek CSS kurallarını ekledik. Hatta başlığı büyük yaptık ve başlığın altındaki kenar boşluğunu ayarladık. CSS’yi ekledikten sonra aşağıdaki sonucu aldık.
Widget stilini değiştirmek için CSS kodu oluşturmanın ardındaki süreci gördüğünüze göre, stilize etmeyi planladığınız widget için benzer bir şey oluşturmanız gerekecek. Örnek olarak verdiğimiz kod, kopyala-yapıştır için değil, bir rehber olarak oradadır. Widget(lar)ınızın HTML işaretlemesine karşılık gelen CSS seçicilerini bulmanız gerekir. Hatta WordPress web siteniz için istediğiniz widget tasarımını gerçekleştirmenize yardımcı olacak CSS kurallarını kullanmanız gerekir.
WordPress widget’larına kimlik veya sınıf eklemek için bir eklenti kullanma
Yukarıdaki yöntemi kullanarak WordPress widget’larınızı kolayca özelleştiremediyseniz, ki bu widget’ın HTML işaretlemesi net CSS seçicileri sunmuyorsa, alternatif yaklaşımları düşünmelisiniz.
Stil widget’ları için özel kod oluşturmanın bir yolu, widget işaretlemesine bir kimlik veya ek CSS sınıfları eklemektir. Bunu yapmak, bir CSS seçici seçme sürecini kolaylaştıracaktır. Bunu uygun bir WordPress eklentisi veya özel kod kullanarak gerçekleştirebilirsiniz. WordPress eklenti deposundan Widget CSS Classes eklentisini sergileyerek ilk önce birincisini ele alacağız.
Widget CSS Classes eklentisi, özellikle WordPress widget’larına CSS sınıfları eklemek için yapılmış hafif bir eklentidir. Bu sınıflar önceden tanımlanabilir (örneğin, bir pencere öğesi alanındaki ilk ve son parçacığı hedefleyen sınıflar) veya özel olanları ekleyebilirsiniz. Bu eklenti ayrıca widget’a ekleyebileceğiniz özel bir kimlik özelliği belirtmenize olanak tanır.
Herhangi bir karışıklığı önlemek için, Widget CSS Classes eklentisinin doğrudan widget’ları şekillendirmek için yapılmadığını vurgulamalıyız. Belirli bir widget’a CSS sınıfları veya bir kimlik ekledikten sonra, o widget’a stil vermek için yine de CSS kodunu oluşturmanız gerekecektir.
Fakat eklediğiniz sınıfları veya kimliği kullanabildiğinizde kodu oluşturmak daha kolay olacaktır. Bu yüzden widget’larını özelleştirmek isteyen ve HTML ve CSS’ye nispeten aşina olan WordPress kullanıcıları için mükemmel bir eklentidir. Şimdi Widget CSS Classes eklentisinin nasıl kullanıldığına bir göz atalım.
Eklentiyi yükledikten sonra, sizi Widget CSS Sınıfları Ayarları sekmesine yerleştirecek olan Ayarlar > Widget CSS Sınıfları’na gidin. Burada widget’larınıza CSS sınıfları ekleme seçeneklerini ayarlayabileceksiniz.
Bu makale için, hem özel bir CSS sınıfının hem de kimliğin nasıl ekleneceğini göstermek istediğimizden, Kimlik için Ek Alan Göster seçeneği dışında, seçeneklerin çoğunu varsayılan değerlerine ayarlı bıraktık. Seçenekleri de incelemeli ve ihtiyaçlarınıza göre size uygun olanları ayarlamalısınız. Bunu yaptıktan sonra, aşağıdaki Değişiklikleri Kaydet düğmesine tıklayın.
Daha sonra Görünüm > Widget’lar’a gidin ve widget alanından düzenlemek istediğiniz widget’ı bulun. Bu widget’ı açın ve eklenti tarafından eklenen CSS Kimliği ve CSS Sınıfları seçeneklerini bulun. Bunları kullanmak için kimliği ve sınıf adını ilgili alanlara girin ve widget’ı güncellemek için Kaydet düğmesine basın.
Bundan sonra, o widget’ı görüntüleyen bir sayfa açın ve inceleyin. Aşağıda gösterilene benzer bir sonuç görmelisiniz. Ekran görüntüsünde görüldüğü gibi, eklenti, parçacığın ayarlarında eklediğimiz kimliği ve CSS sınıfını, etiket bulutu parçacığının sarma
etiketine ekledi. Hatta parçacık numarası sınıfını ve parçacık çift/tek sınıf seçeneklerini etkin bırakmayı seçtiğimiz için, eklenti aynı
etiketine parçacık-çift ve parçacık-4 sınıflarını da ekledi.
Önceki örnekte kullandığımız sınıfları da görebilirsiniz (widget ve widget_tag_cloud). Fakat bazı temalar widget’lara özel sınıflar eklemeyi tercih ederken diğerleri bunu yapmadığından, kullandığınız temaya bağlıdır. Eklenti ile, seçtiğiniz ID veya CSS sınıflarını kullanarak widget’larınızı tutarlı bir şekilde hedeflemenize izin verdiği için bunun için endişelenmenize gerek yok.
Bu eklentiyi kullanırken ve CSS kodu oluştururken, ID ve CSS sınıfları arasındaki farkın farkında olmalısınız. Bir HTML öğesinin, tam olarak o öğeyi hedeflemek için kullanılan yalnızca bir kimliği olabilir. Öte yandan, bir HTML öğesinin çok sayıda CSS sınıfı olabilir ve bunlar, ilgili sınıfı paylaşan tüm öğeleri hedeflemek için kullanılır. Her ikisini de widget’ımıza eklerken, örneğimizde CSS’yi eklemek için yalnızca özel sınıfı kullanacağız. Artık ikisi arasındaki farkı bildiğinize göre, bunun yerine kimliğe CSS’nizi ne zaman uygulamanız gerektiğine karar verebilirsiniz.
.custom-tags {
background-color: #fff5f5;
padding: 15px 20px;
margin-bottom: 30px !important;
}
.custom-tags .qodef-widget-title {
color: #3F51B5;
font-size: 25px;
font-weight: 600;
}
Bu kod örneğinin yapısını inceleyelim. Etiket bulutu widget’ının arka plan rengini ve dolgu değerlerini ve bunun altındaki kenar boşluğunu ayarlar. Hatta widget başlığının rengini, yazı tipi boyutunu ve yazı tipi ağırlığını değiştirir. Aşağıda bu CSS kodunu girdikten sonra elde ettiğimiz sonucu görebilirsiniz.
Buradaki ilke, önceki örnekle aynıdır; bu bilgileri web sitenize uygun bir şekilde uygulamanız gerekir. Yani, belirli bir WordPress widget’ını kendi tarafınızda özelleştirmek için karşılaştırılabilir bir CSS kod parçacığı oluşturmanız gerekecek. CSS seçici olarak eklediğiniz CSS sınıfını veya kimliğini kullanabilir ve web sitenizin tasarımına en uygun CSS kurallarını uygulayabilirsiniz. Bunu söyledikten sonra, widget HTML işaretlemesinin nasıl oluşturulduğu ve Widget CSS Classes eklentisi sizin tarafınızdan çalışmazsa ne yapabileceğiniz konusunda daha ayrıntılı bilgi vermeye devam edelim.
Ek ipuçları
Daha önce belirttiğimiz gibi, bir parçacığın HTML yapısında görünen kimlik adı ve sınıf adları, temanız sayesinde var olur. Bir widget alanını kaydederken, diğer şeylerin yanı sıra, tema yazarının, o widget alanına yerleştirilmiş bir widget’ı saran HTML yapısını ve bunun başlığını çevreleyen HTML yapısını belirleme seçeneği vardır. Bu bir kullanılarak yapılır …
Bu yazı için oluşturduğumuz CSS kodunu aşağıda görebilirsiniz.
#tag_cloud-2 {
text-align: center;
background-color: #f7f5ff;
padding: 20px;
}
#tag_cloud-2 .qodef-widget-title {
color: #000;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 15px !important;
}
Bu CSS iki bölüme ayrılabilir. İlk bölüm, tag_cloud-2 (#tag_cloud-2) kimliğiyle belirtilen tüm etiket bulutu pencere öğesi (onun sarma
Bu örnekte, widget’larınızı nasıl şekillendirebileceğinizi göstermek için birkaç basit CSS kuralı kullandık. İçeriği etiket bulutu widget’ında ortaladık, ona açık tonlu bir arka plan rengi verdik ve her taraftaki dolguları ayarladık. Widget başlığı için rengini, yazı tipi boyutunu ve harfler arasındaki boşluğu değiştirecek CSS kurallarını ekledik. Hatta başlığı büyük yaptık ve başlığın altındaki kenar boşluğunu ayarladık. CSS’yi ekledikten sonra aşağıdaki sonucu aldık.
Widget stilini değiştirmek için CSS kodu oluşturmanın ardındaki süreci gördüğünüze göre, stilize etmeyi planladığınız widget için benzer bir şey oluşturmanız gerekecek. Örnek olarak verdiğimiz kod, kopyala-yapıştır için değil, bir rehber olarak oradadır. Widget(lar)ınızın HTML işaretlemesine karşılık gelen CSS seçicilerini bulmanız gerekir. Hatta WordPress web siteniz için istediğiniz widget tasarımını gerçekleştirmenize yardımcı olacak CSS kurallarını kullanmanız gerekir.
WordPress widget’larına kimlik veya sınıf eklemek için bir eklenti kullanma
Yukarıdaki yöntemi kullanarak WordPress widget’larınızı kolayca özelleştiremediyseniz, ki bu widget’ın HTML işaretlemesi net CSS seçicileri sunmuyorsa, alternatif yaklaşımları düşünmelisiniz.
Stil widget’ları için özel kod oluşturmanın bir yolu, widget işaretlemesine bir kimlik veya ek CSS sınıfları eklemektir. Bunu yapmak, bir CSS seçici seçme sürecini kolaylaştıracaktır. Bunu uygun bir WordPress eklentisi veya özel kod kullanarak gerçekleştirebilirsiniz. WordPress eklenti deposundan Widget CSS Classes eklentisini sergileyerek ilk önce birincisini ele alacağız.
Widget CSS Classes eklentisi, özellikle WordPress widget’larına CSS sınıfları eklemek için yapılmış hafif bir eklentidir. Bu sınıflar önceden tanımlanabilir (örneğin, bir pencere öğesi alanındaki ilk ve son parçacığı hedefleyen sınıflar) veya özel olanları ekleyebilirsiniz. Bu eklenti ayrıca widget’a ekleyebileceğiniz özel bir kimlik özelliği belirtmenize olanak tanır.
Herhangi bir karışıklığı önlemek için, Widget CSS Classes eklentisinin doğrudan widget’ları şekillendirmek için yapılmadığını vurgulamalıyız. Belirli bir widget’a CSS sınıfları veya bir kimlik ekledikten sonra, o widget’a stil vermek için yine de CSS kodunu oluşturmanız gerekecektir.
Fakat eklediğiniz sınıfları veya kimliği kullanabildiğinizde kodu oluşturmak daha kolay olacaktır. Bu yüzden widget’larını özelleştirmek isteyen ve HTML ve CSS’ye nispeten aşina olan WordPress kullanıcıları için mükemmel bir eklentidir. Şimdi Widget CSS Classes eklentisinin nasıl kullanıldığına bir göz atalım.
Eklentiyi yükledikten sonra, sizi Widget CSS Sınıfları Ayarları sekmesine yerleştirecek olan Ayarlar > Widget CSS Sınıfları’na gidin. Burada widget’larınıza CSS sınıfları ekleme seçeneklerini ayarlayabileceksiniz.
Bu makale için, hem özel bir CSS sınıfının hem de kimliğin nasıl ekleneceğini göstermek istediğimizden, Kimlik için Ek Alan Göster seçeneği dışında, seçeneklerin çoğunu varsayılan değerlerine ayarlı bıraktık. Seçenekleri de incelemeli ve ihtiyaçlarınıza göre size uygun olanları ayarlamalısınız. Bunu yaptıktan sonra, aşağıdaki Değişiklikleri Kaydet düğmesine tıklayın.
Daha sonra Görünüm > Widget’lar’a gidin ve widget alanından düzenlemek istediğiniz widget’ı bulun. Bu widget’ı açın ve eklenti tarafından eklenen CSS Kimliği ve CSS Sınıfları seçeneklerini bulun. Bunları kullanmak için kimliği ve sınıf adını ilgili alanlara girin ve widget’ı güncellemek için Kaydet düğmesine basın.
Bundan sonra, o widget’ı görüntüleyen bir sayfa açın ve inceleyin. Aşağıda gösterilene benzer bir sonuç görmelisiniz. Ekran görüntüsünde görüldüğü gibi, eklenti, parçacığın ayarlarında eklediğimiz kimliği ve CSS sınıfını, etiket bulutu parçacığının sarma
Önceki örnekte kullandığımız sınıfları da görebilirsiniz (widget ve widget_tag_cloud). Fakat bazı temalar widget’lara özel sınıflar eklemeyi tercih ederken diğerleri bunu yapmadığından, kullandığınız temaya bağlıdır. Eklenti ile, seçtiğiniz ID veya CSS sınıflarını kullanarak widget’larınızı tutarlı bir şekilde hedeflemenize izin verdiği için bunun için endişelenmenize gerek yok.
Bu eklentiyi kullanırken ve CSS kodu oluştururken, ID ve CSS sınıfları arasındaki farkın farkında olmalısınız. Bir HTML öğesinin, tam olarak o öğeyi hedeflemek için kullanılan yalnızca bir kimliği olabilir. Öte yandan, bir HTML öğesinin çok sayıda CSS sınıfı olabilir ve bunlar, ilgili sınıfı paylaşan tüm öğeleri hedeflemek için kullanılır. Her ikisini de widget’ımıza eklerken, örneğimizde CSS’yi eklemek için yalnızca özel sınıfı kullanacağız. Artık ikisi arasındaki farkı bildiğinize göre, bunun yerine kimliğe CSS’nizi ne zaman uygulamanız gerektiğine karar verebilirsiniz.
.custom-tags {
background-color: #fff5f5;
padding: 15px 20px;
margin-bottom: 30px !important;
}
.custom-tags .qodef-widget-title {
color: #3F51B5;
font-size: 25px;
font-weight: 600;
}
Bu kod örneğinin yapısını inceleyelim. Etiket bulutu widget’ının arka plan rengini ve dolgu değerlerini ve bunun altındaki kenar boşluğunu ayarlar. Hatta widget başlığının rengini, yazı tipi boyutunu ve yazı tipi ağırlığını değiştirir. Aşağıda bu CSS kodunu girdikten sonra elde ettiğimiz sonucu görebilirsiniz.
Buradaki ilke, önceki örnekle aynıdır; bu bilgileri web sitenize uygun bir şekilde uygulamanız gerekir. Yani, belirli bir WordPress widget’ını kendi tarafınızda özelleştirmek için karşılaştırılabilir bir CSS kod parçacığı oluşturmanız gerekecek. CSS seçici olarak eklediğiniz CSS sınıfını veya kimliğini kullanabilir ve web sitenizin tasarımına en uygun CSS kurallarını uygulayabilirsiniz. Bunu söyledikten sonra, widget HTML işaretlemesinin nasıl oluşturulduğu ve Widget CSS Classes eklentisi sizin tarafınızdan çalışmazsa ne yapabileceğiniz konusunda daha ayrıntılı bilgi vermeye devam edelim.
Ek ipuçları
Daha önce belirttiğimiz gibi, bir parçacığın HTML yapısında görünen kimlik adı ve sınıf adları, temanız sayesinde var olur. Bir widget alanını kaydederken, diğer şeylerin yanı sıra, tema yazarının, o widget alanına yerleştirilmiş bir widget’ı saran HTML yapısını ve bunun başlığını çevreleyen HTML yapısını belirleme seçeneği vardır. Bu bir kullanılarak yapılır …