Die Auflistung im Archiv anpassen

    Guten Tag,

    Ich möchte im Archiv die Auflistung "monatlich" anpassen.
    In den CSS habe ich die Liste auf
    display: inline; gesetzt.

    Jetzt möchte ich zwischen den einzelnen Links jeweils einen Trennstrich einfügen. Mir ist dazu aber leider die Syntax nicht klar. Wie mache ich das.

    Die Stelle im Code sieht so aus:

    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>

    Die Auflistung sieht so aus:
    Februar 2008 Januar 2008 Dezember 2007

    Ich möchte haben:

    Februar 2008 | Januar 2008 | Dezember 2007

    Wie bekomme ich die Trennzeichen integriert?

    Vielen Dank!
    Ina.

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Am besten auch mittels CSS:
    border-left:1px solid black;

    Mein Problem ist, dass ich wohl die PHP-Logik nicht verstehe, nämlich wie die einzelnen Listen-Tags dort eingelesen werden. Dazwischen möchte ich ein eigenes Trennzeichen platzieren. Das könnte auch ein eigenes jpg sein. Daher geht die Variante mit dem border-left nicht. Der | war sozusagen nur ein Platzhalter für alles mögliche.

    Bin ich denn mit dem gezeigten Code

    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>

    wenigstens schon an der richtigen Stelle, an der ich was ändern muß?

    Auch wenn's wahrscheinlich mit Alphawolfs Vorschlag funktioniert - ich würde solche Layout-Geschichten im CSS machen. Du könntest z.B. dein JPEG als Hintergrundgrafik für das <li> einsetzen und dem <li> noch ein wenig Padding mitgeben, damit die Schrift nicht das Trennzeichen überlappt. Allerdings wirst du so wahrscheinlich nicht mit display:inline hinkommen, sondern wirst z.B. float:left verwenden müssen.

    Du kannst das Format auch völlig frei vergeben, siehe hier: Template Tags/wp get archives « WordPress Codex

    zB.

    PHP
    <ul>
<?php wp_get_archives('type=monthly&format=custom&before=<li><img src="" border="0"/>&after=</li>'); ?>
</ul>


    Erzeugt dann z.B.
    <ul>
    <li><img src="" border="0"/>Link1</li>
    <li><img src="" border="0"/>Link2</li>
    <li><img src="" border="0"/>Link3</li>
    </ul>

    Ich persönlich würde es aber wie marX mit CSS bevorzugen (nein, wir haben uns nicht abgesprochen *gg [SIZE="1"]Ich meld mich wegen der Zahlung per PN, marX.[/SIZE])

    wpseek.com - Die WordPress-Code-Suchmaschine

    Oh, Danke, ich glaube ich habe durch Euch gerade einige Erleuchtungen. :-)
    Leider muß ich eben mal weg vom PC, melde mich aber nachher nochmal mit meinem Ergebnis, ob und wie ich Eure Vorschläge umsetzen konnte.

    Vielen Dank!
    Ina.

    :-D So, bin wieder da.

    Ich hab´s so gemacht:
    [COLOR=#000000] <ul>
    [COLOR=#0000cc]<?php wp_get_archives[/COLOR][COLOR=#006600]([/COLOR][COLOR=#cc0000]'type=monthly&before=| '[/COLOR][COLOR=#006600]); [/COLOR][COLOR=#0000cc]?>|
    [/COLOR]</ul>

    Lösung nicht über css, weil
    1.) mir der border-left: 1px-Strich zu lang ist, sieht vom Layout her nicht gut aus
    und
    2.)weil es vom Layout her nicht stimmig ist und man wieder irgendeine Hilfskonstruktion
    machen muß, denn: border-left bedeutet ja, dass der erste Link eine border links hat, der letzte aber
    keine auf der rechten Seite. Boder-left und border-right gleichermaßen verwendet, würde bedeuten, dass dort, wo sich die
    border überlagern, die Stärke der Linie viel dicker ist - also auch wieder ein uneinheitliches Layout.
    Daher habe ich das jetzt wie o.g. umgesetzt:

    Anschauen kann man´s hier unter "Chronologisch sortiert":
    Tag Cloud & Archiv :: Kreative Strukturen

    Viele Grüße
    Ina.
    [/COLOR]

    Zitat von offina

    man wieder irgendeine Hilfskonstruktion machen muß, denn: border-left bedeutet ja, dass der erste Link eine border links hat, der letzte aber keine auf der rechten Seite. Boder-left und border-right gleichermaßen verwendet, würde bedeuten, dass dort, wo sich die border überlagern, die Stärke der Linie viel dicker ist - also auch wieder ein uneinheitliches Layout.


    Könnte man mit der Pseudoklasse :first-child umgehen. Kennt zwar der IE <7 nicht, aber ich glaube über solche Kleinigkeiten kann man auch mal hinweg sehen. Eine andere Lösung wäre, die Listenelemente relativ um 1px nach links zu verschieben, dann "verschwindet" der überzählige linke Rand. Eine weitere Möglichkeit wäre gewesen, dass Trennzeichen mittels content-Eigenschaft und :before/:after-Pseudoklassen einzufügen. Du siehst es gibt der Möglichkeiten viele. ;-)


    Zitat

    Daher habe ich das jetzt wie o.g. umgesetzt:


    Na die Hauptsache ist doch, das es so funktioniert wie du es dir vorstellst. ;-)

    Zitat

    mittels content-Eigenschaft und :before/:after-Pseudoklassen einzufügen.

    Aha, das kannte ich noch nicht. Das probier ich glatt mal aus. :-D

    Ina.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden