Hozzon létre egy adaptív téma drupal - cms magazin

- Szükséges ismeretek: HTML, CSS, PHP
- Követelmények: telepített Drupal 7
- Időtartam: 1 óra +
- letöltés forrás
Témák Drupal lehetővé teszi, hogy módosítsa a megjelenés és az érzelmi komponens a webhelyen. Ma Tim Millvud elmagyarázza, hogyan lehet létrehozni egy témát, ami egy kicsit más, különböző méretben kapható.
Először is, azt szeretném mondani, hogy nem vagyok egy tervező vagy CSS szakértő -, és nem is tervezem, hogy őket. Drupal de tudom, elég jól, és én meg akarom mutatni, hogy mennyire könnyű, hogy elkezd használ Drupal témák és összekapcsolják őket a média kéréseket. A Drupal közösség nemrég gyakran tárgyalt a problémák az integráció a technológiák, mint a HTML5, CSS3 és média kérdéseire. És Jake Strawn és Dzhon Elbin Wilkins tárgyalt a dinamikus tervezés alatt előadások DrupalCon Londonban.
Médialekérdezések nem mindig a legjobb módja annak, hogy hozzon létre oldalakat a mobil eszközök, de ez egy jó módja annak, hogy a webhely dolgozni a különböző képernyők. Azt is jól külső caching, például a Vanish. Sok a döntések, amelyek meghatározzák a készülék típusát, majd bizonyítani alkalmas változata a honlapon, vagy a szálak gyakran cache, és ennek eredményeként, nem jeleníti meg a felhasználó a megfelelő verziót.
Info-fájlok
Az első lépés - az, hogy írjon az info-fájlt. Ez a fájl tartalmazza az összes szükséges információt Drupal ahhoz, hogy tudjuk, mi a téma, és hogyan kell használni. Ez több lényeges elemek, és még sok más beállításokat.
A fenti példa is hozzáadható egy fájlt úgynevezett responsive.info. Ez a fájl átmenethez szükséges egy reagáló mappát. amelynek székhelye alapértelmezésben a könyvtárban sites / all / themes mappába telepített Drupal 7.
Az első néhány sort a magyarázat nem szükséges: név felelős a neve a téma; leírása tartalmazza a leírás; és a mag - Drupal változat, amelyben a téma van írva. A mi esetünkben, az általunk használt Drupal 7, de az a változat jelöljük 7.x
A név a téma, és annak leírása látható lesz az oldalon a Drupal felület.
A következő néhány sor stylesheets Drupal kell betölteni részeként a témát. Stíluslapok nyilvánították egy ál-PHP tömbök. Az első tömb kulcsa multimédiás elemek stílus tag által generált Drupal. Ez a kulcs tartalmazhat bármilyen média keresett tag vagy HTML-style média elemet, amely a használni kívánt a témában, hogy ez a betűtípus vagy grafikai. A második kulcs a tömbben marad üres, így nem volt lehetséges több stíluslap ugyanazon hordozó típusát. Ezekre stíluslapok szoktam Endi Klarka módszer a „320 vagy több”, amely a fejlesztés az eredeti design a mobil eszközök és az azt követő felülvizsgálat teljes méretét.

Az utolsó négy sora a fájl info meghatározzák a CSS fájlok médialekérdezés. Ők úgy vannak kialakítva, hogy a kapcsoló 480 a CSS mód - iPhone vízszintes szélességét.

768, iPad méretű álló scan:
Harmadik méretű használt dinamikus alá, amely fix szélességű 768 típushoz tabletták beolvasni egy portré, mint iPad. Mint látható, az elrendezés teszi hozzá oldalsáv is hiányzott előtt.

1024 képpont vízszintes vetítési iPad:

Végül a 1280 pixel, akkora, mint egy böngésző asztali PC:
Ez a végső változata a dinamikus téma oldalamon beolvasni 1280 képpont.

Akkor továbbra is létrehozni CSS fájlok meghatározott info. fájl elérési út ebben a példában az alapértelmezett a CSS könyvtárat. Tehát meg kell hozzon létre egy könyvtárat nevű CSS sites / all / themes / reagáló mappát. majd létre a CSS fájlokat magukat, a meghatározott nevek az info fájlban.
Nem szeretem a HTML által generált Drupal? Nos, ez rendben van - könnyen lehet, hogy megváltozik. Nézze meg a 219. kiadás a cikk „egyszerűsítése és javítása, HTML-kód”, amelyben Ian Simmons beszél, hogyan állítsa be a HTML kódot a Drupal, hozzátéve, a helyszínnek HTML5.
template fájlok
A Drupal van egy sor sablonokat. Kerülnek forgalomba az alapkészlet Drupal, és jön a legtöbb kiegészítő, az általuk kezelt HTML. Ezek könnyű megtalálni, de a vége kiterjesztésű tpl.php. Minden ilyen mintákat lehet használni a téma, akkor kell csak hozzáadni egy fájlt ugyanazzal a névvel. Például, ha azt szeretnénk, hogy felülbírálja a HTML webhely csomópontot, akkor csak másolja node.tpl.php a modul node, és add meg a sites / all / themes / reagálnak.
Ahhoz, hogy hozzon létre egy oldalt általában néhány sablon fájlokat. Az első html.tpl.php. Ez tartalmaz mindent, ami a testen kívül a HTML dokumentum. Ezután jön page.tpl.php. Ez mindenre hatással van a szervezetben a dokumentumot. Ez a két fájlt használ minden oldalon. A többi attól függ, a design a webhelyen. Ha van egy blokk, akkor szüksége lesz block.tpl.php. Inkább csomópontok teljes vagy csonka formában - szüksége van node.tpl.php. Ha azt szeretnénk, hogy végre a helyén, mint például a panel összetett modulok, akkor be kell állítani a sablonokat az egyes elemek által generált ez a modul.
Ezt a kódot kell adni a fájl template.php témánk. Ez felülírja theme_pager funkciójának pager.inc Drupal core. Ez a funkció a responsive_pager. A Drupal sablon, azt látjuk, hogy a szó „téma” a funkció neve megváltozott a neve a téma, ha felülírják azt template.php. Az eredeti funkciója a téma lehet másolni, majd szükség esetén módosítani. A példánkban mi változott a standard pager navigációs típusú oldalakra „hogy a felső, a korábbi, 1, 2, 3, 4, 5, mellett, hogy a végén”, hogy „az előző, következő.” Azt is használja az összes szabványos Drupal kódot generál a lapozó gombok, de eltávolítja a felesleges logikát. A funkció könnyen módosítható, hogy a pager dolgozni a kívánt módon.
A fenti kód adhatunk egy fájlt sparkle.js témánk - hozzáteszi animált hatása, ha lebeg az egeret a hely neve. Meg kell emlékezni egy dolog: amikor módosítja a info-fájl, akkor nem lép hatályba, amíg reaktiválási témában - így kell menni az oldalra a választás a megjelenés és vedd fel újra, mielőtt sparkle.js kezdődik. A kód kezdődik jQuery hivatkozva a szimbólum $ - konfliktusok elkerülése ez nem történik meg automatikusan. Miután ez a funkció tárolja a Drupal.behaviors tulajdon és rendelt meg egy neve megegyezik a téma és a funkcionalitást. Minden más nem különbözik attól, amit látott, amikor dolgozik egy szabványos jQuery.
Mi érintette létrehozása Drupal csak felületesen, a dokumentáció feltárja a probléma sokkal mélyebb. Hogy jobban megértsük, miről beszéltünk ma, töltse le a minta fájlokat. Mivel a téma, mint a cikkben leírt, általam feltöltött millwoodonline.com. Ellenőrizze, hogy ki, hogy hogyan működik a honlap tartalma.
Lépésről lépésre telepítésének Ubercart boltban Drupal-site
Ubercart - egy szoftver modul nyílt forráskódú, teljesen integrált online bolt CMS Drupal. Ubercart tartják az egyik a világ legjobb e-kereskedelmi megoldások. Amellett, hogy a termékek és szolgáltatások értékesítése az interneten, akkor használják, hogy hozzon létre egy közösségi termékek körül, az értékesítés a tartalomhoz való hozzáférés, fizetős letöltések, és így tovább.
Rövidpályás - „Adaptive honlap ezen a héten”: a tipográfia és a háló (Part II)