banner ispirato al tema grafico di WordPress

La piattaforma di WordPress consente un’agevole gestione delle immagini. Questo è soprattutto verificato negli ambienti “Articolo” e “Pagina“.

Diverso è l’inserimento di immagini nelle colonne laterali, normalmente destinate alla gestione, mediante link testuale, dei collegamenti interni/esterni.

Questi collegamenti si trovano all’interno dei “Widget“. Un Widget che consente il collegamento con l’omonima ed apprezzata galleria immagini è Flickr. I Widget si trovano in “Aspetto“.

Ma come fare per inserire un’immagine isolata nella colonna laterale?

Mancando uno spazio predisposto, un Widget appunto, è il caso di usare un po’ di codice HTML.

Punto 1: dimensioni del banner

Innanzitutto si tratta di calcolare lo spazio disponibile nella colonna laterale dove verrà inserito il banner:

• mediante il tasto “PrtSc” della tastiera (probabilmente in alto a dx, vicino a F12) fotografare la home page del sito WordPress in oggetto
• in Photoshop cliccare “Ctrl + n” o “File/Nuovo” e quindi “Ctrl + v“, ossia copia
• calcolare almeno la larghezza massima disponibile per l’inserimento dell’immagine
• riportare in Photoshop queste dimensioni e comporre il banner

Punto 2: inserimento del banner

Dopo aver creato l’immagine o il banner, inserire il file in un Articolo o in una Pagina che potrebbero essere destinati alla gestione di questi files.

Un modo per “nascondere” questo Articolo potrebbe essere quello di retro datarlo.

come inserire un banner in WordPress

Una volta inserito il banner nell’articolo, selezionarne la url: è sufficiente visualizzare l’articolo, cliccare sull’immagine o mediante mouse-dx selezionare la funzione “Visualizza immagine“. Es: http://500tutorial.files.wordpress.com/2009/09/banner_002.jpg, quindi il dominio, la data d’inserimento ed il nome dell’immagine.

Punto 3: inserimento del banner nella colonna

• A questo punto basterà passare nel pannello di controllo del sito, selezionare “Aspetto/Widget“
• mediante trascinamento (drag & drop) spostare il pulsante “Testo” dalla colonna (sx) dei Widget disponibili alla “Barra laterale” (dx) ed aprirlo cliccando sul triangolino che si trova a dx del titolo.
• a questo punto si può inserire un “Titolo” che verrà visualizzato (es: Sponsor)
• ed il codice HTML che consentirà di collegarsi con il banner appena inserito

come inserire un banner in WordPress

In linea di massima il codice sarà di questo tipo:

1. <a><img src=”http://URL IMMAGINE” border=”0″></a><p>
   per l’inserimento di un’immagine semplice
2. <a href=”http://LINK A PAGINA WEB” target=”_blank”><img src=”http://URL IMMAGINE” border=”0″></a>
   per l’inserimento di un banner che rimandi (Link) ad un’altra pagina Web (si consiglia l’uso del comando target=”_blank” per aprire il Link in un’altra scheda/finestra del Browser)
3. una variante può essere rappresentata dal Link alla Email, anzichè una pagina Web;  in questo caso la stringa sarà:
   <a href=”mailto:INDIRIZZO EMAIL” target=”_blank”><img src=”http://URL IMMAGINE” border=”0″></a><p>

inserimento di un banner: solo immagine o link a pagina web o posta elettronica

Il comando <p> consente di distanziare le immagini.

inserimento di un banner: esito finale

Rispetto al passato la gestione delle immagini in un sito Internet risulta particolarmente agevolata, grazie alla diffusione dell’uso della fotocamera digitale. Oggi  non è più necessario azionare scanner per la conversione di  pellicola, dispositive e/o fotografie in file.

D’altro canto macchine fotografiche digitali sempre più performanti potrebbero metterci a disagio nel caricamento di file eccessivamente pesanti per la connessione disponibile.

Per cui si è costretti all’uso di programmi di foto ritocco come Photoshop, Gimp e molti altri che alle volte possono risultare complessi nell’impiego.

Quindi risulta particolarmente interessante il post che Salvatore Aranzulla pubblica nel suo fornitissimo blog.

Salvatore Arenzulla segnala infatti nel suo blog il sito Internet Codeplex dove si parla di IMAGE RESIZER POWERTOY CLONE: l’abbiamo provato e lo consigliamo volentieri.

Dapprima si scarichi ed installi il sw. Si tratta, ovviamente, di un sw che si può scaricare gratis.

Quindi si selezionino le immagini digitali da ridimensionare. Con l’immagine sottostante si può cogliere il peso di una foto digitale di una macchina fotografica digitale di media qualità.

Come ridimensionare una o più immagini digitali

Come ridimensionare immagine digitali

Come si può vedere, le immagini selezionate hanno un peso complessivo di oltre 8 Mb. Cliccando il tasto destro del mouse si attiva il solito menù, ma questa volta c’è una voce in più: Resize Pictures.

Come ridimensionare immagini digitali

A questo punto vengono visualizzate le varie opzioni disponibili: si consiglia di selezionare la misura “Medium“.

Ques’ultima immagine mostra il risultato finale del ridimensionamento: la creazione di file rinominati, così da non rischiare la sovrascrittura ai danni dei files originali ed il peso finale (circa mezzo Mb)

Un facile modo per ridimensionare immagini digitali

Home Tutorial | Info

Oltre che alla creazione, modifica ed eliminazione delle informazioni inserite, WordPress consente anche l’oscuramento temporaneo di una pagina o di un post (articolo).

La creazione di un articolo (post) o di una pagina è stata trattata in “Creazione di un nuovo articolo, o post: il Testo“.

CANCELLA PAGINA

Il primo passo, dopo l’accesso al lato amministratore di WordPress, è di cliccare “Modifica” nella sezione “Pagine“.

Se l’operazione di eliminazione è relativa a più pagine,  si selezionino le righe/pagine da eliminare e quindi si scelga l’azione da applicare contemporaneamente al gruppo selezionato.

Se, invece, si tratta di eliminare un’unica pagina, basterà posizionare il mouse SENZA CLICCARE in prossimità della riga/pagina da eliminare per visualizzare le attività possibili:

• Modifica
  si riaccede al contenuto per compiere le modifiche desiderate
• Modifica veloce
  si accede ad un mini-Editor per operare modifiche rapidamente
• Cancella
  si elimina tutto il contenuto
• Anteprima
  si visualizza dal lato admin l’anteprima del contenuto

Un avviso aiuterà ad evitare di cancellare dei contenuti per errore.

Cancellare pagina in sicurezza con WordPress

Articoli correlati:
- Creazione di un nuovo articolo, o post: il Testo
- Inserimento di un’immagine in un post di WordPress

Home Tutorial | Info

Rispetto alle piattaforme precedenti o altre, WordPress consente il caricamento delle immagini che possono essere visualizzate come miniature, dimensione media e in originale.

L’unica attenzione, a questo punto, rimane il fatto di ridimensionare quelle immagini che sono state prodotte ad altissima qualità con una potente fotocamera digitale. Per tutti gli altri casi è sufficiente selezionare tra le opzioni della propria fotocamera digitale la qualità media.

Lo spazio disponibile gratuitamente è di 3 Gb.

Editor WordPress per articoli e pagine

Il primo passo per l’inserimento di un’immagine, non c’è differenza tra pagina e/o articolo, è cliccare il primo pulsante da sx nella riga sopra l’Editor: “Carica/Inserisci“.

Come inserire un'immagine con WordPress

Quest’ultimo screenshot mostra che l’immagine in fase di caricamento può essere allineata a sx, dx o al centro.

Si consiglia di linkare l’immagine opzione particolarmente utile ai fini della visibilità nei motori di ricerca.

La popolarità nei motori di ricerca è comunque sottesa anche da altri elementi, come la didascalia alle immagini più grandi, il titolo di tutte le immagini, l’uso dei Tag, classificazione in categorie pertinenti del post e la formattazione del testo. Tutti questi fattori, ed altri ancora, verranno approfonditi in varie occasioni visto il loro carattere ricorrente.

Come per qualsiasi inserimento, anche in questo caso si consiglia di andare subito a verificare l’esito finale, così da controllare che sia tutto in ordine.

Articoli correlati:
- Creazione di un nuovo articolo, o post: il Testo

- Come ridimensionare un’immagine digitale

Home Tutorial | Info

Informazioni turistiche Venezia e dintorni

Spiaggia di Caorle

]]> http://500tutorial.wordpress.com/2009/05/26/inserimento-di-unimmagine-in-un-post-di-wordpress/feed/ 0 501vini Informazioni turistiche Venezia e dintorni Spiaggia di Caorle Editor Wordpress per articoli e pagine Inserimento immagine con Wordpress Come inserire un'immagine con Wordpress Come inserire un'immagine con Wordpress: seleziona file Come inserire un'immagine con Wordpress: carica file selezionato Informazioni turistiche Venezia e dintorni Spiaggia di Caorle http://500tutorial.wordpress.com/2009/05/25/creazione-di-un-nuovo-articolo-o-post-il-testo/ http://500tutorial.wordpress.com/2009/05/25/creazione-di-un-nuovo-articolo-o-post-il-testo/#comments Mon, 25 May 2009 12:32:33 +0000 501vini http://500tutorial.wordpress.com/?p=8 ]]> Come si fà ad inserire un nuovo articolo, o Post, in un sito Internet realizzato con la piattaforma di WordPress?

Innanzitutto ci si “loga”, ossia si entra nel lato amministratore del sito mediante le credenziali di accesso (user id e password) rilasciate.

Quindi si accede alla sezione “ARTICOLI” (in alto a sx) e si seleziona “Add New” (= Aggiungi Nuovo).

Una volta visualizzato l’editor si può iniziare a scrivere il Titolo e quindi il Corpo del messaggio.

NOTA 1: qualora il testo sia già disponibile in formato elettronico compatibile, si potrà usare il tradizionale “Copia-Incolla” (Ctrl C – Ctrl V), risparmiando così un sacco di tempo. ATTENZIONE: in questo caso si fà pulizia della formattazione originale semplificandola al livello, comunque elevato, di un uso non professionale.

NOTA 2: si ricorda che il comando “Enter – Invio” in un testo viene inteso come “a capo, nuovo paragrafo“, mentre per andare a capo senza attivare un nuovo paragrafo sarà sufficiente premere contemporaneamente i tasti  “Shift” + “Invio“

NOTA 3: per creare un’introduzione all’articolo e rimandarne l’intera lettura ad un’altra pagina, alleggerendo così la pagina delle News e consentendo la visualizzazione dei Titoli di diversi Articoli è necessario usare la funzione “More” disponibile tra gli strumenti dell’Editor. Prima di attivare il “More” selezionare la posizione della cesura con un mouse-click nel testo.

Dopo l’inserimento del testo si provvederà all’abbinamento dell’articolo ad una categoria (la terza voce nella colonna dx).

La categoria delle News potrebbe essere già esistente e quindi basterà selezionarla.

Per creare una nuova categoria di news basterà, invece, cliccare “+ Aggiungi una nuova categoria” che si trova subito sotto.

Prima di pubblicare l’articolo non resta che inserire dei Tag affinchè sia più rintracciabile da chi ne ricerchi i contenuti, sia esso un Motore di Ricerca che una persona che sta navigando nel sito Internet.

A questo proposito si consiglia di riprendere il Titolo de l Post ed i termini o brevissime frasi evidenziati nel testo con il “Bold-Grassetto“. Successivamente si potranno “Selezionare fra i Tag maggiormente utilizzati“

A questo punto si può “Pubblicare” e si raccomanda di andare subito a verificare il risultato finale, così da rilevare tempestivamente se ci sono errori.

Home Tutorial | Info