Supporto volontario e collaborativo per Joomla!® in italiano

Primi passi per la realizzazione di un sito e la modifica del template

Valutazione attuale: 4 / 5

Stella attivaStella attivaStella attivaStella attivaStella inattiva
 
Template SimplexL'intento di questa mini guida è quello di spiegare in modo semplice, anche se non completo, come cominciare a lavorare con Joomla!® 3.2.

Per cominciare procuriamoci gli strumenti necessari a noi, piccoli webmaster...

Joomla!® ultima versione - Firebug - Notepad++ - Gimp
Poi procederemo con:
I primi passi fra i contenuti - Componente contatti - Componente per la Mappa del sito - Personalizzazione del template - I moduli di Joomla!®
I moduli del template
Nel pacchetto "completo" del template troveremo, oltre ai .psd del logo, la licenza e una guida all'installazione, una cartella Joomla 3.0 Modules che contiene:
Modulo Slideshow mod_ariimageslider.zip
Modulo Lightbox mod_artsexylightbox_lite_edition.zip
Modulo contatti mod_rapid_contact16.zip

Joomla!® ultima versione
Joomla!®, nell'ultima versione disponibile lo scarichiamo ovviamente da qui: http://www.joomla.it/download.html
Clicchiamo sull'ultima versione disponibile e scarichiamo il pacchetto sul nostro computer. Eventualmente il file di lingua, se il pacchetto disponibile è in inglese...
Firebug
È un add-ons per i browser. Serve per scoprire tutto, ma proprio tutto, sul css del nostro template, il file in cui è scritto, qual è la riga, in quale cartella si trova questo file, a provare le modifiche in diretta, scrivere nuovo codice css e vedere su funziona, ecc. ecc. Poi si prendono le modifiche viste e piaciute e si riportano sul corrispettivo file del template. Personalmente lo uso con Firefox e caldamente lo consiglio. Ma c'è la possibilità di metterlo anche su Chrome e altri browser. Zio Google vi aiuterà nel cercare la versione che vi serve. Qui lo trovate per Firefox e qui trovate un bel tutorial.
Notepad++
È un editor per il codice sorgente, ci servirà per le modifiche ai file css o php. Ma serve anche per scriverci il testo, oppure incollare il testo copiato ad esempio da Word, tutto sporco di formattazioni che NON va mai incollato direttamente nell'editor di Joomla!® ma prima passato nell'editor e pulito... Lo troviamo qui e scarichiamo la versione per PC. Se invece siete molti fighi e usate Mac come me, Notepad++ c'è, ma a me non funziona... Perciò cercatene un altro con Zio Google, tipo: TextWrangler.
Gimp
Questo è un programma che serve a modificare le immagini. Altri ce ne sono, ma questo è carino... Lo scaricate qui: Gimp e qui trovate il tutorial.

I primi passi fra i contenuti
Abbiamo Joomla!®, abbiamo gli attrezzi che ci servono per iniziare, solo alcuni ovviamente ce ne sono molti altri ma questa è una piccola guida, avremo modo, diventati grandiwebmaster, di sfurgugliare Zio Google e cercarli, quindi iniziamo...
Per prima cosa facciamo un pensiero su cosa vorremmo mostrare al mondo. Cioè, detto più seriamente, pianifichiamo il nostro sito:
Una home con una serie di articoli tra i più recenti - Chi siamo, con una presentazione generale - Cosa facciamo, magari con sottogruppi di cose che siam bravissimi a fare - Dove siamo, con la cartina per raggiungerci -  Contatti (che è un componente di default) e, crepi l'avarizia la Mappa del sito (altro componente, ma da installare), per darla poi in pasto a Google.
Successivamente prenderemo un template free e lo personalizzeremo. Questo prima di impostare i moduli... Perché? Perché ogni template ha posizioni diverse, con nomi diversi. Se impostiamo i moduli prima di aver scelto il template definitivo, dovremo poi spostarli nelle nuove posizioni. E noi siamo molto pigri.

Opzioni

