WordPress sitenizin olması gerektiği gibi görünmesini sağlamak stresli olabilir. Küçük bir güncelleme veya hızlı bir CSS ayarı, bir düzeni sessizce bozabilir ve bunu genellikle bir ziyaretçi işaret edene kadar fark etmezsiniz.
Zor olan kısım, her sayfayı elle kontrol etmenin pratik olmamasıdır. Çok fazla zaman alır ve küçük değişiklikleri kaçırmak kolaydır. 🤦
Ve “görsel regresyon testi” kulağa teknik gelse de, kullanmak için geliştirici araçlarına ihtiyacınız yok. Manuel kontrol saatlerinden tasarruf etmenin ve utanç verici düzen sorunlarından kaçınmanın doğrudan bir yoludur.
Farklı araçları ve yöntemleri test ettikten sonra, herhangi bir kodlama veya teknik uzmanlık gerektirmeyen güvenilir bir seçenek buldum. Bu kılavuzda, WordPress sitenizde yalnızca birkaç basit adımda görsel regresyon testlerini nasıl çalıştıracağınızı göstereceğim.
Görsel Regresyon Testi Nedir?
Görsel regresyon testi, sitenizin tasarımının bir güncellemeden sonra beklenmedik bir şekilde değişip değişmediğini kontrol etmenin bir yoludur. Farklı görünen herhangi bir şeyi tespit etmek için sayfalarınızın öncesi ve sonrası anlık görüntülerini karşılaştırarak çalışır.
WordPress çekirdeğini her güncellediğinizde, bir eklenti yüklediğinizde, bir tema değiştirdiğinizde veya kodu ayarladığınızda, ön uçta bir şeylerin yerinden kayma ihtimali vardır — eksik bir düğme, bozuk bir düzen veya aniden yüklenmeyi durduran bir resim.
Sorun? Bu görsel hatalar genellikle bir ziyaretçi bir iletişim formu veya tasarım geri bildirim anketi aracılığıyla işaret edene kadar fark edilmez. O zamana kadar, sitenizin kullanıcı deneyimine verilen zarar zaten yapılmış olabilir.
Bu yüzden görsel regresyon testleri çalıştırmak çok yardımcı oluyor.
Süreç basittir: bir güncellemeden önce ve sonra sayfalarınızın anlık görüntülerini alın, ardından değişen herhangi bir şeyi tespit etmek için bunları karşılaştırın.
Ve bir hazırlık sitesinde (önerdiğim gibi) test yapıyorsanız, canlıya geçmeden önce görsel sorunları yakalamak için güncellemeleri güvenle yapabilir ve karşılaştırmalar çalıştırabilirsiniz.
Bu karşılaştırmaları manuel olarak çalıştırmak zorunda da değilsiniz.
VRTs, Percy veya BackstopJS gibi görsel regresyon testi araçlarıyla, ekran görüntüsü karşılaştırmalarını otomatikleştirebilir ve sitenizin farklı ekran boyutlarında nasıl göründüğünü kontrol edebilirsiniz — bu da masaüstü, tablet ve mobil cihazlarda düzen sorunlarını yakalamanıza yardımcı olur.
WordPress kullanıcıları için Görsel Gerileme Testi Neden Önemlidir?
Bir WordPress web sitesi yönetiyorsanız, görsel gerileme testi zaman kazandıran bir güvenlik ağıdır. Bir güncellemeden sonra her sayfayı tek tek tıklamak yerine, bu araç size neyin değiştiğinin görsel bir raporunu verir – ve düzeltmeniz gereken bir şey olup olmadığını gösterir.
Ajansların birden fazla WordPress sitesinde güncelleme yapması, serbest çalışanların müşteri web sitelerini yönetmesi veya ürün ve ödeme sayfalarının bozulmadığından emin olmak isteyen çevrimiçi mağaza sahipleri gibi birçok senaryoda özellikle yardımcı olur.
Kısacası, görsel regresyon testi sinir bozucu sürprizlerden kaçınmanıza, zamandan tasarruf etmenize ve WordPress sitenizin sorunsuz çalışmasını sağlamanıza yardımcı olur.
Bunu söyledikten sonra, WordPress'te görsel gerileme testini kolayca nasıl yapacağınızı göstereceğim. İşte ele alacağımız adımlara hızlı bir genel bakış:
- Adım 1: Görsel Regresyon Testi Eklentisini Yükleyin ve Etkinleştirin
- Adım 2: VRTs Eklenti Ayarlarını Yapılandırın
- Adım 3: Test Edilecek Yeni Sayfalar veya Yazılar Ekle
- Adım 4: Görsel Farklılıkları Kontrol Edin
- Adım 5: Gözden Geçirin ve Harekete Geçin
- SSS: WordPress'te Görsel Gerileme Testi Nasıl Çalıştırılır
- Sonraki Adımlar: WordPress Sitenizin Tasarımını İyileştirin
🧑💻 Profesyonel İpucu: Görsel gerileme testleri çalıştırmadan veya tasarım değişiklikleri yapmadan önce, bir hazırlık sitesi kullanmanızı şiddetle tavsiye ederim.
Bir hazırlık sitesi, canlı web sitenizin özel bir klonudur; burada kullanıcılarınızı etkilemeden güncellemeleri, eklenti değişikliklerini veya tasarım ince ayarlarını güvenle test edebilirsiniz. Bu, canlıya geçmeden önce düzen sorunlarını, eksik düğmeleri veya görsel hataları yakalamanıza yardımcı olur.
Kurulumu nasıl yapacağınızdan emin değil misiniz? Tüm ayrıntılar için bir WordPress staging sitesi oluşturma hakkındaki adım adım kılavuzumuza bakın.
Adım 1: Görsel Regresyon Testi Eklentisini Yükleyin ve Etkinleştirin
Bu eğitimde, VRTs eklentisini kullanacağım çünkü başlangıç dostu ve görsel gerileme testi için kullanımı kolaydır. Kaymış bir düzen, eksik bir düğme veya bir güncellemeden sonra bozuk bir öğe olsun, VRTs bunu erken fark etmenize yardımcı olur.
Nasıl çalıştığı şöyledir: Eklenti, seçtiğiniz sayfaların ekran görüntülerini alır. Ardından, karşılaştırmaları manuel olarak tetikleyebilir veya sitenizde bir eklentiyi güncellemek veya temanızı ayarlamak gibi değişiklikler yaptıktan sonra otomatik olarak çalışacak şekilde zamanlayabilirsiniz.
Eklenti daha sonra ‘önce’ ve ‘sonra’ ekran görüntülerini yan yana karşılaştırır ve herhangi bir görsel farkı vurgular.
Bu nedenle, her sayfayı manuel olarak kontrol etmek yerine, neyin değiştiğini ve herhangi bir şeyin yanlış görünüp görünmediğini gösteren hızlı bir görsel rapor alırsınız.
Eklentiyi yüklemek için öncelikle VRTs web sitesini ziyaret etmeniz ve 'Ücretsiz başlayın' düğmesine tıklayarak bir plana kaydolmanız gerekir.
Ardından planlardan birini seçebilirsiniz.
Ücretsiz plan, günde 3 sayfaya kadar tek bir alan üzerinde test etmenize ve günlük testler planlamanıza olanak tanır. Ücretli planlar daha fazla sayfayı test etmenize, manuel testler çalıştırmanıza ve WordPress çekirdek, eklenti ve tema güncellemelerinden sonra otomatik olarak görsel gerileme testleri çalıştırmanıza olanak tanır.
Kullanmak istediğiniz planın altındaki 'Şimdi satın al' veya 'Şimdi yükle' düğmesine tıklamanız yeterlidir.
Ardından, VRT'nin web sitesinde bir hesap için kaydolma ve ödeme bilgilerinizi ekleme talimatlarını izleyin.
Kaydolmayı tamamladıktan sonra, eklentiyi .zip dosyası olarak indirebileceğiniz VRTs kontrol panonuza yönlendirileceksiniz.
Ardından, Eklentiler » Eklenti Ekle sayfasına gidin ve 'Eklenti Yükle' düğmesine tıklayın. Buradan, az önce indirdiğiniz VRTs eklentisi .zip dosyasını seçebilirsiniz.
Eklenti yüklendikten sonra etkinleştirdiğinizden emin olun. Tam ayrıntılar için, bir WordPress eklentisinin nasıl kurulacağına dair rehberimize bakabilirsiniz.
Adım 2: VRTs Eklenti Ayarlarını Yapılandırın
Eklentiyi etkinleştirdikten sonra, görsel regresyon testlerinizin ne zaman çalışacağına karar verme zamanı.
WordPress yönetici menünüzdeki VRT'ler » Ayarlar bölümüne gidin.
Ayarlar sayfasının içinde, ‘Tetikleyiciler’ bölümüne gidin. Eklentiye ne zaman otomatik olarak anlık görüntüler alıp karşılaştıracağını söylediğiniz yer burasıdır.
Mevcut seçenekler şunlardır:
- Her 24 Saatte Bir Test Yapın (Ücretsiz) – Bu varsayılan ayardır. VRT'ler, seçtiğiniz gönderileri veya sayfaları günde bir kez görsel değişiklikler için otomatik olarak kontrol edecektir.
- WordPress ve eklenti güncellemelerinden sonra Testleri Çalıştırın (Pro) – Güncellemelerin neden olduğu düzen sorunlarını, tam da oldukları anda yakalamak için harikadır.
- En sevdiğiniz uygulamalarla testleri çalıştırın (Pro) – Webhook'lar aracılığıyla VRT'leri harici araçlar veya iş akışlarıyla bağlayın.
- İsteğe bağlı testleri çalıştırın (Pro) – Doğrudan WordPress panonuzdan ihtiyaç duyduğunuzda testleri manuel olarak tetikleyin.
İş akışınıza (veya lisansınıza) uyan tetikleyiciyi seçtikten sonra, sayfanın altındaki 'Değişiklikleri Kaydet' düğmesine tıklamanız yeterlidir.
Adım 3: Test Edilecek Yeni Sayfalar veya Yazılar Ekle
Eklenti ayarlarını yapılandırdıktan sonra, görsel gerileme testlerinize dahil etmek istediğiniz sayfa veya yazıları seçme zamanı.
Görsel testlerinizi yönetip çalıştıracağınız ‘Testler’ sekmesine geçelim. Buradan ‘Yeni Ekle’ düğmesine tıklayabilirsiniz. Bu, test edilecek gönderileri veya sayfaları seçmenize olanak tanır.
Açılan açılır pencerede, görsel regresyon testinize dahil etmek istediğiniz gönderileri veya sayfaları seçin.
Ardından, seçimlerinizi onaylamak için ‘Yeni Test Ekle’ye tıklayın.
VRTs eklentisi, seçilen her sayfanın ilk anlık görüntüsünü alacaktır. Bu, temel çizginiz olarak işlev görür — temelde gönderilerinizin veya sayfalarınızın şu anda nasıl göründüğünün bir “öncesi” sürümü.
Testinizi ayarladıktan sonra, ilk anlık görüntüyü yüklemek için sayfayı yenilemeniz gerektiğine dair bir talimat göreceksiniz. Devam edin ve yenileyin.
Yeniledikten sonra, test için eklediğiniz sayfa veya gönderinin anlık görüntüsüne bir bağlantı göreceksiniz.
Ayrıca, ‘Test Durumu’nun bir sonraki gün için otomatik olarak ‘Zamanlanmış’ olarak ayarlandığını göreceksiniz. Bunun nedeni, VRT'lerin ücretsiz sürümünün testleri 24 saatlik bir programa göre çalıştırmasıdır.
İlk ekran görüntüsünü kontrol etmek için ‘Ekran Görüntüsünü Görüntüle’ bağlantısına tıklayabilirsiniz.
Bu, yeni bir sekmede şöyle açılacaktır:
Ücretsiz sürümü kullanıyorsanız, testiniz bir sonraki güne planlanmıştır. Sitenizde çalışmaya devam edebilir ve karşılaştırma raporunu görmek için 24 saat sonra tekrar kontrol edebilirsiniz.
Ancak Pro sürümüne sahipseniz, sorunları hemen tespit etmek için hemen bir test çalıştırabilirsiniz.
Adım 4: Görsel Farklılıkları Kontrol Edin
Test tamamlandığında ve görsel değişiklikler algılandığında, VRT'ler » Çalıştırmalar sekmesinde bir bildirim görürsünüz.
Çalıştırmalar ekranında, değişiklikleri algılanan çalıştırmanın üzerine gelebilirsiniz.
Ardından, göründüğünde ‘Detayları Göster’ bağlantısına tıklayın.
Bir sonraki ekranda, sayfanızın yan yana karşılaştırmasını göreceksiniz; bu, önceki ve sonraki sürümleri gösterir.
Eklenti, görsel farklılıkları otomatik olarak vurgular, böylece şunlar gibi sorunları hızlıca tespit edebilirsiniz:
- Düzen Kaymaları ve Hizalanmamış Öğeler: Bir eklenti güncellemesi veya tema değişikliği sonrasında düğmelerin yerinden oynaması veya metnin etrafta zıplaması gibi tasarımınız değişirse, VRT'ler bunu işaretleyecektir.
- Eksik veya Bozuk Öğeler: Eksik bir resim, Eylem Çağrısı (CTA) düğmesi veya yerleşik bir form olsun, VRT'ler beklenmedik bir şekilde kaybolan her şeyi tespit etmeyi kolaylaştırır.
- Dinamik İçerik (Yanlış Pozitifler): Bazen araç, bir hata olmayan bir değişikliği işaretleyebilir. Bu genellikle resim kaydırıcıları, reklamlar veya sayfa her yüklendiğinde değişen dönen referanslar ile olur.
- Beklenmeyen İçerik Değişiklikleri: Eklenti ayrıca metin, bağlantı veya resimlerdeki değişiklikler konusunda sizi uyarır, böylece kullanıcılar yapmadan önce yetkisiz düzenlemeleri veya yayınlama hatalarını yakalayabilirsiniz.
Eski ve yeni sürümler arasında gezinmek ve tam değişiklikleri görsel olarak doğrulamak için ekranın ortasındaki sürükleme tutamacını kullanabilirsiniz.
Adım 5: Gözden Geçirin ve Harekete Geçin
Bir görsel regresyon testi çalıştırdıktan sonra, sonuçlara göre harekete geçin. Sonraki adımlarınız şunlardır:
- Sayfayı manuel olarak düzenleyin: Değişiklikler küçükse, düzeni ayarlamak, öğeleri taşımak veya eksik özellikleri geri eklemek gibi sayfayı düzenleyerek sorunları doğrudan düzeltebilirsiniz.
- Yedeğe Geri Dönün: Değişiklikler daha büyük veya düzeltilmesi daha zorsa, web sitesi yedeğinizi veya sürüm geçmişini kullanarak sayfayı önceki bir sürüme geri yükleyebilirsiniz. Bu, sitenizde sorun bırakmaktan kaçınmanıza yardımcı olur.
✋ Not: Yedekleme aracı önerisine ihtiyacınız varsa, Duplicator mükemmel bir seçenektir. Kullanımı kolaydır ve WordPress sitenizi yalnızca birkaç tıklamayla klonlamanıza olanak tanır.
İş web sitelerimizin bazıları yedeklemeler ve site geçişleri için Duplicator kullanıyor ve bunu denemenizi şiddetle tavsiye ederim. Eklenti hakkında daha fazla bilgi edinmek için tam Duplicator incelememizi okuyun.
Bununla birlikte, bir sorunu giderirseniz ancak test hala hatayı gösteriyorsa, aracın sitenizin en son sürümünü görmesi için WordPress önbelleğinizi temizlediğinizden emin olun.
SSS: WordPress'te Görsel Gerileme Testi Nasıl Çalıştırılır
Görsel regresyon testiyle yeni başlıyorsanız, yalnız değilsiniz. İşte WordPress kullanıcıları ve geliştiricilerinden gelen yaygın sorulara bazı hızlı yanıtlar.
Anlık görüntü testi ile görsel regresyon testi arasındaki fark nedir?
Anlık görüntü testi, genellikle alttaki kod çıktısının önceki bir kayıtlama ile eşleşip eşleşmediğini kontrol etmeyi ifade eden bir geliştirici terimidir. Görsel regresyon testi, düzen veya tasarım değişikliklerini yakalamak için ekran görüntülerini karşılaştırarak sitenizin insan gözüne nasıl göründüğünü kontrol eder.
WordPress'te görsel regresyon testi için en iyi araç hangisidir?
En kolay seçenek VRTs – Görsel Regresyon Testleri eklentisidir. Başlangıç dostudur, kontrol panelinizde çalışır ve herhangi bir kodlama gerektirmez. Ücretsiz sürüm çoğu kullanıcı için iyi çalışır.
Gerileme testini manuel olarak nasıl yapabilirim?
Manuel test, her şeyin hala doğru göründüğünden emin olmak için bir güncellemeden sonra önemli sayfalarınızda gezinmek anlamına gelir. Ana sayfanız, iletişim sayfanız, blog yazılarınız ve özel düzenler veya ödeme adımları gibi sayfaları kontrol etmek isteyeceksiniz. İşe yarar, ancak çok zaman alabilir.
Regresyon testini nasıl hızlandırırsınız?
Otomatikleştirin. VRTs – Visual Regression Tests gibi bir eklenti, önemli sayfalarınızın ekran görüntülerini yakalayabilir ve bunları sizin için karşılaştırabilir, böylece her şeyi elle kontrol etmek zorunda kalmazsınız.
Bir hazırlık sitesi kullanmak, canlı sitenizi güncellemeden önce sorunları tespit etmenize de yardımcı olur.
WordPress web sitesi tasarımını test etmenin en iyi yolları nelerdir?
Görsel regresyon aracı, bir güncellemeden sonra düzen değişikliklerini fark etmenin en kolay yollarından biridir. Ayrıca canlıya geçmeden önce hazırlık sitesinde güncellemeleri önizlemeye yardımcı olur.
Sayfalarınızın masaüstü, tablet ve mobil cihazlarda nasıl göründüğünü kontrol ettiğinizden emin olun. Tarayıcı geliştirici araçları, farklı ekran boyutlarını hızlı bir şekilde test etmeyi kolaylaştırır. Ve son olarak, gerçek kullanıcıların veya müşterilerin geri bildirimini almak, sizin gözden kaçırabileceğiniz ayrıntıları yakalamanıza yardımcı olabilir.
Sonraki Adımlar: WordPress Sitenizin Tasarımını İyileştirin
Umarım bu makale, WordPress'te görsel regresyon testi yapmayı öğrenmenize yardımcı olmuştur. Sitenizi geliştirmeye devam etmek istiyorsanız, şunları da beğenebilirsiniz:
- WordPress Web Sitesini Yeniden Tasarlama Kılavuzu
- Etkili Bir WordPress Web Sitesi İçin Temel Tasarım Öğeleri
- WordPress'te Web Sitesi Tasarımı Geri Bildirimi Nasıl Alınır
- WordPress'te Kullanıcı Deneyimini Nasıl İyileştirirsiniz
- Web Sitesi Ziyaretçilerine Sorulacak Kullanıcı Deneyimi Geri Bildirim Soruları
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.
Bir sorunuz veya öneriniz mi var? Tartışmayı başlatmak için lütfen bir yorum bırakın.