Njia za 4 za Kuboresha Toleo la Mkono la Mandhari yako ya WordPress

Kifungu kilichoandikwa na:
  • WordPress
  • Updated: Jul 29, 2013

WordPress ya Simu ya Mkono

Hebu tuangalie ukweli, vifaa vya simu vinapata zaidi na zaidi maarufu. Uvinjari wa kivinjari haukua tena, unapungua kwa kweli, wakati simu ya mkononi inakua haraka na simu zote za ajabu na meza za nje huko.

Kulingana na Net MarketShare, vifaa vya simu vinawakilisha 10% ya jumla ya trafiki ya wavuti. Ni takwimu kubwa, na ni kubwa hata katika baadhi ya niches na nchi. Lakini jambo muhimu hapa ni tahadhari maalum ambayo vifaa vya simu vinahitaji, kwa sababu ya nafasi ndogo ya skrini na ukweli kwamba uhusiano wa simu huwa polepole kuliko uunganisho wa desktop.

Mandhari nyingi za WordPress ni msikivu lakini unajua, tutaweza kuwa na nafasi ya kuboresha kila wakati. Kwa hiyo hapa tutaona teknolojia za 4 na njia za kuzitumia ili kuboresha uzoefu wa simu kwa watumiaji wako.

#1 Ol 'Media Aina

Miaka michache nyuma, wakati IE5.5 na IE6 zilionekana kuwa hai, vivinjari vya simu vilianza tu kuingia (na Opera ilikuwa bora sana), na watu wakaanza kutambua kuwa vitu vilikuwa vimevunja tangu simu za nyuma nyuma haikuweza mchakato wa mambo rahisi kama CSS (bila kutaja JS, flash na kadhalika).

Hivyo, kufanya tovuti ya simu iliyotengwa kabisa ilikuwa chaguo pekee wakati aina za vyombo vya habari zija kutuokoa. Wazo hilo lilikuwa rahisi, unaweza kumwambia kivinjari kama faili unayoipa ni "ya juu" sheria za CSS (kwa desktops) au sheria rahisi za CSS (kwa ajili ya handheld au magazeti). Syntax ni rahisi kama hii:

<link rel = "stylesheet" href = "handheld.css" aina = "maandishi / css" vyombo vya habari = "handheld" />

Hii inaweza kuwa chaguo nzuri ya kujenga kubuni tofauti kabisa kwa tovuti yako ya simu. Lakini wewe haipaswi kuitumia.

Aina za vyombo vya habari zinaweza kusikia vizuri wakati wa kwanza lakini tatizo rahisi lilikuwa na simu za kisasa za kisasa: ukosefu wa msaada wa kivinjari. Wachezaji wengi wa nje huko walikuwa wakipuuza tu aina hii ya utendaji (kama apple)
Kisha maswali ya vyombo vya habari huja kutuokoa.

Maswali ya Media ya #2 na jinsi ya kuboresha uzoefu wa simu

Hii ndiyo njia maarufu zaidi ya kuunda toleo la simu ya tovuti yako.

Unaweza kulenga pointi fulani kulingana na ukubwa wa ukubwa wa kivinjari, ukubwa wa skrini ya kifaa, wiani wa pixel (ndiyo, retina!), Na hata aina za vyombo vya habari.

Hapa ni swala rahisi la vyombo vya habari:

@media (max-upana: 700px) {mwili {background: nyekundu; }}

Hii ni sawa sana na programu. IF "Upana wa kivinjari ni 700 au chini", BASI "Tumia kanuni hii ya CSS".

mtoto Theme

Hebu tufanye folda mpya katika mandhari yako na uwape jina la ishiriniMobile. Najua, ishirini na mbili tayari hutumia maswali ya vyombo vya habari, lakini tuko hapa kujifunza, si sisi?

Kwa hiyo, fungua faili ya style.css na uongeze maudhui haya:

/ * Jina la Mandhari: mandhari ya simu ya mkononi Kigezo: ishirini na mbili * / @import url (".. .. ishirini na mbili / style.css"); @media handheld, skrini tu na (max-upana: 767px) {nav ul {kuonyesha: hakuna;} nav kuchagua {kuonyesha: block}}

Zaidi ya sisi tumeunda mandhari ya CSS ya mtoto na pia tumeongeza utawala unaozingatia vifaa vya mkononi tu, ambavyo vitaficha orodha kuu na kuonyesha chagua. Kwa hiyo ikiwa una orodha katika chaguo ungeweza kuokoa nafasi nyingi badala ya kuionyesha kama vitu vya ul / li

#3 Uboreshaji uliokithiri na Simu ya JQuery

JQuery simu ni mfumo wa kutisha ambao unatumia utendaji jQuery kuboresha uzoefu wa simu, na vilivyoandikwa vizuri na vipengele vya UI.

HTML inahitajika kufanya kazi iwe rahisi, inatumia tu sifa za data ya HTML na JS kuchunguza na kuunda vilivyoandikwa vya UI.

