Styla “read-more” länken

Vi ska nu styla “read-more” länken. WordPress låter oss ställa in om vi å ena sidan vill ha pagineringslänken “read-more” på samma rad som innehållet, å den andra sidan som en textlänk under innehållet. Det hela är beroende på hur mycket text vi har valt ska visas. För de som använder the_excerpt kommer bara de 55 första tecknen att visas. Därefter klickar vi ju oss vidare via “read-more” länken. Oavsett vilket tycker jag för min del att det är snyggare att styla denna länk så den “sticker ut” från de andra länkarna på sidan. Jag ska nu ger er några alternativ om hur man kan gå till väga.

Ändra text i “read-more” länk

Det här är det enklaste alternativet om du bara vill ändra texten utan att riva runt i functions.php. Börja med att öppna upp dina filer och leta dig ned till följande kod:

  1. <?php the_content(); ?>

Som standard står det read more men vi vill ändra till en egen och personlig text, då lägger du in följande:

  1. <?php the_content('...l&auml;s hela inl&auml;gget &raquo;'); ?>

Nu kommer det istället stå …läs hela inlägget ». Glöm inte sätta ut fnuttarna som omger koderna innanför parenteserna. Så fort vi lägger till koder (parametrar) inom parenteserna så måste vi omgärda dessa med fnuttar. Nu vill vi kanske också styla texten lite, byta länkfärg och lägga till en bakgrundsfärg. Då måste vi lägga in lite fler koder:

  1. <?php the_content('<span class="more-link">...l&auml;s hela inl&auml;gget &raquo;</ span>'); ?>

I din stilmall skapar du sedan ditt classattribut “more-link”, och när vi ändå håller på så gör vi om länken till ett blockelement:

  1. a span.more-link {display:block;font-size:0.9em; margin:20px 0 0 !important;padding:4px 7px;background:#000 url();color:#ccc;font-weight:bold;
  2. a:hover span.more-link {background:#666 url();color:#fff;font-weight:bold;text-decoration:none;

En bild utan text skulle kanske inte heller vara så dumt?

  1. <? php the_content ( "<img src =" / images / readmore.gif " alt="read more" title="Read more..." />'); ?>

Ändra “read-more” i functions.php – mest korrekt

Det här är dock det mest korrekta sättet. Många wordpress-hacks och funktioner bör läggas in i functions.php istället för att man klistrar in koder direkt i filerna. Vi ska nu lägga in samma koder som innan fast i functions.php. Öppna upp den filen och skrolla så du kommer allra längst ned och kopiera in följande – jag har angett texten till …läs hela inlägget »:

  1. <?php
  2. add_filter( 'the_content_more_link', 'my_more_link', 10, 2 );
  3. function my_more_link( $more_link, $more_link_text ) {
  4. return str_replace( $more_link_text, '...l&auml;s hela inl&auml;gget &raquo;', $more_link );
  5. }
  6. ?>

Nu kommer denna text att synas på alla sidor som har the_content i loopen. Givetvis kan du fortfarande styla denna länk med css. Källa: http://justintadlock.com.

wprecipes.com har en liknande kod med samma funktion för “read-more” att lägga in i functions.php. Kanske att just denna kod är mer lättförståelig för de som inte brukar harva runt i functions.php?

  1. <?php
  2. $custom_more = "...l&auml;s hela inl&auml;gget &raquo;";
  3. add_filter( 'the_content_more_link', 'my_more_link', 10, 2 );
  4. function my_more_link( $more_link, $more_link_text ) {
  5. return str_replace( $more_link_text, $custom_more, $more_link );
  6. }
  7. ?>

Lägga in “read-more” som ett block

Ytterligare ett alternativ är att positionera “read-more” med ett cssblock, och detta gör vi genom att lägga in blocken direkt i filerna. Leta dig därför ned till the_content än en gång och stanna. Här ska vi först göra vårt block och styla det med css. Öppna stilmallen och kopiera in följande, du kan alltid ändra stilen senare:

  1. .readmorecontent { clear:left;
  2. text-align: right;
  3. margin-bottom: 8px;
  4. }
  1. a.readmore {
  2. padding: 5px 15px;background: #666;
  3. color: #ccc;font-size: 12px;
  4. text-decoration: none;
  5. }
  1. a.readmore:hover {
  2. background-color: #999;
  3. }

I dina filer med The Loop ska vi omedelbart efter <?php the_content(''); ?> lägga in följande kod:

  1. <div class="readmorecontent">
  2. <a class="readmore" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">...l&auml;s hela inl&auml;gget &raquo;</a>

Så här ska det alltså se ut när alla koder är på plats:

  1. <?php the_content(''); ?>
  2. <div class="readmorecontent">
  3. <a class="readmore" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">...l&auml;s hela inl&auml;gget &raquo;</a>
  4. </div>

Har Du några funderingar kan du kontakta mig eller lämna en kommentar där det passar. Lycka till!

Liknande poster:

One Comment Add yours

  1. Fredrik says:

    Riktigt bra förklarat. Har precis letat efter detta. Blev riktigt snyggt efter att jag fick leka lite med koden. Man tackar så hjärtligt för en bra guide.

Leave a Reply

Your email address will not be published. Required fields are marked *