Readmore-länk bredvid föregående text i WordPress

Krånglig rubrik men problemet är lite mer lättföreståligt. Tänk en typisk startsida i WordPress som är uppbyggd med the_content(‘Läs mer’); (eller liknande). Allt är fint men du kommer helt plötsligt på att Läs mer ska ju ta vid där föregående text slutade! Problem direkt!

Först får vi tänka att CSS3 är helt uteslutet, det fungerar sådär och vi vill ju nå de flesta besökarna av sidan, även de som inte kör senaste versionen av X webbläsare.

Först kollar vi lite på uppbyggnaden:

<h1>En rubbe</h1>
<p>Paragraf</p>
<p><a href="#" class="more-link">Läs mer</a></p>

Vilket betyder att CSS egentligen är uteslutet, Läs mer finns inne i en <p>-tagg, men det gör paragraferna ovan också, vilket det kan finnas flera av. Detta betyder att display: inline inte kan användas på <p>.

Lösningen måste ligga i JavaScript. Detta är alltså ett litet fulhack med jQuery för att tillfredställa begäret att ha Läs mer vid sidan av texten och inte under:

$("a.more-link").parent().css({ 'display': 'inline' }).prev('p').css({ 'display': 'inline' });

Den snabba förklaringen är att jag väljer a.more-link, hoppar upp till dess förälder i hierarkin, sätter display inline på paragrafen. Slutligen så går jag bakåt med hjälp av .prev() för att hitta elementet ovanför Läs mer-länken och sätter display inline även här.

Quick & Dirty

För att förklara så använder jag the_content() tillsammans med en sidbrytning 99 gånger av 100 för att visa en ingress på första sidan. Alltså, the_excerpt(); fungerar inte då det bryter text samt tar bort HTML.