Barra ricerca WordPress HTML CSS compatta nell’header

Una barra ricerca WordPress HTML CSS compatta può essere inserita nell’intestazione senza installare plugin e senza modificare i file del tema. Il modulo usa il parametro s, riconosciuto nativamente da WordPress, per inviare la parola cercata alla pagina dei risultati. Con pochi elementi HTML e alcune regole CSS è possibile ottenere un campo discreto, adatto anche agli header stretti e agli schermi mobili. Il codice seguente include un’etichetta accessibile, un pulsante visibile e uno stile responsive facilmente personalizzabile.

Cosa serve per creare la barra di ricerca

La barra ricerca WordPress HTML CSS si basa su un modulo HTML con metodo GET. Quando l’utente invia il modulo, WordPress legge il valore contenuto nell’input con nome s e apre una pagina di ricerca con un indirizzo simile a https://esempio.it/?s=parola.

Il codice può essere inserito in un blocco HTML personalizzato, in un’area widget dell’header oppure nel template dell’intestazione, in base al tema attivo. Questa soluzione non richiede JavaScript perché il comportamento di ricerca è gestito direttamente da WordPress.

Gli elementi principali sono:

  • Un elemento <form> con method="get".
  • Un campo <input> con name="s".
  • Un’etichetta <label> utile per gli screen reader.
  • Un pulsante di invio con testo visibile.
  • Una classe CSS dedicata, così gli stili non interferiscono con altri moduli del sito.

Per mantenere il codice compatibile con molti temi, il modulo utilizza action="/". Questa impostazione invia la ricerca alla home page del dominio, ma funziona correttamente solo se il sito WordPress è installato nella radice del dominio.

Come inserire l’HTML nell’intestazione di WordPress

Passo 1: aprire l’area dell’header

Con un tema a blocchi, apri Aspetto > Editor, seleziona l’anteprima del sito e modifica la parte Intestazione o Header. Aggiungi un blocco HTML personalizzato nella posizione in cui vuoi visualizzare la barra.

Con un tema classico, il percorso può essere Aspetto > Widget per inserire il modulo nella sidebar o nell’area header, oppure Aspetto > Personalizza se il tema mette a disposizione un’area dedicata. I nomi dei menu possono cambiare in base al tema e alla versione di WordPress.

Passo 2: incollare il modulo HTML

Nel blocco HTML personalizzato incolla questo codice:

<form class="wp-compact-search" action="/" method="get" role="search">
<label class="wp-compact-search__label" for="wp-compact-search-input">
Cerca nel sito
</label>

<input
class="wp-compact-search__input"
id="wp-compact-search-input"
type="search"
name="s"
placeholder="Cerca..."
autocomplete="off"
>

<button class="wp-compact-search__button" type="submit">
Cerca
</button>
</form>

L’attributo role="search" identifica il modulo come area di ricerca per le tecnologie assistive. L’etichetta viene nascosta visivamente tramite CSS, ma resta disponibile agli screen reader. Il tipo search offre inoltre controlli più adatti alla ricerca su alcuni dispositivi mobili.

Il parametro name="s" è indispensabile: WordPress utilizza proprio s per interpretare il testo cercato. Non sostituirlo con nomi come query, keyword o search, perché il tema o il motore di WordPress potrebbero non riconoscere correttamente la richiesta.

Come rendere compatta la barra con il CSS

Passo 3: aggiungere le regole di stile

Il CSS può essere inserito in Aspetto > Personalizza > CSS aggiuntivo nei temi classici. Nei temi a blocchi, la disponibilità del CSS aggiuntivo dipende dal tema e dalla configurazione di WordPress; quando l’opzione è presente, si trova nell’Editor del sito nell’area degli stili.

Incolla questo codice:

.wp-compact-search {
display: flex;
align-items: center;
width: min(100%, 320px);
margin: 0;
padding: 0.2rem;
gap: 0.25rem;
border: 1px solid #d7dbe0;
border-radius: 999px;
background: #ffffff;
box-sizing: border-box;
}

.wp-compact-search__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.wp-compact-search__input {
min-width: 0;
flex: 1 1 auto;
border: 0;
outline: 0;
padding: 0.55rem 0.7rem;
color: #222222;
background: transparent;
font: inherit;
}

.wp-compact-search__input::placeholder {
color: #6b7280;
}

.wp-compact-search__input:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: -2px;
border-radius: 999px;
}

.wp-compact-search__button {
flex: 0 0 auto;
border: 0;
border-radius: 999px;
padding: 0.55rem 0.85rem;
color: #ffffff;
background: #1d4ed8;
cursor: pointer;
font: inherit;
line-height: 1;
}

.wp-compact-search__button:hover {
background: #1e40af;
}

.wp-compact-search__button:focus-visible {
outline: 2px solid #111827;
outline-offset: 2px;
}

@media (max-width: 600px) {
.wp-compact-search {
width: 100%;
}
}

La proprietà width: min(100%, 320px) limita la larghezza a 320 pixel senza lasciare uscire il modulo dal contenitore. La regola flex: 1 1 auto permette al campo di occupare lo spazio disponibile, mentre il pulsante mantiene una dimensione leggibile.

Il bordo arrotondato crea una barra compatta adatta agli header moderni. Per adattare il design al tema puoi modificare i colori #1d4ed8, #1e40af e #d7dbe0, oltre al valore massimo di larghezza.

Passo 4: controllare il comportamento su smartphone

La media query applicata sotto i 600 pixel imposta la larghezza al 100% del contenitore. In questo modo la barra ricerca WordPress HTML CSS non viene compressa in uno spazio troppo stretto quando l’intestazione passa alla visualizzazione mobile.

Se il tema include già un menu hamburger o un logo molto largo, inserisci il modulo in una riga separata dell’header. Ridurre eccessivamente il campo può peggiorare la digitazione e rendere il pulsante difficile da usare con il touchscreen.

Verificare ricerca, accessibilità e conflitti del tema

Dopo aver pubblicato le modifiche, cerca una parola realmente presente in un articolo. Il modulo dovrebbe aprire una pagina con un indirizzo contenente il parametro ?s= e mostrare i risultati prodotti dal tema WordPress.

Controlla anche che:

  • Il pulsante abbia un contrasto sufficiente rispetto allo sfondo.
  • Il campo mostri un contorno evidente quando riceve il focus da tastiera.
  • Il testo del pulsante rimanga leggibile anche su schermi piccoli.
  • Il modulo non venga coperto dal menu o dal logo dell’intestazione.
  • La pagina dei risultati utilizzi il template di ricerca previsto dal tema.

Se il modulo appare senza bordi o con colori diversi, il tema potrebbe applicare regole CSS più specifiche. In quel caso è preferibile aumentare la specificità del selettore, per esempio usando .site-header .wp-compact-search, invece di aggiungere subito !important.

Se WordPress è installato in una sottocartella, l’azione action="/" potrebbe puntare alla posizione sbagliata. In questa situazione è più sicuro inserire il modulo in un template PHP e generare l’URL con home_url('/'), oppure verificare l’indirizzo pubblico del sito prima di pubblicare il codice HTML.

La barra ricerca WordPress HTML CSS è pronta quando invia il parametro s, resta leggibile su mobile e mantiene un focus visibile da tastiera.

Potrebbe interessarti anche:

FAQ

Sì. Il modulo usa HTML e CSS, mentre WordPress gestisce nativamente le ricerche tramite il parametro s.

Verifica che l’input contenga name="s" e che action="/" punti alla home corretta del sito WordPress.

Sì. Modifica il valore 320px nella proprietà width: min(100%, 320px).

Il codice include un’etichetta per gli screen reader, un pulsante testuale e uno stile :focus-visible per la navigazione da tastiera.

Sì, ma l’icona deve avere un’etichetta accessibile, ad esempio con aria-label="Cerca nel sito" e un testo alternativo comprensibile.

Altri articoli di questa serie:

PDF Strumenti PDF gratis Nel browser, senza upload Apri gli strumenti