Ressourcen-sparende Navigation in WordPress
Normalerweise baut man die Navigation in WordPress mit der Funktion wp_list_pages() (mehr auf WordPress Codex), so dass man im Backend Seiten anlegen kann und diese dynamisch im Frontend erscheinen. Dadurch ist es für Nutzer möglich, jedes beliebige Theme zu laden und trotzdem eine vollständige Navigation zu haben, ohne dass sie im Quelltext rumwerkeln müssen.
Allerdings sind damit eine Menge Abfragen verbunden, die die Ladezeit der Seite erhöhen. Baut man sich ein eigenes Theme und weiß, welche Seiten man anlegen möchte, sollte man ernsthaft darüber nachdenken, auf wp_list_pages() zu verzichten und die Navigation selbst in statischem HTML mithilfe einer ungeordneten Liste zu bauen.
Blöderweise muss man dabei auf das von wp_list_pages() zur Verfügung gestellte Navigation Highlighting verzichten. Dabei wird dem li-Tag des Navigationspunktes der Seite, auf der man sich gerade befindet, die Klasse current_page_item hinzugefügt, so dass man die Möglichkeit hat, diesen Punkt per CSS hervorzuheben.
Hier kommt jedoch die neue WordPress-Funktion body_class() ins Spiel. Diese fügt dem body-Tag u.a. den Name der aktuellen Seite als Klasse hinzu. Der HTML-Teil einer Navigation kann dann bspw. so aussehen:
PHP/HTML
<body <?php body_class() ?>>
…
<ul class="navigation">
<li class="home_nav"><a href="#">Home</a></li>
<li class="leistungen_nav"><a href="#">Leistungen</a></li>
<li class="referenzen_nav"><a href="#">Referenzen</a></li>
</ul>
…
</body>
Den Pfad zur Seite müsst ihr natürlich ins href-Attribut des a-Tags eintragen. Ansonsten trifft hier der Titel der Seite in der body-Klasse auf die Klasse des zur Seite gehörenden li-Tags. Das kann man sich zunutze machen und zwar mit folgenden CSS-Angaben:
CSS
.home li.home_nav a:link,
.home li.home_nav a:visited,
.leistungen li.leistungen_nav a:link,
.leistungen li.leistungen_nav a:visited,
.referenzen li.referenzen_nav a:link,
.referenzen li.referenzen_nav a:visited {
color: #FFF;
background-color: #369;
text-decoration: underline;
}
.home li.home_nav a:hover,
.leistungen li.leistungen_nav a:hover,
.referenzen li.referenzen_nav a:hover {
color: #FFF;
background-color: #666;
text-decoration: underline;
}
Natürlich muss man noch den Normalzustand der Navigation definieren, aber ansonsten ist das Navigation Highlighting fertig. Alles mit einer(!) dymischen Komponente — der body_class()-Funktion —, also schön schlank.
Weiterführende Links:
Fancy Login-/Logout-Button für deinen WordPress-Blog
Hier habe ich ein kleines Tutorial, wie ihr in euren WordPress-Blog einen schicken Login-/Logout-Button einbaut. Dafür nutzen wir die WordPress-eigene Funktion wp_loginout(), die Abfrage is_user_logged_in() und die Text Replacement-Technik mithilfe von CSS
Vorweg eine kleine Demo.
Und nun los:
Die Funktion wp_loginout() generiert, je nachdem, ob der User eingeloggt ist oder nicht, automatisch einen Anmelden- bzw. Abmelden-Link. Um mit der Text Replacement-Technik darauf zugreifen zu können, müssen wir jedoch dem umschließenden <p>-Tag eine Klasse abhängig vom User-Status zuweisen. Das ist der Punkt, wo die Abfrage is_user_logged_in() ins Spiel kommt.
Der Code sieht folgendermaßen aus:
PHP/HTML
<?php if ( is_user_logged_in() ) : ?>
<p class="logout">
<?php else : ?>
<p class="login">
<?php endif; wp_loginout(); ?>
</p>
Ist der User angemeldet, bekommt das <p>-Tag die Klasse "logout" und der Logout-Button wird angezeigt, ist der User nicht angemeldet, bekommt das <p>-Tag die Klasse "login" und der Login-Button wird angezeigt.
Nun kommen die Styles hinzu, um den schicken Button, anstatt des schnöden Text-Links anzuzeigen:
CSS
.login,
.logout {
width: 100px;
height: 60px;
text-indent: -9999px;
overflow: hidden;
}
.login a,
.logout a {
display: block;
width: auto;
height: 60px;
background-image: url('loginout.jpg');
background-repeat: no-repeat;
}
.login a:link,
.login a:visited { background-position: 0 0 }
.login a:hover { background-position: 0 -60px }
.login a:active { background-position: 0 -120px }
.logout a:link,
.logout a:visited { background-position: -100px 0 }
.logout a:hover { background-position: -100px -60px }
.logout a:active { background-position: -100px -120px }
Per text-indent: -9999px wird der Text-Link nach links ins Abseits verschoben und zurück bleibt die Grafik. Diese sieht wie folgt aus:
Per background-position wird je nach Zustand der richtige Button angezeigt. Ihr könnt die Grafik gerne übernehmen, oder einfach was eigenes entwerfen, was besser in euren Blog passt.
Wenn ihr dieses Tutorial hilfreich fandet, würde ich mich freuen, wenn ihr auf Twitter darauf aufmerksam macht oder es beim Bookmark-Service eures Vertrauens speichtert.
Vielen Dank.
Weiterführende Links:
"Contact Form 7" auf goneo-Webspace zum Laufen kriegen
Kontaktformulare sind eine gute Sache, wenn sie funktionieren. Funktionieren sie nicht, werden sie schnell zu einem Quell steten Ärgernis. Dies ist der Fall, wenn man seine WordPress-Installation auf goneo-Webspace liegen hat. goneo hat nämlich im März sein System dergestalt modifiziert, dass Mail-Skripte nur noch mit einer bei goneo angelegten Email-Adresse funktionieren. Dies ist eine Reaktion auf das erhöhte Spam-Aufkommen.
Möchte man dann - so wie ich - seinen Blog mit dem ganz ausgezeichneten PlugIn "Contact Form 7" ausstatten, wird das nicht von Erfolg gekrönt sein, auch wenn bei Testläufen immer die Meldung "Email wurde erfolgreich versandt." erscheint. Man muss dem Skript also irgendwie seine bei goneo angemeldete Email-Adresse mitteilen.
Dies kann man einerseits sicherlich im PlugIn selbst machen, was kompliziert ist und genau bis zum nächsten Update hält, oder man geht den Weg über die php.ini. Letztere Möglichkeit beschreibe ich im folgenden, wobei mod_rewrite aktiviert sein muss, was auf dem goneo-Webspace problemlos möglich und generell empfehlenswert ist.
Also dann: Nehmen wir an, unser Kontaktformular ist über den URL "http://www.meine-homepage.tld/kontaktformular/" im WordPress-System erreichbar. Dann müssen wir kurz gesagt nur eine Kopie der php.ini mit den entsprechenden Anpassungen in das Verzeichnis "/kontaktformular/" laden und schon funktioniert alles.
Dafür brauchen wir als erstes das Verzeichnis "/kontaktformular/". Da wir mod_rewrite benutzen, existiert dieses Verzeichnis nicht. Wir legen es aber einfach an, indem wir auf der root-Ebene unserer WordPress-Installation (dort, wo die Ordner wp-admin, wp-content und wp-includes liegen) einen Ordner erstellen und "kontaktformular" nennen. In diesen kopieren wir die "index.php"-Datei von der root-Ebene und modifizieren sie im Text-Editor der Wahl folgendermaßen:
Aus Zeile 17…
require('./wp-blog-header.php');
wird…
require('../wp-blog-header.php');
Nicht wundern, es wurde wirklich nur ein Punkt hinzugefügt.
Als nächstes brauchen wir eine Kopie der php.ini, um "Contact Form 7" unsere Email-Adresse mitteilen zu können. Um diese in den Ordner "kontaktformular" zu kopieren, legen wir im Ordner eine PHP-Datei an und nenne sie "copyini.php". In diese fügen wir folgenden Code-Schnippel ein:
PHP
<?php
$cfg=get_cfg_var('cfg_file_path');
if (copy($cfg,'./php.ini')) {
echo "Kopieren erfolgreich"; }
else {
echo "Kopieren fehlgeschlagen"; }
?>
Danach gehen wir in den Browser und rufen das Skript auf, indem wir "http://www.meine-homepage.tld/kontaktformular/copyini.php" in die Adresszeile eintippen. Nun sollte im Browser-Fenster die Zeile "Kopieren erfolgreich" erscheinen. Das bedeutet, dass eine Kopie der php.ini im Ordner "kontaktformular" angelegt wurde.
Nun schmeißen wir die Datei copyini.php weg und nehmen uns die php.ini vor. Einfach im Text-Editor der Wahl öffnen und die Zeile 630
sendmail_path = /usr/local/sbin/sendmail -t -i
durch folgende ersetzen:
sendmail_path = /usr/local/sbin/sendmail -t -i -f mail@meine-homepage.tld
Nun noch speichern und fertig ist die Laube!
Ich möchte allerdings noch einmal darauf hinweisen, dass sich diese Anleitung nur auf WordPress-Installationen bezieht, die auf goneo-Webspace liegen. Solltet ihr bei einem anderen Hoster sein und Probleme haben, kann ich euch nur das Support Forum nahe legen.
Nachtrag:
Der Sicherheit halber solltet ihr zum Schluss noch den Zugriff auf auf die php.ini-Datei über den Browser per .htaccess unterbinden. Das geht mit folgendem Code-Schnipsel, der in besagte .htaccess-Datei eingetragen werden muss:
.htaccess
<Files php.ini>
order allow,deny
deny from all
</Files>
Weiterführende Links:
- Mailversand über den goneo Webserver mit PHP
- Eigene php.ini Datei
- Ein Kontaktformular für WordPress - Contact Form 7
Bild: The slot for the mail next to the front door also has the doorbell button on it. von Samuraijohnny unter CC-Lizenz
WordPress 2.8 wurde jetzt veröffentlicht
Es ist mal wieder soweit, eine neue Version unserer beliebten Blog-Software WordPress wurde veröffentlicht. Es handelt sich um die Version 2.8, namentlich Chet Baker. Neuerungen sind u.a.
- Syntax-Highlighting im Theme- und PlugIn-Editor
- Themes können nun direkt vom Backend aus gesucht und installiert werden (solange man sich mit den Einheits-Themes von WordPress.org zufrieden gibt)
- Artikel lassen sich während des Schreibens per Strg+S (zwischen-) speichern
- jede Email-Adresse darf nur noch von einem Autor benutzt werden
Natürlich gibts noch vieles mehr, wie ihr auf WordPress Deutschland nachlesen könnt. Bisher gibt es zwar erst die englische Version, aber die deutsche wird wie immer in den nächsten Tagen folgen.
Ich selbst werde in weiser Voraussicht erstmal ein bißchen warten, bis ich das Update vornehme. Die ersten Pflaumen sind bekanntlich madig. Außerdem muss ich die Sache mit der Email-Adressen-Begrenzung auf einen Autor noch verdauen. Ich habe nämlich immer einen Admin-User und einen Autor-User für mich. Selbstverständlich beide mit der gleichen Email-Adresse. Was diese Änderung soll, ist mir ehrlich gesagt nicht ganz verständlich…
(via WordPress Deutschland)
Endlich Twitter in der Sidebar
Wie manch eine/r weiß, bin ich halbwegs aktiv auf Twitter. Deshalb schien es mir sinnvoll meine 140-Zeichen-Zwitschereien hier einzubinden. Immerhin lassen sich da so einige Synergie-Effekte realisieren.
Für die Umsetzung habe ich mir das PlugIn Twitter for WordPress runtergeladen, und zwar aus dem recht pragmatischen Grund, dass es in der Suchergebnisliste ganz oben stand. Es ist deshalb auch auf Probe hier.
Bisher — es ist nun seit 5 Minuten eingbaut — gefällt es mir ganz gut. Es scheint zu funktionieren, man kann es gut konfigurieren und auch per CSS gestalten. Das einzige, was mir nicht gefällt, ist, dass man Tweets mit einem "@" darin, nicht ausschließen kann.
Immerhin sind Replies relativ unspannend. ReTweets wiederum haben durchaus auch für Außenstehende Gehalt, weshalb ich das PlugIn erstmal drin lasse. Sollte ich meine Meinung zeitnah ändern und mir was anderes suchen, wird mir das sicherlich einen Beitrag wert sein.
Nachtrag:
Okay, das PlugIn kann scheinbar keine Links identifizieren, die ohne Leerstelle an einem Sonderzeichen o.ä. dran sind, wie Klammern, Gänsefüßchen, etc. Das ist ärgerlich. Spreche ich nun den Entwickler darauf an, akzeptiere ich es oder suche ich mir etwas neues? Es wird wohl eine Mischung aus allen dreien.