Modulo di Ricerca Modale
Modulo Modulo di Ricerca non richiede SearchWP ma lo utilizzerà se disponibile
L'estensione Modulo Modulo di Ricerca ti consente di visualizzare un modulo di ricerca in una finestra modale (popup) attivata da un pulsante o un'icona sul tuo sito. Questo offre un'esperienza di ricerca elegante e priva di distrazioni per gli utenti.
Progettato per integrarsi con qualsiasi tema e qualsiasi configurazione di SearchWP, Modulo Modulo è il modo più semplice per aggiungere un modulo di ricerca dall'aspetto accattivante al tuo sito.
Modulo Modulo di Ricerca non richiede SearchWP, quindi è disponibile su wordpress.org e funzionerà con qualsiasi sito WordPress. Se hai SearchWP installato e attivato, Modulo Modulo lo utilizzerà automaticamente. In caso contrario, verranno forniti i risultati di ricerca nativi di WordPress.
Quando l'estensione è attiva, puoi accedere alle impostazioni di Modulo Modulo nella scheda Moduli di Ricerca > Modulo Modulo.
1. Abilita Modulo Modulo
Un interruttore per abilitare o disabilitare la funzionalità del modulo modale di SearchWP sul tuo sito web.
2. Modulo di Ricerca
Questa opzione ti consente di scegliere quale modulo di ricerca visualizzare all'interno del popup modale. Puoi selezionare un Modulo SearchWP personalizzato dall'elenco a discesa da visualizzare nel popup. Se non viene selezionato alcun modulo personalizzato, verrà utilizzato il modulo di ricerca predefinito di WordPress.
Nota: Se scegli un motore personalizzato nel tuo shortcode modale o elemento del menu, questo sovrascriverà il motore selezionato nelle impostazioni del Modulo di Ricerca.
3. Includi Stile
Il modulo modale carica determinati CSS per includere stili personalizzati per il caricamento del popup. Scegliendo l'opzione appropriata, puoi caricare stili di posizionamento o visivi per il popup. Si noti che se si sceglie l'opzione Nessuno Stile, non verranno caricati CSS del modulo modale. Sarà necessario applicare il proprio stile. Questa opzione è consigliata solo per utenti esperti.
4. Modalità Schermo Intero
Per impostazione predefinita, il popup modale viene caricato in un contenitore di larghezza fissa. Quando la modalità a schermo intero è abilitata, il modulo modale si espande per occupare l'intera larghezza e altezza dello schermo.
5. Disabilita Scorrimento Sfondo
Abilitando questa opzione si disabilita la funzionalità di scorrimento in background quando il popup modale è aperto. Ciò aiuta a impedire agli utenti di interagire con il contenuto della pagina dietro il modale.
Cosa lo rende diverso?
La filosofia alla base di Modulo Modulo di Ricerca è rendere facile l'implementazione di moduli di ricerca modali accessibili e leggeri, ma forse ancora più importante, renderla un'ottima esperienza per sviluppatori (e utenti).
Modulo Modulo di Ricerca si integra direttamente con WordPress nel modo in cui lo utilizzi, e il tema predefinito del modulo modale si basa sugli stili messi in atto dal tuo tema attivo, rendendo l'overhead il più piccolo possibile. È inoltre integrato un caricatore di template completo, che ti consente di personalizzare completamente il tuo Modulo Modulo di Ricerca con il minimo sforzo.
Dai un'occhiata al template predefinito per un esempio di quanto sia facile personalizzarlo.
Utilizzo
SearchWP Modal Search Form semplifica l'implementazione di moduli di ricerca modali ovunque nel tuo sito WordPress. Per implementare un modale, hai bisogno sia di (1) un trigger che (2) del modale stesso.
Con questo plugin, l'implementazione di entrambi gli elementi è estremamente semplice! I seguenti metodi sono integrati e disponibili per te:
- Come Elemento del Menu
- Utilizzando uno Shortcode
- Come Blocco Gutenberg
- All'interno dei tuoi template programmaticamente (codice)
Puoi aggiungere qualsiasi numero di moduli di ricerca al tuo sito, ognuno utilizzando il proprio template e le proprie opzioni di configurazione (ad es. motore SearchWP).
Moduli di ricerca come elementi del menu
Aggiungere un modulo di ricerca alla navigazione principale del tuo sito è un'ottima idea, e SearchWP Modal Search Form lo rende facile da aggiungere in un attimo.
Il plugin aggiunge un nuovo gruppo disponibile quando modifichi i tuoi Menu esistenti. Se hai creato un template modale personalizzato nel tuo tema, verrà visualizzato sotto questo gruppo.
Una volta aggiunto, puoi trattare gli Elementi del Menu di SearchWP Modal Search Form come qualsiasi altro Elemento del Menu, incluse le personalizzazioni aggiuntive che potresti voler implementare.
Nelle impostazioni del menu, hai l'opzione di visualizzare un etichetta o un icona per attivare il modulo modale.
Moduli di ricerca come shortcode
Se preferisci, puoi utilizzare uno Shortcode per generare un trigger per il modulo modale che, quando cliccato, visualizzerà il tuo modulo di ricerca modale.
[searchwp_modal_search_form]
Puoi applicare personalizzazioni aggiuntive che controllano vari attributi del trigger e del modale stesso, ad esempio:
[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="Apri Ricerca" type="button"]
Che viene reso così:
Gli attributi Shortcode disponibili sono i seguenti:
engine Il nome del motore SearchWP da utilizzare (si applica solo se SearchWP è attivo)
template Il nome del template modale, si prega di consultare la documentazione dei template
text Controlla il testo del trigger
type Definisce il tipo di trigger, che può essere un link <a/> o un <button/>
Utilizzando questi attributi puoi personalizzare completamente sia il trigger che il template modale in uso.
Moduli di ricerca come blocco Gutenberg
SearchWP Modal Search Form ti offre la possibilità di inserire un modulo di ricerca modale utilizzando un blocco Gutenberg, se lo desideri:
Utilizzando il pannello Proprietà del Blocco puoi personalizzare vari attributi del blocco, tra cui:
Testo Controlla il testo del trigger
Motore Il nome del motore SearchWP da utilizzare (si applica solo se SearchWP è attivo)
Modello Il nome del modello modale, si prega di consultare la documentazione dei modelli
Tipo Definisce il tipo di trigger, che può essere un link <a/> o un <button/>
La modifica di una qualsiasi delle Proprietà del Blocco ti permetterà di vedere come apparirà il trigger in tempo reale.
Modale del modulo di ricerca programmatico
Hai la possibilità di inserire direttamente un Modulo Modale SearchWP nei tuoi template del tema ovunque desideri, utilizzando la seguente sintassi:
Ci sono una serie di argomenti che possono essere passati come array quando si chiama searchwp_modal_form_trigger():
Puoi implementare qualsiasi numero di Moduli di Ricerca Modale SearchWP in tutto il tuo sito, ognuno con i propri argomenti di configurazione (o condividendo gli stessi!)
Personalizzazione e creazione di modelli modali
SearchWP Modal Search Form viene fornito con un caricatore di modelli, che ti consente di personalizzare (e creare) facilmente i modelli disponibili. I modelli di modulo modale SearchWP comprendono il contenuto e lo stile del modale stesso, non il trigger.
I trigger di SearchWP Modal Search Form ereditano gli stili dal tuo tema attivo e possono essere personalizzati aggiungendo qualsiasi CSS personalizzato desideri.
Importante: Quando personalizzi o crei modelli di modulo modale SearchWP, dovresti creare una cartella all'interno del tuo tema (Child) intitolata searchwp-modal-form che conterrà tutti i tuoi modelli personalizzati che non verranno sovrascritti quando il plugin verrà aggiornato.
I modelli di modulo di ricerca modale SearchWP sono basati su file e vengono raccolti controllando le seguenti directory:
~/wp-content/plugins/searchwp-modal-form/templates/*.php(non modificarli, verranno sovrascritti nei successivi aggiornamenti del plugin!)~/wp-content/themes/il-tuo-child-theme/searchwp-modal-form/*.php(se applicabile)~/wp-content/themes/il-tuo-tema/searchwp-modal-form/*.php
Affinché un modello di modulo modale SearchWP venga incluso, deve avere il seguente blocco di commento nell'intestazione:
/**
* SearchWP Modal Form Name: My Custom Template
*/
Questo definisce il nome del modello modale, che viene utilizzato quando si definisce il modello da utilizzare durante l'inserimento di un trigger di modulo modale. Si suggerisce che qualsiasi modello personalizzato che crei abbia un nome univoco, in modo da essere facilmente identificabile.
Dovresti usare il modello predefinito come punto di partenza quando personalizzi o crei modelli modali. È completamente documentato per tua consultazione.
Hook
I seguenti hook sono stati resi disponibili per personalizzare il comportamento di SearchWP Modal Form:
searchwp_modal_form_template_dir Personalizza il nome della cartella utilizzata per archiviare i tuoi modelli personalizzati (il predefinito è searchwp-modal-form)
| <?php | |
| add_filter( 'searchwp_modal_form_template_dir', function( $dir ) { | |
| return 'my-searchwp-modal-forms'; | |
| } ); |
Note per sviluppatori
Esiste un processo di build per tutti i bundle JavaScript contenuti in un singolo comando:
npm run watch
Questo eseguirà quattro processi concorrenti che monitorano le modifiche ai file e generano successivamente:
- Versione di produzione del bundle SearchWP Modal Search Form
- Versione di sviluppo del bundle SearchWP Modal Search Form
- Versione di produzione del blocco SearchWP Modal Search Form
- Versione di sviluppo del blocco SearchWP Modal Search Form
Puoi eseguire ogni processo individualmente se preferisci:
