Vi sarà capitato o vi capiterà di chiedervi come inserire un immagine cliccabile con link incorporato. È utile in moltissimi casi ed esteticamente piacevole,per questo ora vedremo come raggiungere questo scopo in WordPress utilizzando il widget html.
1-Andare nella sezione Temi e cliccare su Personalizza:
2-Andare in Widget selezionare dove posizionare il blocco ad esempio barra laterale e cliccare su aggiungi widget:
3- Aggiungi Html personalizzato:
4- A questo punto dovrai compilare il box con il codice html dedicato a raggiungere lo scopo desiderato ovvero un’immagine “linkabile” il cui link viene aperto in una nuova finestra del browser. Non temere ti spiego passo passo come fare senza naufragare nelle righe di codice. Bastano delle semplici righe ma prima dovete caricare la vostra immagine nella sezione aggiungi media:
e dovete salvarvi l’url dell’immagine andando su modifica e copiandolo:
5- Fatto questo quarto passaggio siete a buon punto e potete tornare nel widget e iniziare ad aggiungere il codice.Vi serviranno solo 2 tag e qualche attributo:
- il tag … (è usato per indicare o ancorare un particolare punto in un file HTML o per associare un collegamento ipertestuale alla porzione di documento racchiusa tra il tag di apertura e quello di chiusura, che può essere del semplice testo o una immagine, oppure una sequenza di elementi)
L’assenza di contenuto tra i tag e è visto come un errore da alcuni browser, ma la maggior parte dei browser ignora questo difetto - href (attributo href – indica il percorso (relativo o assoluto) del documento collegato)
- target (attributo target – consente di impostare un link verso un frame, specificando il nome del frame, oppure di aprire un link in una nuova finestra del browser specificando il valore predefinito_blank)
- il tag (notiamo come il tag
è un tag senza un contenuto, per questo non ha un elemento di chiusura. Rappresenta il principale elemento per inserire un’immagine in una pagina HTML) - src (attributo src-sta per source (origine), è l’indirizzo (URL) del file che vogliamo mostrare)
- alt (attributo alt-è il testo alternativo, ovvero il testo che appare se, per qualche motivo, il client non riesce a mostrare l’immagine. Possiamo anche omettere questo attributo, ma risulta utile per l’accessibilità e per i motori di ricerca quindi è bene inserirlo sempre)
A questo punto inserite il codice(non ho potuto inserire il testo altrimenti viene riconosciuto come html e fa casini ecco perché ho inserito lo screenshot):
6- A questo punto pubblicate il tutto.Quando aprirete il sito vedrete l’immagine caricata(se non la vedete premete F5 per aggiornare la cache del browser),quando vi cliccherete si aprirà in una nuova finestra l’url da voi inserito!Beh avete terminato la procedura!Ottimo lavoro,lasciate un like se vi è stato utile l’articolo,seguite il sito per scoprire nuovi modi per migliorare la vostra immagine o quella della vostra azienda nel web.
Copyright©2017 http://www.seremailragno.com by Michele Paoletti michelepaol@gmail.com.All rights reserved.
I contenuti presenti non possono essere copiati,riprodotti,pubblicati o redistribuiti perché appartenenti all’autore stesso.
E’ vietata la copia e la riproduzione dei contenuti in qualsiasi modo o forma.
E’ vietata la pubblicazione e la redistribuzione dei contenuti non autorizzata espressamente dall’autore.
