WordPress sitesinin mobil cihazlarda nasıl önizlenmesi
İster müşteriler için bir site tasarlayın, ister kendi WordPress sitenizi yönetin, halk için herhangi bir değişiklik yapmadan önce görünüşü ve mobil cihazlarda nasıl çalıştığını bulmak önemlidir. Sitenizi kontrol etmek için kullanılabilecek bir cep telefonunuz olabilir. Ancak bir dizüstü bilgisayarda veya masaüstünde çalışıyorsanız, cep telefonunuza geri dönmek rahatsız edicidir. Ve web siteniz cep telefonunuzda iyi görünse bile, orada birçok cep telefonu ve tablet var. Sizin için uygun göründüğü için, bu her ekran boyutunda, tarayıcıda ve farklı işletim sisteminde mükemmel çalışacağı anlamına gelmez.
Peki, mobil cihazlarda WordPress sitesi önizlemesini tam olarak nasıl gördünüz? Bu kılavuzda, bilgisayarınızdan ayrılmadan sitenizi hücresel olarak test etmek için bazı kolay yöntemleri tartışacağız. Sitenizin hücresel sürümünü test etmek neden bu kadar önemli? Hücresel cihazlar, birkaç yıl önce web’i keşfetmenin ana yöntemi olarak masaüstü bilgisayarları devralır. Hücresel cihazlar, 2021’in ilk çeyreğinde küresel web trafiğinin% 54,8’ine katkıda bulundu ve cep telefonları ve tabletler geçen yıl dünya çapında% 57,37 pazar payı aldı. Bazı küresel bölgelerde, hücresel kullanım, masaüstlerinin çok daha büyük marjlı kullanımını kapsar. Örneğin, Hindistan’da cep telefonları% 77’den fazla pazar payına sahiptir.
Hücresel İnternet’in artan kullanımına yanıt veren Google, hücresel üzerinde iyi kullanıcı deneyimi sağlamayan siteleri cezalandırmaya başladı. Son birkaç yılda, bir arama deneyimini hücresel kullanıcılar için daha iyi hale getirmek için tasarlanmış bir dizi algoritma güncellemesi olmuştur. 2015 “MobileGeddon” güncellemesi en serttir, çünkü Google ilk hücresel modele geçiyor. Bir WordPress kullanıcısı olarak, hücresel duyarlı bir tema seçmek, sitenizin iyi görünmesini ve hücresel olarak iyi çalışmasını sağlamak için ilk adımdır. Ancak bir blok düzenleyici ile kullanıcılar, ayrı sayfalar biçimlendirme üzerinde öncekinden daha fazla kontrole sahiptir. Bu nedenle, temalar veya eklentiler geliştirmeseniz bile, her yeni içerik eklediğinizde, sitenizin mobil cihazlarda görünümünü kontrol etmek önemlidir. veya Elementor Yeni bir sayfa düzeni oluşturmak veya sitenize içerik eklemek için.
Yöntem 1: Varsayılan WordPress hücresel birincilini kullanma
Yöntem 2: Chrome’da geliştirici ekranını kullanma
Yöntem 3: Üçüncü taraf cihaz simülatörü veya test hizmeti kullanma
Yöntem 1: Varsayılan WordPress Hücresel Önizlemesini kullanarak, yayınlamadan önce WordPress yayınlarınızı ve sayfalarınızı her zaman görebilirsiniz. Ancak sitenizin önizlemesini hücresel olarak da görebileceğinizi fark ediyor musunuz?
WordPress’te hücresel önizlemelere erişebileceğiniz iki yer vardır:
Post ve sayfalardan editörlerden (her zaman doğru değil)
WordPress ayarından
WordPress Editor Önizleme/Sayfa Önce Gönderi Düzenleyicisi ve Çalışma Sayfalarında Hücresel Önizlemenin Nasıl Olduğunu Bakalım. “Yayınla” veya “Güncelleme” düğmesinin yanındaki “Pratinuki” düğmesini tıklayın. Görünen açılır menüsünde tıklamadan önce “Tablet” veya “Hücresel” i seçin. Bu hemen sayfa düzenleyicisinin boyutunu ayarlar. Bununla birlikte, bu, içeriğinizin görünümü hakkında çok kaba ve hazır bir tahmindir ve özellikle harici olarak yüklenen özel bir blok veya CSS kullanıyorsanız, çok doğru olmayabilir.
Bu örnekte, editörün yalnızca daha küçük ekrana uyacak şekilde bloğun boyutunu değiştirdiğini ve metni sardığını görebilirsiniz.
Dersler: Posta ve sayfa editörlerinde mobil önizlemelere inanmayın. Adil olmak gerekirse, bu, 2020’nin ortalarında piyasaya sürülen WordPress 5.5’ten beri oldukça yeni ve yeni bir özelliktir. Umarım, mobil sayfalar gelecekte geliştirilecektir. WordPress’in WordPress önizlemesi, WordPress Customerer’daki önizleme daha mı iyi? Haydi bakalım. WordPress Hücresel Önizlemeye erişmek için, görünümden> WordPress kontrol panelinizde ayarlayın. Bu, sitenizin görüntülenmesini görüntüleyecek ve görünümlerini gerçek zamanlı olarak değiştirme tarzında yaptığınız değişikliklerin nasıl yaptığınızı görmenizi sağlar. Sitenizdeki herhangi bir sayfaya gidebilir ve Sitenin doğrudan sürümü gibi yukarı ve aşağı kaydırabilirsiniz. Sitenizin görünümünü farklı bir ekran boyutunda görmek için, ayarlama menüsünün altında bir simge kullanın. Ekran cihazı arasında. Standart, ortada tabletler ve sağda akıllı telefonlar bulunan masaüstü.
Bu, Sitenizin hücresel sürümünü görmenin en kolay ve en hızlı yoludur, çünkü WordPress kontrol panelinde ve birkaç tıklamayla erişilebilir, ancak bu temelde sadece tarayıcınızın boyutunu değiştirerek size aynı görünümü verir. pencere. Bu, web sitenizin her mobil cihazda nasıl görüntüleneceğini ve davranacağını tam olarak taklit etmez. Ayrıca sitenizi yalnızca üç farklı ekran genişliğinde görmenizi sağlar. Hücresel cihazlar çeşitli boyutlar ve ekran çözünürlüğü ile birlikte gelir. WordPress Core Development ekibinin özellikleri için orijinal teklif tarafından belirtildiği gibi, “varsayılan olarak yalnızca üç seçenek mevcuttur ve kasten belirsizdir. Belirli bir cihaz gibi görünür yerine, sitenin portre odaklı bir cihaza benzeyen bir cihaza veya cep telefonları için kaba boyutlu bir cihaza benzediğini anlamaktır. ” Ayrıca, WordPress ayarlamaları yalnızca onu destekleyen tema için kullanılabilir. Bu, ayarlamalarla çalışmayan temayı kullanırsanız, sitenizin önizlemesini hücresel olarak görmek için bu yöntemi kullanamayacağınız anlamına gelir. Elementor, görsel besteci vb. Birçoğu, sitenizin mobil sürümünü görmek ve farklı ekran boyutlarında nasıl duyarlı tasarımın görüldüğünü görmek için kendi araçlarıyla birlikte gelir. Mobil cihazlar için WordPress sitenizi nasıl düzenleyeceğinizi ve görüntüleyeceğinizi öğrenmek için kullandığınız üreticinin kullanıcı kılavuzuna bakın. Yöntem 2: Chrome’da bir geliştirici ekranı kullanarak birkaç tarayıcı varsayılan bir cihaz simülatörü bulunur. Chrome en popüler tarayıcılardan biridir ve sitenizin önizlemesini birkaç farklı cihazda ve farklı çözünürlüklerde görmek için kullanabilirsiniz.
Krom cihazların görünümü, WordPress hücresel önizlemesinden çok daha karmaşıktır. Popüler cihazlar arasında geçiş yapabilmenin yanı sıra, ekranı büyütürken veya çevirirken sitenizin görünümünü de görebilirsiniz ve hatta hücresel internet bağlantılarını taklit eder. Bununla birlikte, bu size varsayılan WordPress hücresel önizlemesini kullanmaktan daha fazla önizleme seçeneği sunsa da, bu hala sitenizin görünümü hakkında bir tahmindir. Önemli olan, sitenizin sadece Chrome’daki görünümünün bir resmini alabilirsiniz. Birçok mobil cihaz farklı tarayıcı kullanır ve tek başına krom üzerinde test yeterli olmayabilir. Ancak bu, web sitenizin nasıl görünür olduğunu test etmenin ve çeşitli boyutlarda çalışmanın oldukça hızlı ve kolay bir yoludur ve bu size büyük sorunları hatırlatabilir. Chrome’u “Cihaz Modu” nda kullanmak için menüde bkz. Bkz. Geliştirici> Geliştirici. Bu, tarayıcı ekranınızı bir tarafta web siteniz ve diğer tarafta kod müfettişi ve öğeleri ile ikiye ayıracaktır. Geliştiricinin üst kısmındaki cep telefonu ve tablet gibi görünen küçük simgeyi tıklayın. Bu, tarayıcı ekranınızın ekran boyutunu değiştirecektir, böylece sitenizin görünümünü daha düşük bir çözünürlüğe görebilirsiniz. Bu, tarayıcı ekranınızın üstüne ek araçlar ekleyecektir. Bunu simüle edilmiş cihazı değiştirmek, ekran çözünürlüğünü manuel olarak ayarlamak, yakınlaştırmayı ayarlamak, cihazın dönüşünü değiştirmek ve yükleme sayfasının nasıl etkilendiğini görmek için kısıtlama seviyesini ayarlayabilirsiniz. Yöntem 3: Üçüncü bir -Party cihaz simülatörü veya test hizmeti kullanmak, WordPress geliştiricilerinin web sitelerini, temaları ve eklentileri iyice geliştirdikleri test etmek için çok önemlidir. Bu tür testler için emülatörlerin veya cihaz simülatörlerinin kullanımı çok önemlidir. Emülatörler cihazın donanımını ve yazılımını çoğaltırken, simülatör yalnızca işletim sistemini ve kullanıcı arayüzünü simüle eder. Emülatörün hazırlanması ve çalıştırılması karmaşık olabilir ve yavaş koşma eğilimindedir. Neyse ki, öncelikle uygulamaları ve oyunları test etmek için kullanılırlar ve web sitelerini test etmek için gerekli değildir. Daha önce, testi çalıştırmak için emülatör yazılımını bilgisayarınıza yüklemelisiniz. Şimdi çok daha kolay, çünkü Cloud’da çevrimiçi çalışan bazı hizmetler var. Bu, WordPress sitenizi istediğiniz tüm cihazlarda test edebileceğiniz, herhangi bir tarayıcı çalıştırabileceğiniz anlamına gelir. Deneyebileceğiniz bazı hizmetler şunları içerir: Mobilmoxie – 50’den fazla cep telefonunda web sitelerini ve hücresel arama sonuçlarını test etmenizi sağlar. Bu hizmeti ücretsiz olarak kullanabilir veya sınırsız doğrudan test için ayda 29 $ için kayıt yaptırabilirsiniz.
Gerçek zamanlı hata ayıklama araçlarına sahip birkaç cihazda binlerce tarayıcı ve işletim sisteminde önizleme sitelerine sahip Lambdatest-Cloud tabanlı test platformu. Ücretsiz paket ayda 60 dakikalık test içerir ve ücretli paketler ayda 15 $ ‘dan başlar.
Browserstack – Bu aslında bir simülatör değil, web sitenizi bulut altyapısında 2.000’den fazla tarayıcıda ve gerçek cihazlarda test etmenizi sağlayan bir hizmet.Bu hizmet ayda 39 $ değerinde, ancak ücretsiz bir deneme var. Sitenizi hücresel için optimize edildiğinden emin olmak için denetleyin ve test edin, yukarıdaki yöntemlerden biri sitenizin mobil cihazlarda görünümünü görmenizi sağlayacaktır.Bununla birlikte, hücresel kullanıcılar için yapabileceğiniz başka iyileştirmeler olup olmadığını görmek için birkaç test daha çalıştırmak isteyebilirsiniz.Google mobil dostu test Bu basit çevrimiçi araç, herhangi bir URL girmenize ve URL’nin “hücresel dostu” olarak kabul edilip edilmediğini size bildirmenize olanak tanır.Bu aracı kullanmak için https://search.google.com/test/mobile-friently’yi açın ve test etmek istediğiniz siteye sayfa URL’sini girin.Biraz şansla, şöyle görünen bir yanıt alacaksınız:
Gördüğünüz gibi, bu aynı zamanda sitenizin mobil cihazlarda görünümünün pratik önizlemesini de sunar. Bu sadece bir ekran görüntüsü olmasına rağmen, bu büyük sorunlar olup olmadığını hatırlatabilir. Sorunlar veya yükleme sorunları varsa, sayfanızı nasıl artıracağınıza dair tüm ayrıntıları ve önerileri görebilirsiniz. Not: “Yeşil Hücresel Sayfalar”, Google’dan bir onay mührü verildiği ve sitenizin hücresel için tamamen optimize edildiği anlamına gelmez. Sadece okunamayan veya hücresel kullanıcılar için kullanılamayan büyük bir sorun olmadığına ikna eder. Insight Google PagePeed PagePeed Insights, Google’dan, sitenizin hız için ne kadar optimal olduğuna bağlı olarak size 100 puan verecek başka bir ücretsiz araçtır. Hücresel ve masaüstü arasında geçiş yapabilirsiniz (her biri için bir puan alacaksınız) ve bu araç verecektir Her biri için tahmini zaman tasarrufu ile birlikte sitenizi hızlandırmak için yapabileceğiniz şeyleri listeliyorsunuz. Mobisiap Mobiready, web sitenizde hücresel hazırlık testlerini çalıştıracak ve size ne kadar iyi çalıştığı hakkında bir rapor verecek ücretsiz bir araçtır. Sitenizi rakiplerinizle karşılaştırabilir ve ayrıca hücresel kullanıcılar için sitenizi geliştirmek için atabileceğiniz adımların bir analizini ve önerilerini alabilirsiniz. WordPress Sitenizi Nasıl Dostu Kilitle WordPress kullanıyorsanız, hücresel dostu sitelere sahip olmak için iyi bir başlangıç yapmanız gerekir. WordPress, sitenizin yıllarca mobil cihazlarda iyi çalıştığından emin olmak için varsayılan bir aracı vardı. Yine de, WordPress sitenizin mobil cihazlardaki kullanıcılara harika bir deneyim sunmasını sağlamak için atmanız gereken birkaç adım vardır. 1. Duyarlı WordPress temalarını kullanın Modern güncellenmiş temaları düzenli olarak kullanırsanız, burada iyi olabilirsiniz. Bununla birlikte, birkaç yaşında bir tema kullanıyorsanız, temanın hücresel duyarlılığı için yapılıp yapılmadığını kontrol etmelisiniz. Web siteniz daha küçük bir boyutta okumayı kolaylaştırmak için kendini yeniden biçimlendirmiyorsa, en son WordPress Core sürümünüzü ve temanızı kullanıp kullanmadığınızı kontrol edin. Güncelleme yardımcı olmazsa, daha modern ve hücresel bir WordPress temasına geçmeyi düşünmelisiniz. 2. Eklentinizin, çoğu eklentinin Sitenizin Hücreseldeki görünümünü etkilemeyeceğinden de duyarlı olduğundan emin olun. Ancak sitenize herhangi bir görsel öğe eklerse, küçük ekran boyutlarında iyi çalışıp çalışmadıklarını kontrol etmeniz gerekir. Bir kez daha, modern eklentiler, mobil cihazlarda ve yüksek çözünürlükte iyi çalışacak şekilde tasarlanmalıdır.Ancak bu, sitenizi başlatmadan önce kontrol etmeniz gereken bir şey olmalıdır.Eklentiler için işlevsellik çok önemlidir.Örneğin, sitenize bir form veya widget eklerse, hücreselde gezinmenin ve kullanılmasının kolay olduğundan emin olun.3. Pop-up mobil cihazlardaki açılır pencereleri devre dışı bırakmak masaüstü veya dizüstü bilgisayarlardaki kullanıcılara müdahale edebilir, ancak sitenizi hücresel kullanıcılar tarafından tamamen kullanılamaz hale getirebilir. Kaynak: HTTPS:
//developers.google.com/search/blog/2016/08/helping-users-usy-access-concent-on, tüm ekranı karşılayan pop-up’ları tetiklemek yerine, hücresel kullanıcılar için tamamen devre dışı bırakılmalıdır. Google, altta yatan içeriği gizleyen yıkıcı bir pop-up’a sahip olduğu için siteyi cezalandırmaya başladı. Yani en iyisi tamamen bundan kaçınmaktır. Veya sadece küçük bir ekran alanı kullanan afişlere geçin. 4. Görüntü ve video ölçeğinin doğru şekilde ve yeniden boyutlandırılabileceğinden emin olun ve medya ve medya galerilerinin küçük ekran boyutlarında görüntülenmesi çok zor olabilir. Medya öğesinin deşarj edildiğinde görünür olduğundan emin olun veya gerekli değilse ve hücreselde iyi görünmüyorsa devre dışı bırakmayı düşünün. Video ve resim galerileri için, hücresel deneyimi düşünen bir galeri eklentisi kullandığınızdan emin olun. Örneğin, kullanıcılar resim galerisini değiştirebilmelidir. Görüntü veya video azalırsa, kullanıcıların daha büyük boyutta görmesini kolaylaştırın. Çoğu hücresel kullanıcı, özellikle tam ekran boyutlarında video izlemek ister. 5. Sitenin hızını ve performansını optimize edin Sitenizin her zaman önemli bir şekilde yüklenmesini sağlar. Ancak, hücresel kullanıcılara iyi kullanıcı deneyimi sağlamak için sayfa yükleme süresi çok önemlidir. Hücresel kullanıcılar genellikle seyahat eder ve bilgilere hızlı erişim ister. Birkaç yıl önce bir Google çalışması, hücresel kullanıcıların% 53’ünün 3 saniye içinde yüklenmezse sayfadan ayrılacağını buldu. Ve kullanıcılar her yıl daha sabırsız hale geliyor çünkü internet hızı ve teknolojisi artmaya devam ediyor.
Ancak, ortalama web sayfasının mobil cihazlarda yayınlanması% 87,84 daha uzun sürer. Genel olarak WordPress sitenizi hızlandırmak için yapabileceğiniz birçok şey vardır. En çok kar elde edeceksiniz: İyi bir web ana bilgisayar seçmek
Görüntünüzü Optimize Etme
CDN kullanma Son zihniniz, WordPress sitenizin görünümünü mobil cihazlarda test etmek için bu yöntemlerden birini kullanabilir, ancak bu yöntemlerin hiçbiri gerçek deneyimi doğru bir şekilde taklit etmeyecektir. Yeni bir site başlatmadan veya büyük değişiklikler yapmadan önce sitenizi en az bir orijinal akıllı telefonda kontrol ettiğinizden emin olun. Yukarıdaki önizleme yöntemlerinden bazılarını kullandıysanız, iyi görünecektir. Bu nedenle, sitenin etrafında gezinebildiğinizden emin olun (düğmeleri ve dokunulabilecek alanları kontrol ettiğinizden emin olun), tüm menüler doğru görüntülenir ve tüm etkileşimli formlar veya widget’lar düzgün çalışır. Daha sonra, masaüstü ve hücresel kullanıcılar için olağanüstü bir kullanıcı deneyimi sağlamak için elinizden gelen her şeyi yaptığınız inancıyla sitenizi başlatabilirsiniz.