Lakini ili kufanya Simu ya Mkono ya JQuery ipate kazi vizuri katika blogu yako ya WordPress utahitajika kupiga kwanza script ya simu ya jQuery kwanza. Kurudi kwenye mandhari yetu ya mtoto, duplicate faili kuu ya mandhari ya kichwa.php na uongeze mstari huu kwenye kichwa cha kichwa:

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

Ninapaswa kutaja kuwa kwa biashara unapendekeza unapaswa kutumia wp_enqueue _script, hivyo utaweza kuepuka maktaba kwenye tovuti yako.
Sasa tunaweza kucheza karibu na kipengele chochote cha UI ambacho unataka. Simu ya jQuery ina vilivyoandikwa vingi vya UI ambavyo unaweza kutumia katika mandhari, lakini hebu tufute ukurasa na paneli zinazoweza kuunganishwa.
Hii ni msingi wa msingi wa HTML:

<div data-role = "ukurasa"> <div data-role = "kichwa"> </ div> <div data-role = "maudhui"> </ div> <div data-role = "footer"> </ div> </ div>

Kwa msimbo huu utaunda "ukurasa" mpya na maeneo ya kichwa, maudhui na miguu. Kichwa na mchezaji ni fasta, na maudhui yatabadilika kulingana na ukurasa wa sasa, ili uweze kupakia kurasa nyingi mara moja na tu kuzificha kwa kugawa vitambulisho tofauti.
Hii ni HTML ya msingi kwa paneli zinazoweza kuunganishwa:

<div data-role = "seti ya kuunganishwa"> <div data-role = "kuunganishwa-kuweka" data-imeshuka = ​​"kweli"> <p> Maudhui yaliyotangulia ya eneo </ p> </ div> </ div>

Ni rahisi sana kutekeleza kitanzi huko, sivyo? Naam, msimbo wako utaonekana kama hii:

<div data-role = "kuunganishwa-kuweka"> <? wakati (kuwa na_kurasa ()) {...?> <div data-role = "collapsible" data-kuanguka = ​​"kweli"> </ div> <? ...}?> </ div>

Menyu ya kuchaguliwa imerejeshwa

Kwa msimbo tumeona hapo juu (katika sehemu ya maswali ya vyombo vya habari) unaweza kujificha orodha yako ya kawaida na kuonyesha orodha maalum ya kuchagua. jQuery inakuwezesha kuongezea bila code ya PHP sana (kuwa waaminifu hatutahitaji PHP kabisa). Hebu tufanye faili mpya na uongeze msimbo huu pale:

jQuery (kazi ($) {// wakati DOM iko tayari $ (hati) .ready (kazi () {// hebu tengeneze kipengele cha chaguo $ ("<select />").appendTo("nav"); / / Kwa chaguo jipya, nenda ... $ ("<chaguo />", {"thamani": "", "maandishi": "Nenda ..."}). AppendTo ("nav kuchagua");}); / / Sasa tuna chaguo kilichoundwa tuachie: $ ("nav .menu a"). Kila (kazi () {// kwa kila LINK unapata kwenye menyu var aux = $ (hii); $ ("<chaguo / "", {"thamani": aux.attr ("href"), "html": aux.text ();}) appendTo ("nav kuchagua"); // append kipengee kipya kwa chagua)} ; // kisha tunaweka utendaji wa kushuka kwa rejea kuelekeza wakati tunapochagua kipengee kipya $ ("nav select") mabadiliko (kazi () {window.location = $ (hii) .find ("chaguo: kuchaguliwa"). ();});}};

Kufanya hivyo kutengeneza orodha mpya ya simu, bali tatizo ni, tunapakia simu ya jquery hata kwenye toleo la "kawaida" la tovuti. Ndiyo sababu tunaweza kutumia pia Plugins kadhaa ili kutusaidia kuboresha tovuti yetu.

#4 - Kufunika kila kitu kwa Mkono Detector

Plugin hii ya kushangaza inajenga utendaji mpya ambao inaruhusu sisi kwa hali ya kupakia mandhari kulingana na kifaa cha mtumiaji. Na inafanya kazi na sheria rahisi, kama hii:

<? php ikiwa (MobileDTS :: ni ('android')) {....} elseif (MobileDTS :: ni ('simu')) {....} mwingine {}?>

Njia ya MobileDTS inachunguza kifaa cha sasa kisha inarudi kweli ya kweli / uongo. Kisha tunaweza kutumia kazi ya uchawi inayoitwa switch_theme () ili kuweka mandhari mpya, na unaweza kutumia hali ya vipeperushi kama MobileDTS :: is_switcher_iwezeshwa () ili kuunda kiungo kwenye toleo la desktop wakati unatumia simu, kwa mfano.

Hitimisho

Kwa hiyo, umewahi kutumia programu za mkononi au kazi katika mandhari yako ya WordPress? Njia gani unayopendelea? Usiwe na aibu na ushiriki mawazo yako!

Kifungu cha Rochester Oliveira

Mimi ni mtengenezaji wa mtandao na mjasiriamali kutoka Itajubá (MG), Brasil. Ninapenda kuandika kuhusu mada ya wazi na kufanya mambo mengine ya baridi.

Pata kushikamana: