SearchWP Modal Search Form

Beschrijving

Gebruik SearchWP Modal Search Form om eenvoudig een toegankelijk, lichtgewicht modal zoekformulier in je WordPress site te integreren! SearchWP Modal Search Form vereist SearchWP niet maar het zal SearchWP gebruiken als het is geïnstalleerd en geactiveerd! 👍

Naast de informatie die in dit README is beschikbaar gesteld, is er ook volledige documentatie beschikbaar.

Wat maakt het anders dan andere modals?

De filosofie achter SearchWP Modal Search Form is om het gemakkelijk te maken toegankelijke en lichte modal zoekformulieren te implementeren, maar misschien nog belangrijker om het een geweldige ontwikkelaar (en gebruiker) ervaring te maken.

SearchWP Modal Search Form integreert direct met WordPress op de manier zoals je het gebruikt, en het standaard modale formulierthema bouwt voort op de stijlen die door je actieve thema zijn ingesteld, waardoor de overhead zo klein mogelijk is. Er is ook een volledige template lader ingebouwd, waardoor je je SearchWP Modal Search Form met minimale moeite volledig kunt aanpassen.

Bekijk de standaard template voor een voorbeeld van hoe gemakkelijk het is om aan te passen 🤓

Modal formulieren toevoegen aan je site

SearchWP Modal Search Form maakt het gemakkelijk om modal zoekformulieren overal in je WordPress site te implementeren. De volgende methoden zijn ingebouwd en beschikbaar voor je:

1. Als een menu-item
2. Met een shortcode
3. Als een Gutenberg blok
4. Binnen je templates programmeerbaar

Template aanpassing

SearchWP Modal Search Form integreert een juiste template loader voor het weergeven van zoekformulieren in een aantal templates, waardoor je volledig kunt aanpassen hoe de modal eruitziet per template.

De meest eenvoudige manier om een aangepaste template te maken is als volgt:

1. Maak een map genaamd searchwp-modal-form binnen je thema
2. Maak een bestand binnen die map genaamd template.php (of een andere naam eindigend op .php)
3. Kopieer de inhoud van de standaard template in dat bestand
4. Pas de SearchWP Modal Form Name waarde aan in het header reactie blok
5. Breng alle andere aanpassingen die je wil aan, aan de mark-up/stijl en let gelijktijdig op de documentatie

Er zijn (jQuery) gebeurtenissen die plaatsvinden wanneer modals worden geopend en gesloten. jQuery is geen vereiste, maar als jQuery is geladen, zullen de gebeurtenissen plaatsvinden.

// Add a callback when a modal is opened:
jQuery('body').on('searchwpModalOnShow', function(e) {
    // Focus an input in the template.
    e.el.find('input').focus();
});

// Add a callback when a modal is closed:
jQuery('body').on('searchwpModalOnClose', function(e) {
    alert('Modal closed!');
});

Bekijk de volledige template documentatie voor meer gedetailleerde informatie.