Very short snippet: WordPress, migliorare il campo cerca

Oltre all’aspetto grafico del campo input del cerca di WordPress, è possibile intervenire su di esso a livello di codice in modo da renderlo un tantino interattivo quando si clicca al suo interno. Un effetto facile da realizzare permette di inserire un testo all’interno del campo cerca che scompare (e ricompare quando si esce dal campo lasciato vuoto) quando si clicca al suo interno. Questa tecnica è comonda in quanto informa l’utente della funzionalità del campo in questione senza costringerci ad aggiungere una label esterna che, a volte, ruberebbe spazio al tema grafico.
Questo procedimento, inoltre, può essere utilizzato anche in altri contesti: come un modulo contatti ad esempio.
Il codice che riporto qui sotto potete inserirlo nel file searchform.php del vostro tema.

1
2
3
4
5
6
7
8
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<?php
    $i = 'Cerca su undolog...';    // stringa a piacere
    $q = get_search_query();       // recupero l'eventuale stringa di una ricerca precedente
    $v = ( $q == "" ) ? $i : $q;   // se non è stata fatta nessuna ricerca imposta la mia stringa
?>
<input onblur="this.value=(this.value == '')?'<?=$i?>':this.value" onfocus="this.value=(this.value == '<?=$i?>')?'':this.value" type="text" value="<?=$v?>" name="s" id="s" />
</form>

3 commenti a: “Very short snippet: WordPress, migliorare il campo cerca”

  1. 13 set, 2009 Il meglio della settimana #29 | BigThink:

    [...] Very short snippet: WordPress, migliorare il campo cerca Inserire un testo all’interno del campo cerca di WordPress che scompare quando si clicca al suo interno. Ti è piaciuto l'articolo? Vota Ok oppure No. Grazie Mille! condividi tweetmeme_url = 'http://www.bigthink.it/rubriche/il-meglio-della-settimana-29/'; tweetmeme_source = 'Ghido'; Condividi Tags: meglio della settimana, wordpress [...]

  2. 16 set, 2009 Migliorare i campi di testo in Wordpress — FeelTips.com:

    [...] Grazie anche a Undolog [...]

  3. 08 nov, 2009 Migliorare i Campi di Testo in Wordpress « LAB46:

    [...] anche a Undolog Share this post! Twitter Digg Facebook Delicious StumbleUpon Google [...]

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA