Neler yeni

Hoşgeldin Ziyaretçi

Kayıt olarak forumumuzdan dosya indirebilir,bilgi sahibi olabilir,daha iyi bir şekilde yararlanabilirsin.

Şimdi kayıt ol

WordPress'te Arama Geçiş Özelleştirme Nasıl Yapılır?

wordpresstr

W
Administrator
125
13 Kas 2020
WordPress Arama Formunu Görüntüleme

WordPress, bir tema içindeki çeşitli şablon etiketleri tarafından oluşturulan HTML'ye varsayılan CSS sınıfları ekler . WordPress temaları, <?php get_search_form(); ?> arama formunu görüntülemek için şablon etiketi kullanır. Biri HTML4 temaları ve diğeri HTML5 destekli temalar için olmak üzere iki farklı arama formu çıktı verebilir. Temanızın add_theme_support('html5', array('search-form'))functions.php dosyasında satır varsa, bu şablon etiketi bir HTML5 arama formu çıkaracaktır. Aksi takdirde, HTML4 arama formu çıkaracaktır.
Temanızın hangi formu oluşturduğunu bulmanın başka bir yolu, arama formu kaynak koduna bakmaktır.
Bu, temanız HTML5 desteğine sahip olmadığında get_search_form () şablon etiketinin görüntüleneceği biçimidir:

1
2
3
4
5
6		<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>

Ve bu, HTML5 destekli bir tema için oluşturacağı formdur.

1
2
3
4
5
6
7		<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>

Bu eğiticinin iyiliği için HTML5 arama formunu kullanacağız. Temanız HTML4 arama formu oluşturuyorsa, bu kod satırını temanızın functions.php dosyasına ekleyin:

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

Arama formunuzun HTML5 formu oluşturduğundan emin olduktan sonra, sonraki adım, arama formunu geçiş efektiyle görüntülemek istediğiniz yere yerleştirmektir.
WordPress Arama Formuna Geçiş Efekti Ekleme
İhtiyacınız olan ilk şey bir arama simgesidir. WordPress'teki varsayılan Yirmi Onüç teması çok hoş bir küçük simgeyle birlikte gelir ve bunu eğitimimizde kullanacağız. Ancak, Photoshop'ta kendinizinkini oluşturmaktan veya web'den bir tane indirmekten çekinmeyin. Dosyanın search-icon.png olarak adlandırıldığından emin olun.
Şimdi bu arama simgesini temanızın görseller klasörüne yüklemeniz gerekiyor. Filezilla gibi bir FTP istemcisi kullanarak web sitenize bağlanın ve tema dizininizi açın.
Şimdi bu son ve en önemli adımdır. Bu CSS'yi temanızın stil sayfasına eklemeniz gerekir:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34		.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 ile ilgili dikkat edilmesi gereken önemli nokta, geçiş efektini kolaylıkla oluşturmamızı sağlayan CSS3 geçiş efektleridir. Ayrıca, arama simgesinin ve formunun konumunu temanızın düzenine göre ayarlamanız gerekeceğini unutmayın.
 
Cevap yazmak için giriş yap yada kayıt ol.
Üst