Mobil cihazların artan kullanımına dikkat çeken Google, Nisan 2015'in sonundan itibaren sayfaları mobil uyumlu olmayan web sitelerine ceza verdi. Sonuç olarak sizin için SEO, web sitenizin hem büyük hem de küçük ekranlarda düzgün bir şekilde görüntülendiğinden emin olmanız gerekir.

wordpress tasarım duyarlı kurallar medya css3

Bu makalede, web sitenizi kuralı kullanarak sayfaya nasıl yerleştirebileceğinizi göstereceğim. @media CSS3 arasında.

"Duyarlı" ve "mobil uyumlu" terimlerinin gerçek anlamlarındaki farklılığa rağmen genellikle birbirinin yerine kullanıldığına dikkat etmek önemlidir. Her birinin ne anlama geldiğini anlamak, web sitenizin tüm ekran boyutlarını barındırmak için gerekli kriterleri karşıladığından emin olmak için önemlidir.

Ama daha önce, eğer WordPress keşfi hiç kurmadıysanız Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için 

O zaman neden burada olduğumuza dönelim.

Duyarlı ve Mobil Uyumlu

Olmayan web siteleri ne tepki ne de uyumlu cep, tüm ekranlarda aynı şekilde görüntülenir, yani büyük ekranların versiyonu her yerde görüntülenir. Daha küçük ekranlarda, tüm içeriğini görmek için sayfayı yatay olarak kaydırmanız gerekir. Bu ekranlarda gezinmek zordur. 

Bunları da keşfedin Web sitenizin görünümünü özelleştirmek için 8 WordPress eklentileri

Bir web sitesi uyumlu Mobil yalnızca mobil cihazlarda görülmesi gereken katı minimum şartları karşıladığında, bu da onu duyarlı bir web sitesi yapmaz. Örneğin, yatay olarak gezinmeniz gerekmiyorsa, bir web sitesi mobil uyumlu olarak değerlendirilebilir. Bu, öğelerinin küçülmesine ve ayırt edilemez olmasına neden olur. Daha sonra içeriğini okumak için yakınlaştırmanız gerekir.wordpress tasarım duyarlı kurallar medya css3 2

Onların tarafında web siteleri duyarlı farklı ekran boyutlarına mükemmel uyum sağlar. Öğelerini, daha küçük ekranlarda kolayca görülebilecek ve kullanılabilecek şekilde yeniden tanımlarlar. Bu, web siteniz için istediğiniz tasarım türüdür.

Ayrıca bakınız Sitenizde bir rezervasyon formu oluşturmak için 10 WordPress eklentileri

Artık, duyarlı ve uyumlu mobil arasındaki farkı biliyorsunuz. Şimdi kuralı göreceğiz @media Web sitenizi duyarlı olarak güncellemenize veya oldukça kolay bir şekilde oluşturmanıza olanak tanıyan CSS3 WordPress temaları duyarlı içerik ile.

Kural @media CSS3 arasında

Temanızı duyarlı hale getirmek için kurala ihtiyacınız olacak. @media CSS3. Temel olarak, belirli bir ekran türü (boyutu) için kullanmak istediğiniz stilleri tanımlamanıza olanak tanır. Diğer CSS kurallarını iç içe geçirmesindeki tek farkla, onu başka bir CSS kuralı gibi (küme parantezli) kullanacaksınız.

@media media-type (ifade) {css-test-selector {özellik1: değer1; özellik2: değer2; }}

Bu yapıda kuralın içindeki unsurlar @ ortamı tek iş yaparken tür-of-medya başarıyla algılandığı belirtildi. Seçilen ortam türünü, boyutlar cinsinden özelliklerini belirleyebilirsiniz.

wordpress tasarım duyarlı kurallar medya css3 3keşfedin WordPress'e Arayüz ve Kullanıcı Deneyimi Nasıl Uygulanır?

Kural @media web sitenizin ziyaret edildiği ekran türünü sizin için algılar ve bu tür ekrana en uygun kuralları seçer. Tüm büyük tarayıcılar kuralı zaten entegre etti @media.

İşte bilgilerinizin listesi: krom , Safari, Firefox, IE, Opera et kenar.

Hedef ekranları tanımlayın

bir değişiklik yapmak istiyorsanız WordPress tema varsa, gerekirse geri dönebilmek için lütfen ikincisinin CSS'sinin yedek bir kopyasını alın.

Ayrıca bizim makalemizi okuyun. Facebook ve Disqus yorumları yavaş yavaş nasıl yüklenir

Yapısında gördüğümüz gibi, ekran tipini tanımlamak için iletmelisiniz @media hedeflenen ekran türü. İşte farklı ekran türlerinin listesi:

- herşey : tüm ekran türleri için veya içinde belirtilen boyutlar için ifade
- ekran : tüm ekranlar için, mobil, tablet, dizüstü veya masaüstü
- baskı : yazıcılar için, yazdırılabilen sayfalar için belirli stiller istiyorsanız
- konuşma : Görme engelliler için stil istiyorsanız, ekran okuyucular için.

Ekran türünün önüne koyabileceğiniz operatörler de vardır; gibi değil belirtilenden farklı tipteki ekranlar için stilleri görüntülemek için veya bir tek stilleri yalnızca belirli ekranlara uygulamak için. Bu nedenle sahip olabilirsiniz:

@media sadece ekran

Ekran boyutları için stilleri tanımlayın

Sen kullanabilirsiniz ifade ekranın özellikleri hakkında daha fazla ayrıntı sağlamak için. Sonra @media girmek ve ardından ifade gelir. Birden çok ifade kullanıyorsanız, bunların tümü ile ayrılmalıdır. ve. İşte yapı örneği:

@media only screen ve (max-width: 640px) {selector-css-example {/ * Her zamanki CSS'niz burada * /}}

Bu örnekte kullanıyorum maksimum genişlik değerinde 640px. Bu, bir iPhone veya küçük bir Android akıllı telefon boyutunun maksimum ekran genişliğini ayarlamak içindir. Bu tür bir yapı ile, web sitenizin farklı cihazlarda nasıl göründüğünü kontrol edebilirsiniz. Burada kullanabileceğiniz boyutlarla ilgili özelliklerin bir listesi ifade :

Ayrıca bizim keşfetmek 8 SEO WordPress eklentileri web sitenizin SEO'sunu optimize eder

- min-genişliği et maksimum genişlik : sırasıyla kuralda bulunan stillerin görüntülenmesi için gereken minimum ve maksimum genişlik @media. Bir piksel daha ve stiller görüntülenmiyor.

- min yükseklik et max-height : sırasıyla kuralda yer alan stilleri görüntülemek için gereken minimum ve maksimum yükseklik @media. Çoğu ekran, sayfaları dikey olarak açmak için tasarlandığından, özellikler Min yükseklikte et max-height çok az kullanılırlar.

İşte bazı terminaller için ekran boyutlarının listesi:

- IPhone: 640px
- IPad: 1024px
- Tabletler: 1366 piksel
- Android akıllı telefon: 640px, 720px, 854px, 960px
- Ekstra büyük Android: 1024px, 1066px
- Windows telefon: 480
- Windows phone büyük: 768px
- genç ve yaşlı: 320px
- Ultrabook / Dizüstü Bilgisayarlar: 1366px
- Masaüstü Bilgisayarlar ve TV'ler: 1920px

Kullanabileceğiniz başka birçok özellik var ifade. Örneğin, 16: 9 en boy oranına sahip görüntüleri gösterebilen masaüstü veya televizyon ekranlarını hedefliyorsanız, aşağıdaki gibi bir yapı kullanabilirsiniz:

@media yalnızca ekran ve (min-genişlik: 1920 piksel) ve (cihaz en boy oranı: 16/9) {selector-css-example {/ * Her zamanki CSS'niz burada * /}}

 Daha eksiksiz listeler ve örnekler için danışın w3schools et Mozilla Developpers.

Web sitenizin duyarlı işlevselliğini test edin

Değiştirirken veya oluştururken WordPress tema veya sonunda sürprizlerden hoşlanıyorsanız, sonunda yanıt verip vermediğini görmek için sonucu test etmelisiniz. Google'ın yanıt vermeyen web sitelerini izlediğini unutmayın.

Bunlara da bakınız Blogunuzda sekmeler oluşturmak için 10 WordPress eklentileri

Hedeflediğiniz tüm mobil cihazlara sahip olmadığınız takdirde, web sitenizin farklı ekranlara nasıl uyum sağladığını görmek için (neyse ki borsalarımız için) çok sayıda araç bulunmaktadır.

Doğrudan bilgisayarınızın tarayıcısına kullanabilirsiniz Window Resizer Chrome Tarayıcı Uzantısı, ResponsiveResize, ResizeMe ou firesizer. Aşağıda, varsayılan olarak Firefox ile birlikte gelen Duyarlı Tasarım Görünümü'ndeki BlogPasCher'ın bir görüntüsü bulunmaktadır.

css3-medya-firefox-duyarlı tasarıma görüş

Göreve adanmış web siteleri de vardır:

Responsivepx

css3-medya-responsivepx

Bu web sitesi, ekran boyutlarını kendiniz seçmenize izin verme özelliğine sahiptir. Bu web sitesinin sizinkini bir çerçeveye yüklediğini unutmayın. Yani eğer senin WordPress tema bir çerçevede görüntülenmeyecek şekilde tasarlandı, dolayısıyla burada görüntülenmemesi oldukça olası.

iPad Peek

https://blogpascher.com/wp-admin/post.php?post=60969&action=editcss3-medya-ipad-peek

Bu web sitesi, web sitenizi en son Apple, iPad ve iPhone cihazlarında test etmek için kullanışlıdır. Sadece url'nizi girin. Responsivepx ile aynı çerçeve problemine tabi olduğunu unutmayın.

Cep Telefonu Emulator

css3-medya-cep-telefonu-emülatörü

Bu web sitesinde sizinkini küçük ekranlarda ve ekranın sağ tarafında seçtiğiniz eski telefon modellerinde test edebilirsiniz. Ayrıca bazı ekran özelliklerini de yapılandırabilirsiniz.

Google Mobil Uyumluluk Testi

css3-medya-google-mobil uyumluluk testi

Bu, en önemlisi değilse de en önemli testlerden biridir. Adresinizi çubuğa girin ve Çözümlemek testi başlatmak için. Testten sonra araç bir rapor ve bir puan görüntüler. Test olumlu ise, o zaman daha iyi, Google tarafından cezalandırılmayacaksınız.

Geliştirici değilseniz, size tavsiye ederim duyarlı WordPress temalarının listesi başlatın.

Önerilen Kaynaklar

Ayrıca, ortaklarınızı ve abonelerinizi daha iyi çekmenize yardımcı olacak ve aynı zamanda web sitenizin güvenliğini artıracak diğer önerilen kaynakları keşfedin.

Sonuç

Buraya ! kuralı kullanarak web sitenizi veya WordPress temanızı nasıl duyarlı hale getireceğiniz hakkında bilmeniz gereken her şeyi biliyorsunuz @media CSS3 arasında. Sizin için değerli olan veya tercih ettiğiniz bir WordPress temasını kaçırırsak, lütfen bölüme bir bağlantı bırakın Yorumlar Aşağıda.

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ayrıca sizi davet ediyoruz farklı sosyal ağlarda paylaşın.

...