Scaricato in locale (sul proprio pc) un quadro CSS-JS ad es. da qui, bisogna poi ATTIVARLO.
Per utilizzare tali modelli precompilati, ProcessWire non ci chiede di ristrutturarli in base alle forme di un linguaggio terzo (da aggiungere alla lista di quelli che dovremmo imparare - html, php, css) ma, prima di tutto, di caricarli nella sezione giusta del sito. Vediamo qual è.
- Aprire il sito in remoto (quindi tramite ftp - filezilla).
- Posizionarsi su .../site/templates. Qui troverete 3 cartelle ("errors", "scripts", "styles") + 8 file singoli (alla versione 2.7 di PW).
- Bisogna aggiungere a questa lista le altre cartelle ed eventualmente gli altri file che abbiamo scaricato sul nostro pc prelevandoli da internet. Solitamente i quadri CSS-JS si compongono di 3-4 cartelle principali (con un nome da scegliere affinchè non entrino in conflitto con le altre cartelle di programma): "css", "img", "js", "images" vanno bene.
- Selezionarle nel proprio pc tramite filezilla e spostarle dentro la cartella .../site/templates.
Insieme alle suddette cartelle, un quadro CSS-JS di solito si accompagna ad un file index.html.
Ebbene, questo file è importantissimo al fine di ATTIVARE il tema scaricato.
- Aprite il file index.html tramite un editor come BlueFish (gratuito).
- Vedrete un documento poderoso e complicato. Selezionate tutto e copiate alla cieca.
- Mentre che siete in modalità ftp, cliccate col tasto destro lungo la lista e "create un nuovo file" con questo preciso nome ed estensione: ilmioprimotemplatefile.php oppure più brevemente TF1.php, direttamente dentro la cartella "template" di processwire. Potete crearlo anche sul desktop e poi caricarlo ma in modalità ftp fate prima.
- Aprite questo file tramite tasto destro -> "Visualizza" e vedrete una pagina totalmente bianca. Incollateci dentro tutto quanto avete copiato nel passaggio 6.
Il più è fatto!
Adesso, tornate nel backend di ProcessWire, il vostro pannello di amministrazione!
Se ci avete già arrabattato un pò, saprete come associare un TF a ad un PWT, ed un PWT ad una qualsiasi pagina processwire.
Se ci avete già arrabattato un pò, saprete come associare un TF a ad un PWT, ed un PWT ad una qualsiasi pagina processwire.
Peraltro andando alla voce Templates, PW stesso segnalerà la nuova "presenza" (TF1.php), ed allora potrete utilizzare il tema dove volete.
Ciò facendo, però, vedrete che l'aspetto della vostra pagina cui avete associato quel particolare template, non è cambiato affatto!
Il motivo è che il set API di processwire fornisce una speciale stringa di codice:
E così ad esempio: $config->urls->templates che serve a "chiamare ed afferrare" la cartella "templates" del sito PW. Perciò, bisogna utilizzare questa precisa stringa tutte le volte che le istruzioni fornite dal creatore del quadro CSS-JS, si vorrebbero riferire a tale cartella. In tutti i file .css e .js o di altro genere.<link rel="stylesheet" type="text/css" href="css/skel.css" />
...diventa:
<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/skel.css" />
Alcune volte i creatori del quadro CSS-JS includono nel pacchetto delle NOTE SPECIALI o istruzioni su come impostare il codice html del sito in riferimento alle porzioni css e js da aggiungere. Seguite pedissequamente l'eventuale guida fornita su quanto và aggiunto
dopo il tag <head> di ogni pagina html del nostro sito e alla fine, appena prima del tag </body>.
dopo il tag <head> di ogni pagina html del nostro sito e alla fine, appena prima del tag </body>.
In particolare, per il css nella sezione <head> bisognerà utilizzare:
<link rel="stylesheet" type="text/css" href="<?php echo
$config->urls->templates; ?>css/bootstrap.min.css" />
Mentre per il js:
<script type="text/javascript" src="<?php echo
$config->urls->templates; ?>js/bootstrap.min.js"></script>
Il codice javascript andrebbe aggiunto sempre alla fine di una pagina html, per renderne più veloce il caricamento.
Qualora un quadro CSS-JS utilizzi o crei proprie testate ("head") e propri piè di pagina ("footer"), bisognerà rimuovere quelli predefiniti da processwire, cioè i file head.inc e foot.inc che avete trovato nella cartella "templates" tra gli 8 file suddetti.
Viceversa, se noi stiamo ancora utilizzando i suddetti file, laddove il quadro CSS-JS faccia in qualche parte riferimento a tali sezioni del sito, bisognerà naturalmente sovrascriverne la dicitura con le espressioni esatte, tipiche di PW: "head.inc" e "foot.inc".
Viceversa, se noi stiamo ancora utilizzando i suddetti file, laddove il quadro CSS-JS faccia in qualche parte riferimento a tali sezioni del sito, bisognerà naturalmente sovrascriverne la dicitura con le espressioni esatte, tipiche di PW: "head.inc" e "foot.inc".
Nessun commento:
Posta un commento
Grazie per la collaborazione!