Guida d'emergenza su come scrivere e pubblicare un articolo su Wordpress e Joomla

Guida d'emergenza per scrivere articoli su Joomla e Wordpress

Print Friendly, PDF & Email

Questa è una guida molto elementare e d'emergenza principalmente per i clienti di operedigitali.com, ma che può risultare utile a chiunque sia alle prime armi con l'uso del proprio sito e non conosca l'HTML.

Per scrivere articoli nel vostro sito, dovrete accedere al backend, ovvero al pannello di controllo del vostro sito. L'indirizzo di questo pannello cambia da sito a sito, quindi dovrete chiedere al vostro Webmaster. Nei casi più comuni si può accedere aggiungendo "/wp-admin" su Wordpress o "/administrator" su Joomla, all'url della home del sito, e premendo invio.

Il pannello redazione articoli, su Wordpress e su Joomla, ha molti pulsanti e funzioni simili ai normali word processor, come Microsoft Word. Per trovarlo, dobbiamo andare nella sezione "Articoli" in Wordpress, nella barra laterale, oppure nel menu "Contenuti/Articoli" in alto in Joomla. Joomla di solito ha molti più pulsanti del corrispondente pannello di Wordpress, e che possono essere anche aumentati o diminuiti (andando nelle impostazioni del plugin TinyMCE).

Cliccando sull'apposito pulsante ("Editor si/no" in basso a destra su Joomla, e "Visuale/Testo" in alto a destra su Wordpress), il contenuto di un articolo può essere visualizzato in modalità anteprima o in modalità codice.
In modalità anteprima, si possono usare i pulsanti di cui sopra per eseguire automaticamente le volute formattazioni del testo.

Alcune formattazioni possono risultare difficili o impossibili usando solo la modalità anteprima, per cui a volte è necessario intervenire sul codice.

Il codice di cui parliamo è il linguaggio HTML, troverete online numerosi siti che spiegano nei dettagli il suo utilizzo, come su HTML.it.
Questa è solo una guida elementare e di emergenza, colle indicazioni veramente indispensabili.

Pubblicare un articolo

Per pubblicare un articolo, la cosa più semplice da fare, potrebbe sembrare essere un semplice copia e incolla del testo dell'articolo. Ma se farete questa operazione nella modalità "anteprima", non otterrete sempre la formattazione desiderata, e, andando a controllare il risultato in modalità "codice", potreste trovare una gran quantità di comandi inutili o anche sbagliati.

In questo caso, per effettuare il copia e incolla, vi consigliamo di ripulire il testo da incollare da tutte le formattazioni, ad esempio incollandolo prima nel notepad o simili, e poi reincollandolo subito NELLA MODALITÀ ANTEPRIMA del vostro pannello di redazione articoli Joomla o Wordpress.
In questo modo, il testo acquisterà una formattazione di base su cui potrete lavorare.
Se salterete questo passaggio, ovvero se non toglierete la formattazione, e lo incollerete direttamente nella modalità "codice", potreste ottenere un testo difficile da gestire.

Joomla possiede anche un pulsante per eliminare del tutto la formattazione del testo (controllate nei menu sopra il vostro pannello).

Ritorniamo al codice.
La maggior parte dei comandi HTML è un contenitore, ovvero ha un cosiddetto "tag" di apertura e uno di chiusura, all'interno dei quali, di solito è compreso il testo da mostrare o altro contenuto. Questo è quello che si definisce un "blocco" che può essere nel nostro caso un "blocco di testo".
Ad esempio, ogni paragrafo deve essere contenuto all'interno di <p> e </p>, come il seguente:

<p>In una notte buia e tempestosa, bussò alla porta uno sconosciuto...</p>

Per andare a capo si usa il comando <br/> che è uno dei pochi tag a non richiedere un tag di chiusura. Ad esempio:
 
<p>In una notte buia e tempestosa, bussò alla porta uno sconosciuto.<br/>Ma a guardarlo bene sembrava Babbo Natale.</p>

apparirà così:

In una notte buia e tempestosa, bussò alla porta uno sconosciuto.
Ma a guardarlo bene sembrava Babbo Natale.

Invece, senza il <br/>, ovvero così:

<p>In una notte buia e tempestosa, bussò alla porta uno sconosciuto. Ma a guardarlo bene sembrava Babbo Natale.</p>

apparirà come segue:

In una notte buia e tempestosa, bussò alla porta uno sconosciuto. Ma a guardarlo bene sembrava Babbo Natale.

Ogni volta che si inizia un paragrafo con <p>, il testo va a capo e lascia un certo margine verticale. Quindi un altro modo per andare a capo, invece di usare <br/> è:

<p>In una notte buia e tempestosa, bussò alla porta uno sconosciuto.</p><p> Ma a guardarlo bene sembrava Babbo Natale.</p>

che apparirà così:

In una notte buia e tempestosa, bussò alla porta uno sconosciuto.

Ma a guardarlo bene sembrava Babbo Natale.

Cioè con circa un rigo in mezzo.

Intestazioni o titoli

Altri comandi indispensabili sono le intestazioni. Anche le intestazioni hanno un tag di apertura e uno di chiusura, col testo contenuto in mezzo. Esse vanno in maniera decrescente di importanza da h1 a h7:

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
...
<h7>...</h7>

