Costruzione di un sito wordpress su altervista.org

Transcript

1 Costruzione di un sito su altervista.org Rispetto a.com altervista presenta due notevoli vantaggi: Possibilità di utilizzare CSS personalizzati Possibilità di installare plugin esterni Rev. Digitale 1.0 del 13/02/2017 Il primo step è quello di registrarsi su altervista.org scegliendo un nome utente che coinciderà con il dominio di secondo livello da utilizzare per l accesso al sito. Ad esempio nomecognome.altervista.org (case unsensitive). robertomana.altervista.org Il sistema invia all utente una mail con un link e l indicazione della password assegnata. All interno di Altervista, sono disponibili due ambienti completamente differenti tra loro, ciascuno con la propria password, denominati rispettivamente AlterSito (sito generico php) AlterBlog (blog ) Il sito viene normalmente creato come blog. L ambiente AlterSito consente un maggiore controllo anche in caso di blog Creazione di un AlterSito Dall interno di -> Menù di sinistra -> Impostazioni / Passa ad AlterSito Durante il passaggio viene visualizzata una interessante finestra che visualizza PRO e CONTRO del passaggio ad AlterSito Per poter completare il passaggio occorre inserire alcuni ulteriori dati personali Volendo ritrasformare il sito da Altersito a AlterBlog, da Altervista in alto a destra, / Profilo (dove c è anche il cambio pssword) / Passa ad AltrBlog pag 1

2 Accessi successivi Eseguendo l accesso dalla home page di Altervista si entra direttamente all interno di Altersito in cui si può scegliere se Gestire i Files oppure se accedere a Wordpress (rimettendo la password). Quando da Altersito si apre vengono di nuovo richiesti username e password. Per accedere invece direttamente a si può scrivere nella barra di navigazione: Modifica delle password Le password di AlterSito e AlterBlog sono separate, anche se sarebbe bene mantenere la stessa password. Per modificare la password di AlterSito In alto a destra : Scendere nella pagina fino alla sezione modifica i dati di accesso. pag 2

3 Per modificare la password di Wordpress entrate in AlterBlog sempre in alto a destra Modica il tuo profilo Passaggio dall ambiente all ambiente AlterSito Dall ambiente è possibile ritornare sul menù principale di Gestione File clickando sul pulsantino arancione con scritto a in alto a sinistra (solo se altersito è stato creato). Editing di un sito Entrando in Wordpress si apre una pagina praticamente identica a quella di, con l unica differenza che i temi proposti non sono esattamente gli stessi di, anche se alcuni sono comuni. Se interessa un tema di è sufficiente esportarlo da in formato.zip e poi importarlo da altervista andando nella finestra Temi / Aggiungi Nuovo / Carica Temi (scegliendo un file sul pc client). E anche possibile importare i contenuti (pagine, articoli, commenti, ma non i temi) da un sito preesistente utilizzando il comando strumenti / Import Un sito utilizza principalmente due tipi di oggetti: pagine statiche e articoli. TEMI La prima cosa da fare è quella di scegliere un tema (template). A seconda del tema scelto cambiano posizione e struttura delle pagine e dei menù. I temi installati inizialmente sono soltanto 5 per non sprecare troppo spazio. Clickando in alto sul pulsante Aggiungi Nuovo viene mostrato l elenco dei temi disponibili (123) visualizzabili in ordine di popolari o più recenti Se ne possono installare più di uno, scegliendo poi quale utilizzare fra quelli installati. E anche possibile caricare un tema in formato.zip scaricato ad esempio da.org pag 3

4 MEDIA Consente di uplodare risorse di varia natura (immagini, pdf, audio video, etc). PAGINE Mostra l elenco delle pagine e consente l editing di ognuna. All interno della singola pagina il pulsante Aggiungi Media consente di aggiungere dei collegamenti ipertestuali verso risorse prevaricate dentro Media SI possono creare nuove pagine e nuovi articoli, rinviando a dopo la strutturazione del sito. All interno delle pagine è possibile impostare una visualizzazione Testo che consente l immissione diretta dei tag HTML ed una rappresentazione Visuale per chi non conosce HTML. All interno della rappresentazione testo non è possibile utilizzare qualsiasi tag HTML, ma soltanto quelli rappresentati nella toolbar sottostante, la quale contiene anche diversi tag specifici di, come ad esempio one_half o one_third che consentono rispettivamente di suddividere la riga in due oppure tre colonne. Esempio: [one_half] colonna 1 [br] Questa è la prima colonna [/one_half] [one_half_last] colonna 2 Questa è la seconda colonna [/one_half_last] Esistono comunque diversi plugin che consentono di utilizzare gran parte dei tag html all interno dell editor di. Ad esempio Simple Breaks scaricabile da.org in formato.zip. I tag devono essere scritti tra parentesi quadre: [br], [hr]. Il file redme.txt illustra la sintassi completa. Non è possibile definire all interno delle pagine degli stili, che devono essere definiti all interno di Aspetto / CSS Personalizzato. Questo foglio di stile viene richiamato per ultimo, quindi copre tutti i precedenti. ARTICOLI Gestione pressoché identica a quella delle pagine ASPETTO / MENU Definisce la struttura dei menù. E possibile creare più menù da utilizzare nei vari contesti. A seconda del tema utilizzato, sono possibili un solo menù, due menù oppure tre menù che possono essere utilizzati contestualmente all interno delle varie pagine. Ad esempio il tema Twenty Fifteen presenta due menu Primary Menu Social Links Menù mentre il tema Fiore presenta un solo menu Primary Menu Il Social Links Menù viene di solito visualizzato tramite una sequenza di icone. pag 4

