Creați o temă adaptivă pe drupal - revista CMS

Abilitățile necesare: HTML, CSS, PHP
Cerinte: instalat Drupal 7
Durata: 1 ora +
sursa de descărcare

Subiecte Drupal vă permit să modificați aspectul și componenta emoțională a site-ului. Astăzi, Tim Millvud va explica modul de a crea o temă, care va arata diferit pe diferite dimensiuni de ecran.

În primul rând, vreau să spun că eu nu sunt un expert designer sau CSS - și nu am de gând să-i. Drupal dar știu destul de bine și vreau să-ți arăt cât de ușor este de a începe să utilizați teme Drupal și să le combine cu cereri de mass-media. Comunitatea Drupal a discutat recent de multe ori problemele de integrare cu tehnologii cum ar fi HTML5, CSS3 și anchete mass-media. Și Jake Strawn și Dzhon Elbin Wilkins a discutat despre utilizarea de design dinamic în timpul concertelor sale de la DrupalCon din Londra.

interogările media nu sunt întotdeauna cel mai bun mod de a crea site-uri pentru dispozitive mobile, dar aceasta este o modalitate bună pentru a obține site-ul dvs. pentru a lucra pe diferite ecrane. De asemenea, ei fac bine cu cache-ul extern, de exemplu, cu Vanish. Multe dintre deciziile care determină tipul de dispozitiv, și apoi să demonstreze o versiune adecvată a site-ului sau firele sunt de multe ori în cache și, ca rezultat, nu arată utilizatorul versiunea corectă.

Info-files

Primul pas - este de a scrie info-fișier. Acest fișier conține toate informațiile necesare Drupal pentru a ști ce subiectul este și cum să-l folosească. Acesta conține mai multe elemente esențiale, și multe alte setări.

Exemplul de mai sus poate fi adăugat într-un fișier numit responsive.info. Acest fișier este necesar pentru trecerea într-un dosar receptiv. care se află în mod implicit în directorul de site-uri / toate / teme folder instalat Drupal 7.

Primele câteva rânduri din explicație nu are nevoie de: numele responsabil pentru numele temei dvs.; Descrierea conține descrierea; și de bază - versiunea Drupal la care tema este scris. În cazul nostru, vom folosi Drupal 7, dar versiunea notată cu 7.x.

Numele subiectului și descrierea acesteia va fi vizibil pe pagina în interfața Drupal.

Următoarele câteva linii sunt foile de stil ca Drupal ar trebui să fie încărcate ca parte a tema. Foile de stil sunt declarate ca fiind o matrice pseudo-PHP. Prima matrice este elementele-cheie ale mass-media tag-ul stilului generat de Drupal. Această cheie poate conține orice etichetă interogare media sau element de media stil HTML pe care doriți să le utilizați în subiectul, indiferent dacă acesta este fontul sau grafic. A doua cheie în matrice este lăsat gol, asa ca a fost posibil să se utilizeze mai multe foi de stil pentru același tip de suport. Pentru aceste foi de stil am folosit metoda Endi Klarka de „320 sau mai mult“, care constă în dezvoltarea de design-ul original pentru dispozitive mobile, precum și revizuirea ulterioară dimensiunea completă.

Ultimele patru linii ale fișierului info defini fișierele CSS folosind interogări media. Acestea sunt configurate astfel încât comutatorul 480 în modul CSS - iPhone cu lățimea pe orizontală.

768, iPad dimensiune portret scanare:

Dimensiunea A treia utilizat subiectul dinamic utilizează lățime fixă de 768 pixeli potriviți pentru tablete pentru a scana un portret, cum ar fi iPad. După cum puteți vedea, aspectul adaugă o bară laterală a fost absent înainte.

1024 pixeli orizontal de scanare iPad:

În cele din urmă, cele 1280 de pixeli, dimensiunea unui PC browser pe desktop:

Aceasta este versiunea finală a temei dinamice a site-ului meu pentru a scana în 1280 de pixeli.

Puteți continua să creați fișiere CSS definite în info. calea de fișier specificat în acest exemplu, este implicit în directorul CSS. Deci, aveți nevoie pentru a crea un css director numit în site-uri / toate / teme / folder receptiv. și apoi genera ele însele fișierele CSS, folosind numele definite în fișierul de informații.

Nu-mi place HTML generat de Drupal? Ei bine, asta e bine - puteți face cu ușurință modificări. Mă uit în 219th ediție a articolului „simplifica și îmbunătăți sale HTML-cod“, în care Ian Simmons vorbește despre modul în care să se adapteze codul HTML generat de Drupal, adăugând site-ul său la HTML5.

fișiere șablon

În Drupal există un set de template-uri. Acestea sunt furnizate în setul de bază de Drupal, și, de asemenea, vin cu cele mai multe programe de completare, care le administrează HTML. Ele sunt ușor de găsit, care se termină cu extensia tpl.php. Oricare dintre aceste modele pot fi utilizate în temă, trebuie doar să adăugați un fișier cu același nume. De exemplu, dacă doriți să înlocuiți HTML pentru nodurile site-ul dvs., copiați node.tpl.php de la nodul modulului și adăugați-l la site-uri / toate / teme / receptiv.

Pentru a crea o pagină de obicei durează mai multe fișiere șablon. Primul este html.tpl.php. Acesta include tot ceea ce este în afara corpului documentului HTML. Următoarea vine page.tpl.php. Aceasta afectează tot în corpul documentului. Aceste două fișiere sunt folosite pentru toate paginile. Restul depinde de designul site-ului. Dacă aveți un bloc, va trebui să aibă block.tpl.php. Prefer noduri, în formă completă sau trunchiat - ai nevoie de node.tpl.php. Dacă doriți să pună în aplicare în site-ul dvs., cum ar fi un grup de module complexe, veți avea nevoie de un set de template-uri pentru fiecare dintre elementele generate de acest modul.

Acest cod poate fi adăugat la fișierul template.php tema noastră. Acesta înlocuiește theme_pager funcția din cadrul pager.inc Drupal de bază. Funcția se numește responsive_pager. În șablon Drupal, vom vedea cu cuvântul „tema“ în numele funcției schimbat la numele temei, atunci când o suprascrie în template.php. Funcția inițială a temei pot fi copiate și apoi modificate, dacă este necesar. În exemplul nostru, am schimbat navigarea pager standard, paginile de tipul „la partea de sus, anterior, 1, 2, 3, 4, 5, de lângă, până la sfârșit“ la „anterior, următor.“ Se folosește de asemenea, toate codul standard de Drupal pentru a genera butoanele pager, dar elimină toate logica inutile. Funcția poate fi modificat cu ușurință pentru a face pager pentru a lucra așa cum doriți.

Codul de mai sus poate fi adăugat într-un fișier sparkle.js tema noastră - adaugă el efect animat atunci când treceți mouse-ul pe numele site-ului. Trebuie să ne amintim un lucru: atunci când face modificări în info-fișier, acestea nu vor intra în vigoare până la reactivarea subiect - deci va trebui să mergeți la pagina de alegere a aspectului si ridica-l din nou înainte de a începe sparkle.js. Codul începe cu jQuery referire la simbolul $ - evita conflictele aceasta nu se întâmplă în mod automat. După această funcție este stocată ca proprietate Drupal.behaviors și li se atribuie un nume se potrivește cu tema și funcționalitatea acestuia. Orice altceva nu este diferit de ceea ce ai văzut atunci când se lucrează cu un standard de jQuery.

Am atins pe crearea de Drupal numai superficial, documentația dezvăluie problema este mult mai profundă. Pentru a înțelege mai bine ceea ce spunem noi astăzi, descărcați un fișier mostră. Ca temă, așa cum este descris în acest articol, am încărcat pe millwoodonline.com. Verificați-l pentru a vedea cum funcționează cu conținutul acestui site.

Instrucțiuni pas cu pas pentru instalarea Ubercart magazin de pe site-ul Drupal-

Ubercart - un modul de software open source, complet magazin online integrat cu CMS Drupal. Ubercart este considerat unul dintre cele mai bune soluții de e-commerce din lume. În plus față de vânzarea de produse și servicii pe internet, este folosit pentru a crea o comunitate în jurul produselor, vânzarea de acces la conținut, plătit descărcări, și multe altele.

Curs scurt - „Adaptive site-ul pentru o săptămână“: tipografie și grilă (Partea II)