I titoli ("headings") più grandi e importanti sono h1, mentre quelli più piccoli e meno rilevanti sono h7.
Per motivi di posizionamento sui motori di ricerca, in ogni articolo ci deve essere un solo h1, mentre i titoli minori di h4 vengono praticamente ignorati dal posizionamento.

Elenchi

Per trasformare una serie di righe in un elenco, bisogna accertarsi che il blocco di testo inizi esattamente con la prima riga. Se c'è un precedente <p> o altro tag aperto e non chiuso prima dell'inizio delle righe che vogliamo trasformare in elenco, causerà errata formattazione. Quindi in questo caso, basta chiudere quel <p> esattamente prima dell'inizio del nostro elenco.
Attivando la modalità di visualizzazione "anteprima" invece che "codice", selezioniamo le righe che vogliamo trasformare in elenco e clicchiamo sul corrispondente pulsante. Il resto funziona come Word.
Ogni riga dell'elenco, prima che applichiamo la formattazione, può andare a capo con un <br/>.
I tag principali che rinchiudono un elenco sono:

<ul> </ul> = "unordered list" = elenco non numerato (ad esempio con i pallini)

<ol> </ol> = "ordered list" = elenco numerato

Questi tag qui sopra delimitano l'inizio e la fine dell'elenco, mentre le singole voci dell'elenco sono richiuse in un ulteriore tag:

<li>...voce dell'elenco...</li>

Quindi un elenco potrebbe apparire in modalità codice, così:

<ol>
    <li>Prima voce dell'elenco</li>
    <li>Seconda voce dell'elenco</li>
    <li>Terza voce dell'elenco</li>
</ol>

Per inserire immagini:

Su Joomla basta cliccare sul pulsante con accanto scritta la parola "immagine", che vi fornirà un inserimento facilitato.

bottone per inserire un'immagine

Su Wordpress, invece basta cliccare sul pulsante "Aggiungi Media". Entrambi permettono di caricare un'immagine dal vostro computer verso una cartella del sito e poi selezionare l'immagine scelta, aggiungendo, se si vuole, anche didascalia o metadescizione per i motori di ricerca.

Il risultato di questa operazione, sarà l'inserimento di un tag <img.../> all'interno del vostro codice, completo di tutti gli elementi.

Altri Tag

Un altro tag che potrete facilmente incontrare è <div>...</div> (="divisore") che rappresenta un semplice blocco con un contenuto qualsiasi. Si può immaginarlo come un "rettangolo" da riempire con testo o altro codice, o altri <div>, ma per capirne bene l'uso è necessario comprendere anche la differenza fra tag di tipo "blocco" ed elementi di tipo "inline". I primi possono contenere altri elementi di tipo blocco oppure no, i secondi possono contenere solo elementi di tipo inline. Gli elementi di tipo blocco, creano una nuova riga, quando vengono usati, quelli inline no.
I tag <div>, <p> e le intestazioni da <h1> ad <h7> sono di tipo blocco.

Altri tag utili, tutti inline, sono:

<a...>...</a> per i collegamenti cliccabili, ovvero i link. Lo citiamo solo per riconoscerlo. Non serve necessariamente conoscerne la sintassi, poiché sia Wordpress che Joomla permettono dicreare link, modificarli e cancellarli usando un apposito bottone con una catena disegnata.

<img .../> per le immagini (che non ha tag di chiusura),

<strong>...</strong> per il grassetto, <em>...</em> per il corsivo,

<span>...</span> per inserire, tramite l'attributo "style" determinati attributi al testo che racchiude. Ad esempio:

 <p>L'Italia si trova in <span style="font-size:20px">Europa</span></p>
 
apparirà con la parola "Europa" scritta con un carattere di dimensioni di 20 pixel, mentre la grandezza del resto del testo sarà quella predefinita.
Se un tag si trova all'interno di un altro, ne erediterà lo stile.

Conclusione

Una volta terminata la redazione dell'articolo, usando i pulsanti sulla destra del pannello (sia per Joomla che per Wordpress), impostate la categoria, i tags per la ricerca e la lingua (se avete unsito multilingue). Se volete anche aggiungere una copertina, sotto forma d'immagine, su Wordpress dovete andare in fondo in basso nel pannello, sulla destra, dove c'è scritto "Immagine in evidenza" e scegliere un'immagine che apparirà come copertina quando l'articolo ancora non è aperto. Invece, per Joomla, dovrete solo cliccare sulla linguetta in alto, chiamata "Immagini e link" e scegliere un'immagine per la copertina da visualizzare quando l'articolo non viene ancora aperto dal visitatore e/o un'altra per quando l'articolo è aperto.

Infine per poter vedere online il vostro articolo, dovrete cliccare sul pulsante "Pubblica" in cima a destra nel pannello Wordpress dell'articolo, oppure su "Salva", nella barra in alto del pannello Joomla dell'articolo. Affinché l'articolo appaia, deve essere collegato ad una pagina o un menu, oppure ad un blog esistente individuato tramite la categoria che avete scelto.

Oltre a quanto indicato, sarebbe necessario anche predisporre l'articolo appena creato al posizionamento sui motori di ricerca come Google, ma questo richiede particolari conoscenze tecniche, che vanno al di là della semplice compilazione di metatag, quindi non possiamo trattarlo qui.

Per ogni problema rivolgetevi al vostro webmaster. Se siete clienti di operedigitali.com otterrete un ottimo supporto.

©operedigitali.com

 

Print Friendly, PDF & Email