Com crear una plantilla bàsica de Joomla

Introducció

Aquest article us mostra un consell pas a pas sobre com podeu crear una plantilla de Joomla. Aprendràs els fitxers i codis requerits necessaris per crear una plantilla de Joomla. Podeu copiar i enganxar el codi i utilitzar-los tal com són o fer-los ajustaments mínims en funció de les vostres necessitats.


Pas 1: configureu una estructura de directori

Per dissenyar una plantilla bàsica de Joomla, feu clic a “Crear una carpeta nova”. Ho trobareu a la carpeta de plantilles. Poseu un nom a la carpeta. El nom ha de ser, un nom que utilitzeu per a la vostra plantilla (mynewtemplate).
Amb l’editor de text més preferit, creeu els fitxers index.php i templateDetails.xml. Per mantenir una estructura adequada, creeu 2 carpetes noves conegut com imatges i css. Dins de css generar un fitxer conegut com template.css.

Està bé si introduïu el vostre codi CSS directament al fitxer index.php des del principi. Tot i això, a molts dissenyadors web els agrada posar el seu codi CSS en un fitxer diferent i després connectar-lo a moltes pàgines mitjançant l’etiqueta d’enllaç. Si no ho feu, pot disminuir el temps que es triga a carregar les vostres pàgines, ja que es poden posar en memòria cau els diversos fitxers.

Executeu les ordres a continuació per configurar l’estructura de carpetes i fitxers:

* mynewtemplate /
** css /
*** template.css
** imatges /
** index.php
** templateDetails.xml

Pas 2: creeu un fitxer bàsic templateDetails.xml

És molt significatiu crear el fitxer templateDetails.xml. És el fitxer que permet a Joomla identificar la vostra plantilla. El fitxer conté els metadades principals que envien la plantilla que heu creat.

L’estructura de l’oració del fitxer varia d’una versió de Joomla a una altra.

Per a Joomla 1.5, executeu la comanda següent:

<?versió xml ="1.0" codificació ="utf-8"?>

mynewtemplate
2008-05-01
John Doe
[email protected]
http://www.example.com
John Doe 2008
GNU / GPL
1.0.2
La meva nova plantilla

index.php
templateDetails.xml
imatges
css

pa ratllat
a l’esquerra
dret
superior
usuari1
usuari2
usuari3
usuari4
peu de pàgina

Per a versions posteriors de Joomla 2.5 i posteriors, executeu la comanda següent: Alt "2.5" versió de Joomla a la versió de Joomla i instal·leu-la amb les ordres següents:

<?versió xml ="1.0" codificació ="utf-8"?>

mynewtemplate
2008-05-01
John Doe
[email protected]
http://www.example.com
John Doe 2008
GNU / GPL
1.0.2
La meva nova plantilla

index.php
templateDetails.xml
imatges
css

pa ratllat
a l’esquerra
dret
superior
usuari1
usuari2
usuari3
usuari4
peu de pàgina

Descobriràs que tenim una col·lecció de dades a les etiquetes de marcatge. La millor manera de fer-ho és copiar-lo i enganxar-lo al fitxer templateDetails.xml i modificar les parts adequades (com i).

La secció ha d’estar formada pels fitxers que utilitzeu. És probable que encara no siguis conscient del que són. Tot i això, no cal preocupar-se. Deixeu-ho ara per ara i, després, actualitzeu-lo.

Podeu utilitzar la part per definir tota la carpeta de seguida.

No altereu les posicions. Són la configuració típica i us ajudarà a canviar fàcilment de les plantilles habituals.

Pas 3: creeu un fitxer index.php bàsic

El fitxer index.php és la part central de totes les pàgines dissenyades a Joomla. Bàsicament creareu una pàgina similar a HTML. Tot i això, en lloc de l’HTML, heu posat codi PHP en la posició que estigui destinada al contingut del vostre lloc. La plantilla funciona amb la incorporació del codi Joomla a les ubicacions del mòdul i a la part del component de la vostra plantilla. Tot el que afegiu a la plantilla es farà visible a cadascuna de les vostres pàgines, tret que l’incorporeu a través d’una d’aquestes parts mitjançant l’ús de Joomla CMS (o codi personalitzat).

A continuació es mostren codis bàsics que només podeu copiar i enganxar al disseny web.

Pas 4: configureu la part inicial de la plantilla de Joomla

Una plantilla de Joomla comença amb les ordres següents:

<?php definit (“_JEXEC”) o morir (“Accés restringit”);?>

La línia inicial impedeix que les persones despistes visquin el vostre codi i treballin contra vosaltres.

La línia següent és la declaració de tipus de document (DOCTYPE). Indica als navegadors web i rastrejadors web la versió HTML implementada a la pàgina. El doctype és HTML5 i la versió més recent HTML. Generalment és molt compatible amb versions anteriors, però inclou moltes funcions noves. Heu de saber que això no funcionaria correctament a l’Internet Explorer 8 o versions anteriors sense algun tipus de pirateria. Heu de considerar això i comprovar quines són les necessitats dels vostres clients per orientar-vos sobre el millor document que cal utilitzar. Tot i així, és el que s’utilitza a Joomla 3.6 i les versions més recents.

La següent línia (3a) comença amb el vostre fitxer HTML i us explica el llenguatge del lloc web. Un fitxer HTML es classifica en dos; el cap i el cos. El capçal està format per les dades del document mentre el cos està format pel codi del lloc web que us ajuda a gestionar el disseny.

Pas 5: crea el sector Head

Per al cap executar les ordres a continuació:

La fila inicial ajuda a Joomla a incorporar les dades de l’encapçalament dret inclòs el títol de la pàgina, les dades de meta juntament amb el JavaScript del sistema. La part restant genera enllaços a dos esquemes: pàgines de tècnica i pàgina de tècnica personal quan es denomina template.css i està ubicada a la carpeta css del vostre directori de plantilles. Així, si la vostra plantilla és http://www.mysite.com/templates/my_template/, els fitxers css se situaran com a: http://www.mysite.com/templates/my_template/css/).

Pas 6: crea el sector del cos

Per fer-ho, executeu els codis següents:

Pot sorprendre que això ja és suficient. És tot el que necessiteu. Tot i que és només el disseny fonamental, complirà el que es requereix. La part restant seria interpretada per Joomla. Aquestes files, denominades generalment declaracions jdoc, informen a Joomla perquè incorpori el resultat de seccions específiques de l’estructura de Joomla. Tanmateix, heu d’assegurar-vos que configureu el menú "superior" posició de l’element.

Pas 7: col·loca posicions del mòdul

A la part superior de la fila que indica nom ="superior" incorporar una ubicació d’elements coneguda com superior i deixeu els mòduls de posició de Joomla a aquesta part de la plantilla. La fila que conté tipus ="component" és on es troben tots els articles i contingut clau. De fet, és el component i és extremadament significatiu. Es posiciona al nucli de la plantilla.

Podeu incorporar les vostres files específiques de components a qualsevol ubicació que trieu dins del cos. Tanmateix, haureu d’incorporar una fila equivalent al fitxer templateDetails.xml que es troba al costat de index.php de la vostra plantilla.

Pas 8: dissenya el final de la plantilla

Per finalitzar el disseny de la plantilla, implementeu el codi següent per tancar tota la configuració:

Pas 9: configureu imatges personalitzades

Si us agrada incorporar imatges a la plantilla, implementeu les ordres a continuació:

Pas 10: afegiu CSS personalitzats

Per incorporar css personalitzats, executeu el codi següent:

Tots els fitxers que incorporeu han de tenir una fila al fitxer templateDetails.xml per a la plantilla, tret que l’heu dipositat en una mini carpeta que podeu incorporar a un element).

Ara tindreu el vostre darrer com es mostra a continuació:

<?php definit (“_ JEXEC”) o morir (“Accés restringit”);?>

Pas 11: verifiqueu la plantilla

Per verificar la plantilla, al Gestor de plantilles, feu clic sobre ella i, a continuació, seleccioneu Valor predeterminat per convertir-la a la plantilla predeterminada.

Quan hagueu acabat amb això, podreu veure de forma immediata la vostra nova plantilla si feu servir Joomla 1.5. Estaria situat al Gestor de plantilles. Podeu accedir-hi fent clic a Extensions i seleccionant el Gestor de plantilles al menú desplegable. Si utilitzeu l’edició de Joomla 2.5 i versions anteriors, haureu de comunicar primer a Joomla que heu dissenyat una plantilla nova.

Aquest element que necessiteu per fer-ho es coneix com a Extensions de descoberta i podeu accedir-hi fent clic Extensions i llavors Ampliació Gerent seguit de la Descobrir tab. Feu clic a Descobrir fitxa per trobar la plantilla, podeu seleccionar la plantilla i després haureu de tocar a la secció Instal·leu pestanya per instal·lar-la. En aquest moment, veuràs la plantilla que acabes de crear al Gestor de plantilles (estils). Per arribar-hi, aneu a Extensions i després feu clic a Gestor de plantilles

És possible crear una plantilla fora de la plataforma de Joomla i quan hagueu acabat, només podeu instal·lar-la igual que altres extensions estàndard. Hi ha moltes maneres que podeu seguir per previsualitzar la pàgina d’índex mentre la creeu. Podeu fer-ho inserint els patrons al cap de la vostra pàgina d’índex o enllaçant-lo directament amb el patró de pàgina que voleu utilitzar momentàniament. Quan esteu llest per empaquetar el fitxer, podeu eliminar els enllaços.

Pas 12: empaqueteu la plantilla i prepareu-la per instal·lar-la.

Si el vostre directori conté una gran quantitat de fitxers fluixos, no serà adequat per compartir-lo. Per tant, l’últim que heu de fer és empaquetar adequadament el vostre directori perquè es pugui distribuir fàcilment. Per fer-ho, cal comprimir les estructures de directori i els fitxers sencers i arxivar-lo. Comprimiu el paquet mitjançant una extensió .zip o el deixeu dins TAR-gzip format amb l’ús d’una extensió .tar.gz. Alternativament, podeu deixar-ho dins TAR-bz2 format amb una extensió .tar.bz2.

Si introduïu la plantilla en un directori anomenat mytemplate /, per exemple, per empaquetar la plantilla, podeu enllaçar-lo al directori i executar qualsevol de les ordres següents:

tar cvvzf ../mytemplate.tar.gz *
zip -r .. \ mytemplate.zip *. *

Conclusió

Un cop arribeu a aquest pas, ja tindreu una plantilla de Joomla que funciona. Pot ser que encara no tingui l’aspecte fantàstic que desitges, però el que pots fer és experimentar i provar el disseny.

Consulteu aquests tres millors serveis de hosting de Joomla:

FastComet

Preu inicial:
2,95 dòlars


Fiabilitat
9.7


Preu
9.5


Usuari amigable
9.7


Assistència
9.7


Característiques
9.6

Llegiu comentaris

Visita FastComet

ChemiCloud

Preu inicial:
2,76 dòlars


Fiabilitat
10


Preu
9.9


Usuari amigable
9.9


Assistència
10


Característiques
9.9

Llegiu comentaris

Visita ChemiCloud

A2 Hosting

Preu inicial:
3,92 dòlars


Fiabilitat
9.3


Preu
9.0


Usuari amigable
9.3


Assistència
9.3


Característiques
9.3

Llegiu comentaris

Visita Hosting A2

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me