WordPress’te Eklenti Olmadan Lightbox Özelliği Ekleme
Lightbox’lar, web sayfalarında görüntülerin, videoların veya diğer içeriklerin daha büyük bir pencerede görüntülenmesine olanak tanıyan etkileşimli bir özelliktir. WordPress’te, eklentiler kullanmadan lightbox özelliğini kolayca ekleyebilirsiniz.
Lightbox’ın Avantajları
- Görüntüleri ve videoları daha büyük ve daha ayrıntılı olarak görüntüleme: Lightbox’lar, ziyaretçilerin resimlerin ve videoların daha net ve daha büyük bir sürümünü görmelerine olanak tanır.
- Kullanıcı deneyimini iyileştirme: Lightbox’lar, ziyaretçilerin sayfadan ayrılmadan içerikle etkileşime girmelerine olanak tanır, bu da kullanıcı deneyimini iyileştirir.
- SEO’yu geliştirme: Lightbox’lar, resimlerin ve videoların arama motorlarında daha iyi sıralanmasına yardımcı olan alternatif metin ve başlıklar eklemenize olanak tanır.
Eklenti Olmadan Lightbox Ekleme
WordPress’te eklenti olmadan lightbox eklemek için aşağıdaki adımları izleyin:
- Görüntü veya videoyu ekleyin: Görüntü veya videoyu WordPress medya kitaplığınıza yükleyin.
- Görüntü veya videoyu düzenleyin: Görüntü veya videoyu düzenlemek için medya kitaplığında üzerine tıklayın.
- Bağlantı sekmesine gidin: Sol kenar çubuğundaki “Bağlantı” sekmesine tıklayın.
- Bağlantı URL’sini girin: Görüntü veya videonun tam boyutlu sürümüne bağlantı URL’sini girin.
- Bağlantı hedefini ayarlayın: “Bağlantı Hedefi” açılır menüsünden “_blank” seçeneğini seçin. Bu, görüntünün veya videonun yeni bir sekmede açılmasını sağlayacaktır.
- Güncellemeyi tıklayın: Değişiklikleri kaydetmek için “Güncelle” düğmesine tıklayın.
Lightbox’ı Özelleştirme
Lightbox’ın görünümünü ve işlevselliğini özelleştirmek için aşağıdaki CSS kodunu temanızın stil sayfasına ekleyebilirsiniz:
“`css
/ Lightbox penceresinin genişliği ve yüksekliği /
.lightbox {
width: 800px;
height: 600px;
}
/ Lightbox başlığının yazı tipi ve rengi /
.lightbox-heading {
font-family: Arial, sans-serif;
color: #fff;
}
/ Lightbox kapatma düğmesinin konumu ve rengi /
.lightbox-close {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
}
“`