Come aggiungere dei commenti al template di Blogger per ritrovare più facilmente il codice che vi abbiamo incollato.
Una delle domande che mi vengono più spesso rivolte nei commenti è quella di non trovare più un codice di un particolare widget nel template di Blogger e come fare quindi a disinstallarlo. Queste problematiche in realtà si potrebbero facilmente risolvere con un po' di attenzione.
Visto che ci sono dei blog che hanno molti anni con dei widget e dei codici inseriti da molto tempo è spesso difficile risalire al loro codice e quando questo sia possibile per chi non sia particolarmente esperto è difficile capire quando inizia e quando finisce il codice da eliminare o da modificare.
Gli webmaster in verità hanno a disposizione uno strumento potentissimo per "taggare" i codici in modo da poterli ritrovare più facilmente. Lo strumento da usare è quello dei commenti vale a dire una particolare sintassi che avverte il browser di non leggere quello che c'è all'interno di due tag. Ci sono vari tipi di commenti a seconda che il codice in questione sia HTML, CSS o javascript.
COMMENTI NEL CODICE HTML
Quando incolliamo un codice all'interno dei tag <body> e </body> si deve usare questa sintassi
<!-- Questo è un commento e quindi il browser non leggerà il suo contenuto -->
In genere nei codici dei widget che pubblico su questo sito aggiungo una riga di commento all'inizio e una alla fine del codice proprio per delimitarne in modo certo l'inizio e la fine
Per racchiudere un testo che indichi l'inizio o la fine di un determinato codice bisogna quindi digitare <!-- prima del testo e --> alla fine dello stesso. Questa sintassi è stata utilizzata anche per nascondere la icona di Google+ nella versione mobile. Quando in un codice ci sono dei commenti cioè delle righe con questa sintassi si possono anche eliminare e non succede nulla. Vanno però lasciati i commenti che servono per ritrovare più facilmente il codice e per sapere subito in modo certo dove inizia e dove finisce.
Lo screenshot precedente è una parte di un codice per gli Articoli Simili; basterà digitare Ctrl+F quindi cercare Articoli Simili per trovarlo immediatamente dopo aver pigiato su Invio. L'operazione dell'inserimento dei commenti va fatta in modo sistematico per facilitare eventuali modifiche. Se per esempio avete inserito dei banner pubblicitari nel modello è opportuno inserire un commento all'inizio e uno alla fine con il loro posizionamento. Esempio
<!-- Banner sotto titolo post - Inizio -->
Codice del banner
<!-- Banner sotto titolo post - Fine -->
Codice del banner
<!-- Banner sotto titolo post - Fine -->
COMMENTI NEL CODICE CSS
I commenti con la sintassi appena vista possono anche essere inseriti per "taggare" i codici posizionati subito sopra alla riga </head> dove vengono posizionati molti codici. Non si possono invece inserire all'interno della sezione <b:skin> che è quella che contiene i CSS. Per inserire dei commenti esplicativi in un CSS dovremo invece usare quest'altra sintassi
/* Inizio dei CSS per il menù */
#menu{
background: #F95B5B; /* Colore di sfondo del menù */
color: #FFF; /* Colore di testo del menù */
height: 38px; /* Altezza del menù */
border-bottom: 2px solid #DDD; /* Stile del bordo inferiore del menù */
border-top: 2px solid #DDD; /* Stile del bordo superiore del menù */
}
/* Fine dei CSS del menù */
#menu{
background: #F95B5B; /* Colore di sfondo del menù */
color: #FFF; /* Colore di testo del menù */
height: 38px; /* Altezza del menù */
border-bottom: 2px solid #DDD; /* Stile del bordo inferiore del menù */
border-top: 2px solid #DDD; /* Stile del bordo superiore del menù */
}
/* Fine dei CSS del menù */
dove tutti i commenti sono stati colorati di verde. Se si tolgono il codice funzionerà ugualmente. Insieme ai commenti di inizio e fine codice sono stati digitati anche i commenti esplicativi del significato di ciascun parametro. Come avete potuto notare la sintassi è /* Testo del commento */.
Un'altra possibile sintassi per i commenti nei CSS è la seguente
#menu{
background: #F95B5B; // Colore di sfondo del menù
color: #FFF; // Colore di testo del menù
height: 38px; // Altezza del menù
border-bottom: 2px solid #DDD; // Stile del bordo inferiore del menù
border-top: 2px solid #DDD; // Stile del bordo superiore del menù
}
background: #F95B5B; // Colore di sfondo del menù
color: #FFF; // Colore di testo del menù
height: 38px; // Altezza del menù
border-bottom: 2px solid #DDD; // Stile del bordo inferiore del menù
border-top: 2px solid #DDD; // Stile del bordo superiore del menù
}
con due slash // in modo da inserire un testo esplicativo. Quando però il codice non è ben formattato e diviso in righe questa sintassi può creare difficoltà quindi consiglio di non usarla.
I commenti del tipo /* Commento */ debbono anche essere utilizzati all'interno dei tag <style> e </style> visto che sono i tag che determinano l'inizio e la fine dei CSS inline
COMMENTI NEI JAVASCRIPT
I commenti usati per il CSS possono essere utilizzati anche per il javascript
<script type=”text/javascript”>
....
// questo è un commento di una sola riga....
/*questo è un commento che può stare anche su più righe */
....
</script>
....
// questo è un commento di una sola riga....
/*questo è un commento che può stare anche su più righe */
....
</script>
I commenti nel javascript servono per i credit e sono utili per il significato delle variabili
I commenti aggiungono del codice al modello lo rendono un po' più pesante. Bisogna quindi usarli senza eccedere e lasciare solo quelli che riteniamo siano indispensabili per ritrovare il codice e eventualmente per modificarlo. I commenti comunque rappresentano una parte molto piccola di tutto il template. Per rendere il modello di Blogger più leggibile si può anche formattarlo.
Si va su Modello > Modifica HTML e si clicca su Formatta Modello
In questo modo il codice del template sarà indentato e organizzato secondo le regole della sintassi.
Nessun commento :
Posta un commento
Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy