Home Thesis Theme, Tutorials >> Thesis Theme Design – eigene Navigation erstellen

Thesis Theme Design – eigene Navigation erstellen

12. März 2012

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Ich hatte ja bereits erwähnt, dass eine eigene Navigation der bereits vorhandenen vorgezogen werden sollte, weil sie leichter zu steuer ist. In diesem Artikel zeige ich Dir, wie Du eine eigene Navigationsleiste erstellen kannst.

Dazu möchte ich aber zunächst noch etwas vorausschicken: Der Thesis Test Blog läuft unter einer kürzlich registrierten Domain, die ich für ein Affiliate Projekt nutzen möchte. Deswegen werde ich ab jetzt immer mehr auf vereinzelte Veränderungen eingehen, die in diese Richtung gehen.

Damit ich das relativ einfach demonstrieren kann, habe ich zunächst einmal einige Seiten im Testblog erstellt, die zwar noch keine Inhalte haben, aber dennoch bereits verlinkt werden.

Eigene Navigation erstellen

Eine eigene Navigation benötigt auch eine eigene Funktion in der „custom_functions.php“. Der erste schritt ist also das Erstellen einer Funktion, welche die Navigation übernimmt. Wie folgt sieht dafür der Code aus (Beispiel aus Blogverdiener.de):

function my_navmenu() {
?>
<div class="nav"><ul>
<li class="lastnav"> <span> <br/> </span>
</li>
<li class="noline"><a href="http://www.blogverdiener.de/" title="Blogverdiener | So zahlt man seine Rechnungen">
Home
<span>Startseite</span>
</a></li>
</ul>
</div>
<div class="clear"> </div>
<?
}

Eigentlich ein relativ einfaches Konstrukt. Die einzelnen Links werden mit dem < li > Tag eingeleitet. Dazu gibt es ein < span > Tag mit einer neuen Zeile. Dort kann dann eine kurze Erklärung reingeschrieben werden. Schau Dir einfach meine Navigation hier im Blog an, die ist genauso aufgebaut.
Wenn Du weitere Punkte in der Navigation benötigst, dann wiederholst Du einfach das < li > Tag. Ein Beispiel:

<li class="noline"><a href="http://www.blogverdiener.de/" title="Blogverdiener | So zahlt man seine Rechnungen">
Home
<span>Startseite</span>
</a></li>

<li class="noline"><a href="http://www.blogverdiener.de/" title="Blogverdiener | So zahlt man seine Rechnungen">
Home
<span>Startseite</span>
</a></li>

So kannst Du mehrere Menüpunkte hintereinander anlegen. Natürlich sehen die noch nach gar nichts aus. Das liegt daran, dass noch keine CSS Klasse das aussehen bestimmt. Sie sind zwar definiert, müssen aber noch in die custom.css eingefügt werden. Auf Blogverdiener verwende ich dazu folgenden CSS Code:

/*Eigene Navigation*/
.nav{border-top:1px solid #c00505;border-bottom:1px solid #c00505;list-style:none;font-size:14pt;font-weight:bold; line-height:100%; margin:0px; padding:0px; background:#7D0303; float:left; width:100%; font-family: Verdana;letter-spacing:-2px;text-align: center;}

.nav ul{margin:0px;padding:0px;float:left;width:100%;}
.nav li.noline{border:0;}
.nav li{border-right:1px solid #000000;float:left;display:block;padding:0px;margin:0px;}

.nav li a{color:#FFFFFF;text-decoration:none;display:block;text-transform:uppercase;padding:5px 9px;margin:0px;
font-family: Verdana;}.nav li a span{color:#FFFFFF;text-transform:uppercase;display:block;font-size:9px;font-family: Verdana;letter-spacing:0px}

.nav li a:hover{background:#F56A00;color:black!important;font-family: Verdana;}

.nav li a:hover span{background:#F56A00;color:fff!important;font-family: Verdana;}* html .nav li a:hover{background:#F56A00;color:#fff;}

.nav li.lastnav{border-left:1px solid #7D0303;border-right:none;float:right;display:block;}

.nav li.lastnav a:hover, .nav li.lastnav a:hover span{background:#7D0303;}

.clear {clear:both;height:0.001em;margin:0px;padding:0px;display:block;}

Die Anpassungen für Farben, Breite und Höhe lassen sich bequem im CSS Code erledigen.

Anzeige der Navigationsleiste

Damit die navigation aber überhaupt angezeigt werden kann, benötigt man einen weiteren Codeschnipsel in der custom_functions.php. Die alte Navigation raus, die neue rein:

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'my_navmenu');

Damit ist die Navigation eigentlich auch schon fertig.

Blog verlinken

Da ich in meinem Affiliate Projekt statische Seiten verwenden möchte, muss ich einen Link in der Navigation auf den Blog setzen. Da habe ich mir ein Stückchen Code herausgesucht, dass die Blogbeiträge auch auf einer Seite anzeigt.
Folgenden Code habe ich genutzt:

<?php query_posts('cat=-0'); //gets all posts
    load_template( TEMPLATEPATH . '/index.php'); //loads index
 ?>

Der kommt direkt aus dem WordPress Codex und funktioniert hervorragend. Dazu habe ich zunächst eine Seite „Blog“ erstellt und dann in der Navigation wie oben beschrieben darauf verlinkt. Der Code funktioniert aber nur, wenn WordPress Php Code auf den Seiten auch zulässt. Das kann man beispielsweise mit dem Plugin PHP Exec sicherstellen.

Grafiken in der Navigationsleiste

Auch Grafiken sind so möglich. Ich habe mir Icons für RSS, Twitter und Facebook besorgt und in die Navigation eingebaut. Das ist relativ einfach. Man muss die Dateien einfach nur über die Mediathek hochladen und den Link in ein img-Tag einfügen. Im Code sieht das dann so aus:

<li class="noline"><div style="float:left;margin-top:2px;margin-left:20px"><img src="http://gegen-akne-pickel.de/wp-content/uploads/2012/01/rss-icon-40x40.png" width="45" height="45"></div>
</a></li>
<li class="noline"><div style="float:left;margin-top:2px;margin-left:20px"><img src="http://gegen-akne-pickel.de/wp-content/uploads/2012/01/facebook_icon-40x40.gif" width="45" height="45"></div>
</a></li>
<li class="noline"><div style="float:left;margin-top:2px;margin-left:20px"><img src="http://gegen-akne-pickel.de/wp-content/uploads/2012/01/twitter-icon_40x40.png" width="45" height="45"></div>
</a></li>

Relativ einfach also, wie Du siehst. Schauen wir uns jetzt noch kurz den neuen Blog im Fortschritt an. Wie immer gibt’s es dazu einen Screenshot.

thesis-demo7

So langsam wird’s doch, oder? Jetzt fehlt noch ein paar kleine Extras und eine Übersetzung der gängigen Elemente in die deutsche Sprache. Dazu aber an anderer Stelle mehr.

Update

Aufgrund der Google Ansage, die Ladezeiten in das Ranking mit einfließen zu lassen, habe ich mich entschieden die meisten Grafiken durch CSS3 zu ersetzen. Wenn Dich interessiert wie das funktioniert, dann schau doch mal in meine CSS3 Tutorials, von denen es auch jede Woche ein neues gibt.

Thesis Design Eigene Navigation – Mein Fazit

Verlässt man sich zu sehr auf die WordPress und Thesis eigenen Funktionen, kann man zwar eine effektive Navigation schaffen, aber leider fehlen dann einige Elemente. Baut man dagegen eine eigene Navigationsleiste auf, kann man sich aller Möglichkeiten bedienen, die man auch aus dem normalen und alltäglichen Gebrauch kennt.
Mir gefällt die Navigation recht gut, obwohl die Icons noch einmal ausgetauscht werden. Zur Veranschaulichung reicht das durchaus, aber sie erstens gleich groß sein und zweitens auch optisch ein wenig hübscher sein. Da finde ich aber sicherlich was. Andernfalls wird halt Photoshop bemüht.

Im nächsten Teil der Serie baue ich einige Spezialfunktionen ein. So zum Beispiel ein Widget in die Artikel und ein weiteres über den Content. Diese beiden Widgets werden für Werbung innerhalb der Artikel genutzt. Verpasse auf keinen Fall den nächsten Artikel! Abonniere mein RSS-Feed!

Bleib in Verbindung via...

RSS abonnieren Facebook Fan werden Follow Me

{ 7 comments… read them below or add one }

1 Alex August 21, 2012 um 19:39

Hallo Sascha,

wieder mal ein sehr Interessanter Artikel, ich probiere zur Zeit ein neues Projekt aufzubauen, mit wp+ thesis. Dabei sind deine Anleitungen sehr hilfreich. doch diesmal habe Ich eine Frage: wie kann ich in der Navigation Gross und Kleinbuchstaben haben? habe in der css datei text-transform:uppercase; rausgelöscht doch irgendwie funktioniert es nicht so ganz(eigentlich gar nicht)! Hast Du einen rat für mich?
Mach weiter so
Lg alexxx

2 Sascha August 21, 2012 um 20:28

Hi Alex,
Du kannst ja in die Navigation ein text-transform:none einbauen. Am Besten hier : .nav li
Damit überschreibst Du alle möglichen Dinge, die Thesis eventuell noch da reinbastelt.

Optional mal eine Email schicken, dann schaue ich mir das mal an.

LG

3 Alex August 22, 2012 um 19:35

Hallo Sascha,
hat SUPER geklappt, ein riesen Dankeschön.
Vielleicht hast du ja noch einen Rat für mich. Ich habe die einzelnen Navigationslinks jetzt mit Kategorien verknüpft, Kann mir aber die Kategorie nicht als Startseite anzeigen lassen. Habe es mit einigen Plugins probiert(redirect, umleitung über individuelles menue), bin bisher kläglich dran gescheitert. Über Wp-Deutschland habe ich den hinweis bekommen die Index.php zu verändern(http://forum.wpde.org/konfiguration/98448-artikelkategorie-als-startseite.html) leider habe ich in der ganzen installation 4 Index.php dateien gefunden.

Tausend Dank für Deine Hilfe
alexxx

4 Sascha August 23, 2012 um 07:50

Hi Alex – War mir zu viel für einen Kommentar. Schaust Du hier: Thesis Tutorial – Kategorie als Startseite

5 Alex August 23, 2012 um 11:55

Hallo Sascha,
wollte nur mal schnell sagen: Du bist der Beste!!!!

Tausend Dank
alexxx

6 Sascha August 23, 2012 um 12:02

Oha,
na dann vielen Dank :-)

LG

7 Thomas Februar 7, 2013 um 18:39

wie bekomme ich denn eine zweite zusätzliche Navigation hin ?
auf deiner Seite jetzt beispielsweise ganz oben am Rand.
Danke.

Leave a Comment

Hinweis: Nur echte Namen verwenden | Keine Verweise auf Unterseiten! Ich lösche solche Kommentare!

Previous post:

Next post:

Letzte Artikel

  • spielcasino.net Für Zwischendurch – Online zocken und Zeit vertreiben
    Verauchte Säle, Whiskey und Pokerkarten. Dazu viele verruchte Gestalten, die an dem Spieltisch ihr letztes Hab und Gut einsetzen. Der Stoff aus dem viele Filme geschmiedet sind. Waren es früher die restlichen Dollars, die von den Cowboys verzockt w...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #11 – Eine Woche gar nichts mehr
    Eine ganze Woche lang habe ich überhaupt nichts gemacht. Das lag zum einen einer Operation an meinem Knie, die ich auskuriert habe, und zum anderen an dem Testtool, das mir einfach keine neuen Werte ausgegeben hat. Jede Serie braucht einen Abschl...Mehr lesen...
  • Premium Themes aus Deutschland WordPress Theme gesucht? Hier wirst Du fündig!
    Immer mal wieder bastelt ein Blogger am eigenen Blog herum, weil er vielleicht die Optik nicht mehr ertragen kann. Mir geht das regelmäßig einmal im Jahr so. Und oft schaue ich mir dann die ganzen Theme Schmieden an, um herauszufinden, was es denn...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #10 – Halbzeit
    Die Hälfte ist geschafft. Social Bookmarking im 20 Tage oder 20 Bookmarks Test. Wie viel Ranking bringen Social Bookmarks? Was bringen sie überhaupt? Diese Frage soll diese Case Study beantworten. Deshalb habe ich mir einen Artikel aus meinem Ar...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #9 – Leichter Abfall des Rankings
    Ein neuer Tag in meiner SEO Case Study. Das Social Bookmarking hat mich bisher um rund 50 Plätze nach oben verschoben und heute ging es wieder ein wenig bergab. Glücklicherweise nur um einen einzigen Platz, den ich hoffentlich heute wieder aufho...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #8 – Bergsteiger Artikel
    Das Social Bookmarking, das in den letzten Monaten so furchtbar an Strafen von Google gelitten hat, wird derzeit auf die Probe gestellt. Welche Auswirkungen hat es noch auf das Ranking? Und wirkt es überhaupt? Google ist sehr streng gegen alle m...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #7 – Erneut ein Stückchen hoch
    Nachdem ich gestern über Stagnation geklagt habe, scheint Google meinen Ruf gehört zu haben und schiebt den Artikel wieder drei Plätze nach oben auf Platz 68. Damit habe ich Seite sechs im Ranking erreicht. Das nächste Ziel muss also lauten ...Mehr lesen...
  • Social-Bookmarking-Ranking SEO Case Study #6 – Stagnation
    Social Bookmarking hat nach dem Google Penguin Update an Bedeutung verloren. Darin sind sich fast alle einig. Die Kommentare, die ich hier im Blog oder per Email bekommen habe, belegen das. Dennoch soll meine Case Study dahingehend für mich Klarheit...Mehr lesen...

Warum dieser Blog?

  • Geld verdienen im Internet

    ist der Traum vieler. BlogVerdiener beschäftigt sich mit den Möglichkeiten und vor allem mit den einzelnen Anbietern, die das Geld verdienen im Internet möglich machen. Dabei werden die Anbieter vorgestellt und in gewissen Zeiträumen immer wieder getestet. Das Hauptaugenmerk liegt dabei auf Seriosität. Betreffend der Auszahlungen, aber auch den Support. BlogVerdiener propagiert nicht den schnellen Reichtum im Internet, sondern soll aufzeigen, wie durch Arbeit im Netz Geld verdient wird. Ob als Texter, über Social Media Profile bis hin zu Youtube Videos, hier steht alles auf dem Prüfstand.

    Zusätzlich veröffentliche ich regelmäßig Tutorials, die zeigen sollen, wie man die Anbieter zum Geld verdienen benutzt. Auch ist mir wichtig den Verdienst immer weiter zu steigern. Jeder getestete und hier eingesetzte Anbieter soll monatlich die Auszahlungsgrenze überschreiten. Das Ziel ist es sich ein Online Einkommen aufzubauen, dass so groß ist, und so dauerhaft ist, dass ich mir keine Sorgen um meine Rente machen muss und sogar bereits mit 40 Jahren meinen Antrag stellen kann.

    Geld verdienen im Internet – Mit Arbeit und viel Lernen verbunden, ist es doch eine Beschäftigung die Spaß macht, gleichgesinnte vernetzt und tolle Partnerschaften ermöglicht.

    Ursprünglich war BlogVerdiener ein Hobby. Ich wollte mich mit der Möglichkeit beschäftigen „Geld im Internet“ zu verdienen. Daraus ist aber so viel geworden, dass ich es irgendwann aufschreiben musste und wollte. Zunächst bin ich auf einem anderen Blog gestartet, der aber BlogVerdiener weichen musste.

    Das Geld verdienen im Internet ist eine sehr spannende Sache, die sich ständig entwickelt. Neue Anbieter kommen hinzu, alte verschwinden. Es gibt diverse Themengebiete, in denen man sich selber entwickeln und lernen kann. Das ist der Punkt, der auf mich eine so unglaublich große Faszination ausübt. Und nicht zuletzt natürlich mein stetig wachsender Kontostand.

    Es macht Spaß Anbieter zu testen und dann für den eigenen Blog die Optimierungsarbeit zu leisten. So kann ich lernen, ausprobieren und nebenbei noch Geld verdienen. Dieser Gedanke ist irgendwann aber zu Ende gewesen.

    Jetzt ist das Hauptziel von BlogVerdiener das Geld verdienen im Internet reproduzierbar zu machen, so dass es für jeden funktioniert. Der Aufwand soll minimiert werden und das Ergebnis stetig verbessert.

Highlights

  • Geld verdienen im Internet mit Beispielen zu Belegen gehört sicherlich zu den Highlights hier im Blog. Hin und wieder starte ich 30 Tage Tests, in denen mehrere Anbieter der gleichen Branche gegeneinander antreten müssen. So zum Beispiel Februar 2013. Für diesen Monat gibt es die Mini Verdienst Challenge, in der ich diverse Anbieter, mit denen auf Facebook Geld verdienen möglich ist, gegeneinander antreten ließ. Das Ergebnis ist eine Seite hier im Blog, die alle Details haarklein auflistet und einige Anbieter für jedermann empfiehlt.

    So kann sich auch die Hausfrau einen netten Nebenverdienst aufbauen, ohne vorher teure Produkte zu kaufen oder anders auf die Nase zu fallen.

    Ein weiteres Highlight sind sicherlich die Empfehlungen der getesteten Fachbücher. Geballtes Wissen für angehende Blogger und Webmaster. Hier stecke ich viel Arbeit und Mühe hinein.

    Das dritte erwähnenswerte Highlight sind Tutorials, in denen ich mich mit dem Thesis Theme, CSS3, HTML5 und Wordpress auseinander setze. Hier kann vieles für andere Blogs adaptiert werden.

50 Suchanfragen

Kontakt