Sebbene HTML contenga comandi incorporati che consentono di progettare e creare menu, potrebbe essere necessario aggiungere collegamenti a sezioni di un’immagine già esistente. Ad esempio, forse hai creato un’immagine per il tuo menu in Photoshop e vuoi aggiungere collegamenti ipertestuali a diverse sezioni di esso. Ciò può essere ottenuto aggiungendo del codice CSS al file nell’editor dei temi di WordPress.

1

Accedi al tuo account WordPress. Fai clic su “Media”, quindi su “Aggiungi nuovo”. Fare clic sul pulsante “Seleziona file”, quindi individuare la posizione della grafica. Fare doppio clic sul file per caricarlo. Una volta completato il caricamento, copia l’URL nella casella di testo “URL file” e incollalo in un editor di testo per un utilizzo successivo.

2

Fai clic su “Aspetto” dal menu principale, quindi fai clic su “Editor”. Fare clic sul file che governa la sezione del sito a cui si desidera aggiungere il menu – di solito questo sarà “header.php”.

3

Aggiungi il seguente codice nel punto in cui vuoi che il menu vada:

Copia e incolla una riga aggiuntiva che inizia con “

4

Fare clic su “style.css” dall’elenco dei file. Inizia una nuova riga all’inizio e incolla le seguenti righe di codice nel file:

graphic_menu {

blocco di visualizzazione; larghezza: 500 px; altezza: 150px; sfondo: url (http://yoursite.com/link/to/your/graphic.gif) no-repeat; }

Sostituisci l’URL di esempio con l’URL effettivo della tua immagine, di cui hai preso nota nel passaggio 1. Inoltre, modifica “altezza” e “larghezza” in modo che corrispondano alle dimensioni dell’immagine.

5

Copia e incolla la seguente sezione di codice nel file, una volta per ogni voce del menu, e rinomina “menuitem1” in modo che corrisponda ai valori “id” che hai fornito alle voci di menu nel passaggio 3:

link1 {

posizione: assoluta; blocco di visualizzazione; larghezza: 200 px; altezza: 150px; margine sinistro: 100 px; margin-top: 0px; galleggiante: sinistra; }

Per ogni voce di menu è necessario definire un’area quadrata che sarà collegata a un collegamento ipertestuale. Questo viene fatto definendo le coordinate dell’angolo in alto a sinistra della voce di menu, rispetto all’angolo in alto a sinistra della grafica complessiva. Definisci l’angolo in alto a sinistra dell’area con collegamento ipertestuale con gli attributi “margine”. Nell’esempio sopra, questo sarà proprio nella parte superiore dell’immagine, a 100 pixel da sinistra. Quindi imposta la dimensione della voce di menu con gli attributi “larghezza” e “altezza”. In questo esempio, la voce di menu è larga 200 pixel e alta 150 pixel. Ripeti l’operazione per ogni voce di menu.

6

Copia e incolla il seguente codice nel file, che impedisce alle voci di menu di ricevere una sottolineatura:

graphic_menu a {

decorazione del testo: nessuna; }

7

Salva il file. Il menu è ora stato creato.