Wordpress

Vyhledávání – zadání přes menu a celostránkový overlay

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ě.
Přidat ikonku hledání do menu
//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;
}

Definice vzhledu a chování Overlay
//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> 

Stylování
//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

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *