5 Adımda WordPress Sitenizi Duyarlı Hale Getirme

Bir WordPress sayfasını responsive hale getirmek için yapılacak ilk şey Jetpack eklentisini kurmak ve etkinleştirmektir. Bunu yaptıktan sonra, Ayarlar » Okuma sayfasına gitmeli ve “Bu siteyi mobil uyumlu yap” seçeneğini seçmelisiniz. Artık WordPress sitenizi duyarlı hale getirdiğinize göre, sayfalarınızın tasarımına ve düzenine bir göz atmanız gerekiyor. Mobil cihazlar için tasarlanmamış bir tema kullanıyorsanız, sayfalarınızın görünümünde bazı değişiklikler yapmanız gerekecektir. Bunu yapmanın bir yolu, sayfalarınızı mobil cihazlar için otomatik olarak optimize edecek WP Touch gibi bir eklenti kurmaktır. Alternatif olarak, özellikle mobil cihazlar için tasarlanmış iThemes Mobile gibi duyarlı bir tema kullanabilirsiniz. WordPress sitenizi duyarlı hale getirdikten sonra, içeriğinizin mobil cihazlar için de optimize edildiğinden emin olmanız gerekir. Bu, daha kısa paragraflar, daha büyük yazı tipi boyutları kullanmak ve sayfanızı yavaşlatacak büyük resimlerden kaçınmak anlamına gelir. Bu ipuçlarını izleyerek, WordPress sitenizin tamamen duyarlı olduğundan ve mobil cihazlar için optimize edildiğinden emin olabilirsiniz.

Mobil uyumlu bir web sitesi, yanıt veren bir web sitesidir, yani herhangi bir cihazdan erişilebilir. Mobil uyumlu bir web sitesi, herhangi bir ekran boyutunda çalışmak üzere tasarlanmış bir web sitesidir. Sonuç olarak, ekranın üst kısmındaki gezinme çubuğu, örneğin küçük bir ekranda açılır bir yan çubuğa dönüştürülebilir. Mobil uyumlu bir tema kullanmak istiyorsanız, birkaç eklenti seçmeniz gerekecektir. Acele etmeyin ve bir karar vermeden önce her seçeneğin faydalarını gözden geçirin. Mobile Smart eklentisi, kullanıcıların siteyi mobil tarayıcı üzerinden ziyaret edip etmediklerini tespit ederek ve mobil temayı görüntüleyerek sitede gezinmelerini kolaylaştırır. Bir WordPress sitesi, siteyi ziyaret eden kullanıcının türüne göre temayı masaüstü veya mobil sürüm olarak değiştirebilir. Akıllı telefon kullanıcılarından trafik çekmek istiyorsanız, WordPress sitenizi mobil uyumlu hale getirebilecek piyasada bulunan bir dizi aracı kullanmayı düşünmelisiniz.

Sitenizdeki herhangi bir eklentinin, web sitenizin duyarlı tasarımıyla uyumlu olmadığını kontrol edin. Eklentilerin otomatik olarak güncellendiği ve sorunlara neden olduğu zamanlar vardır. Bir veya iki eklentinin sorunu çözüp çözemeyeceğini görmek için eklentilerinizi birer birer devre dışı bırakın.

İki ana sorun var: web sitesi mobil uyumlu değil ve site düzgün yapılandırılmamış. Önce bariz olanı belirtmeliyiz. Web sitenizin bir mobil cihazda çalışmamasının ana nedeni, mobil uyumlu olmamasıdır. Web sitesinin farklı ekran boyutlarına orantılı olarak yeniden boyutlandırılması gerekmez.

WordPress Duyarlı Olabilir mi?

Duyarlı bir WordPress teması yüklediğinizde, ekran boyutunu kullanıcının cihazına uyacak şekilde otomatik olarak ayarlar. Sonuç olarak, WordPress siteniz cep telefonları, tabletler ve masaüstü bilgisayarlar dahil tüm platformlarda eşit derecede çekici olacaktır.

İnsanlar telefonlarını daha sık kullandıkça, telefonlarda geçirilen ortalama sürenin 2021 yılına kadar 4 saat 23 dakikaya yükselmesi bekleniyor. Amerika Birleşik Devletleri'nde mobil cihazlar, web sitelerine gelen tüm trafiğin neredeyse yarısını oluşturuyor. Duyarlı bir web sitesi tasarlarken, mobil cihazlara masaüstü cihazlara benzer şekilde davranılmalıdır. Bu oturumda, duyarlı web tasarımının neden önemli olduğuna ve WordPress sitenizi nasıl mobil uyumlu hale getireceğinize bakacağız. Mobil kullanılabilirlik 2000'lerin sonlarında ilk kez popülerlik kazandığında, pazarlamacıların mobil uyumlu siteler geliştirmek için çok az seçeneği vardı. Duyarlı tasarım kullandığınızda, artık web sitenizin iki sürümünü aynı anda oluşturmanız gerekmez. Masaüstü ve mobil sürümlerin bir haritası gereksizdir ve yinelenen içerikle ilgili herhangi bir endişe yoktur.

2011'den beri duyarlı tasarım ilkelerine bağlı temalar var. Çeşitli duyarlı WordPress temaları oluşturabilirsiniz. Bir geliştiriciyseniz, WordPress sitenizi aradığınız gereksinimleri karşılayacak şekilde kodlayabilirsiniz. Ancak Torque'un öğreticisi, bir kodlama programına kayıtlı olmayanlar için mükemmel bir kaynaktır. WordPress'i duyarlı hale getirmek için bir geliştirici kiralamak veya WordPress'in nasıl kodlanacağını öğrenmek gerekli değildir. Bluehost Website Builder gibi bir web sitesi oluşturucu kullanmak mümkündür. WordPress web sitenizi desteklediğinden, nasıl göründüğü üzerinde tam kontrole sahipsiniz, böylece büyüyüp gelişeceğini bilerek içiniz rahat edebilir.

Duyarlı WordPress Temalarının Faydaları

Daha iyi bir kullanıcı deneyimi sundukları için duyarlı WordPress temaları daha popüler hale geliyor. Akıllı telefonlar gibi daha küçük ekranlar , daha büyük ekranlardan daha kullanıcı dostu ve daha az dağınık olabilir. Duyarlı bir tema, sitenizin ayrı mobil sürümlerini oluşturmanızı zorlaştırır.

Mobil Sitemi WordPress'te Duyarlı Olarak Nasıl Değiştiririm?

Mobil sitenizi duyarlı hale getirmek için atmanız gereken adımlar, kullandığınız temaya ve yaptığınız özelleştirme düzeyine bağlı olarak değişeceğinden, bu sorunun herkese uyan tek bir yanıtı yoktur. sitenize. Ancak genel olarak sitenizi duyarlı hale getirmek için temanızın CSS kodunu düzenlemeniz gerekir. Bunu çevrimiçi olarak nasıl yapacağınızla ilgili eğitimler bulabilir veya size yardımcı olması için bir WordPress geliştiricisi tutabilirsiniz.

Web sitelerinin çoğu artık mobil uyumludur, ancak uygulanması zor olabilir. 2019'un dördüncü çeyreğinde, Google aramalarının %61'i mobil cihazlarda yapıldı. Web siteniz mobil uyumluysa, kullanıcılarınız aradıklarını bulacaktır. Google'ın Mobil Dostu Test API'si, otomatik araçlarla URL testleri çalıştırmanıza olanak tanır. Bir tema satın almadan önce, herhangi bir boyuttaki ekranda iyi görüntülendiğinden emin olun. Günümüzde birçok WordPress teması duyarlıdır ve muhtemelen bir temanın mobil uyumlu olmaması, hiç yanıt vermemekten daha yaygındır. Mobil uyumlu bir WordPress sitesi oluştururken o kadar çok seçenek olduğunu göreceksiniz ki size en uygun olanı seçebileceksiniz.

Sitenizi Flywheel'de barındırdığınızda, 30'dan fazla premium StudioPress temasına ücretsiz olarak erişebileceksiniz. Yeni başladığınızda, doğrudan makinenizde kendi WordPress sitenizi kurmak için Yerel'i kullanmanızı öneririm. Çoğu katılım formunun kullanımı kolaydır ve mobil cihazlardan erişilebilir (kullanımlarının basit olduğu varsayılarak). Pop-up'lar ise farklı bir kapsayıcı türüdür. Google, bir web sitesinin içeriğini kapsayan, isteğe bağlı olarak da bilinen müdahaleci geçiş reklamlarına sahip web sitelerini cezalandırmaya başlıyor. Pop-up'ları mobil uyumlu WordPress tasarımlarına yerleştirmekten kaçının. Temmuz 2018'de internet aramalarının %60'ı mobil cihazlarda yapıldı.

