Samstag, 14. März 2009
Wie Ihr sehen könnt, habe ich mein Blog um eine Suchfunktion erweitert. Ich wollte dass die Suche vom Aussehen her, der von Mac OS X Programmen wie z.B. Safari ähnelt. Dies zu erreichen ist gar nicht so schwer. Zum Einen muss in die searchform.php im jeweiligen Template angepasst werden (zu finden im WordPress Verzeichnis unter wp_content/themes/
). Meine sieht jetzt so aus:
1
2
3
4
5
6
7
8
9
10
| <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div>
<h2 class="widgettitle">Suche </h2>
<div style="margin-top:10px; margin-left:5px;">
<span class="left"></span>
<input type="text" value="<?php the_search_query(); ?/>" name="s" id="s" />
<span class="right"></span>
</div>
</div>
</form> |
Des Weiteren müssen ans Ende der style.css Datei, welche sich im gleichen Verzeichnis befindet folgende Zeilen Code:
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
35
36
37
| #searchform {
margin: 10px auto;
padding: 5px 3px;
text-align: center;
}
#searchform .left{
background: transparent url(images/search_left.png) no-repeat;
height: 19px;
width: 20px;
display: block;
position: absolute;
}
#searchform .right{
background: transparent url(images/search_right.png) no-repeat;
height: 19px;
width: 10px;
display: block;
margin-left:118px;
margin-top:-22px;
}
#searchform input{
width: 100px;
position: relative;
margin-left: -8px;
border:0;
padding-top: 2px;
height: 19px;
font-size: 11px;
background: transparent url(images/search_repeat.png) repeat-x center top;
}
#searchform input:focus{
border: 0;
outline: none;
} |
Am Schluss müssen noch die benötigten Bilder in den images Ordner des Templates: Bilder für die Suche als ZIP Datei.
UPDATE: Das CSS funktioniert im Internet Explorer nicht sauber. Hier der Post mit dem funktionierendem CSS.
Tags: Plugin, Wordpress
Veröffentlicht in Webentwicklung, Wordpress | 1 Kommentar »
.