Înainte de a aborda discuția despre un anumit șablon, să încercăm din nou să ne dăm seama ce este un șablon în joomla. În înțelegerea majorității utilizatorilor, șablonul este responsabil pentru designul extern al paginilor site-ului dvs. Cu toate acestea, un șablon nu este doar un design.

De asemenea, include mecanisme care determină plasarea datelor, metode și intervale de afișare a diverselor module de date, parametri de limbă etc.
Versiunile anterioare de Joomla au folosit șablonul de bază Beez. În cele mai recente versiuni, șabloanele construite pe baza acestuia (Beez5, Beez_20) au suferit modificări semnificative în comparație cu acesta. La crearea șablonului Beez, dezvoltatorii au inclus în el posibile opțiuni de adaptare la nevoile oricărui proprietar de site. Codul sursă al șablonului ar putea fi ușor modificat. Modificarea foilor de stil în cascadă a facilitat crearea unui șablon de design complet nou, fără a cheltui un efort semnificativ. Dar în procesul de lucru, designerii au încercat să nu folosească acest șablon, ci și-au dezvoltat propriul de la zero.
Ca rezultat, au fost dezvoltate două șabloane complet noi pentru Joomla 2.5. Ambele șabloane folosesc limbajul JavaScript, șablonul beez5 folosește limbajul HTML5, iar șablonul beez_20 nu necesită suprascrieri. Nu este nevoie să folosiți tabele în timpul aspectului. Numele claselor de tabel în cascadă au fost schimbate.

Proprietățile șablonului

Noile șabloane au devenit disponibile pe scară largă, acum este posibil să selectați locația blocului de navigare pe pagină, au fost adăugate etichete funcționale WAI-ARIA, modulele în file pot fi afișate automat, au fost adăugate poziții pliabile pentru module și coloane, două forme de design au fost integrate în șablonul beez_20: natural și uman, a adăugat suport pentru limbajul HTML5 în șablonul beez5.
Nu este un secret pentru nimeni că există oameni a căror capacitate de a percepe lumea din jurul lor este slăbită. Unii sunt incapabili de percepție vizuală, alții sunt limitați în percepția sunetului. Totuși, acești oameni folosesc și resurse de informații de pe Internet. Și toate portalurile de internet create trebuie să fie concepute pentru această categorie de utilizatori. Șabloanele Joomla au toate instrumentele necesare pentru a oferi persoanelor cu dizabilități posibilitatea de a folosi internetul.
Atunci când creați șabloane, trebuie să respectați cerințele de bază: materialele site-ului nu trebuie să se suprapună cu designul acestor materiale, structura site-ului nu trebuie supraîncărcată, navigarea prin paginile site-ului ar trebui să fie susținută de comenzi de la tastatură, designul color al conținutului trebuie fi contrastant.
Cel mai important punct din punctul de vedere al unui dezvoltator este separarea conținutului de design. Pentru a face acest lucru, trebuie să scăpați de designul tabelar al materialului de pe pagină. Pentru formatare este folosit doar CSS. Materialul trebuie aranjat liniar de sus în jos.
Designul semantic vă permite să navigați între paginile site-ului pe baza titlurilor, listelor etc., precum și să vă formați o idee generală a materialului documentului.
Cu toate acestea, dezavantajul conținutului liniar al paginii este că poate dura timp pentru a ajunge la informațiile de care aveți nevoie (dacă informațiile sunt în partea de jos a paginii). Pentru a remedia această problemă, puteți utiliza marcaje HTML pentru a accelera navigarea în pagină. În acest caz, se presupune că va fi creat un meniu suplimentar pentru a vă deplasa prin pagină. Pentru cei care sunt deja familiarizați cu structura site-ului, acest meniu poate fi ascuns.
De exemplu:

• Treceți la textul principal.
• Accesați blocul principal de navigare și conectați-vă.

Când creați un site web, trebuie să acordați atenție schemei de culori din design. Dacă pentru utilizatorul mediu nu există o diferență semnificativă în contrastul culorilor, atunci pentru persoanele cu dizabilități contrastul este de o importanță deosebită. În acest caz, culorile de fundal și text ar trebui să fie contrastante. Contrastul maxim este posibil cu textul negru pe fundal alb. Dar pentru a evita problemele legate de distorsiunea optică, fundalul paginii ar trebui să fie ușor colorat.

Toate fișierele de înlocuire a aspectului se află în folder șabloane/<имя_шаблонa>/html. Deci, dacă șablonul este numit șablonul_meu_frumos, apoi toate fișierele de înlocuire a aspectului vor fi localizate în folder templates/my_beautiful_template/html. Aceasta înseamnă că fișierele de înlocuire sunt salvate în siguranță în folderul separat de șabloane. Dar o astfel de conservare „sigură” este posibilă numai dacă șablonul nu este de bază.

Șabloanele de bază incluse în Joomla pot fi modificate atunci când faceți upgrade la o nouă versiune de Joomla. Și acest lucru nu provoacă dificultăți dacă șablonul este utilizat fără modificări în fișierele sale. Dar dacă se fac substituții într-un șablon, atunci în cele din urmă unele dintre fișierele acestuia pot fi modificate ca vechi, în timp ce altele pot fi adăugate ca noi.

Copiați folderul șablon într-un folder nou. Pentru a face acest lucru, utilizați funcția de copiere a folderului la nivel de sistem de operare pentru a muta folderul templates/beez_20 (și toate subfolderele și fișierele acestuia) într-un nou folder templates/beez_20_copy. Asigurați-vă că toate fișierele din folderul sursă sunt copiate corect în folderul de destinație.

Nu este deloc dificil să protejați fișierele de înlocuire și actualizare atunci când treceți la o nouă versiune de Joomla. Pentru a face acest lucru, trebuie doar să utilizați un șablon care nu este inclus în opțiunea principală de distribuție Joomla. De dragul simplității prezentării, această carte va folosi o copie a copiei beez_20 a șablonului original beez_20. Există două moduri de a obține o copie a acestui șablon.

• Creați-vă propria copie a șablonului beez_20_copy urmând instrucțiunile de mai jos.
• Descărcați fișierul de arhivă beez_20_copy.zip de pe site-ul web dedicat acestei cărți (http://joomlaprogrammingbook.com/downloads.html), apoi instalați-l folosind comanda Extension Manager ^Install.

Realizarea unei copii a unui șablon este relativ ușoară și chiar utilă pentru a ști cum să o faci în general. Pentru a face acest lucru, urmați acești pași:

2. Schimbați numele fișierelor în fișierul XML șablon beez_20_copy. În acest scop, deschideți fișierul XML beez_20_copy/templateDetails.xml pentru editare. Editarea în sine constă doar într-o căutare globală și înlocuirea textului beez_20 cu textul beez_20_copy. Ar trebui să existe trei astfel de înlocuiri: în elementul pache și două fișiere de suport de limbă în elementele de limbă.

3. Redenumiți fișierele de suport pentru limbă. În această procedură, numele fișierelor au fost modificate în fișierul XML. Acum trebuie să le redenumiți la nivel de sistem de fișiere, după cum urmează:

• en-GB.tpl_beez_20.ini la en-GB.tpl_beez_20_copy.ini
• ro-GB.tpl_beez_20.sys. ini la en-GB.tpl_beez_20_copy.sys .ini

Copiați ambele fișiere din folderul templates/beez_20_copy/language/en-GB/ în folderul language/en-GB/, folosind din nou funcția de copiere a sistemului de operare.

5. Găsiți și instalați o copie a șablonului ca extensie nouă. Versiunea 1.6 introduce un nou instrument excelent pentru detectarea componentelor software Joomla - Discover. Oferă o modalitate alternativă de a instala extensii noi. Când instalați o extensie, se întâmplă următoarele.

• Fișierele de extensie sunt copiate în folderele necesare ale instalării curente Joomla.
• Baza de date Joomla este actualizată cu informații despre noua extensie.

Folosind instrumentul de detectare Discover, puteți copia manual fișierele în foldere și apoi puteți instrui Joomla să găsească noi extensii. Odată ce noua extensie este detectată, aceasta poate fi instalată. Acest lucru asigură că înregistrările corecte sunt create în baza de date Joomla. Să folosim acest instrument pentru a instala un nou șablon. Dacă accesați comanda Extension Managers Discover și selectați pictograma Discover din bara de instrumente, Joomla va găsi noul șablon.

În continuare, șablonul beez_20_copy trebuie să fie selectat implicit pentru site-ul web. Pentru a face acest lucru, accesați Extensii => Manager șabloane: Stiluri, selectați un șablon nou și faceți clic pe butonul Setați ca implicit.

În cele din urmă, dacă doriți ca noul șablon să arate ca cel original, trebuie să modificați noile setări de stil din el, astfel încât să se potrivească cu vechiul stil de design. Acest lucru se face în ecranul Edit Style, deschis făcând clic pe numele șablonului (în acest caz - beez_20_copy - Implicit)

Editarea stilului de design al unui șablon nou

Câmpurile din formularul care se deschide sunt setate după cum urmează.

Diferite șabloane pentru diferite pagini ale site-ului - 3,8 din 5 pe baza a 5 voturi

Nu toate paginile de pe un site trebuie să aibă același design. Unele site-uri au culori și stiluri diferite pentru pagini diferite. Alte site-uri au design radical diferite într-o secțiune de alta. Joomla vă permite să implementați o idee similară.

Acest tutorial vă va arăta cum să utilizați mai multe șabloane sau mai multe stiluri ale unui șablon pentru diferite părți ale site-ului dvs. Joomla.

Pasul 1: Analizarea șablonului standard Joomla

Joomla are 3 șabloane standard: Atomic, Beez5 și Beez2. Aceste trei șabloane sunt pentru site-ul web. Celelalte două - Bluestork și Hathor - sunt destinate panoului de administrare Joomla. De asemenea, puteți să instalați un alt șablon sau să vă creați propriul șablon.

Unul dintre șabloane va fi întotdeauna atribuit implicit. Șablonul implicit este marcat cu o stea aurie, așa cum se arată în figură.

Puteți schimba foarte ușor șablonul implicit făcând clic pe una dintre stelele deschise. Dacă steaua este completată, înseamnă că a fost atribuit un nou șablon implicit.

După instalarea joomla, șablonul implicit este Beez2. Dacă faceți clic pe numele șablonului, puteți edita unele dintre setările șablonului.

În acest exemplu, puteți vedea pagina de setări a șablonului. Acest șablon este atribuit implicit și nu este legat în mod specific de niciun element de meniu (Opțiune: Link către meniu).

Pasul 2: Alocarea diferitelor șabloane la diferite pagini Joomla

Să aruncăm o privire la editarea unui alt șablon și să vedem cum să-l atribuim unei anumite categorii.

• Închideți pagina de editare a șablonului Beez2.
• Deschideți șablonul pentru editare Beez5, bifând caseta de lângă șablon și făcând clic pe butonul: "Edita".

Conectarea diferitelor șabloane la diferite pagini ale site-ului este implementată exclusiv folosind elemente de meniu. Accesați secțiunea „Legătura meniului” și puteți selecta paginile site-ului pentru care doriți să atribuiți șabloane individuale.

În acest caz, câmpul „Implicit” pentru acest șablon folosește valoarea "Nu", deoarece avem deja un alt șablon folosit implicit. Bifați caseta de lângă articol „Categoria 1” sau orice vei folosi.

Salvați acest link și apoi verificați-vă site-ul. După salvare, veți vedea că șablonul Beez20 este atribuit ca implicit. Și șablonul Beez5 este marcat cu o bifă verde.

Iată cum arată pagina de pornire cu șablonul Beez implicit.

În acest moment, merită să ne amintim că schimbarea șablonului nu va afecta conținutul site-ului. Totuși, titlul, logo-ul, designul și poziția modulelor se vor schimba. Acest lucru înseamnă că nu puteți schimba șablonul fără a face muncă suplimentară.

Pasul 3: Definiți diferite poziții ale modulelor în diferite șabloane

Pozițiile modulelor în șablonul Beez5 (sus) și șablonul Beez20 (jos) sunt aproape aceleași, deci modificările sunt minore. Cu toate acestea, există și diferențe.

Una dintre diferențele vizibile dintre șabloane este poziția modulelor lângă logo. În șablonul Beez5, pozițiile 1 și 0 sunt sub logo.

În Beez20, poziția-0 este deasupra logo-ului și poziția-1 este sub acesta.

Aceasta este o diferență destul de minoră, dar un bun exemplu al modului în care pozițiile modulelor în șabloane pot diferi. În acest caz, este dat un exemplu simplu, deoarece pozițiile modulelor din ambele șabloane au aceleași nume.

Dar ce să faci dacă pozițiile modulelor din șabloane diferă nu numai ca poziție, ci și ca nume?

Reveniți la Managerul de șabloane și conectați șablonul Atomic la pagină Categoria 2. Veți vedea șablonul Atomic pe pagină Categoria 2. Are poziții complet diferite ale modulelor și îl puteți vedea în imaginea de mai jos.

Această pagină arată pozițiile modulelor:

1. atomic-topmeniu
2. atomic-topquote
3. căutare atomică
4. bara laterală atomică
5. atomic-stânga jos
6. atomic-de jos

Dacă doriți ca șablonul Atomic să funcționeze în plus față de Beez20, trebuie să lucrați mai mult. Nu este garantat că o poziție de modul care funcționează în Beez20 va funcționa în Atomic.

Pasul 4: Adăugați un modul de meniu la noul șablon.

• Accesați Extensii - Module Manager și faceți clic pe butonul Crea.
• Selectați tipul de modul Meniu.
• Atribuiți noului dvs. modul o poziție bara laterală atomică.
• Joomla 2.5 introduce o nouă caracteristică: un câmp de comentarii pentru un modul. Acest lucru vă va împiedica să vă confundați atunci când aveți multe module.

Acum vom lega modulul doar la o anumită pagină.

• În opțiunea „Legarea la elementele de meniu”, selectați valoarea „Numai pe paginile specificate”.
• Bifați caseta de lângă pagina pe care doriți să afișați modulul.

Modulul de meniu este acum plasat în bara laterală. Probabil ați observat că acesta este un meniu orizontal și există spațiu limitat pentru el. Trebuie să încercăm din nou să găsim o poziție mai potrivită.

Accesați managerul de module și mutați meniul în poziție atomic-topmeniu. Rezultatul îl puteți vedea în imaginea următoare.

Pasul 5: stilați un șablon în loc de șabloane diferite.

În loc să utilizați șabloane complet diferite pe diferite pagini ale site-ului dvs., puteți pur și simplu să faceți o mică modificare șablonului implicit. Aceasta este o caracteristică nouă introdusă în Joomla 2.5. Această tehnică vă va permite să creați diferențe mai subtile pe fiecare pagină fără a fi nevoie să faceți munca descrisă mai sus.

• Accesați Managerul de șabloane.
• Selectați șablonul pe care doriți să-l duplicați (bifați caseta de lângă acesta).
• Faceți clic pe butonul "Duplicat".

• Bifați caseta de lângă șablonul Beez2-Default (2).
• Faceți clic pe butonul "Schimba".

• Beez20 vine cu două scheme de culori: Personal și Nature. Selectați Natură din lista verticală.
• Atribuiți un șablon unui element de meniu Categoria 1 in bloc „Link către meniu”. Vă rugăm să rețineți că există și alte setări pe care le puteți modifica. De exemplu: sigla, numele site-ului și poziția de navigare.

Acum aveți două stiluri diferite de șabloane pe site-ul dvs., asociate cu două pagini.

• De asemenea, puteți aloca un șablon atunci când creați elemente de meniu.
• Când vă aflați în managerul de meniu, puteți asocia un stil de șablon atunci când creați un element de meniu.

Evaluare 3.80

Un șablon este un tip de extensie în Joomla care reprezintă aspectul site-ului dvs. Există două tipuri de șabloane utilizate în Joomla CMS: șabloane front-end și șabloane back-end. Front-end (front) - determină aspectul site-ului dvs., aceasta este întreaga parte vizuală a resursei de Internet pe care o vede utilizatorul. Back-end este un tip de șablon care vă permite să schimbați aspectul (interfața) panoului de administrare Joomla!

Joomla 2.5 oferă mai multe șabloane standard care vin cu instalarea CMS (3 șabloane front-end și 2 back-end):

Șabloane de site-uri web

• Beez 20 (șablon implicit);
• Beez 5;
• Atomic.

Șabloane pentru panoul de administrare

• Bluestorkk (șablon implicit);
• Hathor.

Scopul șablonului

Un șablon controlează aspectul și aspectul unui site. Acesta oferă un cadru care reunește elemente comune, module, componente și plugin-uri și oferă, de asemenea, o foaie de stil în cascadă pentru site.

Când instalați pentru prima dată Joomla! două șabloane care au fost menționate în secțiunea de mai sus sunt incluse automat. Pe alte site-uri web puteți găsi multe alte șabloane pentru fiecare gust și culoare. Un număr mare de șabloane sunt disponibile utilizatorilor în formă gratuită sub diferite licențe, dar există și șabloane plătite. Orice utilizator își poate crea propriul șablon, trebuie doar să îl definiți h cunoștințe vaste în acest domeniu.

Șabloanele sunt instalate prin panoul de administrare Joomlaîn Extension Manager, după instalare șablonul va fi disponibil în Template Manager.

De ce Joomla! folosește șabloane?

CMS Joomla! identifică câteva sarcini cheie care sunt implicate în producerea unei resurse eficiente de internet. Una dintre aceste sarcini este crearea unui site web estetic (aspect). Această sarcină presupune luarea deciziilor privind plasarea elementelor de conținut (module, pluginuri și componente).

Atunci când creați o nouă pagină web, aspectul majorității elementelor de conținut ar trebui să rămână același (meniuri, bare laterale, spații pentru banner etc.). În plus, utilizatorul dorește să vadă același aspect pentru fiecare pagină nouă și conținutul acesteia (fonturi, stiluri de antet, paletă de culori etc.). De asemenea, utilizatorul poate modifica unele elemente generale ale site-ului pentru a specifica alte opțiuni de afișare etc. (de exemplu, module). Drept urmare, după puțin design, vă veți stabili un aspect general pentru site-ul dvs. și veți rezolva problema pregătirii unui șablon pentru fiecare pagină și conținutul acesteia.

Și acum merită să ne gândim. De ce să scrieți cod pentru fiecare pagină separat când puteți folosi un șablon pentru fiecare secțiune de pe site și când adăugați o pagină nouă trebuie doar să „compleți spațiile libere”. Toate acestea nu sunt atât de simple pe cât se spune, dar acest material oferă informații de bază despre utilizarea șablonului și scopul acestuia.

Implicația principală a acestui material este că un șablon controlează aspectul site-ului dvs. și, în același timp, permite administratorului de resurse să acorde mai multă atenție conținutului real decât să scrie cod.

Editarea unui șablon. Ce se poate face?

Șablonul este folosit pentru a proiecta în mod organic conținutul care este încărcat de un browser web pentru citire ulterioară pe ecran. Puteți schimba în mod independent schemele de culori, imaginile și efectele, fonturile și aspectul în sine.

Aspect. Un șablon este zona în care sunt setate stilurile de design ale site-ului dvs. Aceasta include plasarea diferitelor elemente (componente, module și pluginuri) care sunt responsabile pentru diferite tipuri de conținut. De exemplu: diverse meniuri (puteți alege un stil de meniu dintre opțiunile existente și îl puteți utiliza pentru a vă crea propriul meniu unic).

Paleta de culori. Cu CSS puteți schimba culoarea fundalului, a linkurilor, a textului etc.

Fonturi. Același lucru este valabil și pentru fonturi. Folosind stiluri CSS, puteți defini un aspect coerent pentru textul paginilor dvs. Acest lucru facilitează modificarea aspectului tuturor informațiilor text prin editarea unuia sau a două fișiere, mai degrabă decât editarea fiecărei pagini individuale.

Imagini și efecte. Puteți controla complet modul în care imaginile sunt afișate pe pagină și chiar puteți crea efecte flash, cum ar fi meniurile drop-down.