Andiamo su Contenuti - Gestione articoli. In alto a sinistra c'è il tasto Opzioni. Da qui potremo scegliere le impostazioni Globali di: Articoli - Layout modifica - Categoria - Categorie - Blog / Articoli in evidenza - Lista - Opzioni condivise - Integrazione - Permessi. Le impostazioni scelte saranno applicate a tutte le nuove voci menù lasciando Usa Globali. Ad esempio, per Articoli: queste impostazioni si applicano al layout dell'articolo, a meno che non siano state cambiate per una specifica voce di menu.
Opzioni
Categorie
La prima cosa da fare è la realizzazione delle categorie in cui inserire gli articoli. Personalmente creo una categoria per ogni voce menù. Questo perché, anche se la voce menù può essere collegata ad un singolo articolo, preferisco collegare ogni voce menù ad una categoria, si sa mai, un domani volessi aggiungere un articolo oppure cambiarlo, non dovrò reimpostare la voce menù ma solo aggiungere o modificare l'articolo nella categoria a cui la voce di menù è collegata. Quindi: Contenuti - Gestione categoria - Nuova categoria. Oltre a dare un titolo alla Categoria, è possibile inserire testi, foto ed elementi per la pubblicazione come in un articolo. Impostiamo ora le Categorie che ci servono: Chi siamo - Cosa facciamo - Dove siamo e le sottocategorie di Cosa facciamo: Tacchi - Dadi - Datteri (per fare una sotto categoria basta impostare sulla destra, nella tendina Categoria principale - Cosa Facciamo).
Articoli
Contenuti - Gestione articoli - Nuovo articolo. Qui troviamo l'editor di default con il quale possiamo scrivere, inserire immagini, leggi tutto, ecc. A me piace moltissimo JCE che permette, fra le altre cose, il caricamento delle immagini e una gestione delle stesse molto comoda, il link da una parola o un'immagine a tutti i contenuti e voci di menù e la possibilità di selezionare l'opzione per inserire i-frame e altro codice direttamente in vista codice dell'articolo, senza disattivare l'editor. Lo troviamo qui: JCE. Ricordiamoci anche di compilare la Meta Description, per zio Google e anche per lo Share su FB...
Dove siamo
Possiamo utilizzare un plugin per l'inserimento della mappa come Googlemaps Plugin. Io preferisco copiare il codice i-frame di Google Maps, perché non aggiungo un plugin in più e perché posso gestire la misura della mappa. Faccio un articolo per ogni mappa, ci scrivo quel che mi serve e incollo il codice che ho copiato e personalizzato.
Contatti
Componenti - Contatti. Possiamo fare una o più categorie di contatti se ne abbiamo molti da gestire. Oppure un contatto singolo. C'è la possibilità di collegare la voce menù sia al contatto singolo che alla categoria. Il contatto singolo ha una serie di opzioni standar da complilare. Possiamo anche aggiungere altre informazioni con l'editor a disposizione. Possiamo cambiare i label di default (come Altre informazioni, ad esempio) con l'override della lingua.
Mappa del sito
Utile a chi naviga e a noi per avere un file xml da utilizzare per Google Analitycs. È un componente che si scarica qui. Per vedere anche tutti i contenuti, dopo aver creato la mappa del sito, ricordiamoci di andare su Componenti - Xmap - Extensions e attivare il plugin - Xmap - Content Plugin.
I moduli di Joomla!® (alcuni fra quelli di default)
Breadcrumb o Percorso
Estensioni - Gestione moduli - Nuovo - Percorso - Questo modulo mostra il percorso della pagina che si sta visualizzando. Nel template c'è una posizione breadcrumb, adattissima alla visualizzazione di questo modulo.
Login
Estensioni - Gestione moduli - Nuovo - Login -  Questo modulo mostra la form dove inserire Nome utente e Password per accedere al sito.
Articoli recenti
Estensioni - Gestione moduli - Nuovo - Articoli recenti - Questo modulo mostra la lista degli ultimi articoli pubblicati e non scaduti.

Personalizzazione del template

04 SimplexIl template è joomlage0071-simplex lo troviamo qui. Ha una versione commerciale ma anche una free, che troviamo qui. Il pacchetto SimplexLite free (Joomla 3 Template) comprende anche i tre moduli: Modulo Slideshow mod_ariimageslider.zip - Modulo Lightbox mod_artsexylightbox_lite_edition.zip - Modulo contatti mod_rapid_contact16.zip Se scegliamo questo pacchetto, dobbiamo scompattarlo prima di installarlo.

