Güzel fotoğraflar çekmek için zaman harcamak, ancak bunların temel bir galeride gösterilmesi ve hak ettikleri değeri görmemeleri sinir bozucu olabilir. Varsayılan WordPress galerisi genellikle düz hissettirir ve kullanıcıların daha büyük bir sürümünü görmek için tıklayıp uzaklaşmalarına neden olur.
Bir lightbox efekti, ziyaretçilerin sayfadan hiç ayrılmadan görüntülerinizi çarpıcı bir kaplama içinde görüntülemelerine izin vererek bunu çözer. Buradaki WPBeginner'da, profesyonel görünümlü galeriler oluşturmanın en kolay ve en güvenilir yolu olduğu için Envira Gallery'yi test sitelerimizde ve müşteri projelerimizde kullanıyoruz.
Bu makalede, kendi WordPress galerilerinize bir lightbox efekti eklemenin basit adımlarını size adım adım anlatacağız.
Bu eğitimde neler öğreneceğinize dair hızlı bir genel bakış.
- WordPress Galerilerine Işık Kutusu Efekti Neden Eklenir?
- Işık Kutusu Efektli WordPress Galerisi Nasıl Eklenir
- Alternatif: WordPress'te Görüntü Portföyleri ve Galeriler Oluşturmak İçin NextGen Gallery'yi Kullanın
- WordPress Işık Kutusu Galerileri Hakkında Sıkça Sorulan Sorular
WordPress Galerilerine Işık Kutusu Efekti Neden Eklenir?
WordPress web sitenizdeki galerilere duyarlı bir ışık kutusu efekti ekleyerek, görsellerinizi daha profesyonel bir şekilde sergileyebilirsiniz. Bu efekt, kullanıcılar görsellerinize tıkladığında web sitenizde açılır bir pencerede fotoğraflarınızı görüntülemenizi sağlar.
Lightbox'lar, ziyaretçileriniz için daha sürükleyici bir görüntüleme deneyimi oluşturmaya yardımcı olur ve hatta görsellerinizi sosyal medyada paylaşmalarını veya bilgisayarlarına indirmelerini kolaylaştırır.
Eğer bir fotoğrafçılık web siteniz varsa, ışık kutusu efekti eklemek, kullanıcıların yüksek çözünürlüklü resimlerinizi dikkat dağıtıcı olmayan bir modda görüntülemelerini sağlayarak etkileşimi artıracaktır.
Benzer şekilde, bir WooCommerce mağazanız varsa, ürün galerilerinize bir ışık kutusu efekti eklemek, müşterilerin ürünü yakından görmelerine ve bilinçli bir karar vermelerine yardımcı olabilir.
Bunu söyledikten sonra, adım adım bir WordPress görsel galerisini bir lightbox efektiyle nasıl kolayca ekleyeceğimize bakalım.
Işık Kutusu Efektli WordPress Galerisi Nasıl Eklenir
Bir ışık kutusu galerisi eklemenin en kolay yolu Envira Gallery kullanmaktır. Pazardaki en iyi WordPress galeri eklentisidir ve kendi projelerimizde kullandığımız eklentidir.
Sürükle ve bırak oluşturucu, profesyonel şablonlar ve sosyal paylaşım, filigranlama ve tabii ki ışık kutuları gibi güçlü özelliklerle birlikte gelir. Özelliklerinin tam bir dökümü için, tam Envira Gallery incelememizi okuyabilirsiniz.
Envira Gallery ayrıca süper hızlıdır ve sürükle-bırak oluşturucu, profesyonel galeri şablonları ve etiketler, ses, sosyal paylaşım ve ışık kutuları ekleme dahil birçok özelliğe sahiptir.
Öncelikle, Envira Gallery eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Ayrıntılı talimatlar için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.
Not: Envira Gallery'nin bu eğitim için kullanabileceğiniz ücretsiz bir eklentisi de bulunmaktadır. Ancak, ücretli plana yükseltme daha fazla özelliğe erişmenizi sağlayacaktır.
Etkinleştirdikten sonra, lisans anahtarını girmek için WordPress yönetici kenar çubuğundan Envira Gallery » Settings sayfasını ziyaret edin.
Bu bilgiyi Envira Gallery web sitesindeki hesabınızdan alabilirsiniz.
Bundan sonra, kendi yeni galerinizi oluşturmaya başlamak için WordPress kontrol panelinden Envira Gallery » Yeni Ekle sayfasını ziyaret edin.
Buradan, resim galerisi için bir başlık yazın. Ardından, resimleri yüklemek için ‘Bilgisayarınızdan Dosya Seçin’ düğmesine tıklayın. Galerimize medya kütüphanesi resimleri eklemek istiyorsanız, ‘Diğer Kaynaklardan Dosya Seçin’ düğmesine tıklayın.
Bu, galeri resimlerini yükleyebileceğiniz medya kütüphanesini başlatacaktır. Medya kütüphanesinden aynı anda yalnızca bir resim yükleyebileceğinizi unutmayın.
Bunu yaptıktan sonra, 'Şu Anda Galerinizde' bölümüne gidin. Burada, sol sütunda ayarlar bulunan galerinizin bir önizlemesini sağ tarafta göreceksiniz.
Şimdi, ekrandaki ‘Meta Verileri Düzenle’ istemini açmak için her görüntünün üzerindeki kurşun kalem simgesine tıklayın.
Buradan, tek tek görseller için başlığı, durumu, başlığı ve alt metni ekleyebilirsiniz.
Bundan sonra, ayarlarınızı saklamak için 'Meta Verileri Kaydet' düğmesine tıklamayı unutmayın.
Ardından, galeri düzeninizi istediğiniz gibi değiştirmek için sol sütundaki 'Yapılandırma' sekmesine geçin. Buradan bir düzen, sütun sayısı, resim boyutu, boyutlar, temalar ve daha fazlasını seçebilirsiniz.
Ayrıntılı talimatlar için, WordPress'te resim galerisi oluşturma konusundaki başlangıç kılavuzumuza bakın.
Bunu yaptıktan sonra, sol sütundan 'Lightbox' sekmesine geçin ve 'Lightbox'ı Etkinleştir?' seçeneğini işaretleyin.
Bundan sonra, ‘Galeri Işık Kutusu Teması’ açılır menüsünden bir ışık kutusu teması seçin. ‘Eski’ seçeneğini seçerseniz, ışık kutusu efekti istemi daha eski bir düzene sahip olacaktır.
'Temel (Koyu)' seçeneğini seçtiğinizde, ışık kutusu istemi düzeni olarak koyu bir tabana sahip olacaktır.
Ardından, ışık kutusu isteminde resim başlığını mı yoksa açıklamasını mı göstermek istediğinizi seçmelisiniz. İsterseniz ikisini birden veya hiçbirini göstermeyebilirsiniz.
Bunu yaptıktan sonra, açılır menüden ışık kutusu için resim boyutunu seçin.
Bundan sonra, ‘Galeri Oklarını Etkinleştir’ seçeneğini işaretleyin. Işık kutusu istemi artık izleyicilerin galerinizdeki farklı resimler arasında geçiş yapmak için kullanabilecekleri iki ok gösterecektir.
Ayrıca ışık kutunuz için geçiş efekti, açma/kapama efekti, ışık kutusu süper boyutlandırmayı etkinleştirme ve daha fazlası dahil olmak üzere diğer ayarları yapılandırabilirsiniz.
İşiniz bittiğinde, değişikliklerinizi kaydetmek için üstteki ‘Yayınla’ düğmesine tıklamayı unutmayın.
Görüntü galerinizi bir WordPress sayfasına/yazısına eklemek için sayfayı blok düzenleyicide açın.
Burada, blok menüsünü açmak için ekranın sol üst köşesindeki ekleme bloğu '+' düğmesine tıklamanız gerekir. Ardından, Envira Gallery bloğunu sayfaya/yazıya ekleyin.
Bundan sonra, bloktaki açılır menüden az önce oluşturduğunuz resim galerisini seçin. Son olarak, ayarlarınızı kaydetmek için 'Güncelle' veya 'Yayınla' düğmesine tıklayın.
Artık, resim galerisini görüntülemek için WordPress blogunuzu ziyaret edebilir ve ardından ışık kutusu efektini görmek için herhangi bir resme tıklayabilirsiniz.
Alternatif: WordPress'te Görüntü Portföyleri ve Galeriler Oluşturmak İçin NextGen Gallery'yi Kullanın
Envira Gallery, WordPress web sitenize lightbox görselleri eklemek için en iyi seçenektir. Alternatif olarak, WordPress sitenizde tamamen duyarlı ve görsel olarak hoş galeriler ve portföyler oluşturmak için NextGEN Gallery'yi kullanabilirsiniz.
NextGEN Gallery, geniş bir galeri türü yelpazesini desteklemesi, e-ticaretle ilgili özelliklere sahip olması ve filigranlar, ışık kutuları, resim yorumları ve daha fazlasını eklemenize olanak tanıması nedeniyle en iyi Envira Gallery alternatifidir.
Ek olarak, NextGEN Gallery, Stripe veya PayPal aracılığıyla çevrimiçi ödeme kabul etmenize olanak tanır, bu da görüntülerinizi çevrimiçi satmayı kolaylaştırır.
Profesyonel fotoğrafçılar, grafik tasarımcıları ve görsel sanatçılar için özelliklere sahip gelişmiş bir galeri eklentisidir, bu da onu piyasadaki en iyi WordPress portföy eklentilerinden biri yapar.
Ayrıntılı talimatlar için, WordPress sitenize nasıl portföy eklenir konulu eğitimimize bakmak isteyebilirsiniz.
WordPress Işık Kutusu Galerileri Hakkında Sıkça Sorulan Sorular
WordPress galerilerine bir lightbox efekti ekleme hakkında en sık aldığımız sorulardan bazılarına burada yanıtlar bulunmaktadır.
WordPress'te ışık kutusu efekti nedir?
Işık kutusu efekti, resimlerinizi ekranı dolduran bir katmanda görüntüleyen bir özelliktir. Sayfa içeriğinin geri kalanı arka planda kararır.
Bu, ziyaretçilerin yeni bir sayfaya gitmeden medyayı daha büyük bir boyutta görüntülemelerini sağlayarak daha odaklanmış bir kullanıcı deneyimi yaratır.
En iyi WordPress lightbox galeri eklentisi nedir?
Deneyimlerimize göre, Envira Gallery, lightbox galerileri oluşturmak için en iyi WordPress eklentisidir. Son derece yeni başlayan dostu, hızlı ve güçlü özelliklerle dolu.
Daha gelişmiş portföy ve kanıtlama özelliklerine ihtiyaç duyan profesyonel fotoğrafçılar için, NextGEN Gallery harika bir alternatiftir.
Eklenti olmadan varsayılan WordPress galerisine bir lightbox ekleyebilir miyim?
Standart WordPress galeri bloğunda yerleşik bir ışık kutusu özelliği yoktur. Özel kod kullanarak bir tane ekleyebilseniz de, bu CSS ve JavaScript bilgisi gerektirir.
Çoğu kullanıcı için, özel bir eklenti kullanmak, herhangi bir koda dokunmadan profesyonel bir sonuç elde etmenin en basit ve en güvenli yoludur.
Bir ışık kutusu galerisi web sitemi yavaşlatır mı?
Envira Gallery gibi iyi optimize edilmiş bir eklenti hız için tasarlanmıştır ve web sitenizi yavaşlatmamalıdır. Resimler için lazy loading gibi performans özellikleri kullanır.
Ancak, en hızlı yükleme sürelerini sağlamak için WordPress'e yüklemeden önce görüntülerinizi her zaman web için optimize etmelisiniz.
Umarım bu makale, ışık kutusu efektli bir WordPress galerisini nasıl kolayca ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca, WordPress'te temel resim düzenleme (kırpma, döndürme, ölçekleme, çevirme) nasıl yapılır konusundaki başlangıç kılavuzumuza ve blog yazılarınız için daha iyi resimler oluşturma konusundaki en iyi araçlar hakkındaki uzman seçimlerimize de bakmak isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Jiří Vaněk
Envira Gallery'yi önerdiğiniz için teşekkürler. Elementor ile web siteleri yapıyorum ve Elementor dışında sadece NextGen gallery'yi biliyordum, bu da gereksinimlerimi tam olarak karşılamıyor. Eklentiyi kesinlikle deneyeceğim ve muhtemelen kullandığım NextGen Gallery'nin yerine onu koyacağım.
Muhammad Danial Emran
Merhaba, ışık kutusu efektinin web sitemin hızını etkileyip etkilemeyeceğini sormak istiyorum.
WPBeginner Desteği
Sitenizi yavaşlatmamalıdır.
Yönetici
Ahmed Omar
gönderi için teşekkürler, ama burada bir soru var, fotoğraf galerisi eklemek için WordPress Blok Düzenleyici'yi kullanmak ile Envira'yı kullanmak arasında bir fark olur mu?
WPBeginner Desteği
Envira has more tools and customization options than the default gallery
Yönetici
E
Bu makaleyi ve bu web sitesini bulduğuma çok sevindim. Sizi şimdiden seviyorum!
Lynsey
Seni seviyorum! Küçük resimleri küçültmenin bir yolu var mı?
Yayın Kadrosu
Evet. Ayarlar > Ortam'a gidin. Küçük resim boyutunu düzenleyin. Ardından Regenerate thumbnails adlı bir eklenti indirin. Bu eklentiyi çalıştırın ve hepsi bu.
http://wordpress.org/extend/plugins/regenerate-thumbnails/
Yönetici
Sandeep Singh
Galeriye Işık Kutusu efekti ekleme önerisi için gerçekten minnettarım. Bu tür bir desteği gerçekten takdir ediyorum ve gelecekte de aynı desteği umuyorum.
Mike
Merhaba,
Bu harika, ancak bir sorum var, galeriyi slayt gösterisine dönüştürmek için bir eklenti veya başka bir şey var mı? Örneğin, ilk eklenen resim büyük görünür ve altında galerideki tüm resimlerin küçük resimleri bulunur ve büyük resmi ışık kutusu efekti yerine tıklayarak değiştirebilirsiniz.
Teşekkürler,
Mike
Yayın Kadrosu
Böyle bir eklentinin olup olmadığından emin değilim.
Yönetici
Renee
Fancybox eklentisinin bunu yaptığından oldukça eminim. Işık kutusunu ve küçük resimleri etkinleştirebilir veya devre dışı bırakabilirsiniz.
Emma Beatty Howells
Harika bir çözüm için teşekkürler. Bunların hepsinde yeniyim ve çevrimiçi fotoğraf galerilerini yönetmenin en kolay yolunu bulmaya çalışıyorum – bu onu basit ve zarif tutuyor! Faydalı bulduğum başka bir şey de fotoğrafları minimum zahmetle filigranlayan bir Uygulamaydı… ‘ImageBucket’.
Tiaan
Teşekkürler, bomba gibi çalışıyor!
Michael
Yeterince kolay görünüyor. Her resmin altında başlıkların olduğu bir yol var mı? Ayrıca, bir lightbox'a açıldığında, resimle birlikte lightbox'ta açıklayıcı metin olmasının bir yolu var mı?
Yayın Kadrosu
Bu eklenti aradığınızı yapabilmelidir: http://wordpress.org/extend/plugins/gallery-and-caption/
Yönetici
Alex
Web sitemin üst kısmında bir resim gösteren bir banner'ım var. Işık kutusu açıldığında, banner hala onun üzerinde görünüyor. Bunu durduracak bir kod veya bir şey var mı?
Teşekkürler
Alex
Yayın Kadrosu
Muhtemelen banner'ınızın çok yüksek bir z-index değerine sahip olmasından kaynaklanıyor. CSS'inizde bu değeri düşürün. Web'de z-index'i kapsayan pek çok CSS eğitimi bulunmaktadır.
Yönetici
JulieBozza
Bu gerçekten harika bir çözüm, teşekkür ederim! Yaptığımdan çok daha hızlı ve düzenli…
Ancak, ana küçük resim olarak hangi görüntünün görüneceğini seçmenin bir yolu var mı? Yani, bireysel gönderiyi açmadan önce 'akışta' görünen küçük resim.
Şimdiden teşekkürler!
wpbeginner
@JulieBozza Gönderinin küçük resmi, Öne Çıkan Görsel özelliği kullanılarak seçilir. Gönderi düzenleyicinizde, sağ tarafta, yayın düğmesinin altında Öne Çıkan görsel adlı bir kutu olmalıdır.
JulieBozza
@wpbeginner Merhaba! Cevap için teşekkürler. Ne yazık ki bunu yaptığımda, banner görüntüsü değişiyor ancak gönderideki küçük resimde hiçbir etkisi olmuyor. Twenty Eleven WordPress temasını kullanıyorum, bu yüzden belki de banner'a öncelik veriyordur.
wpbeginner
@JulieBozza Bu galeri küçük resim görüntülerini mi kastediyorsunuz???
JulieBozza
@wpbeginner LOL! Evet. Galeri gönderisini yukarıda açıklandığı gibi oluşturdum.
Gönderinin kendisini ziyaret etmenin yardımcı olup olmayacağını bilmiyorum, ancak URL'si burada. Sitenin geliştirilmekte olduğunu unutmayın!
http://rupertfyoung.com/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza Galeri olması gerektiği gibi çalışıyor.
http://rupertfyoung.com/category/gallery/ << Eğer buradaki küçük resimden bahsediyorsanız, bu sanırım Öne Çıkan Görseliniz veya ilk ek tarafından kontrol ediliyor. Genişliği düşük bir öne çıkan görsel yükleyin (küçük resim boyutu veya benzeri bir şey)… Ve başlık görselini kaplamayacaktır.
wpbeginner
@ukdazza Sorun bu eklentiden ziyade sizin sitenizle ilgili. Bu tür jQuery sorunları çok yaygındır. Bu eklentinin çalışmamasına neden olan başka bir jQuery var. Diğer jQuery kodunun konumlarını değiştirmeniz gerekecektir.
Bunlar gibi sorunlarla karşılaştığınızda bu bir deneme yanılma oyunudur.
ukdazza
Küçük resim galerileriyle ışık kutusu özellikleri oluşturmak için slickr flickr eklentisini kullandığımız bir sorun yaşıyorum. Ancak ışık kutusu hiç çalışmıyor. Bu eklentiyle ilgili bu tür bir sorun hakkında bulabildiğim çevrimiçi notlara göre, muhtemelen birden fazla ışık kutusu veya birden fazla jQuery çalışıyor - bu da düzgün çalışmamasına neden oluyor.
Lightbox çalışmıyor. Bir küçük resmi tıklarsanız, görsel tarayıcıda açılır, bu da berbat.
Fikri olan var mı? Siz veya birinin bir fikri olacağını umuyordum çünkü bu eklentiyi yüklemeye çalıştım ve hedef klasörün zaten dolu olduğunu söyledi.
TGA
Vay canına. ÇOK teşekkür ederim. NextGEN galerisini kullanıyordum, ancak müşterimin çeşitli boyutlarda küçük resimlere sahip galeriler oluşturmasına izin verilmiyordu. (Aptalca). Bu yüzden yerel galeriyi kullanmanın mümkün olacağını fark ettim, ancak o zaman Highslide, NextGEN ile yaptığı gibi bir küçük resim görüntüleyici oluşturmayacaktı. Demek istediğim, bu hayat kurtarıcı oldu! Mükemmel olmayabilir, ama bir çözüm ve şimdi projeye devam edebilirim!
wpbeginner
@TejSanusi✔ Bu eklenti, kullanıcıların aynı ışık kutusunun bir parçası olarak sonraki görüntüyü görüntülemesi için bir yol sunar.
TejSanusi✔
Tek bir küçük resimden etkinleştirilen bir ışık kutusu galerisi oluşturmanın bir yolu var mı? Kullanıcı küçük resme tıkladığında, bir dizi galeri resmiyle ışık kutusu oluşturulur mu?
cata
Makalede bahsedilen eklenti oldukça ilginç. Ben de iyi sonuçlarla şunu test ettim http://wordpress.org/extend/plugins/lightbox-gallery/
Chris
Harika yazı için teşekkürler. Bunu son derece faydalı buldum. Ancak bir sorum var. Yaklaşık 40 veya 50 resimden oluşan oldukça büyük bir galerim olsaydı ve sadece birinin gönderide görüntülenmesini isteseydim ve sonra biri tıkladığında tüm galeri arasında gezinebilseydi ne olurdu? Tüm 40 resmi gönderimde görüntülemek istemem ve bunun faydalı olacağını düşünüyorum.
Teşekkürler!
Keith Davis
Aferin çocuklar.
Wordpress'in bir galeri fonksiyonu olduğunu hiç bilmiyordum... siz her şeyi biliyor musunuz?
Belki bir gün bunu kullanırım.
jonathan perrodin
Hey, bunun için teşekkürler, bunu sitemde istiyordum ama basit bir iş yapan bir eklenti aramak için çok tembeldim. Bu mükemmeldi.
Mike Roberts
Ben bir sanatçı ve illüstratörüm ve WordPress'te bir resim galerisi görüntüleme seçeneklerinden hayal kırıklığına uğramaya devam ediyorum. Yakında parlak bir kodlayıcının yakarışımıma cevap vereceği umuduyla yaşıyorum!
Gretchen
WordPress'in yerel galeri işlevini kullanan bir lightbox eklentisi bulmanın ne kadar zor olduğunu fark etmemiştim! http://wordpress.org/extend/plugins/lightbox-plus/ eklentisini seçtim çünkü her gönderide/sayfada galeriye kısa kod aracılığıyla lightbox ayarını kullanıp kullanmayacağını belirleme yeteneği vardı. Aslında bazen ek sayfa sayfalarını kullanmayı seviyorum ve bunu ne zaman kullanacağımı seçmeme izin veren bir lightbox eklentisine ihtiyacım vardı. Başka birinin bu özelliğe sahip başka bir lightbox eklentisi bulup bulmadığını duymak isterim.
Bronson
Bilgi için teşekkürler.
Yerel galerilere ışık kutusu efektini uygulayabilmek harika, manuel olarak yeniden oluşturmak zorunda kalmadan.
Sonu
Bu nasıl çalışır? ve galeriye eklediğimiz her görsel için bir lightbox sınıfına ihtiyacımız var mı?
Yayın Kadrosu
Hayır, galerideki her resme ışık kutusu sınıfı eklemeniz gerekmez. Galeri içindeki tüm resimler için otomatik olarak yapar. Sınıf, galeriniz dışındaki diğer resimlere eklenmelidir.
Yönetici
Binoy
Buradaki sorun, gönderideki tüm görüntülerin galeride görünmesidir. Görüntü seçme seçenekleri var mı?
Yayın Kadrosu
Hayır, bu henüz mümkün değil.
Yönetici
Leo
Merhaba! Galeride gösterilecek resimleri seçmek için şu eklentiyi deneyin: Multiple Galleries, buradan bulabilirsiniz > http://goo.gl/kNFer
Hoşça kalın!
Yayın Kadrosu
Thanks for sharing this plugin. Updating the article to add this
Preston
Her görüntünün kendisiyle ilişkilendirilmiş bir tür wordpress numarası olmalıdır. Bu kodla galerideki görüntüleri hariç tutuyorum, umarım sizin için işe yarar:
[gallery link="file" exclude="Photo#, Photo#, Photo#"]