Creați un șablon pentru Joomla

Cuprins
Înainte de a dezvolta șablonul nostru, trebuie să cunoaștem câteva concepte despre fișierul Joomla și structura directorului. Unele directoare principale, elemente și fișiere sunt:
ȘablonEste un grup de directoare și fișiere care specifică structura și designul pe care site-ul web îl va adopta. Putem avea mai multe șabloane instalate pentru a selecta și astfel a schimba designul în funcție de dezvoltarea pe care o desfășurăm.
Un fișier șablon combină în general codul HTML și PHP unde sunt definite blocurile sau straturile div ale web-ului în care conținutul web va fi afișat în funcție de pagină sau secțiune.
În plus, alte blocuri pot fi definite în șablonul HTML pentru a insera pluginuri sau cod de funcționalități pe care trebuie să le executăm. În general, blocurile pe care le definim sunt blocurile antetului web, bara de navigare sau meniul, coloanele laterale dacă există, zona de conținut, dacă avem nevoie putem crea toate blocurile pe care le dorim, totul depinde de cerințele de dezvoltat. Aceste blocuri sau zone se numesc poziții.
ModulUn modul joomla este un obiect cu cod HTML, PHP, CSS sau JavaScript care poate fi afișat în anumite poziții sau blocuri desemnate în șablonul web. De exemplu, putem pune un acces utilizator în antet, un selector de limbă, un formular de contact etc.
ConecteazaUn plugin Joomla este un obiect cu cod HTML, PHP, CSS sau JavaScript care poate fi încorporat în conținutul web. Diferența față de modul este locul în care apare pluginul pe pagină. În general, pluginul nu poate indica în ce poziție se află, deoarece sunt executate pentru a produce un eveniment, de exemplu pentru a valida un e-mail,
ComponentaO componentă este o colecție de module și pluginuri. De exemplu, o componentă poate fi un magazin virtual precum Virtuemart, toate obiectele componente au propriile setări și pot fi afișate pe o pagină separată.
Structura unui șablon Joomla
Un șablon este un set de fișiere care definesc structura web și blocurile sau pozițiile în care putem atribui diferitele elemente. Un șablon pentru Joomla constă din următoarele fișiere:
index.php: este fișierul principal care descrie structura și designul paginii web
eroare.php: este fișierul care va conține directivele în cazul în care pagina nu a fost găsită eroare, eroare 404.
Previzualizați imaginile: sunt cele numite template_preview.png.webp și template_thumbnail.png.webp, care vă vor permite să vedeți o previzualizare a șablonului în miniatură de la administrator.
Components.php: Acest fișier, dacă trebuie să avem o versiune imprimabilă a webului, atunci configurăm foile de stil pentru a prezenta articolul care urmează să fie tipărit.
Imagini: este directorul în care vom salva toate imaginile designului pentru imagini.
js: în acest director vom pune scripturile javascript sau Jquery sau orice vom folosi.
limba: în acest director putem găsi fișierele necesare traducerilor în diferite limbi.
Un aspect important este că, din motive de securitate, fiecare director trebuie să aibă un fișier index.html gol pentru a împiedica citirea lor din exterior, astfel încât oricine dorește să acceseze directorul va vedea doar un document gol.
După instalarea Joomla pentru exemplul nostru, nu vom indica acum cum să-l instalăm, poate fi descărcat pur și simplu de pe http://www.joomlaspanish.org/

După instalarea Joomla, vom crea într-un alt loc un alt director decât directorul Joomla și îl vom denumi Demo pentru a crea șablonul nostru. În acest director vom crea mai întâi fișierul templateDetails.xml, care este cel care conține configurația șablonului, în interior scriem următorul cod XML.
 Șablon demo 1.0 26.02.2015 Sergio [email protected] Copyright (C) 2015 Demo șablon demo pentru Joomla 3.0 index.php imagini css depanare poziție-0 poziție-1 poziție-2 poziție-3 poziție-4 poziție-5 poziție -6 poziție-7 poziție-8 poziție-9 poziție-10 
Definim numele șablonului pe care îl numim Demonstrație șablonCând instalăm șablonul în Joomla, managerul va folosi acel nume pentru a crea un director și pentru a salva fișierele șablonului, acesta va fi, de asemenea, numele care va fi văzut în panoul de administrator, autor, directorele pe care șablonul le conține și poziții care vor avea, putem defini mai multe chiar dacă nu le folosim pe toate.
Apoi vom crea fișierul index.php unde vom defini structura rețelei și pozițiile corespunzătoare.
 
 .container {width: 980px; margine-stânga: auto; / * centrăm webul * / margin-right: auto; chenar: negru 1px solid; } .container {margin: 20px 0px; / * aplicăm o marjă de 20px conținutului * / border: solid 1px verde; } .content {float: left; lățime: 750px; chenar: roșu solid 1px; } .colder {float: right; lățime: 270px; } .colder, .pie, .head {border: 1px albastru solid; } 
Clasele CSS sunt ușor de determinat ce blocuri avem și ce poziții. În cele din urmă, creăm un fișier zip cu directorul care conține șablonul și îl instalăm de la administratorul joomla. Accesăm panoul de administrare Joomla.

De acolo mergem la meniu Extensii> Manager extensii și continuăm să instalăm șablonul pe care îl avem în format zip.
Tine minteAmintiți-vă că fiecare șablon diferă în funcție de versiunea Joomla, în acest caz este compatibil cu 2.5 până la 3.x. De asemenea, pentru a instala toate directoarele trebuie să aibă permisiuni pentru încărcarea fișierelor.

MARI

Faceți clic pe imagine pentru ao mări

Șablonul instalat și preluând informațiile implicite de la Joomla în acest caz versiunea 2.5 în spaniolă, vedem modul în care modulul de acces al utilizatorului a fost localizat automat în poziția 3, deoarece este desemnat în mod implicit, în timp ce conținutul web este plasat în poziția 1 care este cel pe care l-am atribuit în conținutul web. De la administrator putem schimba poziția diferitelor elemente pe care le gestionăm.
Odată ce am instalat șablonul, dacă dorim să îl actualizăm sau să-l modificăm, putem acționa asupra codului șablonului instalat în joomla în directorul templetes sau să lucrăm în afara Joomla într-un alt director, să recreăm fișierul zip, apoi să ștergem șablonul de la joomla și reinstalați-l.

V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv

Vei ajuta la dezvoltarea site-ului, partajarea pagina cu prietenii

wave wave wave wave wave