Guida a WordPress per principianti
Articolo a cura di: Francesco Manciocchi, pubblicato il 14.03.10
In questo articolo troverai una guida passo passo corredata da immagini di esempio che illustrano in modo semplice le più importanti funzioni per il corretto uso del CMS Wodpress, utilizzato dal nostro blog.
Prima di iniziare la stesura del’articolo, ti consigliamo di leggere questa utile guida su Scrivere per il web.
Sommario:
- Scrivere un nuovo articolo
- Categorie, tag, campi personalizzati…
- Salvare e inviare l’articolo per la pubblicazione
- Usare l’editor visuale
- L’editor HTML
- Inserire e modificare immagini
- Note
11. Scrivere un nuovo articolo
Dal Pannello di Amministrazione >> Articoli clicca su Aggiungi nuovo.
Dai all’articolo un Titolo descrittivo. Il titolo apparirà in alto nell’articolo e sarà anche il nome predefinito della pagina web (URL) a meno che non specifichi un nome diverso, magari più breve, usando la funzione Permalink.
Se ad esempio il tuo articolo si intitola “Oggi è proprio una bella giornata” la tua URL sarà blog.webonthefly.it/oggi-e-proprio-una-bella-giornata/, piuttosto lungo diremmo! Se modifichi il permalink in bella giornata allora l’URL diventerà blog.webonthefly.it/bella-giornata/
Il testo dell’articolo va inserito nel campo immediatamento dopo il titolo. Utilizza l’editor visuale per formattare il testo. Più in basso trovi un elenco degli strumenti dell’editor.
Nota: Se stai copiando/incollando del testo da un programma di videoscrittura, ad esempio Microsoft Word, copierai nell’editor tutta la formattazione non necessaria (per vederla clicca sul tasto “HTML”). Per evitare il problema, incolla prima il testo in un programma di Solo Testo (ad esempio Blocco note in Windows oppure TextEdit in Macintosh): in questo modo eliminerai il codice di Word non necessario. Quindi copia/incolla questo testo nell’editor di WordPress.
Come vedremo in seguito, esiste una funzione nell’editor per incollare testi da Word. Tuttavia non “ripulisce” il codice completamente pertanto è consigliabile convertire il testo prima di inserirlo.
2. Categorie, tag e campi personalizzati…
A destra e in basso all’editor vi sono le opzioni di pubblicazione:
Categorie – Ogni articolo va inserito (collegato) a una o più categorie. Semplicemente spunta una o più categorie tra quelle presenti. Se non specifichi alcuna categoria, l’articolo verrà inserito in quella predefinita “1″ (da evitare!).
Tag – assegna uno o più tag al tuo articolo. I tag sono un altro modo per catalogare gli articoli ovvero parole chiave per permettere all’utente di selezionare gli articoli (ad esempio solo quelli con il tag “web standard”). I tag vanno separati da virgole:
Titolo e descrizione (metadati per i motori di ricerca) - Se lo desideri, puoi dare al tuo articolo un titolo e una descrizione più dettagliati per facilitare l’indicizzazione dei motori di ricerca. Questi dati appariranno rispettivamente nel title e meta name=description del codice della tua pagina:
Campi personalizzati – Più in basso si trovano i campi personalizzati. Sono quattro e vanno tutti specificati, anche perchè servono a visualizzare informazioni sull’autore (!):
- autore: serve a inserire il tuo nome completo in calce all’articolo
- autore_url: serve a inserire il link alla tua pagina web (o email)
- img_autore: serve a visualizzare l’icona/avatar. Puoi scegliere tras tre diversi URL: http://www.webonthefly.it/img/imga.png, http://www.webonthefly.it/img/imgb.png, http://www.webonthefly.it/img/imgc.png
- immagine: serve a visualizzare l’immagine di background nell’home page e negli indici di sezione. L’URL è lo stesso sebbene l’immagine cambierà a seconda della categoria di appartenenza: http://www.webonthefly.it/img/img_title.png
Seleziona la voce nel menu “Nome” e riempi il campo “Valore” come nell’esempio che segue:
Quindi clicca su “Aggiungi campo personalizzato“:
Ripeti l’operazione per ciascuna delle quattro voci dell’elenco:
3. Salvare e inviare l’articolo per la pubblicazione
In WordPress è presente una funzione di salvataggio automatico percui se dimentichi di salvare l’articolo nulla andrà perso (allo stesso modo se chiudi inavvertitamente la finestra dell’editor ti verrà chiesto se procedere o meno al salvataggio).
Clicca su “Salva bozza” per salvare il tuo articolo. Puoi vedere un’anteprima cliccando su “Anteprima” (CTL-click o Command-click per aprire una finestra separata del browser). Se hai completato l’articolo clicca su “Invia per la revisione“:
Puoi sempre modificare in un secondo tempo i tuoi articoli cliccando su Articoli > Modifica dal pannello di amministrazione.
4. Usare l’editor visuale
Sotto il titolo trovi una serie di tasti per la formattazione dell’articolo:
Queste icone svolgono buona parte della formattazione del testo. Altre funzioni sono disponibili cliccando sull’icona “Mostra/nascondi barra strumenti avanzata“:
Seleziona la parte di testo che vuoi formattare e quindi clicca sull’icona che ti interessa, così come faresti in qualsiasi programma di videoscrittura.
Ora vediamo nel dettaglio come usare le varie icone:
Grassetto - trasforma il testo selezionato in grassetto.
Corsivo - trasforma il testo selezionato in corsivo.
Barrato – aggiunge una linea sul tuo testo.
Lista puntata – crea un elenco puntato (non numerato).
Lista numerata - crea un elenco numerato.
No quota- elimina il testo rientrato.
Quota - crea un testo rientrato (ad esempio nelle citazioni).
Allinea a sinistra – allinea il testo a sinistra.
Allinea al centro - allinea il testo al centro.
Allinea a destra- allinea il testo a destra.
Inserisci/modifica link – seleziona il testo e clicca sull’icona per inserire il link. Aggiungi l’URL nella finestra di dialogo, scegli se aprire il link nella stessa finiestra o in una nuova, quindi dai un titolo al link.
Togli il link – seleziona il link a e clicca sull’icona per rimuoverlo.
Inserisci il tag More – inserisce il tag <!–more–> per dividere la pagina. In questo modo apparirà un testo introduttivo negli indici di sezione con un link che rimanda all’intero articolo. MOLTO IMPORTANTE!.
Attiva/disattiva correttore ortografico – evidenzia i termini non corretti . Per la correzione automatica ti consigliamo di utilizzare FireFox come browser. Seleziona Italiano dal menu a comparsa.
Aiuto - Fornisce un riepilogo delle funzioni di WordPress e un elenco utile di scorciatoie da tastiera.
Mostra/nascondi barra strumenti avanzata – Apre la barra di strumenti avanzata, qui di seguito spiegata.
Formattazione del testo - Clicca sul menu a comparsa per formattare i testi. IMPORTANTE: Utilizza Testata3 all’interno dell’articolo poichè Testata1 è il titolo della sezione (ad esempio Risorse) mentre Testata2 è il titolo dell’articolo (ad esempio “Uno screen reader gratuito via web”).
Sottolineato - sottolinea il testo.
Colore testo – modifica il colore del testo selezionato.
Incolla come testo puro -incolla il testo da un altro programma eliminando la formattazione.
Incolla da Word – incolla il testo da Word eliminando il codice superfluo.
Rimuovi formattazione – rimuove la formattazione di un testo selezionato, ad esempio copiato da altro programma.
Inserisci/modifica inclusioni elementi media – inserisce elementi multimediali come videoclip.
Inserisci carattere personalizzato – inserisce caratteri speciasli come ad esempio ¥, £, ©, Æ, or é.
Annulla - annulla l’ultima modifica.
Ripeti - ripristina l’ultima modifica.
5. L’editor HTML
Se hai bisogno di usare il codice HTML (Hyper Text Markup Language) non disponibile nell’editor visuale, clicca sul tasto HTML. L’editor puro in HTML torna molto utile quando vi sono problemi di formattazione del testo (allineamenti, spaziature, ecc.), oppure per ripulire il codice da tag superflui lasciati dall’editor visuale durante il copia/incolla di porzioni di testo. Ti consigliamo quindi di passare alla vista HTML quando incontri questi problemi. (È necessaria una minima conoscenza dell’HTML.)
6. Inserire e modificare immagini
Inserire immagini dal proprio computer è piuttosto semplice. Ti consigliamo di leggere la nota sulla dimensione delle immagini alla fine della pagina per evitare inconvenienti.
Posiziona il cursore del mouse nel punto in cui vuoi inserire l’immagine, quindi segui i passaggi qui indicati.
(Se in seguito vuoi spostare l’immagine su un altro punto dell’articolo, seleziona l’immagine, premi CTR-X – o Command-X per il mac, quindi clicca sul punto desiderato e premi CTR-V – o Command-V. In alternativa, puoi cliccare sul tasto HTML e tagliare/incollare la porzione di codice relativa all’uimmagine.)
Clicca sull’icona “Aggiungi immagine” che si trova sopra l’editor visuale:
Seleziona l’immagine dal tuo archivio e clicca su Inserisci nell’articolo:
Se hai già caricato delle immagini in precedenza, puoi inserirle direttamente senza bisogno di caricarle nuovamente: dalla finestra di dialogo, clicca su Galleria immagini, trova l’immagine che vuoi inserire, clicca su Visualizza e quindi Inserisci nell’articolo.
Puoi gestire la posizione e altre caratteristiche dell’immagine nella finestra di dialogo vista in precedenza. (Se hai già inserito l’immagine, selezionala e quindi clicca sull’icona Modifica immagine).
Puoi specificare il titolo (predefinito sarà il nome dell’immagine), la didascalia (che appare sotto l’immagine), la descrizione (non necessaria), l’eventuale link (utile soprattutto se l’immagine è molto grande: in questo caso inserirai una miniatura che apre un’immagine a dimensione reale).
Puoi altresì specificare l’allineamento dell’immagine e impostare o meno lo scorrimento del testo. Nella finestra di dialogo puoi anche scegliere la dimensione dell’immagine visualizzata nell’articolo: miniatura, media, grande, originale.
Note
Le dimensioni delle immagini sono espresse in pixel, come pure la larghezza disponibile nella pagina del blog. Pertanto bisogna evitare di superare lo spazio massimo consentito per non compromettere il layout del sito.
Questo blog utilizza un tema fluido con un’area utile di circa 900 pixel, in modo da visualizzare tutto il contenuto anche su monitor a 15″ monitor. Poichè il menu laterale occupa circa 200 pixel, la larghezza massima consentita non deve superare i 700 pixel.
Ti consigliamo pertanto di verificare la larghezza delle immagini che intendi inserire e, se necessario, ridimensionarle oppure utilizzare le miniature già illustrate in precedenza.