Skapa en tidslinje med årets kommentarer

Inför nyår tänkte jag ge lite cred till alla som kommenterat på vd-blogg.se (som kör Wordpress) under året. Efter lite trixande i php och css så blev det en tidslinje, lite Facebook-style. Jag utgick från Harry Roberts css-kod och Kyle Eslicks php-kod. Den går även att använda för att visa senaste kommentarer.

Resultatet syns nedan och hela tidslinjen med kommentarer går att se här.

Guide till tidslinje med kommentarer

Nu när den är klar tror jag tidslinjen är rätt lätt att lägga in för den som vill. Den bygger på tre delar:

• CSS-kod
• En page template
• En vanlig sida

Jag är ingen kodare och gör inga som helst anspråk på att det här tekniskt skulle vara någon mirakel-lösning. Men den funkar, i alla fall i Chrome och Firefox (i Internet Explorer ser den inte lika bra ut, men fungerar). 

CSS-koden

CSS styr utseendet på tidslinjen. Gå till Utseende - Redigerare - CSS (css-filen kan ha lite olika namn med slutar alltid på .css). Lägg in nedanstående kod längst ner i css-filen och spara. 

#timeline{

  background:url(http://dummyimage.com/2x1/D6DCE9/D6DCE9.gif) top center repeat-y;

  width:820px;

  padding:50px 0;

  margin:0 auto 50px auto;

  overflow:hidden;

  list-style:none;

  position:relative;

  font-family:sans-serif;

  font-size:12px;

  line-height:150%; 

}

#timeline:before, /* The dot */

#timeline:after{ /* The arrow */

  content:" ";

  width:10px;

  height:10px;

  display:block;

  background:#D6DCE9;

  position:absolute;

  top:0;

  left:50%;

  margin-left:-5px;

  -moz-border-radius:20px;

  -webkit-border-radius:20px;

  border-radius:20px;

}

#timeline:after{

  content:" ";

  width:10px;

  height:10px;

  display:block;

  background:#D6DCE9;

  left:50%;

  top:auto;

  bottom:0px;

  margin-left:-5px;

  -moz-border-radius:20px;

  -webkit-border-radius:20px;

  border-radius:20px;

}

#timeline li:before,

#timeline li:after{

  content:" ";

  width:71px;

  height:2px;

  background:#D6DCE9;

  position:absolute;

  left:100%;

  top:50%;

  background:-moz-linear-gradient(0,#92A3C7,#D6DCE9);

  background:-webkit-gradient(linear,left top,right top,from(#92A3C7),to(#D6DCE9));

}

#timeline li:nth-of-type(even){

  float:right;

  text-align:left;

}

#timeline li:nth-of-type(even):after{ /* Move branches */

  background:-moz-linear-gradient(0,#D6DCE9,#92A3C7);

  background:-webkit-gradient(linear,left top,right top,from(#D6DCE9),to(#92A3C7));

  left:auto;

  right:100%;

}

#timeline li:nth-of-type(odd),

#timeline li:nth-of-type(even){

  margin:-10px 0 0 0;

}

#timeline li{

  position:relative;

  clear:both;

  float:left;

  width:318px;

  padding:10px;

  background:#f2f4f8;

  border:1px solid #92A3C7;

  text-align:left;

  margin:0 0 10px 0;

  -moz-border-radius:2px;

  -webkit-border-radius:2px;

  border-radius:2px;

  -moz-box-shadow:0 1px #fff inset;

  -webkit-box-shadow:0 1px #fff inset;

  box-shadow:0 1px #fff inset;

}

#timeline a {

cursor: pointer;

color: #3b5998;

text-decoration: none;

font-weight:bold;

}

#timeline a:hover{

a:hover; 

text-decoration: underline;

}

#timeline img.avatar{

left: 8;

position: absolute;

}

#timeline p{

  padding: 0 0 0 80px; 

  position: relative;

}

Page Template

Det är i sidmallen (page template) som själva funktionen ligger.

Ladda ner den här filen och lägg upp den i mappen för ditt tema i Wordpress (wp-content - themes - det tema du använder). Om du inte har en ftp-klient för att ladda upp filer, kan du använda WP Easy Uploader.

Not: Jag använder Twenty-Ten och där fungerar det bra. Det kan dock förekomma skillnader mellan teman som gör att allt inte fungerar perfekt om du använder något annat än Twenty-Ten. Men det är bara att prova ;)

Vanlig sida

Sidan är där din tidslinje med kommentarer kommer att visas. Det är ännu enklare än de föregående stegen. Gå till Sidor -> Skapa ny. Ange rubrik och eventuell text för sidan. Under "Sidattribut" till höger väljer du mallen "Kommentarer i tidslinje". Publicera sidan.

Voilà!

Så, nu ska det funka! Länka till mig om du använder tidslinjen. Och lämna gärna en kommentar så jag vet, det är alltid kul! I övrigt fritt fram! Utveckla gärna vidare!

Om du istället vill visa senaste kommentarer går du till Utseende - Redigerare - Kommentarer i tidslinje. Leta efter DESC LIMIT 10000 och ändra siffran till det antal kommentarer du vill visa. Leta efter AND comment_date_gmt >= '2011-01-01' AND comment_date_gmt <= '2011-12-31'  och ta bort den delen helt.