Vyhledávání na původní šabloně “Sydney” je řešeno dialogen v postranním sloupci. Pokud ale máte stránky bez tohoto sloupce, pak by vyhledávání chybělo.
Přidal jsem proto hledání přes celostránkový overlay, který se spouští přes ikonku v menu.
- Menu jsem rozšířil o ikonku s odkazem pomocí funkce v Functions.php.
- Vlastní overlay a funce otvírání a zavírání jsem vložil do footer.php.
- Upraveno bylo také stylování.
- Všechny změny byly provedeny na Child šabloně.
//toto stačí vložit do functions.php
add_filter('wp_nav_menu_items', 'search_box_function', 10, 2);
function search_box_function( $nav, $args ) {
if( $args->theme_location == 'primary' )
return $nav."<li style=\"color: #ddd; cursor: pointer;\" onclick=\"openSearch()\"><span class=\"menu-item-s\"><i class=\"fa fa-search\" aria-hidden=\"true\"></i></span></li>";
return $nav;
}
//toto vložte do footer.php
<script>
// Open the full screen search box
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
// Close the full screen search box
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
jQuery(document).keyup( function( event ) {
if (event.keyCode == 27) {
//alert("Hello! I am an alert box!!");
document.getElementById("myOverlay").style.display = "none";
}
});
</script>
<div id="myOverlay" class="s-overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="s-overlay-content">
<form action="">
<span class="input-group-btn row">
<input class="col-md-10 col-xs-10" type="text" placeholder="Hledat…" name="s">
<button class="col-md-2 col-xs-2" type="submit"><i class="fa fa-search"></i></button>
</span>
</form>
</div>
</div>
//toto přidejte do style.css
/* The s-overlay effect with black background */.menu-item-s {
padding-left: 5px;
}
.menu-item-s:hover {
color:#d65050;
}
#mainnav-mobi .menu-item-s {
display: block;
text-decoration: none;
padding: 10px 50px;
color: #fff;
}
.s-overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: 0.9;
z-index: 9999;
}
/* The content */.s-overlay-content {
position: relative;
top: 46%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
/* Close button */.s-overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: white;
}
.s-overlay .closebtn:hover {
color: #ccc;
}
/* Style the search field */.s-overlay input[type=text] {
height: 50px;
font-size: 17px;
border: none;
float: left;
background: #fff;
color: #555;
}
.s-overlay input[type=text]:hover {
background: #f1f1f1;
}
/* Style the submit button */.s-overlay button {
height: 50px;
float: left;
background: #ccc;
font-size: 17px;
border: none;
cursor: pointer;
}
.s-overlay button:hover {
background: #999;
}
.s-overlay button {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
Celá funkčnost je vidět na těchto stránkách. Podobně lze upravit samozřejmě i jiné šablony