Hur du gör en snygg arkivsida
archives

Jag fick nyligen frågan om hur jag hade gjort min arkivsida, så jag lovade att skriva ett litet inlägg om hur man gör en liknande sida. Sann till mitt ord så kommer här nu en guide för hur man skapar en snygg arkivsida.

Vad vi vill åstadkomma

För att ge våra arkivbesökande besökare så bred valmöjlighet som möjligt vill vi erbjuda dem möjligheten att se en lista på inlägg i månadsordning, kategoriordning och sen bara en lista på alla inlägg rakt av, men uppdelade i månad och år för att göra det hela lite mer läsligt.

Detta gör vi lättast i tre olika steg, med tre olika funktioner en för varje visning, där WordPress själva erbjuder oss mer eller mindre färdiga funktioner för jobbet.

Arkiv månadsvis


För att få en lista per månad, så använder vi oss av funktionen wp_get_archives() som vi har möjlighet att skicka in lite parametrar till:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php 
 
//Standardvärden
$args = array(
    'type'            => 'monthly',
    'limit'           => ,
    'format'          => 'html', 
    'before'          => ,
    'after'           => ,
    'show_post_count' => false,
    'echo'            => 1 );
 
wp_get_archives( $args );
 
 ?>

type är hur du vill att arkiv listan ska visas, yearly, monthly, daily, weekly, postbypost, alpha.
Postbypost listar inläggen en efter en i datumordning medan alpha gör samma sak, men listar dem i bokstavsordning efter titeln.
limit är antalet arkivrader du vill visa totalt. Som standard visas alla rader.
format är hur listan ska genereras. html för att visa den som en vanlig lista med <li>’s. option för att göra valen till en rullgardinslista eller selectbox. link för att omsluta raderna med <link>-taggar att ha i headern. Eller slutligen custom där du kan använda before och after för att skapa din egna lista.
before är således en stäng att placera före varje länk till arkivraderna och
after är en stäng att placera efter varje länk till arkivraderna.
show_post_count är en boolean som talar om ifall man vill att en siffra med antalet inlägg som visas efter varje länk eller inte.
echo, och slutligen echo som också är en boolean och talar om ifall man vill att listan ska skrivas ut direkt eller inte.

Så för genom att skriva följande kod så får vi resultatet som är på min arkiv sida:

1
2
3
<ul class="archives">
    <?php wp_get_archives('type=monthly&show_post_count=1'); ?>
</ul>

Arkiv per kategori


För att åstadkomma ett arkiv per kategori så kan vi använda oss av en mycket lik funktion som heter wp_list_categories() och listar just kategorier. Även den har en del parametrar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php 
 
//Standardvärden
$args = array(
    'show_option_all'    => ,
    'orderby'            => 'name',
    'order'              => 'ASC',
    'show_last_update'   => 0,
    'style'              => 'list',
    'show_count'         => 0,
    'hide_empty'         => 1,
    'use_desc_for_title' => 1,
    'child_of'           => 0,
    'feed'               => ,
    'feed_type'          => ,
    'feed_image'         => ,
    'exclude'            => ,
    'exclude_tree'       => ,
    'include'            => ,
    'hierarchical'       => true,
    'title_li'           => __( 'Categories' ),
    'number'             => NULL,
    'echo'               => 1,
    'depth'              => 0,
    'current_category'   => 0,
    'pad_counts'         => 0,
    'taxonomy'           => 'category',
    'walker'             => 'Walker_Category' );
 
wp_list_categories( $args );
 
 ?>

show_option_all, om detta värde sätts till en sträng, så kommer en länk att skapas till en ”visa alla kategorier”-sida, vilken vanligtvis är eran startsida.
orderby talar om hur listan ska sorteras: ID, name, slug, count eller term_group
order är ASC (stigande) eller DESC (fallande).
show_last_update är en boolean för ifall en datum stämpel med senaste inläggets datum ska visas vid varje kategori.
style kan ha värdena list eller none. List ringar in listan med <li>-taggar, medan none endast sätter <br /> efter varje kategori.
show_count är en boolean som talar om ifall antalet ska visas efter varje kategori.
hide_empty är en boolean som talar om ifall tomma kategorier ska dyka upp i listan eller inte.
use_desc_for_title är en boolean för att tala om ifall kategorins beskrivning ska dyka upp som titel på länken eller inte.
child_of genom att ange en kategori här, så kan man få endast kategorier som är barn till den kategorin att dyka upp i listan.
feed är en boolean för att slå på och visa en rss feed för varje kategori.
feed_type är typen av feed och
feed_image sätter en uri-address till en bild att använda som feed-ikon.
exclude är en lista på kategori-idn som ska uteslutas ut listan
exclude_tree kan exkludera hela kategoriträd.
include är en lista på kategorier som endast ska visas (och exkluderar alltså alla andra).
hierarchical huruvuda listan ska vara hierarkisk eller inte.
title_li är en sträng som blir listans titel.
number är ett nummer för hur många kategorier som ska visas i listan.
echo är huruvuda listan ska skrivas ut eller sättas till en variabel. Standard är alla.
depth sätts till hur många nivåer som ska visas i listan. Standard är alla.
current_category kan tvinga klassen ”current category” att bli satt på kategorin man är på, även om man inte befinner sig på en arkiv sida (tex om denna lista visas när man är inne på ett inlägg).
pad_counts talar om ifall man vill att parent kategoriers antal ska räknas ihop med alla inlägg som är i barnens kategorier.
taxonomy kan bli satt från version 3.0 och framåt och talar om vilken typ av kategorier man vill lista.
walker tillslut talar om vilken funktion man vill använda för att generera listan (avancerat).

Så, det var en lång lista. För att generera listan som är på min arkivsida så behöver vi således skriva följande kod:

1
2
3
<ul class="archives">
    <?php wp_list_categories('sort_column=name&show_count=1&title_li=') ?>
</ul>

Lista alla inlägg


För att lista alla inlägg blir det lite mer komplicerat om man vill ha det som jag har gjort det. Ska skriver hela koden först så kan vi gå igenom den efteråt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<h2>Alla Artiklar:</h2>
<ul class="archives">
<?php
    $lastposts = get_posts('numberposts=-1');
    $year = '';
    $month = '';
    foreach($lastposts as $post) :
        setup_postdata($post);
 
        if(ucfirst(get_the_time('F')) != $month && $month != ''){
            echo '</ul></li>';
        }
        if(get_the_time('Y') != $year && $year != ''){
            echo '</ul></li>';
        }
        if(get_the_time('Y') != $year){
            $year = get_the_time('Y');
            echo '<li><h3>' . $year . '</h3><ul>';
        }
        if(ucfirst(get_the_time('F')) != $month){
            $month = ucfirst(get_the_time('F'));
            echo '<li><h4>' . $month . '</h4><ul>';
        }
?>
<li>
    <span class="pink"><?php the_time('d') ?>:</span>
    <a href="<?php the_permalink(); ?>">
<?php 
    if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
        the_post_thumbnail('rel_thumb', array('alt' => '', 'title' => ''));
    } 
    the_title();
?>
    </a>
</li>
<?php endforeach; ?>
</ul>

Rad 1 skriver ut titeln på vår lista, medan rad 2 startar listan.
rad 4 hämtar vi alla inlägg med funktionen get_posts(‘numberposts=-1′); där värdet vi anger som -1 betyder att vi inte vill ha någon maxgräns på hur många inlägg vi hämtar. Vi kan sätta 100 tex för att begränsa oss till endast 100 inlägg. Inläggen placerar vi i variabeln $lastposts.
rad 7 start vi en loop som kommer att gå igenom hela listan av inlägg och placera vart och ett i variabeln $post.
Rad 8 är viktig, då den kör funktionen setup_postdata($post); vilket gör att wordpress sätter inlägget som det aktiva inlägget, vilket gör att vi kan använda fuktioner som get_title() tex för att få titeln på inlägget.
Raderna 10-22 gör några villkorssatser för att undersöka ifall månaden och året är samma som inlägget innan, ifall det inte är det, vill vi avsluta en lista, och starta en ny, så att vi kan få alla inläggen uppdelade efter år och månad.
Rad 24-26 skriver ut själva inläggets <li>-tagg plus datumet inlägget var skrivet följt av starten av en länk till inlägget. Här används funktionen the_permalink() för att få länken till inlägget.
rad 28-30 undersöker vi om inlägget har en visningsbild med funktionen has_post_thumbnail, och ifall den har det vill vi skriva ut tumnageln med storleken som jag har definierat i min funktion.php klass till ‘rel_thumb’. För mer information om bildernas tumnaglar läst gärna mitt inlägg Allt du behöver veta om WordPress tumnaglar.
Tillslut på rad 31 skriver vi ut titeln på inlägget och resterande rader avslutar bara vad vi tidigare har öppnat.

Så genom att skriva koden ovan så får ni en snygg lista med alla inlägg sorterade i datumordning och grupperade per år och månad. Sen är det bara att gå in style.css och fixa till visningen lite, så att allting visas på ett snyggt och harmoniskt vis.

Avslutning

Och där har ni det. Nu har ni allt ni behöver för att kunna göra en riktigt snygg arkivsida. Koden placerar ni i en fil som ni döper till archives.php och sedan placerar i er tema mapp. Filen kommer då sedan automatiskt att gå att hitta i rullgardinslistan för sidmallar nere till höger när ni sedan skapar en ny sida, och genom att välja den, kommer er sida att visas upp som en arkivsida. Lycka till, och skriv gärna en kommentar om ni får problem eller bara för att berätta hur er arkivsida blev.


22 kommentarer till 'Hur du gör en snygg arkivsida' »»

  • Hej!

    Tackar för guiden! Nu känner jag mig som en idiot men jag har några små frågor.

    Ska alla saker ovan klippas in i archives.php? Eller är det bara -snuttarna?

    Sedan dyker det inte upp någon mall som heter arkiv i rullgardinen, (bara standard och dump template). Archives-php-filen existerar, jag kan hitta den i utseende-> redigerare.

    Beror mitt trassel möjligen på att jag har atahualpa som tema? De har en egen ”skapa arkivsida-funktion” men resultatet är förskräckligt. Se på http://www.tomatsallad.nu/arkiv/ (och bläddra neråt på sidan).


    • Jag tror inte att det ska behövas något mer för att få den som mall, men du kan alltid lägga till följande kod högst upp på sidan för att vara extra helgarderad:

      1
      2
      3
      4
      5
      
      <?php
      /*
      Template Name: Arkiv
      */
      ?>

      Och det är bara snuttarna (dem som vanligtvis börjar med <ul>) som du behöver skriva… Det övriga var bara vad man ”kan göra”.

      Jo standard arkiv-sidan var väl inte den snyggaste, men det verkar som att den använder samma funktioner i grunden, så det är mycket möjligt att det bara behövs snyggas till lite i style.css.

      Lycka till


      • Tackar! Det gjorde tricket! Eller, åtminstone kom arkiv upp i rullgardinsmenyn. Sedan blev själva arkivsidan just bara arkiv. INGET annat.

        Men lite klickande mellan ”dump template” och ”arkiv” så hade jag flyttat över de kodsnuttar som visst behövdes för att få med header, footer och sidorna. (Det är då jag känner mig som en komplett idiot som inte förstår vad de olika prylarna är bra för utan bara sitter och dubbelkollar att alla > är med…

        Tack igen. Min sida ser visserligen fortfarande tämligen gräslig ut men det kanske löser sig med tiden :-) Vad jag behöver är lite bilder….


        • Hoppsan!

          Jag provade ditt tredje alternativ, alla inlägg. Med bilder.
          Ehh, det blev ett – hmm – intressant resultat.

          Låter det ligga ett tag ifall du vill gå in och titta och skaka på huvudet :-)


          • Hehe jo det blev lite lustigt. Det du måste göra är att fixa fixa och åter fixa i style.css.

            Anledningen till att bilderna la sig så där, är för att du har float left på dem, så det måste skrivas över i en mer specifik väg i style.css. Sen kan det bli snyggt att sätta vertical-align:middle också.


          • Kunde inte svara på ditt svar – har du en maxgräns för konversationer?

            style.css är inte mkt att roa sig med i atahualpa.

            .aligncenter {
            display: block;
            margin-left: auto;
            margin-right: auto;
            }

            .alignleft {
            float: left;
            }

            .alignright {
            float: right;
            }

            Är hela style.css :-)

            Jag får ta och byta tema någon dag…. när jag har lite tid över….
            Tack och hej.


          • Nej du kan inte svara. Jag har satt max trådning på 5 inlägg, så att inte inlägget blir allt för smala. Brukar inte vara så stora problem, bara att göra som vi gör nu, och svara på det 4:e inlägget.

            Nä det är möjligt att det inte finns så mycket information i den stilmallen, men det betyder dock inte att du inte kan lägga till egna rader för att definiera din egen kod. Lägg tex till följande rader precis nedanför, så borde du få lite roligare akriv:


            #middle img.wp-post-image{
            float: none;
            vertical-align: middle;
            width: 64px;
            border: 1px solid #999;
            }
            li{
            margin-left: 20px;
            }
            .archives{
            list-style: none;
            }

            Då kommer det i alla fall att se mycket snyggare ut. Så kan du få leka själv sen vad du nu kan hitta på :)


          • Jag har nu provat :-)
            La det i tur och ordning i style.css, css.php (på ett par olika ställen), i atahualpas CSS-inserts, i arkiv.php… Kunde faktiskt inte se någonsomhelst förändring :-( Vad var det meningen att den skulle gjort?


        • Jag fick till det. Sort of.
          Dvs jag har fått bilderna att räta ut sig på arkiv-sidan. Samtidigt försvann dock float left på alla andra sidor, där det skulle vara…


          • För att få det att bara ske på den där sidan, måste du ange en klass for stylning av just bara arkivet. Sätt en klass som heter class=”archive” även på ul:en som används för att generera de 3:e arkiv alternativet, precis så som det är gjort på de två ul-taggarna ovan, så kan du använda den klassen för att styla sen:


            .archive img.wp-post-image{
            float: none;
            }


          • Tackar! Det tar sig. Sakta men säkert :-)
            (Jag skrev archives med s, det var så det var skrivet på de övriga två).

            Det börjar lika något nu. Nu undrar jag bara hur jag får bilderna att lägga sig en per rad istället för att börja direkt efter förra titeln. Något tips?

            (För övrigt så ska jag verkligen ta och byta tema. Atahualpa är lysande för nybörjare som inte vill pilla i filerna men det är slitsamt att det INTE går att pilla i filerna alls. Allt måste skickas via deras egen ”CSS insert”-moj och den tar inte vad som helst.


  • PS! Stavfel i titeln på inlägget. ARKIV. Så hittar fler hit :-)


  • Anledningen till att du inte får till länkarna på en rad, är för att du har tappat bort alla li-taggar. Kolla igenom din kod, och hämför den med min på sidan. Jag tror inte att den är lika dan längre…


    • Min kod är absolut inte ett dugg lik din :-)
      Orsaken är att jag har knas-temat Atahualpa som inte har en siffra likhet med några andra teman.

      Så här ser hela min ”layout”-kod ut:

      .archives img.wp-post-image{float: none; vertical-align: middle; width: 64px; border: 1px solid #999; !important}

      Den är instoppad i en ”CSS insert” – funktion i Dashbord. Att göra några förändringar i style.css är slöseri med tid, för det händer inte ett skit. Tror jag skulle kunna radera filen helt utan att det gjorde pip skillnad.

      I snutten ovan saknas ju helt något med li. Har försökt peta in li innanför klamrarna på lite olika fantasifulla sett men hittills inte snubblat över något som funkar. Orsaken är antagligen mina grundläggande brister i kodning. Jag kan klippa och klistra och testa mig fram men förstår inte riktigt vad de olika elementen är tänkt att åstakomma.

      Tack för all hjälp. Jag ska sova på saken och se om jag helt enkelt raderar arkivsidan. :-)


      • Sorry, jag glömde ju bort att spana in själva arkiv-templatet. DÄR kunde jag peta in lite lite li hit och dit och vips så såg det ju VETTIGT UT!!!

        Wow!

        Tack igen! Ska avhålla mig från alla vidare äventyr tills jag bytt tema…


        • Hehe, jo exakt, i arkiv templaten måste du ha <li> och </li> före och efter a-taggarna för att listan, ska bli en lista. Nu har du bara en ”listgrupp” men utan listinnehåll. (ul = ”unordered list” och li = ”list item”).

          Ta inte bort style.css för guds skull. Det är den filen som krävs för att WordPress överhuvud taget ska förstå att ditt tema är ett tema, sen ifall Atahualpa har gjort någon varient för att styles i den filen inte ska synas, låter konstigt, men så är det bland med ”användarvänliga” teman.

          Du får helt enkelt inse att ditt behov har höjts, och hitta ett tema som bättre passar dina behov, och när detta sen sker igen, så kommer det sluta med att du bygger ditt eget tema :)


  • 21. Pingback: Tomatsallad har nu ett arkiv - Tomatsallad

  • 22. Pingback: Utveckling vecka 2: Arkivsidan | Officiellt Henrik Blomgren

Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>