wp_list_bookmarks – > 12 Spielereien mit dem neuen template tag in WP 2.1-pimp your sidebar

Die Sidebar individuell zu gestalten liegt vielen am Herzen. WordPress 2.1 bietet dafür einen neuen template tag (wp_list_bookmarks) für die Links und da dieser noch sehr unbekannt ist und außerdem jede Menge Möglichkeiten bietet – hier zig Möglichkeiten was man damit alles machen kann.

Es wird ein langer Artikel, weil viel code;) Jede Möglichkeit ist als überschrift gekennzeichnet und ich empfehle Dir lies zuerst die überschriften, dann such Dir das aus, was Du haben magst. Wie immer habe ich keine Ahnung, ob copy and paste bei den Codebeispielen funktioniert. Schlimmstenfalls musst Du abtippen. ;)

get_links funktioniert auch bei WP 2.1 doch an alle, die von WP 2.0 irgendwas umgestiegen sind: Die IDs der Kategorien haben sich geändert:

Admincenter==>Verwaltung==>Kategorien==> dort findest du die neuen IDs Deiner alten Linkkategorien!

Außerdem zeige ich auch immer den erzeugten Quelltext an und bei den ersten Beispielen steht dabei, was für css IDs und classes zur Gestaltung zur Verfügung stehen. Wenn dies sich wiederholt verweise ich auf die Beispiele.

wp_list_bookmarks

Nur kurz was alles so kommt:

Alle Linkkategorien anzeigen. Alle Links aus jeder Kategorie anzeigen und die rotieren lassen. (random links). Nur eine bestimmte Anzahl anzeigen lassen, Links nicht mit Text, sondern Bild (Button) anzeigen, Rss Feeds Links, Links aus der Kategorie Y anzeigen lassen. Links mit überschrift, Links ohne überschrift usw....

0 Was kann wp_list_bookmarks alles-ein bisschen Theorie


<?php wp_list_bookmarks('argumente'); ?>

Dies bedeutet: Der template tag wp list bookmarks ist mit vielen Argumenten nutzbar. Die Argumente stehen zwischen Hochkommata und werden mit einem & verbunden/aneinandergereiht.

Wenn was nicht funktioniert war vielleicht bloß die Anordnung der Argumente falsch. ;)

0. a Welche Argumente versteht wp_list_bookmarks aller ?

Die Argumente, die dieser template tag aller versteht und kann:


$defaults = array('orderby' => 'name', 'order' => 'ASC', 'limit' => -1, 'category' => '',
'category_name' => '', 'hide_invisible' => 1, 'show_updated' => 0, 'echo' => 1,
'categorize' => 1, 'title_li' => __('Lesezeichen'), 'title_before' => '<h2>', 'title_after' => '</h2>',
'category_orderby' => 'name', 'category_order' => 'ASC', 'class' => 'linkcat',
'category_before' => '<li id="%id" class="%class">', 'category_after' => '</li>');


Und jetzt praktische Beispiele mit wp_list_bookmarks.

1. Drei verschiedene Links, die in vier Kategorien gespeichert sind -Standardergebnis des wp_list_bookmarks

Folgendes in das Template der Sidebar (sidebar.php) schreiben:


<ul><--die ul habe ich dazugeschrieben-->

<?php wp_list_bookmarks(); ?>

</ul>

Dies ergibt dann das:

wp_list_bookmark Standardergebnis 
 Kategorientitel und darunter die dazugehörigen Links

Titel der Kategorie 1
Link 1
Titel der Kategorie 2
Link 2
Titel der Kategorie 3
Link 3
Titel der Kategorie 4
Link 3

1.a Welchen Quelltext (html) erzeugt wp_list_bookmarks in der Standardeinstellung

Ohne die von mir ergänzten ul :


<li id="linkcat-6" class="linkcat"><h2>Blogroll</h2>
	<ul><li>Matt</li>
	</ul></li>
<li id="linkcat-9" class="linkcat"><h2>meine Websites</h2>
	<ul><li><a href="http://www.texto.de/" rel="me" title="code is poetry">Texto</a></li>
	</ul></li>
<li id="linkcat-1" class="linkcat"><h2>Nicht kategorisiert</h2>
	<ul><li><a href="http://www.webdesign-in.de/" rel="me" title="ausprobieren">ich</a></li>
	</ul></li>
<li id="linkcat-2" class="linkcat"><h2>Test2</h2>
	<ul><li><a href="http://www.webdesign-in.de/" rel="me" title="ausprobieren">ich</a></li>
	</ul></li>


  1. Die css class linkcat zur Gestaltung steht zur Verfügung.
  2. Die Kategorien sind alphabetisch von A-Z geordnet.
  3. Die verschachtelte Liste der Sidebar von WordPress wird erzeugt.
  4. Die Kategorientitel sind in der überschrift h2 verpackt.
  5. Die IDs der Kategorien wird ebenfalls erzeugt: linkcat-2,linkcat-1 etc. Auch dies kann man zur Gestaltung nutzen, wenn man mag.
  6. Rel=me oder so gehört zum http://gmpg.org/xfn/11 Netzwerk, dort einfach nachlesen wieso warum und so ;).

2. Alle Links anzeigen, egal in welcher Kategorie, mit überschrift:Lesezeichen


<ul><--die ul habe ich dazugeschrieben-->

<?php wp_list_bookmarks('categorize=0'); ?>

</ul>

Alle Links ohne Kategorie
Lesezeichen
Alle Links anzeigen, egal in welcher Kategorie, mit überschrift:Lesezeichen

Lesezeichen
Link 1
Link 2
Link 3

2.a Der dabei erzeugte Quelltext (html) ist:


<li id="linkuncat" class="linkcat"><h2>Lesezeichen</h2>
	<ul><li><a href="http://www.webdesign-in.de/" rel="me" title="ausprobieren">ich</a></li>
<li>Matt</li>
<li><a href="http://www.texto.de/" rel="me" title="code is poetry">Texto</a></li>
	</ul></li>

  • Die css ID linkuncat und die css class linkcat werden erzeugt und stehen zur Gestaltung zur Verfügung.
  • Lesezeichen steht wieder zwischen h2.
  • „Rel“ wird ebenfalls dargestellt.
  • Die Links sind alphabetisch von A-Z geordnet.

3. Alle Links anzeigen, egal in welcher Kategorie, mit eigener überschrift.


<ul><--die ul habe ich dazugeschrieben-->
<?php wp_list_bookmarks('categorize=0&title_li=eigene überschrift'); ?> 
</ul>

3.a Der dabei erzeugte Quelltext (html) ist:

Absolut dasselbe wie bei 2.a oberhalb ;)

4. Alle Links anzeigen, egal in welcher Kategorie, mit eigener überschrift und rotieren lassen.


<ul><--die ul habe ich dazugeschrieben-->
<?php wp_list_bookmarks('categorize=0&orderby=rand&title_li=eigene überschrift'); ?> 
</ul>

4.a Der dabei erzeugte Quelltext (html) ist:

Absolut dasselbe wie bei 2.a oberhalb ;)

5. Links ordnen mag ich.

Mit


orderby=rand

wird das Rotieren angegeben.

Du kannst auch noch nach id ( die ID des Links), url,name,target,description (das ist der title), owner (das ist der User, der den Link gespeichert hat),rating (wenn Du links bewertest), updated (wenn bei einem Link Neues kam),rel,notes(Du kannst ja zu jedem Link Notizen dazuschreiben),rss, length (die Länge des Linknamens, kürzere zu längere Namen ), ordnen.

Beispiele: orderby=id
Im template tag sieht das dann so aus:



<?php wp_list_bookmarks('categorize=0&orderby=id&title_li=eigene überschrift'); ?> 

oder orderby=target
Im template tag sieht dies dann so aus:


<?php wp_list_bookmarks('categorize=0&orderby=target&title_li=eigene überschrift'); ?>

