Búðu til móttækilegt Drupal þema

Efni.

• Upplýsingaskrár
• Sniðmátaskrár
• JavaScript og jQuery

• Þekkingar þörf: HTML, CSS, PHP
• Krefst: Vinnuuppsetning Drupal 7
• Verkefnatími: 1 klukkustund +

Sæktu heimildaskrárnar hér

Þessi grein birtist fyrst í tölublaði 221 í .net tímaritinu - mest selda tímarit heims fyrir hönnuði og forritara.

Svo, þú saknaðir DrupalCon London og Denver? Eða fór með og fékk ekki raunverulega hvað þetta þema var sem allir voru að tala um? Jæja, þessi kennsla mun setja þig á réttan hátt.

Ég vil fyrst fjalla um þá staðreynd að ég er ekki hönnuður eða CSS sérfræðingur og hef engan áhuga á að vera það heldur. Ég þekki Drupal nokkuð vel og vil sýna þér bestu leiðina til að byrja með Drupal þema og hvernig á að nýta fjölmiðlafyrirspurnir innan þemans. Í Drupal samfélaginu er mikið rætt núna um það hvernig best sé að samþætta tækni eins og HTML5, CSS3 og fjölmiðlafyrirspurnir. Bæði Jake Strawn og John Albin Wilkins ræddu notkun móttækilegrar hönnunar í DrupalCon fundum sínum í London.

Fjölmiðlafyrirspurnir eru ekki alltaf besta leiðin til að byggja upp síður fyrir farsíma, en þær bjóða upp á góða leið til að láta vefsvæðið þitt virka með mismunandi útsýni. Þeir leika líka vel með utanaðkomandi skyndiminni eins og Varnish. Margar af lausnum sem þefa af tækinu sýna síðan rétta útgáfu af síðunni, eða annað þema, enda með skyndiminni og sýna ekki réttu útgáfuna fyrir notandanum.

Til að hefjast handa við Drupal-þemu þarftu aðeins upplýsingaskrá til að gera grein fyrir og lýsa þema þínu og CSS. Drupal sér um afganginn fyrir þig. Hins vegar, ef þú vilt breyta einhverju af HTML eða jafnvel innihaldinu sjálfu, þá er þér frjálst að gera það - og þessi grein mun sýna þér hvernig.

Upplýsingaskrár

Fyrsta skrefið er að skrifa upplýsingaskrá. Þessi skrá geymir allar upplýsingar sem Drupal þarfnast til að vita hvert þema þitt er og hvernig á að nota það. Það eru fáir nauðsynlegir þættir og margir valfrjálsir.

1. nafn = Móttækilegur
2. lýsing = Dæmi um notkun fjölmiðlafyrirspurna í Drupal7
3. kjarna = 7.x
4. stílblöð [allt] [] = css / reset.css
5. stílblöð [allt] [] = css / main.css
6. stílblöð [(mín. breidd: 480px)] [] = css / 480.css
7. stílblöð [(mín. breidd: 768px)] [] = css / 768.css
8. stílblöð [(mín. breidd: 1024px)] [] = css / 1024.css
9. stílblöð [(mín. breidd: 1280px)] [] = css / 1280.css

Ofangreindum kóða er hægt að bæta við skrá sem kallast responsive.info. Þessi skrá verður að fara í möppu sem heitir móttækilegur, sem getur síðan farið í síður / allt / þemu af Drupal 7 uppsetningunni þinni.

Fyrstu línurnar í þessari skrá ættu að vera auðskiljanlegar: nafn er nafn þemans þíns; lýsing er lýsingin á þema þínu; og kjarni er sú útgáfa af Drupal sem þemað þitt er skrifað fyrir - í þessu tilfelli notum við því Drupal 7 kjarni er 7.x. Báðir nafn og lýsing mun birtast á Þemusíðunni innan Drupal viðmótsins.

Næstu línur eru allar stílblöðin sem þú vilt að Drupal hlaði sem hluta af þema þínu. Yfirlýsing þessara stílblaða er í gervi-PHP fylki. Fyrsti lykillinn í fylkinu eru fjölmiðlaþættir stílmerkisins sem Drupal mun búa til.Þessi lykill getur innihaldið hvaða fjölmiðlafyrirspurn sem er eða HTML-merkimiðil sem þú vilt nota fyrir þemað, svo sem prentun eða skjá. Seinni lykillinn í fylkinu er látinn vera tómur til að hægt sé að nota mörg stílblöð á eina gerð fjölmiðils. Í þessum stílblöðum hef ég farið í Andy Clarke ‘320 og uppúr’ nálgun að byrja með farsíma og vinna upp í fullri skjáborðsstærð.

Þessi hugsunarháttur gerir þér kleift að einbeita þér að því að bæta við virkni og eiginleikum þegar skjárinn verður stærri, frekar en að taka þá burt. Fyrstu tvö stílblöðin eru fyrir allar gerðir fjölmiðla. Endurstilla.css felur í sér endurstillingu CSS - í mínu tilfelli (og í dæmaskrám) er þetta Eric Meyer, en ekki hika við að nota þinn eigin.

Main.css er upphafið að ‘alvöru’ CSS. Þetta er með öllum sjálfgefnu CSS-skjölunum, sem verða notuð í öllum stærðum útsýnisstaðar, auk sniðsins fyrir síðuna þegar hún sést í útsýni sem er minna en 480 pixlar á breidd. Þetta er kjörinn staður til að bæta við portrett snjallsímastíl.

Síðustu fjórar línur upplýsingaskrárinnar skilgreina fjórar CSS skrár með fjölmiðlafyrirspurnum. Þessar fjölmiðlafyrirspurnir eru stilltar til að skipta um CSS á 480px, á stærð við landslag iPhone:

768px, á stærð við andlitsmynd iPad:

1.024px, á stærð við landslag iPad ...

... og 1.280px, á stærð við stórt skrifborðsvafra:

Þú getur nú haldið áfram og búið til CSS skrár sem skilgreindar eru í upplýsingaskránni. Slóðin fyrir skrárnar sem notaðar eru í dæminu notar CSS möppu vegna OCD. Svo þú þarft að búa til möppu sem heitir css innan vefsvæði / allt / þemu / móttækilegur myndaðu síðan CSS skrárnar þar inni með því að nota skráarnöfnin sem sett voru í upplýsingaskránni.

Gríptu afrit af CSS endurstillingu Eric Meyer (eða uppáhalds) og settu það inn endurstilla.css. Síðan í main.css byrjaðu að bæta við CSS til að hanna vefinn. Drupal hefur þegar búið til HTML fyrir þig og þú getur jafnvel gert „Móttækilegu“ þemað núna til að skoða hvað HTML Drupal hefur búið til og til að sjá hvernig vefurinn þinn lítur út í sinni naknu mynd.

Ertu ekki ánægður með HTML Drupal? Jæja, það er fínt - þú getur breytt því. Skoðaðu leiðbeininguna „Einfalda og bæta HTML“ í tölublaði 219, þar sem Jen Simmons ræddi hvernig á að breyta Drupal mynduðum HTML til að hjálpa við að bæta HTML5 við síðuna þína.

Sniðmátaskrár

Það eru margar sniðmátaskrár innan Drupal. Þessir eru búnir með kjarna Drupal uppsetningunni og með flestum einingum. Þetta er þar sem mest af HTML er skilgreint og auðvelt er að koma auga á þær vegna þess að þær enda allar með viðbótinni tpl.php. Hægt er að hnekkja öllum þessum sniðmátaskrám í þema þínu bara með því að bæta við samnefndri skrá - til dæmis, ef þú vilt hnekkja HTML fyrir hnúta á vefnum þínum geturðu afritað hnút.tpl.php frá hnútareiningunni og bættu henni við vefsvæði / allt / þemu / móttækileg.

Það þarf margar sniðmátaskrár til að byggja upp síðu. Sú fyrsta er html.tpl.php. Þetta inniheldur allt utan líkamans í HTML. Svo kemur page.tpl.php, sem er allt inni í líkamanum í HTML. Þessir tveir eru hlaðnir fyrir allar síður. Allar aðrar sniðmátaskrár eru háðar því hvernig vefsvæðið þitt er byggt upp. Ef þú ert með kubba hlaðnar það upp block.tpl.php fyrir þá. Ef þú ert að sýna hnúta, annað hvort á fullu eða teaser sniði, mun þetta hlaðast hnút.tpl.php. Síðan, ef þú hefur lagt fram einingar eins og skoðanir eða spjöld, þá verður til fjöldi mismunandi sniðmátaskrár fyrir hvern þátt sem þessar einingar búa til.

Sniðmátskrár vita hvaða efni á að birta byggt á PHP breytum sem notaðar eru innan þeirra. Þessar breytur eru byggðar með þemaföllum innan Drupal-kjarna og stuðlaðra eininga. Þemuaðgerðir eru líka eins auðvelt að hnekkja og sniðmátaskrár. Fyrsta skrefið er að búa til skrá sem heitir sniðmát.php innan vefsvæði / allt / þemu / móttækilegur. Innan þessa PHP sniðmáts er hægt að bæta við hvaða þemaaðgerð sem er, en breyta fyrsta orðinu í heiti aðgerðanna í þemaheitið, í þessu tilfelli „móttækilegt“.

Sem dæmi munum við skoða ofgnótt þemafallið sem er notað til að búa til símboðið. Símboðið er að finna á mörgum síðum og skoðunum yfir Drupal síðuna þína þegar þú ert með mikið af efni. Segjum sem svo að við vildum að símboðið væri bara mjög einfalt með fyrri og næstu krækjum, engar blaðsíðutölur. Við myndum nota:

1. ? php
2. virka responsive_pager ($ breytur) {
3. $ tags = $ breytur [’tags’];
4. $ element = $ breytur [’element’];
5. $ breytur = $ breytur [’breytur’];
6. alþjóðlegt $ pager_total;
7. $ li_previous = þema (‘pager_previous’, array (’text’ => (isset ($ tags [1]))?
8. $ tags [1]: t (’‹ fyrri ’)),‘ element ’=> $ element,‘ interval ’=> 1,’ parameters ’=> $ parameters));
9. $ li_next = þema ('pager_next', array ('text' => (isset ($ tags [3])? $ tags [3]: t ('next ›')), 'element' => $ element, ' bil '=> 1,' breytur '=> $ breytur));
10. ef ($ pager_total [$ element]> 1) {
11. ef ($ li_previous) {
12. $ atriði [] = fylki (
13. ’Class’ => array (‘pager-fyrri’),
14. ’Gögn’ => $ li_previous,
15. );
16. }
17. ef ($ li_next) {
18. $ atriði [] = fylki (
19. ’Class’ => array (‘pager-next’),
20. ’Gögn’ => $ li_next,
21. );
22. }
23. skila ’h2>’. t (‘Síður’). ’/ H2>’. þema (‘item_ list’, array (
24. ’Hlutir’ => $ hlutir,
25. ’Attributes’ => array (’class’ => array (’pager ')),
26. ));
27. }
28. }

Þessu má bæta við sniðmát.php skrá þemans. Það mun víkja fyrir þema_pager virka innan símboði.inc af Drupal kjarna. Þessi aðgerð er kölluð responsive_pager. Þetta sýnir mynstrið í Drupal við að breyta orðinu „þema“ í þemafalli í þemaheiti þegar það er ofar sniðmát.php. Hægt er að afrita upprunalegu þemaföllin og breyta þeim eftir þörfum. Þetta dæmi breytir sjálfgefinni símboði úr „fyrsta, fyrra, 1, 2, 3, 4, 5, næsta, síðasta“ í grunn „fyrra, næsta“. Það notar alla sjálfgefna Drupal kóða til að búa til þessa símhnappa, en hefur bara látið fjarlægja alla aðra rökfræði. Þessu er hægt að breyta til að láta símboðið hegða sér á þann hátt sem krafist er.

JavaScript og jQuery

Oft þarf síða smá glitta í JavaScript og nánar tiltekið frá jQuery. Drupal sendir með jQuery, svo það er hægt að nota í öllu þema þínu. JavaScript skrár er hægt að bæta við þemað þitt í gegnum upplýsingaskrána, rétt eins og CSS.

1. smáforrit [] = sparkle.js

Línunni hér að ofan má bæta við responsive.info að láta skrána fylgja með sparkle.js þegar þemað er hlaðið. Fyrir JavaScript notar Drupal ‘Behaviors’ kerfi, sem er notað til að búa til einn búnað fyrir viðhengi JavaScript og er því beitt stöðugt þegar síðu er hlaðið og nýju efni bætt við. Sem dæmi um hvernig þetta virkar skulum við bæta litlu magni af jQuery hreyfimynd við titilinn á síðunni.

1. (fall ($) {
2. Drupal.behaviors.responsiveAnimation = {
3. hengja: virka (samhengi, stillingar) {
4. $ (‘H1 # síðaheiti’, samhengi)
5. .hover (virka () {
6. $ (þetta)
7. . lífvera ({
8. 'Spássía til vinstri': '10px'
9. },
10. ‘Hægur’);
11. });
12. }
13. }
14. } (jQuery));

Ofangreindum kóða er hægt að bæta við sparkle.js skrá í móttækilegu þema og bætir fjörandi áhrifum við heiti síðunnar þegar það er sveima yfir. Eitt sem þarf að hafa í huga hér er að þegar breyting er gerð á upplýsingaskrá þemans mun hún ekki taka gildi fyrr en þemað hefur verið virkjað aftur svo þú þarft að fara á útlitssíðuna og gera þetta áður sparkle.js mun virka. Kóðinn byrjar á því að kortleggja jQuery við $: til að forðast átök er þetta ekki sjálfgefið. Aðgerðin er síðan geymd sem eign Drupal.hegðun og gefið nafn sem tengist þemanu og virkni þess. Restin er það sem þú myndir finna í venjulegu jQuery.

Ef h1 # síðaheiti er sveimað yfir, er bætt við hægum hreyfimyndum til að bæta 10 punkta framlegð vinstra megin við heiti síðunnar. Það eru frábær gögn um notkun JavaScript og jQuery á Drupal vefsíðu, drupal.org/node/171213. Þetta veitir þér meiri innsýn í hvernig það virkar og hvernig hægt er að nota það.

Við höfum fjallað um Drupal þema á háu stigi; skjölin fara meira í dýptina. Til að fá hugmynd um samhengi þess sem fjallað er um hér skaltu hlaða niður dæmaskrám. Ég hef einnig sett upp móttækilegt þema úr þessari grein á millwoodonline.com. Þetta gerir þér kleift að sjá hvernig það lítur út og virkar með raunverulegu innihaldi síðunnar.

Orð: Tim Millwood

Viðskiptavinur ráðgjafi hjá Acquia og sjálfstæður vefhönnuður, Tim er virkur meðlimur í Drupal samfélaginu.