КСНУМКС начина за побољшање мобилне верзије ваше ВордПресс теме

Чланак написао:
  • WordPress
  • Ажурирано: Јул КСНУМКС, КСНУМКС

Мобиле Версион ВордПресс

Хајде да се суочимо са истином, мобилни уређаји постају све популарнији. Претраживање радне површине више не расте, уствари се смањује, док мобилни брзо расте са свим оним чудесним паметним телефонима и столовима.

Према Нет МаркетСхаре-у, мобилни уређаји представљају КСНУМКС% укупног веб промета. То је велика фигура и још је већа у неким нишама и земљама. Али важна ствар овде је посебна пажња коју захтевају мобилни уређаји због ограниченог простора на екрану и чињенице да су мобилне везе обично споре од десктоп везе.

Многе ВордПресс теме су одговорне, али знате, увек ћемо имати простора за побољшања. Дакле, овде ћемо видети КСНУМКС технологије и начине да их искористимо како би побољшали искуство мобилног уређаја за кориснике.

#КСНУМКС Ол 'Медиа Типес

Пре неколико година, када су ИЕКСНУМКС и ИЕКСНУМКС сматрани живим, мобилни прегледачи су тек почели искакати (а Опера је била најбоља), и људи су почели да схватају да се ствари тек покидају, јер телефони тада једноставно нису могли обрадујте једноставне ствари попут ЦСС-а (да не спомињемо ЈС, фласх итд.).

Дакле, рад потпуно одвојеног мобилног сајта била је једина опција када су типови медија дошли да нас спасе. Идеја је била једноставна, могли сте рећи прегледачу ако је датотека коју пружате "напредна" ЦСС правила (за десктоп рачунаре) или једноставна ЦСС правила (за ручне или штампане). Синтакса је једноставна као ова:

<линк рел = "стилесхеет" хреф = "хандхелд.цсс" типе = "тект / цсс" медиа = "ручни" />

Ово може бити добра опција за креирање потпуно различитог дизајна за вашу мобилну локацију. Али једноставно не би требало да га користиш.

Типови медија могу на почетку звучати добро, али једноставни проблем долази са модерним паметним телефонима: недостатак подршке за претраживаче. Већина главних играча тамо је само игнорисала ову врсту функционалности (попут јабуке)
Затим долазе медијски упити да нас спасе.

#КСНУМКС Медиа Куериес и како заиста побољшати искуство са мобилним уређајем

Ово је далеко најпопуларнији начин за креирање мобилне верзије ваше странице.

Можете циљати одређене тачке на основу беса величине претраживача, величине екрана уређаја, густине пиксела (да, ретина!), Па чак и врсте медија.

Ево једноставног медијског упита:

@медиа (мак-видтх: КСНУМКСпк) {боди {бацкгроунд: ред; }}

Ово је прилично исто као и програмирање. IF "Ширина претраживача је КСНУМКС или нижа", ОНДА "Применити следећи ЦСС код".

дете Тема

Креирајмо нову фасциклу у / тхемес и назовимо је двадесетМобиле. Знам да двадесет дванаест већ користи медијске упите, али ту смо да научимо, зар не?

Дакле, креирајте датотеку стиле.цсс и додајте овај садржај:

/ * Име теме: мобиле тхеме Шаблон: твентитвелве * / @импорт урл (“../ твентитвелве / стиле.цсс”); @медиа хандхелд, само екран и (мак-видтх: КСНУМКСпк) {нав ул {дисплаи: ноне;} нав селецт {дисплаи: блоцк}}

Изнад смо створили дечију тему ЦСС, а такође смо додали правило које ће циљати само на мобилне уређаје, које ће сакрити главни мени и приказати избор. Ако у менију имате неки мени, могли бисте уштедети много простора уместо да га прикажете као ул / ли ставке

#КСНУМКС Ектреме макеовер са јКуери Мобиле

јКуери мобиле је одличан оквир који користи јКуери функционалност како би побољшао искуство са мобилним уређајем, са оптимизираним видгетима и УИ елементима.

ХТМЛ потребан да оствари посао је прилично једноставан, он само користи ХТМЛ податке за атрибуте и ЈС да открије и креира УИ видгете.

Међутим, како би јКуери Мобиле исправно функционисао на вашем ВордПресс блогу, прво ћете морати да позовете јКуери мобиле сцрипт. Враћајући се у нашу тему за дијете, дуплирати главну тематску датотеку хеадер.пхп и додати ове линије у ознаку главе:

<линк рел = "стилесхеет" хреф = "хттп://цоде.јкуери.цом/мобиле/КСНУМКС/јкуери.мобиле-КСНУМКС.мин.цсс" /> <сцрипт срц = "хттп://цоде.јкуери.цом /мобиле/КСНУМКС/јкуери.мобиле-КСНУМКС.мин.јс "> </сцрипт>

Треба напоменути да за комерцијалне предлоге треба користити вп_енкуеуе _сцрипт, тако да ћете избјећи дуплирање библиотека на вашој веб локацији.
Сада можемо да се играмо са скоро свим елементом УИ-а који желите. јКуери мобиле има пуно УИ видгета које можете користити у теми, али хајде да применимо страницу и сложене плоче.
Ово је основна ХТМЛ синтакса:

<див дата-роле = "паге"> <див дата-роле = "хеадер"> </див> <див подаци-улога = "садржај"> </див> <див дата-роле = "фоотер"> </ див> </див>

Помоћу овог кода креирате нову "страницу" и заглавље, садржај и подножје. Глава и подножје су фиксне и садржај ће се променити на основу тренутне странице, тако да можете једном учитати више страница и само их сакрити додјељивањем различитих ИД-ова.
Ово је основни ХТМЛ за сложене плоче:

<див дата-роле = “цоллапсибле-сет”> <див дата-роле = “цоллапсибле-сет” дата-цоллапсед = “труе”> <п> Склопиви садржај области </п> </див> </див>

Тамо је прилично једноставно имплементирати петљу, зар не? Ваш код ће изгледати овако:

<див дата-роле = "цоллапсибле-сет"> <? вхиле (хаве_постс ()) {...?> <див дата-роле = "цоллапсибле" дата-цоллапсед = "труе"> </див> <? ...}?> </див>

Избор менија је измењен

Помоћу кода који смо видели горе (у одељку Медијски упити) могли бисте сакрити свој уобичајени мени и приказати посебан селекциони мени. јКуери вам омогућава да га додате без пуно ПХП кода (да будемо искрени, ПХП нам уопште неће требати). Креирајмо нову датотеку и додајмо јој овај код:

јКуери (функција ($) {// када је ДОМ спреман $ (доцумент) .реади (фунцтион () {// креирамо селецт елемент $ ("<селецт />").аппендТо("нав"); / / Са новом опцијом, идите на ... $ ("<оптион />", {"валуе": "", "тект": "Иди на ..."}). АппендТо ("нав селецт");}); / / Сада имамо селектовани креирани да га попунимо: $ ("нав. Мену а"). Сваки (фунцтион () {// за сваки ЛИНК који се налази у менију вар аук = $ (тхис); $ ("<опција /> ", {" валуе ": аук.аттр (" хреф ")," хтмл ": аук.тект ();}). аппендТо (" нав селецт "); ; // онда поставимо падајућу функционалност да преусмеримо када изаберемо нову ставку $ ("нав селецт"). цханге (фунцтион () {виндов.лоцатион = $ (тхис) .финд ("оптион: селецтед"). });});

То ће створити нови мобилни мени, али проблем је у томе што учитамо јкуери мобиле чак иу "нормалној" верзији сајта. Због тога можемо користити и неколико додатака који ће нам помоћи да побољшамо нашу веб локацију.

#КСНУМКС - омотам све са мобилним детектором

Овај авесоме плугин креира нову функционалност која нам омогућава условно учитавање тема у зависности од корисничког уређаја. И ради са једноставним условним правилима, овако:

<? пхп иф (МобилеДТС :: ис ('андроид')) {....} елсеиф (МобилеДТС :: ис ('мобиле')) {....} елсе {}?>

МобилеДТС метод проверава тренутни уређај и враћа једноставно истинито / лажно. Затим можемо користити магичну функцију под називом свитцх_тхеме () да бисте поставили нову тему, а можете користити услове за плугин као што је МобилеДТС :: ис_свитцхер_енаблед () да бисте креирали везу са верзијом на десктопу када користите мобилни телефон.

Zakljucak

Дакле, да ли сте икада користили мобилне додатке или функције у својој ВордПресс теми? Који начин волите? Немојте бити стидљиви и поделити своје мисли!

О Роцхестеру Оливеири

Ја сам веб дизајнер и предузетник из Итајуба (МГ), Бразил. Волим да пишем о нејасним темама и радим неке цоол ствари.