Artikel mit ‘Wordpress’ getagged

Samstag, 28. März 2009

WordPress mit mehreren Sidebars versehen

Wie Ihr unschwer erkennen könnt, hat sich das Design meines Blogs etwas verändert. Ich habe eine weitere Sidebar für die Widgets eingebaut, da mir die einzelne Sidebar zu lang geworden ist. Nur wie habe ich das gemacht?

Zu allererst habe ich in der functions.php meines Themes folgende Zeile eingefügt:

1
register_sidebars(2);

Die “2″ in der Klammer steht für die Anzahl der Sidebars. Dann habe ich die alte sidebar.php gelöscht und zwei neue erstellt, die sidebar-1.php und die sidebar-2.php. Die sidebar-1.php enthält folgenden Code:

1
2
3
4
5
6
<div id="sidebar-1">
    <ul>
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>        
        <?php endif; ?>
    </ul>
</div>

Und die sidebar-2.php diesen:

1
2
3
4
5
6
<div id="sidebar-2">
    <ul>
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
        <?php endif; ?>
    </ul>
</div>

Nun kann man die Sidebars mit diesem Code z.B. in der index.php einfügen:

1
get_sidebar('1');

Die ’1′ steht für das, was nach dem Strich im Namen in der jeweiligen Sidebar Datei kommt.

Tags: ,
Veröffentlicht in PHP, Webentwicklung | 1 Kommentar »

Donnerstag, 19. März 2009

Update: Mac OS X ähnliche Suche in WordPress

Ich musste mit Erschrecken feststellen, dass das CSS für die Mac OS X ähnliche Suche in WordPress nicht mit dem Internet Explorer funktioniert. Hier nun das veränderte CSS, welches mit allen Browsern laufen sollte:

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
#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;
    float:left;
}
#searchform .right{
    background: transparent url(images/search_right.png) no-repeat;
    height: 19px;
    width: 10px;
    display: block;
    float:left;
}
#searchform input{
    width: 100px;
    border:0;
    float:left;
    height: 19px;
    font-size: 11px;
    padding-top:2px;
    background: transparent url(images/search_repeat.png) repeat-x center top;
}
#searchform input:focus{
    border: 0;
    outline: none;
}

Tags: ,
Veröffentlicht in Webentwicklung, Wordpress | 1 Kommentar »

Samstag, 14. März 2009

Mac OS X ähnliche Suche in WordPress

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: ,
Veröffentlicht in Webentwicklung, Wordpress | 1 Kommentar »

Freitag, 6. März 2009

Wie auf seine Profile in Social Networks linken?

Um mein Blog persönlicher zu gestalten, wollte ich im Menü ähnlich wie in diesem Smashing Magazine Artikel unter Punkt 9 auf meine Profile in Social Networks verlinken. Als Erstes habe ich deshalb nach passenden WordPress Plugins gesucht, leider waren die gefundenen Plugins wie zum Beispiel das Follow Me Plugin nicht meinen Ansprüchen genügend: Entweder haben Social Networks gefehlt oder die Links waren nicht vernünftig style- oder beschriftbar.

Deshalb habe ich eine eigene Lösung gebastelt, wie Ihr am rechten Rand unter dem Punkt “Folgt Mir” sehen könnt. Dieses Menü besteht aus einem Text Widget für die Sidebar mit folgendem HTML Code:

1
2
3
4
5
6
7
8
9
10
11
<ul>
<li>
<a class="favicon_facebook" href="http://www.facebook.com/people/Benjamin-Votterle/1650903485">Facebook</a>
</li><li>
<a class="favicon_lastfm" href="http://www.lastfm.de/user/voetzi">Last.FM</a>
</li><li>
<a class="favicon_twitter" href="http://twitter.com/voetzi">Twitter</a>
</li><li>
<a class="favicon_xing" href="http://www.xing.com/profile/Benjamin_Voetterle">Xing</a>
</li>
</ul>

Und ich habe die CSS Datei meines Themes um diese Zeilen ergänzt:

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
#sidebar .textwidget ul li {
    background: transparent none 0 0;
    padding-left: 0px;
    margin: 4px 0;
    height:20px;
}
#sidebar .textwidget ul li a {
    padding: 1px 0 2px 25px;
        background-repeat: no-repeat;
        background-position:0 0;
}

/*Social Network Definitionen*/
#sidebar .textwidget ul li a.favicon_twitter {
    background-image: url(images/favicon-twitter.png);    
}
#sidebar .textwidget ul li a.favicon_xing {
    background-image: url(images/favicon-xing.png);
}
#sidebar .textwidget ul li a.favicon_facebook {
    background-image: url(images/favicon-facebook.png);
}
#sidebar .textwidget ul li a.favicon_lastfm {
    background-image: url(images/favicon-lastfm.png);
}

Schließlich habe ich noch die verwendeten Favicons in das images Verzeichnis meines Themes kopiert.

Ich bin der Meinung, dass dieser Weg eine einfache und schnell erweiterbare Lösung darstellt. Wenn es bis nach meinen Prüfungen noch kein passendes Plugin gibt, werde ich eines für diesen Anwendungsfall bauen. Bis dahin viel Spaß mit meiner Lösung. :mrgreen:

Tags: , ,
Veröffentlicht in Webentwicklung, Wordpress | Keine Kommentare »

Mittwoch, 18. Februar 2009

Google Analyticator und WP Super Cache

Setzt man die beiden WordPress Plugins Google Analyticator und WP Super Cache ein, so bleibt folgendes zu beachten: Schaltet man beim Google Analyticator das Admin-Logging ab und klickt danach wild durch den Blog (generiert also Cache Files), so enthalten die gecachten Seiten den Javascript Code für Google Analytics nicht. Das hat zur Folge, dass solange die Seiten gecached sind keine Besuche gezählt werden.

Leider ist mir hierzu noch keine praktikable Lösung eingefallen. Ideen dazu sind gerne willkommen.

Tags: ,
Veröffentlicht in Wordpress | Keine Kommentare »

«12345»