5 Una volta creato un menù si possono aggiungere nuove voci mediante il pulsantino di destra +. Le varie voci possono essere inserite sopra, sotto oppure come figlie rispetto al menù corrente. Per trasformare una voce in figlia è sufficiente trascinarla verso destra, oppure trascinarla verso sinistra per riportarla al livello superiore. Se si stenta di riportare al livello superiore una voce che a sua volta è dotata di fratelli successivi, questo non è consentito. Per impostare un menù di primo livello privo di link (cioè un menù che al mouse over mostri semplicemente i menù di secondo livello) occorre inserire come menù di primo livello NON un menù di tipo pagina ma un menù di tipo link personalizzato in cui come URL assegnare #. Ad ogni menù di sistema (primary, social, etc) è possibile associare un menù utente definibile nell area di destra tramite l ultimo comando aggiungi nuovo menù. ASPETTO / PERSONALIZZA Consente di applicare alcune personalizzazioni al tema scelto. Apre la stessa videata che si ottiene andando sui TEMI e clickando sul pulsante Personalizza del tema scelto. Denominazione del sito Consente di impostare Titolo e Motto (impostabili anche da Impostazioni / Generali). Colori e sfondi consente di modificare i colori del tema. Sono disponibili tavolozze a 3 o 4 colonne a seconda del tipo di tema. Il pulsante Modifica posizionato all interno del rettangolo Colore consente di personalizzare il colore di sfondo del contorno della pagina di destra (1 colonna precedente). Mediante il pulsante Seleziona una immagine è anche possibile applicare una immagine di sfondo di tipo repaet a questa area. pag 5

6 Immagine dell header consente di applicare una immagine di sfondo all area del menù di sinistra. Quando si carica una immagine, ritagliarla preventivamente con paint con le dimensioni consigliate da wp che variano da tema a tema e dipende dove vengono utilizzate. Di solito fornisce una indicazione sulla dimensione delle immagini da caricare nelle varie situazioni. Menù Nell ambito dello stesso sito si possono creare più menù. Questa opzione consente di selezionare quale menù utilizzare nelle diverse sezioni della pagina Widget consente di inserire diversi widget all interno della pagina. Ad esempio : il calendario corrente, l indirizzo con relativa google map, un icona che punta alla pagina face book / twitter / istagram dell autore. I contatti dell autore, etc. Pagina Iniziale Statica consente di impostare che cosa utilizzare come Home Page del sito. Come pagina di apertura si può utilizzare una pagina statica fra quelle costruite oppure una pagina standard di visualizzazione degli ultimi articoli (default). Impostando come Home Page una delle pagine statiche, l ultima voce (pagina articoli) consente di definire quale pagina dovrà essere utilizzata per la visualizzazione automatica degli ultimi 5 articoli.. In questa pagina l utente potrà aggiungere eventuali titoli e personalizzazioni. L elenco degli articoli verrà visualizzato in coda alla pagina. La pagina dovrà essere normalmente associata ad una voce di menù come tutte le altre pagine. pag 6

7 I menù specifici di Altervista Aspetto / EDITOR Consente di editare il file style.css che definisce tutti gli stili utilizzati all interno del tema. Questo file può essere modificato a piacimento ma è abbastanza complesso. Nulla vieta comunque di aggiungere in coda dei propri stili personalizzati. In verticale sulla destra compaiono dei link ai vari files php che compongono il sito e che, a livello di file system, sono memorizzati all interno della cartella wp-content/themes/nometema Aspetto / CSS Personalizzati consente di definire dei custom CSS che prevarranno rispetto a quelli del tema. Il file relativo al CSS personalizzato verrà linkato dopo i vari file.css del tema, quindi le proprietà indicate nel nuovo file prevarranno su quelle di default. Il css indicato in questa sezione è condiviso tra tutti i temi di WP. Volendo all interno del CSS personalizzato è possibile richiamare un ulteriore file esterno nel modo "file.css" Molte delle impostazioni relative al tema non sono però modificabili in questo modo. Per poterle modificare occorre installare un apposito plugin di tipo CSS editor. Plugin A differenza di.com, altervista consente l installazione di innumerevoli plugin. Utilizzare Plugin / Aggiungi Nuovo e, nella Text Box di destra Ricerca plugin in corso.. digitare il tipo di plugin desiderato, ad esempio Facebook Share oppure CSS. Compare l elenco dei plug-in relativi alla voce impostata. Scegliere i plug in con il maggior numero di installazioni attive. Riguardo al CSS Editor per l impostazione degli stili personali, si consiglia Advanced CSS Editor. Una volta installato il CSS Editor: per aprire l editor occorre andare su Aspetto / Personalizza / Advanced CSS Editor per apportare le modifiche al sito, si va a vedere tramite il debugger di chrome la classe assegnata ad esempio al titolo e, tramite il CSS editor, si vanno ad asseganre gli stili personali a questa classe. pag 7