Nach zwei Kriterien zu ordnen ist nicht möglich.

6. Links nach Kategorien anzeigen, aber pro Kategorie maximal 2 Links.


<ul><--die ul habe ich dazugeschrieben-->
<?php wp_list_bookmarks('limit=2'); ?> 
</ul>

6.a Der dabei erzeugte Quelltext (html) ist:

Absolut derselbe wie bei Beispiel 2a weiter oben.

7. Links nach Kategorien geordnet, pro Kategorie maximal 2 Links und die Beschreibung zum Link anzeigen.

show_description
title Attribut
 Beschreibung also title Attribut des Links wird angezeigt

<ul><--die ul habe ich dazugeschrieben-->
<?php wp_list_bookmarks('limit=2&show_description=1'); ?> 
</ul>


7.a Der dabei erzeugte Quelltext (html) ist:


<li id="linkcat-6" class="linkcat"><h2>Blogroll</h2>
	<ul><li>Matt 
ebend er</li></ul></li>
<li id="linkcat-9" class="linkcat"><h2>meine Websites</h2>
	<ul><li><a href="http://www.texto.de/" rel="me" title="code is poetry">Texto</a>
code is poetry</li>
<li><a href="http://www.esistkeinurlaub.de" rel="me" title="Einfach mal weg">Urlaub</a>
Einfach mal weg</li>
	</ul></li>

Achtung: Haben die Links (a, a:link, a:visited etc) in der style.css ein display block angegeben, wird die Description- das title Attribut- automatisch in einer neuen Zeile darunter angezeigt!

8. Nur Links aus der Kategorie 9

Links aus Kat 9
Kat Name als überschrift
Nur Links aus einer bestimmten Kategorie

<ul><--die ul habe ich dazugeschrieben-->
<?php wp_list_bookmarks('category=9'); ?> 
</ul>


8.a Der dabei erzeugte Quelltext (html) ist:

Absolut derselbe wie bei Beispiel 2a weiter oben.

9. Links nach Kategorien geordnet, aber nur die Kategorien mit der ID 9 und 6


<ul><--die ul habe ich dazugeschrieben-->
<?php wp_list_bookmarks('category=6,9'); ?> 
</ul>

Achtung: Die IDs aufsteigend angeben.

Achtung: Anstatt der Kategorie IDs könnte man auch den Namen der Kategorie (category_name) angeben, doch dies hat bis jetzt bei mir noch nicht funktioniert.

Sollte ich diesbezüglich etwas in Erfahrung bringen, ergänze ich diesen Artikel.

9.a Der dabei erzeugte Quelltext (html) ist:

Du weißt es bereits: ;) ==>Absolut derselbe wie bei Beispiel 2a weiter oben.

10. Zeige mir die Bilder /Buttons statt Linktexte und die Beschreibung (title Attribut)

Buttons statt Text
kein Button da kommt Text
Zeigt Buttons mit Beschreibung

<ul><--die ul habe ich dazugeschrieben-->
<?php wp_list_bookmarks('show_images=1&show_description=1'); ?> 
</ul>


Achtung: Wie am Bild erkennbar ist. Wurde kein Button zum Link gespeichert, dann kommt automatisch der Linktext!

10.a Der dabei erzeugte Quelltext (html) ist:

An und für sich derselbe wie bei 2.a nur sind auch noch die Pfade zu den Buttons sichtbar. Wobei „img“ keine eigene css class zugewiesen wird.

11. Zeige die Links aus Kategorie 9, gib den Links eine eigene css class, ohne title Attribut, geordnet nach deren URL

Das ist eines der Beispiele aus dem Codex, da das Original Beispiel derzeit falsches html erzeugt, habe ich es so abgeändert, dass es passt.


<ul><--die ul habe ich dazugeschrieben-->
<?php wp_list_bookmarks('categorize=1&category=9&before=<li class="eigene">&after=</li>&show_description=0&orderby=url'); ?>
</ul>

Achtung: Ich bin mir unsicher, ob dies so funktioniert, obwohl es im Codex steht.

11. a der dabei erzeugte Quelltext (html) ist:


<li id="linkcat-9" class="linkcat"><h2>meine Websites</h2>
	<ul><li class=\"eigene\"><a href="http://www.esistkeinurlaub.de" rel="me" title="Einfach mal weg">Urlaub</a></li>
<li class=\"eigene\"><a href="http://www.texto.de/" rel="me" title="code is poetry">Texto</a></li>
	</ul></li>

Man mag ja nur eine eigene css class für was haben, damit man es eigens gestalten kann.

Ich würde auf die eigene css class verzichten alles mit before und after weglassen und dafür in der style.css diese li folgendermaßen ansprechen:


ul li.linkcat ul li


12. Ich brauche keine Titel, keine verschachtelte Liste wie geht denn das?

Dies fragte sich Olafb im WordPress-Deutschland.org Forum:

Dieses Html wollte er haben:


<div class="boxhead"> 
<h2>Links</h2> 
</div> 
<ul class="MeineKlasse> 
<li>...hier die Links....</li> 
</ul> </li> </div>

Zwei Lösungen eine von Olafb und eine von Jeriko, wenn man weniger Kategorien hat.

Alle Parameter leeren heißt das Zauberwort, dies sieht dann so aus:


<?php wp_list_bookmarks('orderby=rand&categorize=0&title_before=&title_after&title_li=&category_before=&category_after= '); 
?> 

die zweite Lösung von Jeriko, bei nur einer vorhandenen Kategorie:


<?php wp_list_bookmarks('title_li=&category=0&categorize=0'); ?> 

Funktioniert was nicht, ändert sich was, habe ich die allerneuesten Urideen, dann editier ich den Artikel. ;)

Hast Du noch Ideen etc, Fragen, Erkenntnisse etc. dann schreibe hier einen Kommentar. über Rückmeldung freu ich mich immer.

Wenn es Dir geholfen hat, dann sag es ruhig weiter. ;)
31

