Piccole lotte quotidiane

Hacking Wordpress #2: Links esterni e form di ricerca

28 April 2006

Vediamo, dopo aver visto come rimuovere la sidebar dalle pagine degli articoli, come aggiungere al nostro blog due piccole chicche, utili alla navigazione e all’interazione tra l’utente e il sito.

Icona per i links esterni

Utile, per segnalare ai visitatori che un link li porterà in un sito esterno al nostro, è aggiungere una piccola icona di avviso. I CSS ci vengono in aiuto, ma solo se non usiamo Internet Explorer (che, come noto, non supporta gli standard CSS2). Decidiamo di accontentarci, lasciando come esercizio al lettore il caso explorer.
Cerchiamo innanzitutto un’immagine adatta: che sia inferiore alla dimensione media del carattere che usiamo, in modo da non dare problemi al layout, e che sia chiarificatrice della funzione che svolge.
Nel nostro caso andiamo a modificare il tag “a” solo quando è contenuto nel corpo di un articolo, la cosa è comunque applicabile a tutti i tipi di layout. Inseriamo il seguente codice nel nostro CSS:
.entrybody a[href ^="http://"]{ background: url(URL_ICONA) center right no-repeat; padding-right: 13px; text-decoration:none; border-bottom:1px dotted #aaa; font-weight:bold;} .entrybody a[href ^="http://URL_SITO"]{background: none !important; padding-right: 0 !important; text-decoration:none; border-bottom:1px dotted #aaa; font-weight:bold; }
Nella prima parte andiamo a specificare un’immagine di sfondo per i link il cui campo “href” inizia per “http://”. Nella seconda dichiarazione andiamo invece a specificare che, per quegli URL che contengono l’indirizzo del nostro sito, lo sfondo (quindi l’icona) non deve essere presente. Segnaliamo inoltre che questa seconda direttiva deve andare a sostituire le precedenti, con l’istruzione “!important”.

Form di ricerca

Mentre l’esempio precedente è applicabile ad ogni sito, questo è vaildo solo per le piattaforme Wordpress. Nel codice della barra laterale, dobbiamo semplicemente andare ad inserire il codice
</p> <h2>Cerca</h2> <ul> <li> <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/”></p> <input type="text" value="<?php echo wp_specialchars($s, 1); ?>” name=”s” class=”search”/></p> <input type="submit" class="search" value="->" /> </form> </li> </ul> <p>
Unica cosa degna di nota, il fatto che, a ricerca effettuata, la textbox viene valorizzata con il testo della ricerca appena effettuata, rappresentato dalla variabile php $s, da cui vengono rimossi eventuali caratteri html che potrebbero dare problemi di output.

Nel prossimo articolo vedremo come aggiungere una piccola ma utile funzionalità alla bacheca di Wordpress.

Partorito da Vittorio C. alle 08:52
Tags: Hacking Wordpress