WordPress blog sahiplerinin mobil cihaz uyumlu temalara yönelmesi ile mobil cihaz uyumlu eklentiler de önem kazanmaya başladı. Örneğin sitenizin web sürümünde kullanılan bir eklenti mobil cihazlar ile uyumsuz ise mobil cihaz kullanıcıları sitenize geldiklerinde bazı sorunlar yaşayabiliyorlar. Bahsettiğim olay bizzat benim başıma (spam engelleyen eklenti sayesinde) gelmiş ve sorunu çözmek için başka bir eklentiye geçmem gerekmişti. (Hatta kullanmaya başladığım yeni eklentiyi bu yazımda paylaşmıştım.)
DİKKAT! Yazı, 16 Mart 2013 tarihinde yayınlanmıştır ve erişim sağladığınız tarihte güncelliğini yitirmiş olabilir.
Tam bu sorunu hallettim diyordum ki bir başka uyum sorunu ile karşılaştım. Aslında çok önemli görünmeyen lightbox sorunu beni rahatsız ediyordu ve buna bir çözüm bulmalıydım.
Sorun Ne?
Sorun, web sürümünde siteye girdiğinizde lightbox efekti ile açılan resimlerin mobil cihazlarda telefon ekranından daha büyük bir şekilde açılmasıydı.
Çözüm olarak ne yaptım?
Önceki kullandığım eklentinin kodlarıyla oynayıp, başka eklentiler de deneyip hiçbirinden çözüm çıkaramayınca Auto Thickbox isimli eklentiye geçiş yaptım.
Eklenti en son geçen sene Ekim ayında güncellenmiş ve beta olarak mobil cihaz uyumu getirilmiş. Eklentiyi kurduktan sonra ayarlardan girip isterseniz mobil uyumu kapatabiliyor isterseniz de standart olarak açık bırakabiliyorsunuz.
Diyelim ki mobil uyumu açık bıraktınız, web sürümünde lightbox efekti ile açılan resimler, mobil cihazlardaki tarayıcıların pek çoğunda da telefon ekranına uyacak boyutta lightbox efekti ile açılıyorlar.
Ve diyelim ki eklentinin mobil lightbox özelliğinde hoşunuza gitmeyen birşey var, o zaman ayarlardan sadece mobil uyumu kapatarak, mobil görünümde resimlerin lightbox ile değil de yeni bir pencerede açılmasını sağlayabiliyorsunuz.
Eklentinin Kurulumu
Yazıyı şuanda okuyanların pek çoğunun WordPress’e nasıl eklenti kurulduğunu bildiğine eminim ama yinede amatör olanlar için anlatalım.. Eklentiyi bu bağlantıdan bilgisayarınıza indiriyor, ftp bağlantısı ile wp-content/plugins klasörüne (zipten çıkarıp sadece klasör halinde) yüklüyor ve admin panelinde Eklentiler menüsü altından aktif ediyorsunuz. Yada, admin panelinde Eklentiler menüsü altından Yeni ekle bağlantısı yardımı ile eklentiyi adından aratıyor ve blogunuza kurulumunu gerçekleştiriyorsunuz.
Eklentiyi aktif ettikten sonra Ayarlar menüsü altından Auto Tickbox Plus başlığına tıklayarak eklenti ayarlarına girebiliyor ve isterseniz bazı ayarlamalar yapabiliyorsunuz.
Örneğin, blog yazılarınıza eklediğiniz resimlerde target=”_blank” (yeni pencerede aç) etiketi kullandıysanız ve bu resimlerin de lightbox efekti ile açılmasını istiyorsanız “Links with target attribute (<a target=”_blank”>)” seçeneğinin yanına tik koyuyorsunuz. Aksi halde bu resimler lightbox değil yeni bir pencerede açılmaya devam ediyorlar.
Ve tabi mobil cihazlarda resimler lightbox efekti ile açılmasın yeni pencerede açılsın istiyorsanız Mobil support (beta) yazan bölümde “No ThickBox” seçeneğine tik koyuyorsunuz. Yok resimler mobil cihazlarda da efektli olsun diyorsanız bu kısmı “No Windows Margin” seçeneğinde bırakıyorsunuz.
Notlar:
1. Eklenti js dosyası kullandığı için mevcut temanızdaki başka bir js dosyası ile çakışıp çalışmayabilir. Böyle durumlarda kontrol için orijinal wordpress temasına bakın. Eklenti bu temada çalışıyor mu çalışmıyor mu?
2. Eklenti mobil cihazlarda tüm tarayıcılarda lightbox efekti yapamıyor. Örneğin Android cihazlarda Chrome tarayıcında lightbox çalışırken, Boat browser’da lightbox yerine resimler yeni pencerede açılıyor.
hocam benim bir sitem var mobilde resimler büyük görünüyor neden olabilir acaba ? sonfragmani.com yardım eder misiniz
@mert oğurcu; Deli Bal fragmanı yazısında mobilden baktım sorun göremedim. Resim küçük ekranda küçülüyor, lightbox ile sorunsuz açılıyor. Belki farklı cihaz veya ekran oranlarında sorun vardır.
https://i.hizliresim.com/pBD1M0.png şöyle görünüyor hocam
@mert oğurcu; Eski Android browser bazı mobil tasarımlarda böyle yapıyor ama aşağıdaki eklenti ile farklı ekranları test edin hepsinde sorun görürseniz css'de eksikler, hatalar olabilir. Dün konu içeriğine bakmıştım anasayfa da sorun var gibi duruyor.
https://www.nays.tr/web-tasarim-icin-chrome-mobil-tema-test-eklentisi.html
jet pack varsa sorun yok