Web sitenizin (her cihazda) iyi performans göstermesini istiyorsanız, ona yatırım yapmalısınız. Performans denkleminin bir parçası olarak görüntüleri web sitenizde tutmak çok önemlidir, ancak kodunuz ve WordPress barındırma da büyük bir etkiye sahiptir. Artık ihtiyacınız olmayan eklentiler varsa bunları kaldırabilir ve sitenizden silebilirsiniz. Kendi zamanınızı ve harcamalarınızı azaltabilmeniz faydalı olacaktır. Genesis Framework ve StudioPress temalarını Flywheel'in barındırma hizmetinin bir parçası olarak kullanabileceksiniz. Bu temaları kolaylıkla özelleştirebilir ve mobil uyumlu bir web sitesi oluşturmaya odaklanmanız için size daha fazla zaman verebilirsiniz.

Duyarlı tema, iPhone'lar, iPad'ler, Android tabletler ve diğer mobil cihazlarla uyumlu hale getirmek için cihazınızın boyutuna uyum sağlamanın yanı sıra ekran boyutlarını da hesaba katar. srcset özniteliğini belirtirseniz, tarayıcı ekranın boyutuna göre farklı görüntüler gösterebilecektir. Bunu başarmak için srcset vesize özniteliğini kullanabilirsiniz.
Örneğin bir iPhone'da büyük bir resim ve bir Android cihazda daha küçük bir resim kullanmak için aşağıdaki URL yapısını kullanın:
Aşağıdaki dosya boyutu aşağıdaki sırayla görüntülenir.
Bu durumda, hangi cihazın orta boy bir resim görüntüleyeceğini belirtmek için aşağıdaki URL özniteliği kullanılacaktır:
Bu yüklemede şu dosya biçimleri kullanılır: küçük.jpg, orta.JPG ve büyük.JPG.
Bu, görüntünün uygun şekilde boyutlandırıldığından ve uygun varsayılana ayarlandığından emin olmak için hem iPhone görüntülerinde hem de Android görüntülerinde kullanılacaktır.
Aşağıdaki dosyalar thesrcset'te görüntülenir: *small.jpg, *large.jpg, *small.JPG.

WordPress Duyarlı Css

WordPress, sıfırdan bir web sitesi veya blog oluşturmanıza veya mevcut bir web sitesini iyileştirmenize olanak tanıyan bir içerik yönetim sistemidir (CMS). PHP ve MySQL tabanlı ücretsiz ve açık kaynaklı bir platformdur. WordPress, dünyanın en büyük kuruluşlarının birçoğu da dahil olmak üzere milyonlarca web sitesi tarafından kullanılan, dünyadaki en popüler CMS'dir. WordPress çok yönlü bir platformdur ve çok çeşitli web siteleri ve uygulamalar için kullanılabilir. WordPress'in en popüler özelliklerinden biri, duyarlı tasarımıdır. Bu, web sitenizin, masaüstü bilgisayar, tablet veya akıllı telefon olsun, ziyaretçilerinizin kullandığı cihazın ekran boyutuna otomatik olarak uyum sağlayacağı anlamına gelir. Bu, ziyaretçilerinizin kullandığı cihaz ne olursa olsun web sitenizin her zaman en iyi şekilde görünmesini sağlar.

WS Form eklentisi, bir çerçevede kullanıma hazır HTML5 kodunu çıkaran geliştirici odaklı bir WordPress form eklentisidir. Sofistike bir düzen düzenleyici ve çeşitli geliştirme özellikleri kullanarak, hızla formlar oluşturulabilir. Her alan türüne kendi sarmalayıcı ve alan düzeyinde sınıflarınızın yanı sıra çok çeşitli başka ayarlar ekleyebilirsiniz. WP Forms, web sitelerini iyileştirme ve güçlendirme potansiyeline sahip yeni bir WordPress formu türüdür. Özelliklerden bazıları, duyarlı HTML5 kodu , otomatik çerçeve uyumluluğu ve gelişmiş koşullu mantığı içerir. Ödeme sırasında CSST20 kupon kodunu kullanırsanız, tüm WS Form PRO ürünlerinde %20 indirim alırsınız.

