Teemad

• Uue otsingukasti lisamine
• Otsingukasti vormindamine
• Otsingukasti nupu loomine ja aktiveerimine

Uue otsingukasti lisamine

Põhimõtteliselt võid otsingukasti lisada kuhu iganes, kasutades funktsiooni get_search_form(). Meie lisame selle faili header.php päise lõppu ja eraldi div-konteinerisse, kohe pärast menüüd.

...
		</nav><!-- #site-navigation -->
		<div id="search-container" class="search-box-wrapper clear">
                <div class="search-box clear">
                    <?php get_search_form(); ?>
                </div>
            </div><!-- #search-conteiner -->
	</header><!-- #masthead -->

Teise otsingukasti võime administratori paneelil eemaldada (Välimus>Moodulid).

Otsingukasti vormindamine

Lisame kujunduse faili uue pealkirja ning järgmise kujunduse. Kõigepealt loome otsingukastile reegli (box-sizing: border-box), mis ei muuda selle suurust, kui lisame polstri. Seejärel toome otsingukasti kõige pealmiseks (z-index), et miski ei tuleks selle peale. Edasi muudame otsingukasti ümbritseva tausta värvi, lisame polstri, muudame teksti suuruse ja eemaldame nupu.

/*--------------------------------------------------------------
13.0 Search
--------------------------------------------------------------*/

input[type="search"] {
    box-sizing: border-box;
    width: 100%;
}

.search-box-wrapper {
    z-index: 2;
    width: 100%;
}

.search-box {
    padding: 10px;
    background: #4d4d4d;
}

.search-box .search-field {
    max-width: 300px;
    padding: 1rem 2rem 1rem 4rem;
    float: right;
    padding: 1rem;
    font-size: 16px;
    background-color: #fff;
    border: 0;
}

.error404 .search-submit,
.search .search-submit,
.search-box .search-submit { 
    display: none; 
}

Otsingukasti nupu loomine ja aktiveerimine

Loome sotsiaalmeedia ikoonide juurde veel ühe nupu, millele klikkides saame otsingukasti peita või kuvada.

		<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle"><?php _e( 'Primary Menu', 'wp-kujundus' ); ?></button>
			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			
			<div class="search-toggle">
                <i class="fa fa-search"></i>
                <a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'wp-kujundus' ); ?></a>
            </div><!-- #search-toggle -->
            			<?php wp_kujundus_social_menu(); ?>
		</nav><!-- #site-navigation -->

Et nupp välja paistaks ja teiste ikoonidega sarnane oleks, siis vormindame seda style.css failis. Vormindan selle natuke natuke laiemaks. Kui tahad panna teiste ikoonidega samasuguseks, siis lisa sellele samasugune polster.

.search-toggle {
    float: right;
    padding: 20px;
    color: #fff;
    text-align: center;
    font-size: 14px;

}

.search-toggle:hover,
.search-toggle.active {
    background: #4d4d4d;
}

Edasi kasutame jQuery .slideToggle() funktsiooni. Loo ./js kataloogi uus fail search.js.

Lisame sinna faili siis selle koodi.

jQuery(document).ready(function($){
    $(".search-toggle").click(function(){
        $("#search-container").slideToggle('slow', function(){
        });
    });
});

Ega, see enne tööle ei hakka, kui me pole seda külge haakinud. Ava functions.php ja lisa sinna järgmine rida. Samasse kohta, kus linkisime eelmised failid.

wp_enqueue_script( 'wp-kujundus-search', get_template_directory_uri() . '/js/search.js', array('jquery'), '20141111', true );

Nüüd kui nupul klikkida, siis see peidab ja kuvab otsingukasti. Kui me täiendame css koodi juba lisatud avaldist ühe lausega, siis saame otsingukasti vaikimisi peita.

.search-box-wrapper {
    z-index: 2;
    width: 100%;
    display: none;
}

Väiksemate ekraanide jaoks peame lisame meediapäringu, kuna see ikoon tahab jääda eraldi reale.

@media screen and (max-width: 600px) {
    .search-toggle {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 0;
        padding: 13.5px;
    }
}

Kui otsingukasti midagi sisestada, siis on tulemused väga vormist väljas. Aga sellest edaspidi. Järgmisena teeme jaluse korda.