31 Beiträge zu “wp_list_bookmarks – > 12 Spielereien mit dem neuen template tag in WP 2.1-pimp your sidebar

  1. Kommentar Autor
    ogee
    Kommentar

    sehr schöner, verständlicher beitrag :)
    danke dafür…

  2. Kommentar Autor
    Gabi
    Kommentar

    Vielen Dank für diesen tollen Beitrag – sehr anschaulich und wirklich verständlich geschrieben :-)

  3. Kommentar Autor
    Florian
    Kommentar

    Wirklich klasse Auflistung der Möglichkeiten mit „wp_list_bookmarks()“! Vielen Dank!

    Mich würde interessieren, ob es auch die Möglichkeit gibt, ganz auf die Erstellung einer Liste zu verzichten. Also, dass nur die Links ausgegeben werden!?

    Würde mich über einen Tipp in dieser Richtung sehr freuen, denn Google schweigt sich (noch) aus.

  4. Kommentar Autor
    Florian
    Kommentar

    Hi again.

    Ja, genauso habe ich es dann auch gelöst. Musste dazu leider meine Sidebar komplett umbauen. (Das hatte ich mir aus purer Faulheit eigentlich erparen wollen!) ;-) Aber nun gehts. Schade eigentlich, dass wp_list_bookmarks() das nicht kann, während eine andere neue 2.1-Funktion (wp_list_categories()) das drauf hat über „style=0“.

    Aber danke für die Mühe. :-)

  5. Kommentar Autor
    Monika
    Kommentar

    Florian kann sein, dass dies bald kommt, denn als ich mir die neue Funktion erarbeitete sah ich für kurze Zeit ein ähnliches Beispiel im englischen Codex,
    doch da dürft was schief gegangen sein, denn die uls blieben nur die lis wurden damit gekillt..

    vielleicht in einem der nächsten updates ..

    wer weiß..;)

    lg

  6. Kommentar Autor
    Florian
    Kommentar

    Das hört sich gut an. Freue mich ohnehin schon jetzt auf 2.2 Final. ;-)

    Mir fällt generell auf, dass die Masse der Template Tags und Funktionen in WordPress eher zusammengestückelt rüberkommt. Viele Funktionen, die letztendlich die gleiche bzw. ähnliche Aufgaben erfüllen (z.B. eine Liste von irgendwelchen Daten zu erzeugen) haben dennoch oftmals unterschiedliche Optionen und Konfigurationsmöglichkeiten. Wäre schön, wenn das mal etwas einheitlicher gestaltet würde.

    Das Problem mit o.g. „style=0“ ist btw, dass nach jedem Link automatisch ein Zeilenumbruch eingefügt wird. Nicht jeder braucht den. Dies ließe sich umgehen, wenn es eine Option „before_link=“ und „after_link“ oder so etwas in der Art gäbe. Manche Template Tags unterstützen das schon jetzt. Aber man kann ja nicht alles haben. ;-)

  7. Kommentar Autor
    Muckel
    Kommentar

    Guten Tag,
    vielen Dank für deine Tipps! Denn noch habe ich ein kleineres Problem. Ich möchte, dass meine Links genauso ausschauen wie unten bei den Meta angaben oder bei den Bereich Testen. Ich habe dafür versucht mit linkcat und linkuncat zu arbeiten. Leider funktioniert das nicht. Würde mich freuen, wenn Du auf meine Seite schauen könntest und mir einen Lösungsvorschlag nennen könntest.

    Danke!

  8. Kommentar Autor
    Muckel
    Kommentar

    Danke, ich war blind und konnte es lösen. Bei fragen dazu, bitte mail an mich. Danke!

  9. Kommentar Autor
    Alexx
    Kommentar

    Vielen Dank für diese Hilfestellung, aber leider reicht sie für mich nicht aus. Ich hoffe man kann mir hier helfen.

    Ich möchte gerne, das Links und überschriften der einezelnen Kategorien auf mein CSS zurückgreifen und nicht dieses LINKCAT (wo finde ich das eigentlich?) benutzen?

    Wer kann mir hier helfen. Im Firefox geht die Seite noch, aber im Safari auf Mac sieht das schrecklich aus, das die Links noch mal eingezogen sind …

    Vielen Dank und viele Grüße
    Alexx

  10. Kommentar Autor
    Monika
    Kommentar

    hi Alexx
    das geht nicht
    du musst dann die css Angabe lincat in Deiner style.css eben ergänzen oder ergänzen lasssen,

    lg

  11. Kommentar Autor
    Alexx
    Kommentar

    hi, danke für den schnellen hinweis.

    Da ich in meiner CSS keine linkcat habe, muss ich den manuell hinzufügen? Verstehe ich das richtig?

  12. Kommentar Autor
    Liese
    Kommentar

    Hallo,
    ich hab den Code 1 (Standard) in meine sidebar.php geschrieben. Es tut sich aber nichts. Meine Frage: an welche Stelle muss der Code geschrieben werden oder muss ich danach noch irgendwo was ändern oder einstellen?
    In welcher Datei ändert sich dann der Quelltext.
    Ich nutze die Version 2.2.3

    mfg Liese

  13. Kommentar Autor
    Fabian
    Kommentar

    Es ist eine super Idde und gut beschrieben, doch ich hänge an etwas:

    Ich möchte zu erst den Seiten Namen fett gedruckt haben und dann die Beschreibung davon normal, soweit war ich:

    <?php wp_list_bookmarks(‚categorize=0&title_li=0&before=&after=&show_description=1‘); ?>

    doch es wird alles fett gedruckt, gibt es da noch eine Möglichkeit?

    Fröhliche Weihnachten!
    Fabian

  14. Kommentar Autor
    JAN
    Kommentar

    Hallo …,
    ich hätte zu > 7. Links nach Kategorien geordnet, pro Kategorie maximal 2 Links und die Beschreibung zum Link anzeigen.
    noch eine Frage. Im Visual zu 7. wird die Beschreibung in einer Linie nach dem Link selbst angezeigt.
    Leider kann ich in keiner Weise die Beschreibung per CSS ansprechen. Gäbe es dazu auch ein Tip? Das wäre super. Ansonsten für diesen und ander Tips auf der Seite besten Dank.
    JAN

  15. Kommentar Autor
    Monika
    Kommentar

    hi Jan
    das geht, wenn du den Links dort ein display:block zuordnest…

    Beispiel:

    
    .linkcat ul li a{display:block;}
    
    
    

    wobei die class eben von theme zu theme unterschiedlich sein kann,

    lg

  16. Kommentar Autor
    JAN
    Kommentar

    zu 18

    es wird nach dem Link ein in den source geschrieben, dann kommt die Beschreibung und li zum schließen!

  17. Kommentar Autor
    JAN
    Kommentar

    zu 18 & 19 sorry wegen den tags!

    also eine brake kommt nach dem Link!

  18. Kommentar Autor
    Monika
    Kommentar

    Jan wegen des Codes das geht in Ordnung, den lass ich aus Sicherheitsgründen halt hier nicht zu ;)

    bloß ich finde gar nirgends die Linkkategorien auf der Seite, da ist derartiges Chaos im Quelltext, dass ich es irgendwie überseh …;)

    möchtest du alles in einer Zeile haben?

    lg

  19. Kommentar Autor
    Fabian
    Kommentar

    Ist es möglich, Limks aus einer Kategorie, ohne den Titel der Kategorie mit anzeigen zu lassen?

  20. Kommentar Autor
    Monika
    Kommentar

    Hi Fabian ja ist es

    wo in de Sidebar oder in der Kategorienansicht etc..

    lg

  21. Kommentar Autor
    Fabian
    Kommentar

    Hallo, ich möchte in meiner Seitebar Links aus einer bestimmten Blogroll-Kategorie anzeigen lassen…

  22. Kommentar Autor
    Fabian
    Kommentar

    Komisch, bei wir wird trotzdem der Kategoriename angezeigt…

    Siehe meine Website, orangene Box.

  23. Kommentar Autor
    Monika
    Kommentar
    
    <?php wp_list_bookmarks('category=15&categorize=0&show_description=&title_before=&title_after&title_li=');?>
    
    
    

    mit dem Code auch..
    ich glaube nämlich ich habe title mit Titel verwechselt … (sorry)

    lg

  24. Kommentar Autor
    Rezneuk
    Kommentar

    Hallo!
    Wenn ich in der Sidebar.php den bookmarks-Eintrag wie folgt ändere werden trotzdem auch Links aus anderen Kategorien angezeigt.
    Bitte gib mir mal nen Denkanstoß, warum dass so ist. :)

    Gruß, Matthias

  25. Kommentar Autor
    Monika
    Kommentar

    hmm..
    nutzt Du Widgets?

    wenn ja, dann nutzen die ihren eigenen Code und nie das was man in die Sidebar.php geschrieben hat.

    lg

  26. Kommentar Autor
    Rezneuk
    Kommentar

    Ah Danke, dass wird es sein. Muss ich mich nach Feierabend mal auf die Suche machen, wo der Code der Widgets steht.

    Schönes Wochenende!

  27. Ping Linkliste und eine Odysee | Die Stimme aus dem Schatten

  28. Kommentar Autor
    papalbina
    Kommentar

    omg, danke. es hat mir viel geholfen. jetzt muss ich nur meine eigene class einfügen… <3

  29. Kommentar Autor
    Palloo
    Kommentar

    Vielen Dank für diesen Code damit man auch einzelne Kategorien ohne Überschrift / Titel anzeigen lassen kann, ich habe mich schon echt dumm und dusselig gesucht. Wusst gar nicht, dass man category UND categorize in einem Befehl ausführen kann damit das title_li= (Kein Titel eben) wirkt. Nur mir category ging dat ja leider nicht. Vielen Dank nochmal für den Tipp :)