4 WordPress mavzusining mobil versiyasini takomillashtirish yo'llari

Maqola muallifi:
  • WordPress
  • Yangilangan sana: Jul 29, 2013

Mobil versiyasi WordPress

Keling, haqiqatda yuz beraylik, mobil qurilmalar tobora ommalashib bormoqda. Stol ustaxonasi endi ortib bormayapti, u aslida pasaymoqda, mobil telefonlar bu ajoyib smartfon va jadvallar bilan tezda o'sib bormoqda.

Net MarketShare ma'lumotlariga ko'ra, mobil qurilmalar jami veb-trafikning 10% ni tashkil qiladi. Bu katta figuradur, va ba'zi mamlakatlarda va mamlakatlarda yanada kattaroq. Biroq, bu erda muhim bo'lgan narsa mobil qurilmalar uchun cheklangan ekran maydoni va mobil aloqaning ish stoli ulanishidan odatda ancha past bo'lgani uchun talab qilinadi.

WordPress mavzularining ko'pi javob beradi, ammo siz yaxshi bilasiz, har doim yaxshilanishlar uchun joyimiz bo'ladi. 4 texnologiyalari va ulardan foydalanuvchilarning mobil tajribasini yaxshilash uchun ulardan foydalanish usullarini ko'rib chiqamiz.

#1 Ol 'Media turlari

Bir necha yil oldin, IE5.5 va IE6 tirik deb hisoblanganida, mobil brauzerlar yangi chiqishni boshladilar (va Opera eng yaxshisi edi) va odamlar shunchaki telefonlar shundan beri buzila boshlaganini anglay boshladilar. CSS kabi oddiy narsalarni qayta ishlang (JS, flesh va boshqalarni aytmaslik kerak).

Shunday qilib, ommaviy axborot vositalari bizni qutqarish uchun kelganida, mutlaqo ajratilgan mobil saytni qilish yagona imkoniyat edi. Fikr juda oddiy, siz taqdim etgan fayl "CSS" (oddiy ish stollar uchun) qoidalari yoki oddiy CSS qoidalaridir (brauzerga ko'chirish yoki chop etish uchun). Matnni sintaksisi bu qadar oddiy:

<link rel = "stylesheet" href = "handheld.css" type = "matn / CSS" media = "handheld" />

Bu sizning mobil saytingiz uchun mutlaqo boshqa dizaynni yaratish uchun yaxshi variant bo'lishi mumkin. Lekin uni ishlatmaslik kerak.

Media turlari dastlab yaxshi bo'lishi mumkin, ammo zamonaviy smartfonlarga oddiy muammo tug'ildi: brauzerni qo'llab-quvvatlash yo'qligi. Ko'pgina asosiy o'yinchilar bu kabi funktsiyalarni (olma kabi)
Keyin ommaviy axborot so'rovlari bizni qutqarish uchun keladi.

#2 Media so'rovlari va mobil ilovalarni qanday qilib yaxshilash mumkinligi

Bu sizning saytingizning mobil versiyasini yaratishning eng mashhur usuli.

Brauzer o'lchamlari, qurilma ekrani o'lchami, pikselli zichlik (ha, retina!) Va hatto media turlaridan iborat g'azabga asoslangan aniq maqsadlarga erishishingiz mumkin.

Bu erda oddiy media so'rovi:

@media (max-width: 700px) {body {fon: rad; }}

Bu juda ko'p dasturlash bilan bir xil. IF "Brauzerning kengligi 700 yoki undan kam" Keyin "Quyidagi CSS kodini qo'llang".

Bolalar Theme

Keling, sizning / mavzularingizda yangi papka yaratamiz va unga yigirma nomli nom beramiz. Bilaman, yigirma o'n ikki kishi allaqachon media-so'rovlardan foydalanmoqda, ammo biz o'rganish uchun shu yerdamiz, shunday emasmi?

Shunday qilib, style.css faylini yarating va ushbu tarkibni qo'shing:

/ * Mavzuni nomi: mobil mavzu Template: twentytwelve * / @import url ("../ twentytwelve / style.css"); @media handheld, faqat ekran va (max-width: 767px) {nav ul {display: none;} nav tanlash {display: block}}

Yuqorida biz CSS bolalar mavzusini yaratdik va asosiy menyu yashiringan va tanlovni ko'rsatadigan faqat mobil qurilmalarga tegishli bo'lgan qoida qo'shdik. Shunday qilib, agar sizda menyu bo'lsa, uni ul / li elementlar sifatida ko'rsatish o'rniga ko'p joyni tejashingiz mumkin

# 3 JQuery Mobile bilan ekstremal makeover

jQuery mobilsi optimallashtirilgan vidjetlar va UI elementlari bilan uyali tajribani yaxshilash uchun jQuery funksiyasidan foydalanadigan ajoyib ramka hisoblanadi.

HTMLga kerakli ishni bajarish juda oson, u faqat HTML ma'lumotlarini va UI vidjetlarini aniqlash va yaratish uchun foydalanadi.

Ammo jQuery Mobile-ni WordPress blogida to'g'ri ishlashi uchun siz avval jQuery mobil skriptini chaqirishingiz kerak. Bizning bolalar mavzusiga qaytib, asosiy mavzuning header.php faylini takrorlang va ushbu qatorlarni bosh yorlig'iga qo'shing:

<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>

Shuni eslatib o'tmoqchimanki, tijorat takliflari uchun siz wp_enqueue _scriptdan foydalanishingiz kerak, shuning uchun saytingizdagi kutubxonalarning ko'paytirilishiga yo'l qo'ymaslik kerak.
Endi siz xohlagan istalgan UI elementi bilan o'ynay olamiz. jQuery mobilida mavzularda foydalanishingiz mumkin bo'lgan juda ko'p foydalanuvchi interfeysi mavjud, lekin sahifani va katlanadigan panellarni qo'llaylik.
Bu asosiy HTML sintaksisi:

<div data-role = "header"> </ div> <div ma'lumotlar-rolik = "kontent"> </ div> div> </ div>

Ushbu kod bilan siz yangi "sahifa" va "sarlavha", "kontent" va "altbilgi" maydonlarini yaratasiz. Üstbilgi va altbilgi sobit va tarkib joriy sahifaga ko'ra o'zgaradi, shuning uchun bir nechta sahifani bir marta tiklashingiz va ularni turli xil identifikatorlarni belgilash orqali yashirishingiz mumkin.
Katlanabilen panellar uchun asosiy HTML:

<div data-role = "collapsible-set"> <div ma'lumotlar-rolik = "katlanadigan-sozlash" data-collapsed = "true"> <p>

Bu erda pastadir qilish juda oddiy, shunday emasmi? Xo'sh, sizning kodingiz quyidagicha bo'ladi:

<div ma'lumotlar-rolik = "katlanadigan-sozlash"> <? (had_posts ()) {...?> <div ma'lumotlar-rolik = "katlanabilir" ma'lumotlar-yiqilgan = "rost"> </ div> <? ...}?> </ div>

Tanlash menyusi qayta ko'rib chiqildi

Yuqorida biz ko'rgan kod bilan (ommaviy so'rovlar bo'limida) odatiy menyuingizni yashirishingiz va maxsus tanlash menyusini ko'rsatishingiz mumkin. jQuery sizga uni PHP-kodsiz ko'paytirishga imkon beradi (rostini aytsam, biz umuman PHP-ga ehtiyoj sezmaymiz). Keling, yangi fayl yaratamiz va unga ushbu kodni qo'shamiz:

jQuery (funktsiya ($) {// DOM tayyor bo'lganda $ (document) .ready (function () {// tanlaysiz element yaratish $ ("<select "").appendTo("nav"); / / Yangi variant bilan ... $ ("<option />", {"value": "", "text": "Go to ..."}) ga o'ting appendTo ("nav selection");) / Endi biz yaratgan tanlovni yarataylik: $ ("nav .menu a"), har bir funktsiya () funktsiyasi menda mavjud bo'lgan har bir LINK uchun mavjud aux = $ (bu); $ ("<option appendTo ("nav selection"); // tanlovga yangi element qo'shib qo'ying);} "{" value ": aux.attr (" href ")," html ": aux.text ();} ; // keyin yangi funksiya $ ("nav selection") ni tanlasak, ochiladigan funksiyani qayta yo'naltirishni o'rnatamiz. (function () {window.location = $ (this) .find ("option: selected"). val ();});});

Buning uchun yangi mobil menyuda yaratiladi, lekin bu muammo, saytning "oddiy" versiyasida ham jquery-ni yuklaymiz. Shuning uchun biz saytni takomillashtirishga yordam beradigan bir necha plaginlardan foydalanishimiz mumkin.

#4 - Mobil detektor bilan hamma narsani o'stiradi

Ushbu ajoyib plagin yangi uskuna yaratadi, bu bizni shartli ravishda foydalanuvchi qurilmasiga qarab temalar o'rnatish imkonini beradi. Va oddiy shartli qoidalar bilan ishlaydi:

<? php agar (MobileDTS :: is ('android')) {}} elseif (MobileDTS :: bu ('mobil')) {}} {}?

MobileDTS usuli joriy qurilmani tekshiradi va keyin oddiy rost / false funksiyasini qaytaradi. Keyin yangi mavzu o'rnatish uchun switch_theme () deb nomlangan sehrli funktsiyadan foydalanishimiz mumkin. Masalan, mobil telefondan foydalanishda ish stoli versiyasiga ulanish uchun MobileDTS :: is_switcher_enabled () kabi plagin shartlarini ishlatishingiz mumkin.

xulosa

Shunday qilib, siz hech qachon mobil plaginlar yoki vazifalarni WordPress mavzusida ishlatganmisiz? Qaysi usulni afzal ko'rasiz? Uyalmang va fikrlaringizni o'rtoqlashing!

Rochesterda Oliveira haqida

Men Itajubaning (MG) braziliyalik veb-uslubchisi va tadbirkori bo'ldim. Men qorong'u mavzular haqida yozishni yaxshi ko'raman va ba'zi ajoyib narsalarni qilaman.

»I ¿