4 WordPress Temanızın Mobil Versiyonunu İyileştirmenin Yolları

Yazan makale:
  • WordPress
  • Güncelleme: Temmuz 29, 2013

Mobil Sürüm WordPress

Gerçekle yüzleşelim, mobil cihazlar giderek daha popüler hale geliyor. Masaüstü tarama artık büyümüyor, aslında azalırken, mobil cihazlar oradaki tüm akıllı telefonlar ve masalarla hızlı büyüyor.

Net MarketShare'a göre, mobil cihazlar toplam web trafiğinin% 10'ini temsil ediyor. Bu büyük bir rakam ve bazı niş ve ülkelerde daha da büyük. Ancak burada önemli olan şey, sınırlı ekran alanı ve mobil bağlantıların genellikle masaüstü bağlantısından daha yavaş olması nedeniyle mobil cihazların gerektirdiği özel dikkat.

Birçok WordPress teması yanıt veriyor ancak biliyorsunuz, her zaman iyileştirmeler için bir yerimiz olacak. Dolayısıyla, 4 teknolojilerini ve kullanıcılarınızın mobil deneyimini iyileştirmek için bunları kullanmanın yollarını göreceğiz.

#1 Ol 'Medya Türleri

Birkaç yıl önce, IE5.5 ve IE6 canlı olarak kabul edildiğinde, mobil tarayıcılar ortaya çıkmaya başlamıştı (ve Opera en iyisiydi) ve insanlar telefonların kırıldığından beri işlerin kırıldığını fark etmeye başladılar. CSS gibi basit şeyleri işleyin (JS, flash vb.

Yani, tamamen ayrı bir mobil site yapmak, medya türlerinin bizi kurtardığı tek seçenek oldu. Fikir basitti, tarayıcınıza, "gelişmiş" CSS kuralları (masaüstü bilgisayarlar için) veya basit CSS kuralları (el tipi veya baskı için) sağladığınızı söyleyebilirsiniz. Sözdizimi şu kadar basit:

<link rel = "stil sayfası" href = "handheld.css" type = "text / css" media = "el tipi" />

Bu, mobil siteniz için tamamen farklı bir tasarım oluşturmak için iyi bir seçenek olabilir. Ama kullanmamalısın.

Medya türleri ilk başta iyi gelebilir, ancak modern akıllı telefonlarla basit bir sorun ortaya çıktı: tarayıcı desteği eksikliği. Dışarıdaki çoğu büyük oyuncu, bu tür bir işlevselliği göz ardı ediyordu (elma gibi)
Sonra medya sorguları bizi kurtarmaya geldi.

#2 Medya Sorguları ve mobil deneyimin gerçekten nasıl iyileştirileceği

Bu, sitenizin mobil sürümünü oluşturmanın en popüler yoludur.

Tarayıcı boyutunun, cihaz ekranının boyutunun, piksel yoğunluğunun (evet, retina!) Ve hatta medya türlerinin öfkesine göre belirli noktaları hedefleyebilirsiniz.

İşte basit bir medya sorgusu:

@ media (maks. genişlik: 700px) {body {background: red; }}

Bu, programlama ile hemen hemen aynı. IF “Tarayıcı genişliği 700 veya daha düşük”, SONRA “Aşağıdaki CSS kodunu uygulayın”.

çocuk Oyun

/ Temalarınızda yeni bir klasör oluşturalım ve yirmi mobil olarak adlandıralım. Biliyorum, yirmi on iki zaten medya sorguları kullanıyor, ama öğrenmek için buradayız, değil mi?

Yani, bir style.css dosyası oluşturun ve bu içeriği ekleyin:

/ * Tema Adı: mobil tema Şablon: twentytwelve * / @import url (“../ twentytwelve / style.css”); @ media handheld, sadece ekran ve (maksimum genişlik: 767px) {nav ul {display: none;} nav select {display: block}}

Yukarıda CSS alt temasını oluşturduk ve ayrıca yalnızca mobil cihazları hedefleyecek, ana menüyü gizleyecek ve bir seçim gösterecek bir kural ekledik. Bu yüzden eğer seçimde bir menünüz varsa, ul / li öğeleri olarak göstermek yerine çok fazla alan kazanabilirsiniz.

#3 jQuery Mobile ile aşırı makyaj

jQuery mobile, optimize edilmiş widget'lar ve UI öğeleriyle mobil deneyimini geliştirmek için jQuery işlevselliğini kullanan harika bir çerçevedir.

Çalıştırmak için gereken HTML oldukça basittir, sadece UI widget'lerini tespit etmek ve oluşturmak için HTML veri niteliklerini ve JS'yi kullanır.

Ancak jQuery Mobile'ın WordPress blogunuzda düzgün bir şekilde çalışmasını sağlamak için önce jQuery mobil komut dosyasını çağırmanız gerekir. Çocuk temasına geri dönün, ana temanın header.php dosyasını kopyalayın ve bu satırları başlık etiketine ekleyin:

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src = "http://code.jquery.com /mobile/1.3.1/jquery.mobile-1.3.1.min.js "> </ script>

Ticari teklifler için wp_enqueue _script kullanmanız gerektiğini söylemeliyim, bu yüzden sitenizdeki kütüphaneleri kopyalamaktan kaçının.
Artık istediğiniz herhangi bir UI öğesiyle oynayabiliyoruz. jQuery mobile, bir temada kullanabileceğiniz birçok UI widget'ına sahiptir, ancak sayfayı ve katlanabilir panelleri uygulayalım.
Bu temel HTML sözdizimi:

<div veri rolü = “sayfa”> <div veri rolü = “üstbilgi”> </div> <div veri rolü = “içerik”> </div> <div veri rolü = “altbilgi”> </ div> </div>

Bu kodla yeni bir “sayfa” ve üstbilgi, içerik ve altbilgi alanları oluşturacaksınız. Üstbilgi ve altbilgi sabittir ve içerik geçerli sayfaya göre değişecektir, böylece birden çok sayfayı bir kez yükleyebilir ve farklı kimlikler atayarak gizleyebilirsiniz.
Bu, katlanabilir paneller için temel HTML'dir:

<div data-role = “daraltılabilir set”> <div data-role = “daraltılabilir set” veri-daraltılmış = “true”> <p> Daraltılabilir alan içeriği </p> </div> </div>

Orada bir döngü uygulamak oldukça basit, değil mi? Peki, kodunuz şöyle görünecek:

<div data-role = "katlanabilir küme"> <? while (have_posts ()) {...?> <div data-role = "daraltılabilir" veri-daraltılmış = "true"> </div> <? ...}?> </div>

Seçilmiş menü revize edildi

Yukarıda gördüğümüz kodla (medya sorguları bölümünde) normal menünüzü gizleyebilir ve özel bir seçim menüsü gösterebilirsiniz. jQuery, çok fazla PHP kodu olmadan eklemenizi sağlar (dürüst olmak gerekirse, PHP'ye hiç ihtiyacımız olmayacak). Yeni bir dosya oluşturalım ve bu kodu buraya ekleyelim:

jQuery (function ($) {// DOM hazır olduğunda $ (document) .ready (function () {// $ seçim öğesini oluşturalım $ ("<select />").appendTo("nav"); / / Yeni seçenekle,… $ ("<seçenek />", {"değer": "", "metin": "Git ..."}) 'e gidin. AppendTo ("nav select");}); / / Şimdi yarattığımız seçimi seçelim: $ ("nav .menu a").) (Her (işlev)) {// menüde bulduğunuz her LINK için var aux = $ (this); $ ("<option /> ", {" value ": aux.attr (" href ")," html ": aux.text ();}). appendTo (" nav select "); // seçime yeni bir öğe ekleyin)} ; // daha sonra yeni bir $ ("nav select") öğesi seçtiğimizde yeniden yönlendirme işlevini yeniden ayarlayacağız. change (function () {window.location = $ (this) .find ("option: selected"). val ();});});

Bunu yapmak yeni bir mobil menü oluşturacaktır, ama sorun şu ki, sitenin “normal” versiyonunda bile jquery mobile yüklüyoruz. Bu yüzden sitemizi geliştirmemize yardımcı olmak için birkaç eklenti de kullanabiliriz.

#4 - Mobil Dedektör ile her şeyi tamamlıyor

Bu harika eklenti, kullanıcı cihazına bağlı olarak koşullu olarak temaları yüklememize olanak tanıyan yeni bir işlev oluşturur. Ve bunun gibi basit şartlı kurallarla çalışır:

<? php if (MobileDTS :: is ('android'))) {....} elseif (MobileDTS :: is ('mobile'))) {....} else {}?>

MobileDTS yöntemi mevcut cihazı kontrol eder ve ardından basit bir doğru / yanlış döndürür. Daha sonra, yeni bir tema ayarlamak için switch_theme () adında bir sihirli işlev kullanabiliriz ve örneğin mobile kullanırken bir masaüstü sürümüne bağlantı oluşturmak için MobileDTS :: is_switcher_enabled () gibi eklenti koşullarını kullanabilirsiniz.

Sonuç

Peki, hiç WordPress temanızda mobil eklentileri veya işlevleri kullandınız mı? Hangi yöntemi tercih edersiniz? Utanma ve düşüncelerini paylaşma!

Rochester Oliveira hakkında

Brasil, Itajubá (MG) 'dan bir web tasarımcısı ve girişimcisiyim. Karanlık konular hakkında yazmayı ve güzel şeyler yapmayı seviyorum.