Skip to content

Gestire la parte grafica html/css di Processwire

La parte grafica di un sito-processwire consta di uno più modelli, corrispondenti ad uno o più file html.
Ogni documento html, per organizzare più ordinatamente il suo aspetto, può linkare uno o più file css come anche dei file js.

Per avere padronanza di un sito-processwire,
dovresti apprendere almeno 3 linguaggi: html, css e js.

In alternativa, puoi scaricare dei modelli html/css/js già pronti dal web.
I web-designer sono oggi molti e molti di essi sono, grazie a Dio, generosi. Non si attaccano al proprio "tesoro" come Gollum ed hostano molti bei progetti grafici html/css/js in alcuni siti gratuitamente scaricabili da tutti.

Qual è la differenza fra questi quadri
html/css/js già pre-compilati, e i TEMI DI WORDPRESS?

I temi-wordpress sono una sovrastruttura del core wordpress, mentre i quadri html/css/js che potete trovare nel web o scrivere voi stessi (se ne avete le capacità) sono "puri", più semplici da gestire, più puliti, più leggeri, più facili da personalizzare.
Se utilizzi processwire, dopo averli scaricati/scritti devi prenderli e spostarli nel posto giusto.

Se scrivo 10 articoli nel mio blog,
dovrò scaricare/creare 10 modelli grafici?

Certo che no. Nella maggior parte dei casi, basta 1 modello per 1 sito.
Quindi in un sito abbiamo una parte statica, il modello grafico, che si ripete sempre uguale, ed una parte "dinamica", l'articolo vero e proprio, che cambia di pagina in pagina (ma "contenuto dinamico" può essere anche una immagine, un video, una galleria, un titolo, un commento etc).
PROCESSWIRE RICHIEDE CHE TU SCRIVA DEI CODICI SPECIALI DENTRO IL MODELLO-HTML AL FINE DI VISUALIZZARE ONLINE I "CONTENUTI DINAMICI".
Quindi, se scrivi di tuo pugno il modello-html (o se lo scarichi dal web), quando decidi di utilizzarlo in processwire dovrai prima modificarlo in alcuni punti, aggiungendo i seguenti codici:

Un documento-html è fatto di tag, quindi il documento finale verrebbe qualcosa di simile a questo:

A questo punto, se avete seguito attentamente, vi farete sicuramente la domanda:

"Bene, se al posto del titolo/articolo
devo scrivere quegli strani codici
,
dove scriverò di fatto il vero titolo
ed il vero articolo?"

Titoli ed articoli sono CONTENUTI DINAMICI, e come tali non vanno scritti nel file di modello html/css/js (che ha solo funzione grafica), vanno invece memorizzati nel DATABASE Processwire.
Ti spiego come fare.
Installa Processwire nel tuo server.
L'installazione ti permetterà di entrare nel sito dalla barra di ricerca del browser inserendo password ed username.
L'hai fatto?
Sei già "dentro" il database.
Adesso:

  1. CREA DEI CAMPI (il campo-articolo, il campo-titolo, il campo-video, il campo-immagine etc) seguendo questa semplice procedura.
  2. CREA DELLE PAGINE. Questa è un'operazione ancora più banale e non servono tutorial.
  3. ADDIZIONA I CAMPI ALLE PAGINE. Ciò, diversamente da wordpress, ti permette di creare in pochi click pagine con campi anche totalmente diversi!
  4. Apri di nuovo la pagina coi campi appena aggiunti, e vedrai che su ogni pagina, adesso, potrai scrivere il titolo che vuoi e l'articolo che vuoi. In altre parole, il campo che vuoi. Essi saranno immediatamente "trasferiti" sul modello grafico html/css/js, attraverso le "api" (codici) processwire su mezionati che hai aggiunto ai tuoi "abiti" html.
    Nota che ad ogni pagina puoi associare qualsiasi modello grafico. Se ne hai creati/scaricati 10, in pochi click potrai creare pagine con 10 vesti grafiche differenti.

Oltre le 2 principali, altre importanti API Processwire sono:

Che cosa cambia negli esempi di api su posti?
Cambia il... nome del vostro campo!
Pertanto, se create 100 campi di diverso uso per il vostro sito processwire (io al momento ne ho attivi 29), per rendere visibili, online, pubblici tali campi, dovete scrivere nel vostro modello grafico html/css/js, il breve codice api di cui sopra - nel punto e fra i tag html che preferite - variandone però soltanto il nome che compare nel mezzo, e sostituendolo con quello che voi stessi avrete dato al VOSTRO campo.