Da Estensioni - Gestione estensioni - Installiamo il template joomlage0071-simplex.zip. Poi da Gestione template lo assegnamo come predefinito. Già che siamo lì da Opzioni - Anteprima posizioni modulo - abilitiamo la visualizzazione delle posizioni e, cliccando sull'occhio vicino al nome del template possiamo vederle. Oppure aggiungendo ?tp=1 in frontend dopo l'url.
Clicchiamo ora sul nome ed entriamo nel backend delle personalizzazioni.
Ho tradotto il backend in modo che sia un po' più semplice destreggiarsi fra le molte comodissime opzioni che si possono gestire da qui. Praticamente tutto, grazie anche alla possibilità di aggiungere del css personalizzato.
File di lingua italiana per il backend:
Questo lo scompattiamo e lo mettiamo nella cartella language/it-IT della root it-IT.tpl_joomlage0071-simplex.ini
E questo lo scompattiamo e lo sostituiamo (prima una copia dell'originale) al file templateDetails.xml nella cartella del template.

Passa alla versione commerciale: qui vediamo cosa ci perdiamo ad usare la versione free... Tanto per capire che il template free non è esattamente come lo vediamo nella demo.
Ecco cosa troviamo dentro ogni tab:
Stile globale template: Opzioni larghezza  - Selezione colore background - Padding blocco holder - Selezione font face - Stile bottoni - Stile bottoni e-mail e stampa - Stile imput box
Opzioni menù Hornav: qui possiamo scegliere quale menù avere in alto e i colori del menù stesso.
Selezione stile e logo: Settaggio logo - di qui possiamo importare il nostro logo. Troviamo le istruzioni per procedere, oppure possiamo semplicemente importarlo dalla finestra che si aprirà cliccando su Seleziona e poi su Carica file. Il css del contenitore del logo ha un width fisso, quindi se il nostro logo è più lungo, dovremo correggere il css relativo. Nel mio caso così:
.logo_container {
left: 0;
top: 0;
width: 800px;
}
/templates/joomlage0071-simplex/css/nexus.css - riga 79
Settaggio logo in formato testo - Settaggio posizione logo

Icone Social media: qui possiamo impostare le icone e gli url di moltissimi Social. Una volta impostate, cliccando sulla relativa icona, si aprirà la pagina del Social corrispondente. Se vogliamo che si apra in una nuova finestra dobbiamo aggiungere nel file joomlage0071-simplex/php/layouts/header.php e joomlage0071-simplex/php/layouts/ social_responsive.php "target="_blank" alla riga, ad esempio per l'icona RSS Feed:

 

così:
 

Stile blocco header: Settaggio colore container - Settaggio colore wrapper - Margini destro e sinistro header - Opzioni icone Social - Opzioni box cerca - Stile modulo costum blocco header
Stile blocco Slideshow: Layout slideshow - Settaggio colore barra navigazione - Stile background - Settaggio colore container - Settaggio padding container
Stile blocco top module - Stile blocco Main content - Colonne laterali - Stile blocco base module: Stile background - Settaggio colore container - Settaggio padding container - Settaggio colore wrapper - Settaggio colore testo e link - Settaggio colori modulo - Settaggio padding modulo - Settaggio colori menù
Stile blocco Footer/Copyright: Settaggio colore container - Settaggio padding container - Settaggio colore wrapper - Settaggio colore testo e link - Settaggio menù footer - Settaggio colori menù footer
Larghezza moduli: Selezione larghezza modulo Top 1 - Selezione larghezza modulo Top 2 - Selezione larghezza modulo Content Top - Selezione larghezza modulo Content Bottom - Selezione larghezza modulo Bottom 1 - Selezione larghezza modulo Bottom 2 - Selezione larghezza modulo Base 1 - Selezione larghezza modulo Base 2
Opzioni layout: possiamo scegliere come avere le due colonne laterali, entrambe a sinistra, una a sinistra e una a destra, entrambe a destra.

05 piccoliwebmasterCss personalizzato: qui possiamo personalizzare il css. Per fare una prova inseriamo:
uno sfondo al content: (inserire sempre il link assoluto e non relativo dell'immagine).
#main.block_holder {
background: url("http://piccoliwebmaster.ilbello.com/templates/joomlage0071-simplex/images/sfondo_1.png") repeat scroll 0 0 #FFFFFF;
}
un colore al container:
#container_main.container {
background-color: #FFE9BF;
}
un resize per le immagini degli articoli dell'home page:
.blog-featured img {
max-width: 30% !important;
}