WordPress Duyarlı Eklenti

WordPress Duyarlı Eklenti , WordPress web sitenizin duyarlı olmasını istiyorsanız kullanabileceğiniz harika bir eklentidir. Bu, web sitenizin masaüstü, dizüstü bilgisayar, tablet veya akıllı telefon olsun, farklı ekran boyutlarına uyum sağlayabileceği anlamına gelir. Bu, web sitenizin mümkün olduğunca çok kişi tarafından erişilebilir olmasını istiyorsanız, kullanmak için harika bir eklentidir.

WordPress mobil eklentilerine ek olarak, web sitenizi daha mobil uyumlu hale getirmek için kullanılabilecek çok sayıda WordPress masaüstü uzantısı vardır. Google Mobil Uyumluluk aracı, sitenizin mobil uyumlu olup olmadığını belirlemek için kullanılabilir. Sitenizin duyarlı tasarıma sahip olmadığı ortaya çıkarsa (veya test çeşitli nedenlerle başarısız olursa), WordPress mobil duyarlı eklentisi sizin için doğru çözüm olabilir. WordPress için bir WPtouch Mobile eklentisi, en eski ve en popüler olanlardan biridir. 99,00 ABD Doları tutarındaki WordPress Mobil Paketinin en pahalı sürümü Standart sürümdür. AMP for WP, siteniz için alternatif bir portal olarak bir mobil tema oluşturmaz. Ücretsiz bir eklenti var, ancak premium destek hizmeti aylık 39,95 USD tutuyor.

Touchy ile masaüstü sitenizi kolayca daha küçük bir ekran boyutuna çevirebilirsiniz. Birçok kişi, hem mobil hem de masaüstü dostu, duyarlı bir WordPress menüsü oluşturmak için Superfly'ın en iyi seçim olduğuna inanıyor. Cihazınıza özgü bir uygulama oluşturmak istiyorsanız, WordPress Mobil Paketi mükemmel bir seçimdir.

WordPress'te Duyarlı Mod Nedir?

Fiyatlandırma tablosu ayarlarında duyarlı modu etkinleştirebilirsiniz. Bu moda girdiğinizde, PC masaüstüne izin veren herhangi bir cihazda masanızın güzel ve düzgün bir görünümüne sahip olursunuz. Cep telefonları son yıllarda daha popüler hale geldi.

Temanızın Mobil Duyarlı Olduğundan Emin Olmak İçin Css'i Nasıl Kullanırsınız?

İlk adım, görünüm alanının ayarlandığından emin olmaktır. Görünüm alanı, bir web sitesinin bir mobil cihazda nasıl görüntüleneceğini kontrol etmeye yardımcı olur. görünüm alanı ayarlanmadan, mobil cihazlar sayfayı bir masaüstü ekran genişliğinde oluşturacak ve kullanıcının içeriği görmek için yakınlaştırması gerekecek. Görünüm alanını ayarlayarak, web sitesinin nasıl görüntüleneceğini kontrol edebilirsiniz.
Bir sonraki adım, web sitesinin içeriğinin duyarlı olduğundan emin olmaktır. Bu, web sitesinin kendisini cihazın ekran boyutuna uyacak şekilde yeniden boyutlandıracağı anlamına gelir. Bunu yapmak için medya sorgularını kullanmanız gerekir. Medya sorguları, CSS'yi ekranın genişliğine göre değiştirmenize izin veren bir CSS tekniğidir. Medya sorgularını kullanarak web sitesinin düzenini, yazı tipi boyutunu ve hatta resimleri değiştirebilirsiniz. Bu, web sitenizin herhangi bir cihazda harika görünmesini sağlar.

Sayfalar, web tasarımının ilk günlerinden itibaren belirli bir ekran boyutunu özel olarak hedeflemek üzere tasarlandı. Daha fazla ekran boyutu kullanıma sunuldukça, duyarlı web tasarımı (RWD) popülerlik kazandı. Web sayfaları, RWD özelliği ile çeşitli ekran boyutlarına, çözünürlüklere ve diğer faktörlere uyacak şekilde değiştirilebilir. Cameron Adams, Çözünürlüğe bağlı düzen başlıklı 2004 tarihli yazısında çözünürlüğe bağlı bir düzen kullanmak için bir tasarımı açıklar. Ethan Marcotte, 2010 yılında üç farklı tasarım tekniğinin kombinasyonunu tanımlamak amacıyla duyarlı web tasarımı terimini ortaya attı. Modern bir CSS düzeni yöntemi doğası gereği duyarlıdır ve duyarlı siteler oluşturmayı kolaylaştırmak için web platformuna yeni özellikler ekledik. Medya Sorguları aracı, bir stil sayfasına birden çok medya sorgusu eklemenize olanak tanır.

Hangi ekranların kullanılacağını belirledikten sonra, dar ekranlı cihazlar için tek sütunlu, daha büyük ekranlar için ayrı bir düzen oluşturmalısınız. Bir medya sorgusunun tanıtıldığı ve yerleşimin değiştirildiği nokta, kesme noktası olarak adlandırılır. Flexbox, Çok sütunlu bir düzen ve Izgara gibi çoğu modern düzen yöntemi duyarlıdır. Bunu kolaylaştırmak amacıyla esnek bir ızgara oluşturmaya çalıştığınızı düşünüyorlar. Esnek: 1 stenosunu kullanarak, her esnek öğe aşağıda gösterilen esnek kapta eşit miktarda yer kaplar. İhtiyaçlarınıza en uygun görüntünün ekran boyutunu ve çözünürlüğünü açıklayan ipuçlarının (meta veriler) yanı sıra birden çok boyut sağlanabilir. Görüntüleri farklı boyutlarda doğrudan sanat yapma yeteneği, ekranınızın boyutuna bağlı olarak bir kırpma veya tamamen farklı bir görüntü sağlamanıza olanak tanır.

Bu şekilde, daha az veya daha fazla ekran gayrimenkulüne sahip medya sorguları, yazı tipi boyutlarında küçültülür. Herhangi bir öğe, medya sorguları kullanılarak farklı ekran boyutlarında daha kullanışlı veya çekici hale getirmek için değiştirilebilir. Bu örnekte seviye 1 başlığımızın 4rem olmasını istiyoruz, bu yüzden zaten sahip olduğumuz yazı tipi boyutundan dört kat daha büyük olacak. Bundan sonra, daha küçük bir başlık oluşturuyoruz ve kullanıcının en az 1200 x 1200 ekran boyutuna sahip olduğunu biliyorsak, daha büyük boyutun üzerine yazmak için medya sorguları kullanıyoruz. Mobil tarayıcılar, görüntü alanı genişliğini cihaz genişliğine ayarlamalı ve ölçeklendirmelidir. belgeyi bu meta etikete göre amaçlanan genişliğinin %100'üne kadar ayarlayın. Mobil tarayıcılar, görüntüleri görünüm boyutuna göre görüntülemeyi tercih eder. width=device-width ayarını yaparak, dar bir ekran için Apple'ın varsayılan 970 * genişliğini geçersiz kılıyorsunuz.

Genel olarak minimum ölçek, maksimum ölçek ve kullanıcı tarafından ölçeklenebilir ayarları kullanmaktan kaçınmak iyi bir fikirdir. Kullanıcılara istedikleri kadar çok veya az yakınlaştırma özgürlüğü verilmelidir. Viewport meta etiketini kullanarak diğer değişkenleri de değiştirebilirsiniz, ancak genel olarak, istediğiniz şey aşağıdaki satırdır.

Duyarlı Web Tasarımının Faydaları

Duyarlı tasarım kullanarak web sitenizin ne kadar büyük veya küçük olursa olsun herhangi bir cihazda harika görünmesini sağlayabilirsiniz. Duyarlı tasarım kullanarak bir web sitesi tasarlarken, içeriği tüm ekranlarda doğru görünecek şekilde boyutu ayarlamak, gizlemek, küçültmek, büyütmek veya taşımak için CSS ve HTML kullanırsınız. Web siteniz mobil uyumlu olduğu için küçük bir ekranda dahi olsa mobil kullanıcılar onu kullanabilecektir. Ek olarak, kullanıcılar büyük dosyaları indirmek zorunda kalmadan web sitenizi görebilir ve bant genişliğinden tasarruf edebilir.