Cum de a crea primul dvs. Joomla Template

În acest tutorial, veți afla despre elementele de bază ale unui șablon Joomla și creați unul de la zero. Vom trece rapid prin instalarea unui server local și a lui Joomla în sine și apoi vom crea un șablon de funcționare de bază.


1. Pregătirea

Înainte de a începe cu șablonul nostru, aveți câteva lucruri pe care trebuie să le pregătiți.
La fel ca majoritatea CMS-urilor, Joomla necesită un server cu PHP și MySQL instalat. Instalarea manuală de mai sus poate fi destul de enervantă și, pentru a fi sinceră, o pierdere de timp (cu excepția cazului în care doriți să ajungeți în modul în care sa făcut exact).
Ce vom face este să descărcați un singur program de instalare pentru toate cele de mai sus, care va lipi un server local pe sistemul dvs. și vă va oferi un panou de control cu ​​adevărat prea.

Deci, mergeți la WAMP și descărcați cea mai recentă versiune. (MAMP pentru Mac)

Odată ce programul de instalare este descărcat, executați-l și instalați WAMP într-un loc ușor de reținut. Dacă totul merge la plan, ar trebui să te uiți la un folder numit: wamp

Ar trebui să aveți acum și o pictogramă în bara de notificare (unde este ceasul) care vă oferă acces la panoul de control al WAMP. Puteți folosi acest lucru pentru o serie de lucruri, inclusiv reluarea serverului.


2. Descărcarea și instalarea Joomla

Acum, că avem un server instalat, putem obține Joomla și setați-l. Du-te la Joomla și descărcați cea mai recentă versiune.

Înainte de a continua, să aruncăm o privire la dosarul nostru din nou. În interior veți găsi o grămadă de directoare, dar cel care ne interesează este folderul www.
Aceasta este rădăcina configurației serverului dvs. și aici vom instala Joomla. (Notă: puteți instala cât mai multe copii ale Joomla aici, așa cum doriți, sau orice altceva în acest sens)

Deci, despachetați descărcarea Joomla în folderul www. De obicei, redenumesc în acest moment numele site-ului meu sau doar îl scurtez la joomla.

Joomla este acum pe serverul nostru. Cu toate acestea, există un ultim lucru pe care trebuie să-l facem înainte de a instala, și asta pentru a crea o bază de date. Deschideți browserul dvs. și accesați http: // localhost .
Aici veți găsi zona administratorului serverului dvs., aici creăm baza noastră de date.

Pentru a crea baza de date, faceți clic pe phpmyadmin sub secțiunea Aliasurile dvs..

De dragul acestui tutorial vom numi baza de date joomla. Nu veți crea un utilizator cu parolă aici, în schimb, folosind detaliile utilizatorului de bază. Este recomandat să creați un utilizator cu o parolă puternică în situații în direct.

Acum, că avem o bază de date, putem începe instalarea Joomla. Porniți browser-ul dvs. și mergeți la http: // localhost / joomla (sau orice ați numit site-ul dvs. atunci când îl despachetați.)

Primul ecran vorbeste destul de mult pentru sine. Alegeți o limbă și apăsați următorul.

Următorul ecran pe care îl vedeți este lista de verificare Pre-Instalare. Aceasta este o listă a elementelor necesare și a setărilor pe care Joomla trebuie să le instaleze cu succes. Asigurați-vă că aveți configurația necesară și faceți clic pe următorul.

În pagina următoare, citiți cu atenție licența și, când este gata, faceți clic pe următorul și introduceți detaliile necesare (Nume gazdă: localhost, Nume de utilizator: root, fără parolă și Joomla ca nume de bază de date) și apăsați Next.

Treceți la ecranul Configurare FTP făcând clic pe următoarea și pe următoarea pagină, introduceți numele site-ului dvs., o adresă de e-mail și alegeți o parolă. Aceasta va fi parola pe care o veți utiliza pentru a vă conecta în zona de administrare a Joomla împreună cu numele de utilizator: admin.
Nu vom instala niciun exemplu de date chiar acum, deoarece vrem să adăugăm modulele unul câte unul pentru a vedea cum se face șablonul nostru mai târziu în tut. Faceți clic pe Următorul.

Felicitări! Joomla este în desfășurare, dar înainte de a putea intra și a fi încurcat, trebuie să ștergem dosarul de instalare. Deci, du-te la folderul dvs. www în interiorul wamp, apoi în folderul joomla și ștergeți folderul de instalare


3. O privire mai atentă la Joomla

Este destul de greu în aceste zile să intri în orice discuție Open Source CMS fără numele de Joomla dropping.
Instalarea sa împreună cu panoul de administrare intuitiv îl face foarte popular cu utilizatorii care sunt după un CMS ușor, în timp ce, în același timp, fiind ambalate cu caracteristici care păstrează
mii de dezvoltatori ocupă aplicații și module de rulare. Dacă este necesar, familiarizați-vă cu partea din spate (recomand acest articol rapid Joomla 101 pe blogul Themeforest pentru a vă simți rapid.)

Pentru a accesa site-ul dvs., faceți clic pe previzualizare în colțul din dreapta sus al zonei de administrare. Ce veți obține este șablonul implicit, fără conținut și cele mai elementare dintre modulele încărcate.


4. Șablonul

Pentru a începe să înțelegeți structura șablonului, să aruncăm o privire la cea implicită. Du-te la folderul www, apoi în folderul joomla ar trebui să vedeți un dosar șabloane.
(wamp / www / joomla / template-uri). Aici se duc toate șabloanele diferite. Puteți comuta între șabloane din panoul de administrare.

În dosarul Șabloane, veți vedea un dosar pentru fiecare șablon instalat. Joomla vine cu trei șabloane: beez, rhuk_milkyway și ja_purity. Țineți aminte de această locație, deoarece în acest moment veți instala noile șabloane în viitor.

Deși majoritatea șabloanelor sunt alcătuite din câteva fișiere, doar două sunt necesare pentru a face un șablon de lucru. Acestea sunt:

  • index.php
  • templateDetails.xml

Primul - index.php - este locul în care intră tot markup-ul în care stick-ul include Joomla. Acestea pot fi văzute ca niște cârlige mici în care joomla închide informații, cum ar fi modulele de exemplu

Al doilea fișier este templateDetails.xml. Puteți vedea acest lucru ca o listă de instrucțiuni pentru Joomla. Această listă trebuie să includă numele șablonului, numele fișierelor utilizate în șablon (imagini etc ...) și pozițiile pe care doriți să le utilizați (inclusiv cele menționate mai sus).

   șablon _tut 31-01-2009 Nettut Fan [email protected] http://www.siteurl.com Tu 2009 GNU / GPL 1.0.0 Template Tut  index.php templateDetails.xml css / template.css   breadcrumb stânga dreapta top user1 utilizator2 user3 Utilizator4 subsol  

Cele de mai sus sunt un exemplu de fișier templateDetails.xml. După cum puteți vedea, aceasta este o listă specifică care spune Joomla despre șablon, cum ar fi numele, autorul, data creată etc.
Observați secțiunea de poziții din codul de mai sus. Acestea sunt pozițiile despre care am vorbit mai devreme, inclusiv.
Unele sunt auto-explicative, ca subsolul.
Dacă puneți subsolul joomla includeți în zona de subsol a designului dvs., veți putea controla unele aspecte ale subsolului folosind capătul din spate Joomla. Să încercăm să aruncăm împreună un șablon simplu.


5. Începutul șablonului

Să facem niște pregătiri, așa că avem ceva de lucrat. Accesați dosarul șabloane și creați un nou dosar. Să o numim template_tut.

În interiorul noului dosar, creați un fișier numit index.php și altul numit templateDetails.xml (copiați / inserați codul din exemplul de mai sus în interiorul acestuia).

Deschideți fișierul index.php în Notepad sau orice altceva pe care îl utilizați pentru a edita codul și copiați / inserați următoarele în:

     

Avem un cod DOCTYPE, un cod PHP pentru limbă, iar în secțiunea cap se includ și primul nostru Joomla. Aceasta nu este în lista xml deoarece nu este o poziție.

 

Ceea ce face acest lucru este include codul antetului joomla (care include titlul paginii) și o grămadă de alte lucruri care pot umple probabil o jumătate de tutorial pe cont propriu.

Finalizați marcajul pe pagină adăugând etichetele corporale și închizând eticheta html.


6. Utilizarea șablonului

Acum, că avem fișiere de bază în loc, să adăugăm o altă includere, de data aceasta pentru a afișa conținutul principal al oricărei pagini date fiind vizualizate.

 

Ar trebui să aveți acum acest lucru în index.php

         

Înainte de a testa șablonul nostru, să adăugăm un articol, astfel încât să avem conținut. Asigurați-vă că WAMP rulează și mergeți la administrarea din Joomla cu http: // localhost / joomla / administrator

Acum, introduceți detaliile de conectare

Accesați Conținut din meniu și apoi Manager articol din meniul derulant

Faceți clic pe Nou pentru a adăuga un articol

Dă articolul dvs. un titlu, completează un alias, asigură-te că este publicat în prima pagină și salvează

Să vedem cum arată articolul nostru pe prima pagină. Faceți clic pe previzualizare în colțul din dreapta sus după salvare. Ar trebui să vedeți prima pagină a site-ului dvs. cu textul.

Acum, că am publicat conținut, să vedem dacă șablonul pe care l-am făcut efectiv funcționează. Reveniți la zona de administrare și faceți clic pe Extensii și apoi pe Manager de șabloane

Ar trebui să vedeți template_tut în listă, deci mergeți mai departe și alegeți-l și setați-l ca implicit.

Examinați și examinați noul șablon glorios. Ei bine, poate nu atât de glorios, ci de primul tău șablon de joomla. URA!


7. Adăugați niște carne la șablonul nostru

Am lucrat șablonul nostru, preluarea informațiilor antetului, inclusiv titlul și afișarea conținutului pe care l-am creat în back-end-ul joomla. Înainte de a adăuga mai multe include, să aruncăm o privire mai detaliată asupra poziției modulului include; cele pe care le-am numit în fișierul xml.

  breadcrumb stânga dreapta top user1 utilizator2 user3 Utilizator4 subsol 

Acestea sunt incluse în modul următor:

 

Deci, pentru a adăuga, de exemplu, poziția stângă, index.php va arăta astfel:

          

În timp ce suntem la el, să adăugăm poziția subsolului

           

Dacă vă întoarceți în zona de administrare și mergeți la Managerul de Module veți observa un modul deja disponibil acolo, modulul Meniul Principal. Acest modul se instalează chiar dacă alegem să instalați versiunea simplă a Joomla.

Meniul este deja cuplat la poziția din stânga (pe care tocmai l-am inclus în șablonul nostru), așa că să vedem cum arată. Apăsați preview

După cum puteți vedea, acum avem un meniu cu un link către Acasă. Puteți adăuga mai multe elemente de meniu și puteți conecta la alt conținut prin intermediul Managerului de meniuri.

Să facem un subsol de lucru. Accesați Module Manager, faceți clic pe nou și selectați Subsol. Apoi apăsați următorul.

În pagina următoare, dă-i noului modul titlul: Footer și din meniul drop-down Position select Footer.

Faceți clic pe Salvați și apoi previzualizați pagina.
De asemenea, ar trebui să vedeți și informații despre subsol în șablonul dvs..


8. Adăugarea mai multor poziții și module

Permite stilul paginii noastre un pic, astfel încât să putem vedea ce facem. În directorul template_tut creați un folder nou și numiți-l "CSS" și creați un fișier în el denumit 'template.css'

Stick-ul include în index.php în unele divs și înfășurați-l pe toate într-un div de containere și apoi conectați foaia de stil ca exemplul. Simțiți-vă liber să copiați aspectul dezordonat dacă nu utilizați deja unul din propriile dvs. Mi-am facut repede pentru acest tutorial.

       
Header și altele
Bara laterală dreaptă

și CSS

* padding: 0; margin: 0;  ul list-style: nici unul;  float float: left; . clar clar: ambele;  #container width: 960px; marja: auto;  #header culoare-fundal: # 999999; înălțime: 150px;  #content width: 660px; text-align: centru;  #sidebar_left text-aliniere: centru; culoare de fundal: #CCCCCC; lățime: 150px;  #sidebar_right background-color: #CCCCCC; lățime: 90px;  #footer background-color: # 999999; text-align: center; 

Permiteți cârligul nostru lateral drept și antetul cu poziții. Adăugați poziția superioară la antet și poziția dreaptă la bara din partea dreaptă.

și

Acum, să creăm modulele pentru cele două poziții. Accesați zona de administrare a site-ului Joomla, conectați-vă dacă este necesar și accesați Module Manager din meniul derulant Extensii. Ar trebui să vedeți Meniul Principal și Footerul pe care l-am creat mai devreme. Urmați aceiași pași pentru a crea alte două module. Un modul de căutare pe care îl veți plasa în poziția de sus și un modul de conectare pe care îl veți plasa în poziția corectă.

Examinați pagina dvs., acum ar trebui să aveți o bara de căutare în antet și un formular de autentificare în bara laterală dreaptă. Acestea sunt destul de mult elementele de bază ale unui șablon Joomla. Creați poziții în design, cum ar fi cârligele mici pentru Joomla pentru a trimite informații, care, în cele mai multe cazuri, creați în spate. Puteți aplica acest lucru pentru aproape orice proiect utilizând numeroasele poziții pe care Joomla le oferă. Sper că acest lucru a fost util pentru voi băieți, rețineți că acestea sunt foarte elementele de bază, șabloane Joomla poate fi făcută atât de complexă și puternică pe cât doriți.


Cod