Ibland vill man visa en ikon istället för en submitknapp vid sökfältet i ditt WordPress-tema. Förr kunde man till exempel dölja texten och sätta ett förstoringsglas eller liknande som bakgrundsbild på Submit. Men nu vill vi vara moderna och försöka lösa det med en ikon istället. Det gör ju så att vi enkelt kan justera storlek (med font-size), färg (med color) och så vidare – precis som med vanlig text. Och så får man fördelarna med retina och allt det där.
I exemplet nedan så använder vi oss av en Font Awesome-ikon och HTML5-modellen för hur man skriver WordPress-söken i searchform.php – som du lägger i ditt tema. Notera att du skriver till support för detta genom nedeanstående i functions.php:
// Switches default core markup for search form to output valid HTML5
add_theme_support( 'html5', 'search-form' );
Sedan jobbar vi efter Micke Claessons leetz0rerade sätt att skriva jQuery. Vi startar alla funktioner i main.js och funktionerna i sig lägger vi i plugins.js. Det skulle kunna se ut så här:
searchform.php
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>"> <label> <span class="screen-reader-text">Sök på:</span> <input type="search" class="search-field" placeholder="Sök…" value="" name="s" title="Sök på:" /> </label> <input type="submit" class="search-submit" value="Search" /> <i class="fa fa-search search-submit"></i> </form>
style.css
.search-submit {
display: none;
}
main.js
(function($) {
$(function() {
// Trigger search click
$('body').searchClick();
});
})(jQuery);
plugins.js
(function($) {
$.fn.searchClick = function() {
init();
function init() {
$('i.search-submit').click(function() {
$(this).prev().trigger('click');
});
}
}
})(jQuery);