WordPress-də axtarış keçid effektini necə əlavə etmək olar

Bir çox məşhur saytlarda keçid axtarış simvolunu gördünüzmü? Bir nümunə görmək üçün bacı layihəmiz List25-ə nəzər yetirin. Fikir sadə bir axtarış simgesini göstərməkdir və istifadəçi üzərinə tıkladıqda, keçid effekti kimi tanınan axtarış formaları sürüşür. Səliqəli effektdir, həm də məkanı qənaət edir və istifadəçilərə məzmuna diqqət yetirməyə imkan verir. Söz yox, bu mobil cihazlara cavab verən mövzular üçün idealdır. Bu yazıda, WordPress mövzularında bir axtarış keçid effektini necə əlavə edəcəyinizi göstərəcəyik.

Fəaliyyətdə keçid effektinə baxın

Qeyd: Bu dərslik WordPress, HTML və CSS şablon etiketlərinin praktik bilikləri olan ara istifadəçilər üçündür. Başlanğıc səviyyəsinin istifadəçiləri əvvəlcə yerli serverdə təcrübə keçməyə dəvət olunur.

WordPress axtarış formasını göstərin

WordPress bir tema daxilində müxtəlif şablon yazıları tərəfindən yaradılan HTML-yə standart CSS dərsləri əlavə edir. Axtarış formasını göstərmək üçün WordPress tema etiketi şablonundan istifadə edin. İki fərqli axtarış formaları yarada bilərsiniz, biri HTML4 mövzuları üçün, biri də HTML5 dəstəkləyən mövzular üçün. Mövzunuzda funksiyalar.php faylında add_theme_support ('html5', array ('search-form')) xətti varsa, bu şablon etiketi HTML5 axtarış forması yaradacaqdır. Əks təqdirdə, HTML4 axtarış formasını yaradacaqdır.

Mövzunuzun hansı formada meydana gəldiyini tapmaq üçün başqa bir yol, axtarış formasının mənbəyinə baxmaqdır.

Bu tema HTML5 dəstəyi olmadıqda görünəcək get_search_form () forma şablon etiketidir:

  

Y esta es la forma que generará para un tema con soporte HTML5.

  

Por el bien de este tutorial, utilizaremos el formulario de búsqueda HTML5. Si su tema genera un formulario de búsqueda HTML4, agregue esta línea de código en el archivo functions.php de su tema:

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

Axtarış formasının HTML5 forması yaratdığına əmin olduqdan sonra növbəti addım keçid effekti ilə göstərmək istədiyiniz yerə axtarış formasını yerləşdirməkdir.

WordPress axtarış formasına keçid effekti əlavə edin

Lazım olan ilk şey bir axtarış simgesidir. WordPress-də standart iyirmi on üç mövzu çox gözəl kiçik bir simge ilə gəlir və biz bunu dərsliyimizdə istifadə edəcəyik. Lakin, Photoshop-da özünüzü yaratmaq və ya İnternetdən birini yükləmək üçün çekinmeyin. Faylın search-icon.png adını verdiyinə əmin olun.

İndi bu axtarış simgesini temanın şəkillər qovluğuna yükləməlisiniz. Filezilla kimi bir FTP müştəri istifadə edərək veb saytınıza qoşulun və mövzu qovluğunuzu açın.

İndi bu son və ən vacib addımdır. Bu CSS-ni mövzu tərz cədvəlinə əlavə etməlisiniz:

 .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;
 }
 
 

Bu CSS haqqında yadda saxlamağımız vacib olan, keçid effektini asanlıqla yaratmağa imkan verən CSS3 keçid effektləridir. Ayrıca, mövzu dizaynına görə axtarış simvolu və şəklinin mövqeyini tənzimləməli olduğunuzu unutmayın.

Ümid edirik ki, bu məqalə WordPress mövzusuna bir axtarış keçid effekti əlavə etməyə kömək etdi. Keçid axtarış forması haqqında nə düşünürsünüz? Bu effektdən istifadə edən saytları getdikcə daha çox görürük. Şərhlərinizi və suallarınızı aşağıdakı şərhlərdə buraxın və ya Google+dakı söhbətə qoşulun.