Inserire immagini WordPress vi da la possibilità di migliorare la grafica e l’estetica delle vostre pagine aiutandovi a inserire immagini con il Media Manager. In questa sezione vi spiegheremo come fare a caricare delle immagini o delle foto su WordPress.
Indice
Caricare Foto e Immagini su WordPress
All’interno del vostro sito potrete caricare diversi formati di immagine come per esempio jpeg, gif e png.
Caricare un immagine attraverso lo strumento “media” non significa necessariamente inserirla all’interno di una pagina o di un articolo.
Se desideri invece caricare un immagine direttamente su una determinata pagine e’ necessario andare in “pagina” oppure “articolo” e cliccare su “aggiungi nuova;
L’alternativa è quella di utilizzare l’icona carica inserisci nell’editor di testuale.
All’apertura della finestra che consente di inserire il file desiderato all’interno dell’articolo dovete cliccare su “Seleziona file”.
A questo punto vedrete una barra che segnalerà lo stato di caricamento della foto. Una volta terminato il caricamento sarete indirizzati su una finestra di configurazione dell’immagine inserita la quale vi consentirà di settare i alcuni parametri della foto come le dimensioni, la posizione nella pagina ecc.
Di seguito vi elenchiamo i parametri che potrete personalizzare prima di inserire all’interno delle vostre pagine o dei vostri articoli i media desiderati:
Titolo Immagine
L’utente visualizzerà il titolo immagine quando passerà sulla foto con il mouse;
Come inserire il titolo immagine?
Puoi aggiungere gli attributi del titolo dell’immagine in WordPress tramite la tua Libreria multimediale.
Dal menu di sinistra del pannello di controllo clicca su Media>Libreria
Vedrai quindi le immagini del tuo sito. Cliccando su un anteprima dell’immagine vedrai una schermata che alla sua destra riassume gli attributi testuali dell’immagine. Modifica il testo: Titolo
Testo alternativo Immagine
Il testo alternativo viene utilizzato dai browser che non sostengono la visualizzazione delle immagini sulla rete.
Come inserire il tag ALT immagine?
Dal menu di sinistra del pannello di controllo clicca su Media>Libreria
Vedrai quindi le immagini del tuo sito. Cliccando su un anteprima dell’immagine vedrai una schermata che alla sua destra riassume gli attributi testuali dell’immagine. Modifica il testo: Testo alternativo.
Didascalia Immagine
La didascalia non è nient’altro che un piccolo testo che sarà visualizzato sotto la foto;
Come inserire il tag Didascalia immagine?
Dal menu di sinistra del pannello di controllo clicca su Media>Libreria
Vedrai quindi le immagini del tuo sito. Cliccando su un anteprima dell’immagine vedrai una schermata che alla sua destra riassume gli attributi testuali dell’immagine. Modifica il testo: Didascalia.
Descrizione Immagine
la descrizione sarà visualizzata nelle pagine degli allegati pubblici, nel momento in cui l’utente fa click su un media per visualizzarlo nella versione originale.
Come inserire il tag Descrizione immagine?
Dal menu di sinistra del pannello di controllo clicca su Media>Libreria
Vedrai quindi le immagini del tuo sito. Cliccando su un anteprima dell’immagine vedrai una schermata che alla sua destra riassume gli attributi testuali dell’immagine. Modifica il testo: Descrizione.
Url link Immagine
L’url rappresenta l’indirizzo sul quale sarà possibile visulizzare la foto nella sua versione originale. E’ possibile rimuoverlo facendo click sul bottone “nessuna”.
Allineamento Immagine
Rappresenta la posizione che la foto occuperà nella pagina in relazione al testo;
Dimensione Immagine
Indica la dimensione del file inserito nell’articolo.
Per concludere l’operazione di caricamento della foto sulla pagina dobbiamo cliccare su “inserisci nell’articolo” e la foto apparirà con tutti i parametri selezionati in precedenza.
Caricare immagine da URL
WordPress fornisce la possibilità di caricare un file anche tramite l’url, dunque in sostanza senza uploadare il file fisicamente sul nostro sito.
L’unico rischio è dato dal fatto che se il sito da cui attingiete la foto dovesse chiudere, la foto sparirà magicamente anche dal vostro sito.
Per creare un nuovo articolo andare su “articoli” → aggiungi nuovo.
Per creare una nuova pagina andare su “pagine” → aggiungi nuova.
L’immagine che desideriamo caricare verrà inserita nel punto in cui viene posizionato il cursore del mouse. A questo punto una volta deciso dove caricare la foto non resta cliccare sull’apposita icona “carica e inserisci” per caricare il file.
Nella finestra di gestione dei file c’e’ la possibilità di selezionare il tab “URL di provenienza”
A questo punto una volta settati i parametri della foto che si desidera caricare non rimane che inserire la foto all’interno dell’articolo attraverso il solito pulsante “Inserisci nell’articolo”.
Caricare immagini dalla libreria Media
Se si deve utilizzare una foto che è stata precedentemente caricata non è necessario averla ancora disponibile sul computer in quanto la si potrà caricare direttamente dalla libreria media.
Per creare un nuovo articolo andare su “articoli” → aggiungi nuovo.
Per creare una nuova pagina andare su “pagine” → aggiungi nuova.
L’immagine che desideriamo caricare verrà inserita nel punto in cui viene posizionato il cursore del mouse. A questo punto una volta deciso dove caricare la foto non resta cliccare sull’apposita icona “carica e inserisci” per caricare il file.
All’apertura della finestra selezionate “libreria media”
La finestra mostrerà tutte le foto caricate in passato, è possibile selezionare la foto da inserire facendo click su “Visualizza”.A questo punto potrete impostare i parametri di allineamento, titolo, descrizione ecc.
A questo punto fate click su “inserisci nell’articolo”;
Nota bene: se dovessi riscontrare dei problemi con il caricamento delle foto è necessario ricontrollare il formato del file caricato, tenendo a mente quali sono i formati supportati da WordPress.
Inserire Molti file sul Media Manager WordPress Contremporaneamente
WordPress 4.0 ha portato con Sé una fantastica aggiunta di funzionalità nel Media Manager. Il Drag & Drop. Potete infatti trascinare all’interno del Vostro sito molti file contemporaneamente, senza fare al cuna fatica, vediamo come:
Andate nella Bacheca di WordPress su: Media> Aggiungi Nuovo
Si aprirà la Schermata per il caricamento di un nuovo file.
Organizzate i file che volete caricare nel Media Manager in una Cartella del vostro Pc.
Aprite la cartella a pieno schermo e poi ridimensionatela fino a metà schermo, fate lo stesso con la finestra del Browser in cui avete aperta la pagina di Caricamento file.
Seguite l’esempio riportato nell’immagine sottostante.
Ora semplicemente portate il cursore del Mouse sui file selezionati e trascinateli all’interno del browser come nell’Immagine sottostante.
Fatto :)
Scarica Subito la Guida-wordpress-pdf
Torna alla Guida WordPress
Differenza tra tag Titolo e Alt Immagine
Il titolo dell’immagine e i tag alt dell’immagine hanno delle differenze in termini di accessibilità web, ottimizzazione dei motori di ricerca ed esperienza dell’utente. La differenza tra il titolo dell’immagine e il tag alt dell’immagine è che il tag alt dell’immagine nasce principalmente per l’accessibilità web, gli schermi di lettura e i motori di ricerca mentre i titoli delle immagini sono per gli utenti. Un tag alt immagine può essere letto da uno schermo di lettura (screen reader) per una migliore accessibilità e usabilità del Web. I tag alt delle immagini possono essere letti da un motore di ricerca per comprendere il ruolo di un immagine, lo scopo e il significato dell’immagine. I titoli delle immagini possono essere mostrati agli utenti se l’utente tocca, fa clic o passa con il mouse sopra l’immagine.
Il titolo di un’immagine rappresenta visivamente il significato e lo scopo dell’immagine per l’utente. Un motore di ricerca può leggere sia i titoli delle immagini che i tag alt dell’immagine. L’attributo titolo dell’immagine ha un valore per l’ottimizzazione dei motori di ricerca per descrivere lo scopo dell’immagine ed espandere le parole definitive nel tag alt dell’immagine, per una migliore descrizione dell’immagine stessa.
I titoli delle immagini e i tag alt dell’immagine sono attributi dell’immagine complementari per descrivere l’immagine. I titoli delle immagini per la SEO implicano il ruolo e il contributo dei titoli delle immagini per le prestazioni di ottimizzazione dei motori di ricerca.Nel proseguo di questo tutorial, vedremo le differenze tra i tag alt dell’immagine e i titoli delle immagini raccontati da una prospettiva SEO e UX.
Quali sono le differenze tra titoli immagine e tag alt immagine?
Di seguito sono riportate le differenze tra i titoli delle immagini e i tag alt dell’immagine.
- I titoli delle immagini sono per l’esperienza dell’utente mentre i tag alt delle immagini sono per gli screen reader e i crawler dei motori di ricerca.
- I titoli delle immagini possono essere visualizzati visivamente sulla pagina Web mentre i tag alt delle immagini non possono essere visualizzati sulla pagina Web.
- I tag alt delle immagini dovrebbero essere brevi per descrivere lo scopo dell’immagine, i titoli delle immagini possono essere più lunghi per la comunicazione con l’utente.
- I titoli delle immagini sono visti come tooltip delle immagini, mentre i tag alt delle immagini sono visti come un’espressione testuale alternativa dell’immagine.
- I tag Alt immagine e gli attributi immagine dovrebbero essere usati insieme per supportare i vantaggi SEO e UX.
Come utilizzare i titoli delle immagini per la SEO?
Per utilizzare i titoli delle immagini per la SEO, è necessario utilizzare le istruzioni e le informazioni riportate di seguito.
- Comprendere lo scopo di un’immagine per scrivere un titolo di immagine.
- Scrivere titoli delle immagini più lunghi rispetto al tag alt dell’immagine.
- I titoli delle immagini devono riflettere lo scopo della pagina web su cui si trovano.
- Collega il titolo dell’immagine in primo piano al titolo della pagina web per esprimere meglio lo scopo del contenuto.
- Il titolo dell’immagine deve riflettere il significato del testo attorno all’immagine.
- Completa il significato della didascalia dell’immagine nel titolo dell’immagine.
- Usa il titolo dell’immagine per fornire una migliore pertinenza per le parole chiave a cui miri.
- Aumenta il coinvolgimento degli utenti con i titoli delle immagini per fornire una sessione più informativa ed efficiente.
- Allinea le regole grammaticali con le necessità ortografiche nei titoli delle immagini.
- Non utilizzare emoji o testo spezzato con comandi HTML all’interno dei titoli delle immagini.
- Usa le parole del tag alt dell’immagine nei titoli delle immagini con espressioni migliori per fornire una migliore pertinenza e contesto.
Che aspetto ha un attributo del titolo dell’immagine?
L’attributo titolo dell’immagine è un attributo del tag HTML “<img>”. Di seguito è riportato un esempio di utilizzo dell’attributo del titolo dell’immagine.
<img src=”alt-tag-image-title-difference.png” alt=”tag alt dell’immagine vs attributo del titolo” title=”Comprendere il tag alt dell’immagine e l’attributo del titolo dell’immagine per SEO e UX.”>
Di seguito è possibile vedere la spiegazione del blocco di codice per l’uso dell’attributo del titolo dell’immagine e la differenza rispetto al tag alt.
- “img” serve a fornire un tag immagine HTML.
- “alt” serve a fornire un tag alt dell’immagine per descrivere l’immagine ai crawler dei motori di ricerca e agli screen reader per una migliore accessibilità web.
- “title” serve a fornire una spiegazione del tag alt dell’immagine e dell’URL dell’immagine all’interno dell’attributo “src”.
- “src” serve a fornire un URL e l’indirizzo per il file immagine nel server web.
L’esempio di utilizzo dell’attributo del titolo dell’immagine sopra mostra come dovrebbe essere scritto il titolo di un’immagine e come appare. Di seguito è riportato un esempio di immagine per l’utilizzo dell’attributo del titolo dell’immagine.
Come utilizzare i nomi dei file immagine con gli attributi del titolo dell’immagine?
Gli attributi titolo dell’immagine dovrebbero essere usati in modo complementare ai nomi dei file immagine. Un nome file immagine è importante per i motori di ricerca e l’ottimizzazione per i motori di ricerca. I nomi dei file immagine forniscono informazioni e contesto per lo scopo dell’immagine. Il valore dell’attributo del titolo dell’immagine come frase può aiutare un motore di ricerca a comprendere meglio le parole nei nomi dei file immagine. Pertanto, le parole nel tag alt dell’immagine, nel nome del file dell’immagine e nell’attributo del titolo dell’immagine dovrebbero essere parole comuni tra loro.
Qual è la compatibilità dei browser per gli attributi del titolo dell’immagine?
Di seguito è possibile visualizzare la compatibilità del browser per gli attributi del titolo dell’immagine.
| Nome Browser | Versione | Data |
|---|---|---|
| Chrome | 1.0 | 2008 |
| Firefox | 1.0 | 2002 |
| IE Edge | 1.0 | 1995 |
| Opera | 1.0 | 2006 |
| Safari | 1.0 | 2003 |
