Aggiungiamo "cerca" al menu di Thematic

Una casella “cerca” nel menu principale e’ una caratteristica di molti temi. Anche se Thematic non la presenta nativamente, e’ possibile aggiungerla con poche linee di codice.

Per prima cosa apriamo (o creiamo) il nostro child theme.

La casella “cerca” verra’ mostrata alla destra del menu, all’ interno del div #access. Seguendo la logica degli hooks e delle azioni di Thematic Framework per WordPress, dobbiamo iniziare rimuovendo l’ azione thematic_access() dall’ hook thematic_header(). Suona difficile? Niente paura! Tutto cio’ che dobbiamo fare e’ inserire il seguente codice nel file functions.php del nostro child theme :

// Rimuoviamo l'azione standard di Thematic
function remove_thematic_actions() {
remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_actions');

Se tutto funziona a dovere, ricaricando il nostro blog noteremo che il menu e’ scomparso. Adesso possiamo creare il nostro menu con la casella “cerca” sulla destra. Aggiungiamo il codice qui sotto in fondo al file functions.php:

// Creiamo un div access personalizzato
function search_access() { ?>
<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
<?php wp_page_menu('sort_column=menu_order') ?>

<div id="access-search">
<form id="searchform" method="get" action="<?php bloginfo('home') ?>">
<div>
<input id="s" name="s" type="text" value="<?php echo wp_specialchars(stripslashes($_GET['s']), true) ?>" size="20" tabindex="1" />
<input id="searchsubmit" name="searchsubmit" type="submit" value="<?php _e('Search', 'thematic') ?>" tabindex="2" />
</div>
</form>
</div>

</div><!-- #access -->
<?php }
add_action('thematic_header','search_access',9);

Aggiorniamo la pagina e la casella apparira’, ma non nella posizione desiderata! Dobbiamo aggiungere anche alcuni stili CSS.

Apriamo il file style.css e aggiungiamo in fondo il codice che segue:

#access-search{
position:absolute;
left:50%;
width:260px;
margin-left:170px;
height:29px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
padding:2px 0 0 4px;
}

Fatto!

Anteprima

---

Articolo scritto da Cristi con il titolo Add a search box to the Thematic menu. Tradotto con il consenso dell’ Autore.This post is an Italian translation of the original article http://www.cozmoslabs.com/2009/04/15/add-a-search-box-to-the-thematic-menu/