четвъртък, август 11

Как да добавите ефект за превключване на търсене в WordPress

0
27
Как да добавите ефект за превключване на търсене в WordPress


Виждали ли сте иконата за търсене с ефект на превключване на много популярни уебсайтове? Разгледайте нашия сестрински проект List25 за пример. Идеята е да се покаже проста икона за търсене и когато потребителят щракне върху нея, формулярите за търсене се изплъзват, известен също като ефект на превключване. Това е чист ефект, който също така спестява място и позволява на потребителите ви да се съсредоточат върху съдържанието. Да не говорим, че това е чудесно за мобилни теми. В тази статия ще ви покажем как да добавите ефект за превключване на търсене в темите на WordPress.

Забележка: Този урок е за средно напреднали потребители с работни познания за WordPress шаблонни тагове, HTML и CSS. Потребителите на ниво начинаещи се съветват първо да практикуват на локален сървър.

Показва се формуляр за търсене на WordPress

WordPress добавя CSS класове по подразбиране към HTML, генерирани от различни шаблонни тагове в тема. Използване на теми на WordPress <?php get_search_form(); ?> шаблонен маркер за показване на формуляр за търсене. Може да изведе две различни форми за търсене, една за HTML4 теми и една за теми с поддръжка на HTML5. Ако вашата тема има add_theme_support('html5', array('search-form')) ред във файла functions.php, тогава този маркер на шаблона ще изведе HTML5 формуляр за търсене. В противен случай ще изведе HTML4 формуляр за търсене.

Друг начин да разберете каква форма генерира вашата тема е да погледнете изходния код на формуляра за търсене.

Това е формата get_search_form() маркерът на шаблона, който ще се покаже, когато вашата тема не поддържа HTML5:


<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

И това е формата, която ще генерира за тема с поддръжка на HTML5.


<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
		<span class="screen-reader-text">Search for:</span>
		<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
	</label>
	<input type="submit" class="search-submit" value="Search" />
</form>

За целта на този урок ще използваме HTML5 формуляра за търсене. Ако вашата тема генерира HTML4 формуляр за търсене, добавете този ред код във файла functions.php на вашата тема:


add_theme_support('html5', array('search-form'));

След като сте се уверили, че вашият формуляр за търсене генерира HTML5 формуляр, следващата стъпка е да поставите формуляра за търсене там, където искате да го покажете с ефекта на превключване.

Добавяне на ефекта за превключване към формуляра за търсене на WordPress

Първото нещо, от което се нуждаете, е икона за търсене. Темата Twenty Thirteen по подразбиране в WordPress идва с много хубава малка икона и ние ще я използваме в нашия урок. Въпреки това, не се колебайте да създадете свой собствен във Photoshop или да изтеглите такъв от мрежата. Просто се уверете, че файлът е наречен search-icon.png.

Сега трябва да качите тази икона за търсене в папката с изображения на вашата тема. Свържете се с вашия уебсайт с помощта на FTP клиент като Filezilla и отворете директорията на вашата тема.

Сега това е последната и най-важна стъпка. Трябва да добавите този CSS към стиловата таблица на вашата тема:



.site-header .search-form {
	position: absolute;
	right: 200px;
	top: 200px;
}

.site-header .search-field {
	background-color: transparent;
	background-image: url(images/search-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 37px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width: 0;
}

.site-header .search-field:focus {
	background-color: #fff;
	border: 2px solid #c3c0ab;
	cursor: text;
	outline: 0;
	width: 230px;
}
.search-form
.search-submit { 
display:none;
}


Важното нещо, което трябва да се отбележи за този CSS, са ефектите на преход в CSS3, които ни позволяват да създадем ефекта на превключване с лекота. Също така имайте предвид, че все пак ще трябва да коригирате позиционирането на иконата за търсене и формата според оформлението на вашата тема.

Надяваме се, че тази статия ви е помогнала да добавите ефект на превключване на търсене във вашата тема на WordPress. Какво мислите за формуляра за превключване на търсене? Виждаме все повече и повече сайтове, използващи този ефект. Оставете вашите отзиви и въпроси в коментарите по-долу или се присъединете към нас в разговора в Google+.

Comments are closed.