Codice personalizzato: qui possiamo inserire del codice sia tra i tags Head, prima finestra, che tra i tags Body, seconda finestra. Per fare un esempio, il codice di monitoraggio di Google Analytics lo incolleremo nella finestra dei tags Head.
08 responsiveDesign template responsive:
qui possiamo gestire il template responsive per dispositvi mobili. Responsive Sì - No - Scelta immagine logo dispositivi mobili - Opzioni icone Social e cerca - Controllo moduli
Assegnazione menù:
qui decidiamo a quali voci menù assegnare il template. Al momento è assegnato come predefinito e quindi a tutte le voci. Ma possiamo creare layout alternativi e assegnarli, con personalizzazioni diverse, ad alcune voci menù.

 

Realizziamo un duplicato del template
Come:
da Gestione estensioni - Gestione Template flagghiamo il nome del template e clicchiamo su duplica. Perché: perché possiamo personalizzarlo come vogliamo, in tutto e per tutto, e possiamo assegnarlo, ad esempio, ad una voce menù che sia collegata ad una categoria che vogliamo diversificare dal resto del sito.

06 duplicatotemplateIl css personalizzato per realizzare questa pagina (inserire sempre il link assoluto e non relativo dell'immagine):
#header.block_holder
{
background: transparent;
}
#container_main.container
{
background: url("http://piccoliwebmaster.ilbello.com/templates/joomlage0071-simplex/images/web-link31a.gif") repeat scroll 0 0 #FFFFFF;
}
#container_header.container, #container_logo_menu_mobile, #container_social_mobile, body, #container_copyright_footermenu.container
{
background: url("http://piccoliwebmaster.ilbello.com/templates/joomlage0071-simplex/images/web-link31a.gif") repeat scroll 0 0 #FFFFFF;
}

 

I moduli di Joomla!® (alcuni fra quelli di default)

Breadcrumb o Percorso
Estensioni - Gestione moduli - Nuovo - Percorso. Questo modulo mostra il percorso della pagina che si sta visualizzando. Nel template c'è una posizione breadcrumb, adattissima alla visualizzazione di questo modulo.
Login
Estensioni - Gestione moduli - Nuovo - Login. Questo modulo mostra la form dove inserire Nome utente e Password per accedere al sito.
Articoli recenti
Estensioni - Gestione moduli - Nuovo - Articoli recenti. Questo modulo mostra la lista degli ultimi articoli pubblicati e non scaduti.

 

I moduli del template
Modulo Slideshow mod_ariimageslider.zip
Lo troviamo nella cartella Joomla 3.0 Modules. Installiamo come al solito. In Gestione moduli ne troviamo già uno pronto (ma possiamo poi farne altri da assegnare ad altre pagine, ad esempio). Queste le semplicissime istruzioni: 1: In Slides Parameters inserire il percorso della cartella immagine. Esempio: images/myimages - Nota: il percorso parte dalla root di Joomla!®, quindi la cartella images a cui si riferisce NON è quella del template ma quella di Joomla!®. Se la cartella myimages la mettiamo nella cartella images del template il percorso da inserire sarà templates/joomlage0071-simplex/images/myimages - 2: Se si usa la versione responsive del template mettere Yes nel Parametro Responsive - 3: Tutte le altre opzioni sono facoltative.
Selezionare: Mostra titolo: Mostra (anche se non si vedrà) - Posizione: showcase - Stato: Pubblicato
Tornando nella Gestione Template in Stile blocco Slideshow possiamo impostare tutte le opzioni per il contenitore e la barra di navigazione. Per questo blocco anche lo sfondo e l'opacità del container.
Modulo Lightbox mod_artsexylightbox_lite_edition.zip
Lo troviamo nella cartella Joomla 3.0 Modules. Installiamo come al solito. In Gestione moduli ne troviamo già uno pronto (ma possiamo poi farne altri da assegnare ad altre pagine, ad esempio). Il percorso anche qui è relativo alla root, quindi se la cartella myimages la mettiamo nella cartella images del template il percorso sarà templates/joomlage0071-simplex/images/myimages
Modulo contatti mod_rapid_contact16.zip
Lo troviamo nella cartella Joomla 3.0 Modules. Installiamo come al solito. In Gestione moduli ne troviamo già uno pronto. Molto molto carino. Un form contatto piccino piccino che possiamo mettere nella colonna laterale.
E per finire il fantastico plugin di mmleoni, per i cattivoni che vogliono bucarci il sito Marco's SQL Injection.

Bon. Questa piccola guida non ha pretese di completezza. È più o meno quello che farei io in un sito. Il template è bellissimo, facile da usare, completamente personalizzabile direttamente da backend... Buon lavoro.

CommentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.8.1 Stabile Italiana
Data di rilascio: 04 Ottobre 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: