Eigentlich wollte ich ja nicht mehr so viele Artikel über das hier eingesetzte CMS WordPress und die im Einsatz befindlichen Plugins schreiben. Das soll ja ein privater Weblog sein, in dem ich ein wenig aus meinem Leben erzähle und über die Kapriolen unserer Kinder schreibe. Doch da nun mal das Experimentieren mit der Technik die hinter diesem Weblog steckt ein Steckenpferd von mir ist und es immer wieder wunderbare Menschen gibt die wissen wollen wie ich hier was gelöst habe gibts Heute doch wieder eine kleine Anleitung.
Der Marek fragte mich nämlich in dem Artikel WordPress Theme Yoko-child 1.0 steht zum Download bereit | delijo :
Deine Seite sieht wirklich ganz wunderbar aus! Ich habe eine Frage zu deiner Navigation unten auf der Startseite. Wie hast du das derart traumhaft hinbekommen? Auch rechts unter der Pfeil, der nach oben zeigt, macht echt was her!
Ich dachte, du hättest deine Navigation über das Plugin WP-Navi realisiert, konnte aber im Childtheme keinen Hinweis darauf finden.
Gruß
Marek
Nun, es ist wie Marek richtig vermutet das WordPress Plugin WP-PageNavi, das ich mit ein wenig CSS anpasste. Dafür änderte ich die Angaben in der Datei pagenavi-css.css, welche sich in dem Plugin-Verzeichnis befindet ( …/wp-content/plugins/wp-pagenavi). Da diese Änderungen bei einer Aktualisierung des Plugins wieder überschrieben würden befinden sich sich auch in der Datei style.css meines themes (…/wp-content/themes/yoko-child).
So, damit ihr eure Page-Navi anpassen könnt wenn euch mein Design gefällt hier die Angaben aus der Datei pagenavi-css.css
.wp-pagenavi {
clear: both;
text-align:center;
font-weight: bold;
height:50px;
}
.wp-pagenavi a, .wp-pagenavi span, a.page {
text-decoration: none !important;
color:#f0f0f0 !important;
background:#ccc !important;
padding: 15px 20px !important;
margin: 5px !important;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(PIE.htc);
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
background:#333 !important;
}
.wp-pagenavi span.current {
}
Auf der Einstellungsseite des WordPress Plugins WP-PageNavi im Backend habe ich das Plugin so konfiguriert wie auf dem Screenshot zu sehen.
Dann wollte Marek noch wissen wie ich den “nach oben” Pfeil im unteren Bereich meiner Website realisiert habe. Dies ist einfach nur eine Grafik, die ich im Footer verlinkt habe. Der Code in der footer.php dazu lautet
<div class="clear"></div> <div class="align-right"> <a href="#page" class="top"><img src="http://www.delijo.de/blog/wp-content/themes/yoko-child/images/square/arrow-up.png" title="top" alt="top" /></a> </div>...
Natürlich könnte dies auch eleganter mit einer Hintergrundgrafik realisiert werden. Dann bestünde auch die Möglichkeit bei Mouse-hover eine dunkle Grafik anzuzeigen. Vielleicht mache ich das auch noch irgendwann. Zur Zeit bin ich aber zu faul…
Du bist ja verrückt!
Vorhin schreibst du noch, dass du vielleicht mal, ja, und möglich und wenn überhaupt 
– und zack, keine drei Stunden später hast du bereits einen neuen Artikel verfasst. Ich werde mich heute Abend ransetzen, es bei mir ausprobieren und hier ein Feedback geben.
DANKE DANKE DANKE!
Gruß
Marek
P.S.
Werde jetzt regelmäßiger bei dir reinschauen.
Ob du derzeit allerdings zu faul bist, bezweifle ich sehr.
Sooo, die Navigation steht so weit mal fürs Erste! Ich sage nochmal ganz herzlichen Dank für deinen Artikel. Bei den CSS-Formatierungen habe ich allerdings einige kleinen Veränderungen vorgenommen, da mir bei deiner Seite etwas aufgefallen ist. Auf einem kleinen Display (Händi, Smartphone) verrutschen deine Seitenzahlen ineinander, weil sie sehr groß sind. Sieht nicht so schön aus. Mit der von mir etwas kleiner gestalteten Variante (padding: 5px 5px;) versuche ich, diesen unschönen Effekt zu vermeiden. Wenn ich das Händi quer halte gelingt das auch immerhin.
Prima wenn ich helfen konnte. Leider hast du allerdings die Grafik für den “nach oben” Link von meinem Webspace genutzt. Das ist nicht so toll da es meinen Trafik “kostet”. Du kannst die Grafik natürlich haben, doch kopiere sie bitte und lade sie auf deinen eigenen Webspace hoch. Dann musst du natürlich den Pfad in der footer.php angleichen.
Ui! Ja, ich entferne das sofort, das war mir nicht klar!! :-/ Ist es diese Zeile?
behavior: url(PIE.htc);
Ich stehe aber, ehrlich gesagt, etwas auf dem Schlauch, weil ich deinen Pfeil nach oben doch gar nicht eingebaut habe. (??)
Es ist der zweite Code in dem Artikel. Alles klar?
Aber den zweiten Code habe ich bei mir ja gar nicht eingebaut.
Ich stehe gerade aufm Schlauch. :-/
Ich finde deine Erläuterung wunderbar. Gibt es eine Möglichkeit das Plugin auch für
“” anzuwenden, so das ich einen Artikel in mehrere Seiten mit dem selben Design splitten kann?
Das geht bestimmt. Musst du mal in deinem theme gucken
oder mehr Infos liefern.
Also mit Verweis auf die CSS komme ich weiter. In “single.php” habe ich folgendes eingefügt: CODE:
Nun fehlt aber “Page X of ” am Anfang, die Doppelpfeile (>> und <<).
Irgendwie muss ich den Codeschnippsel offenbar anpassen.
@ Marek: Der button ist bei dir doch nicht mehr drin, ist doch alles ok
@ Benjamin: Am Code wirst du nichts ändern müssen. Das “page of X” und die Klammern kannst du auf der Einstellungsseite des Plugins im Backend anpassen.
Danke für die schnellen Antworten. Das Plugin habe ich im Backend angepasst. Und die Darstellung ist auch richtig.
Allerdings möchte ich auch, dass ein Artikel den ich schreibe in mehrere Seiten gesplittet werden kann. Siehe: http://codex.wordpress.org/Styling_Page-Links
Und hierauf hat das Plugin keinen Einfluss. Was ich herausfinden muss ist, wie ich die Zeile
so modifiziere, dass sie die selben Funktionen aufweist, wie wp-pagenavi. Mit habe ich zumindest geschafft, dass das Design mehr oder weniger übernommen wird.
Ich schätze mal das da der Code des Plugins angeglichen werden muss. Dafür wendest du dich am besten an den Autor des Plugins. Da kann ich dir leider nicht weiter helfen.
Ägerlich, die Codeschnippsel werden in meinen Kommentaren nicht dargestellt. Ich denke, dass mein Kommentar dadurch nicht verständlich ist.
Sodele, auch die Fußzeile steht nach einiger Fummelei. Ich möchte hier noch einmal ganz herzlich für deine Hilfe BEDANKEN!
Das Bild ist nur vorübergehend auf dem Server
Grüße!
Marek
Was kleines Neues, damit dir nicht zu schnell langweilig wird
http://www.vooshthemes.com/blog/design-tutorial/create-a-clean-and-stylish-css3-contact-form/
Bei mir umgesetzt: http://www.skolnet.de/kontakt/ Meine style.css ist aber noch ein buntes Allerlei und nicht veröffentlichungswürdig.