Hur man lägger till en nedräkningstimer i WordPress

En nedräkningstimer kan vara ett kraftfullt verktyg för att skapa intresse och uppmärksamhet kring ett kommande evenemang, produktlansering, eller en specialkampanj. WordPress gör det enkelt att lägga till en sådan timer på din webbplats. I denna guide kommer vi att gå igenom olika metoder för att lägga till en nedräkningstimer i WordPress, från plugins till anpassad kod.

Varför använda en nedräkningstimer?

Innan vi går in på hur man lägger till en nedräkningstimer, låt oss förstå varför det är en bra idé.

1. Skapa intresse: En nedräkningstimer skapar en känsla av förväntan och spänning kring ett kommande evenemang eller lansering.
2. Öka konverteringar: En timer kan öka konverteringar genom att skapa en känsla av brådska.
3. Förbättrad användarupplevelse: En tydlig nedräkning informerar dina besökare om viktiga datum och tider.
4. Öka engagemang: Timers kan hålla dina besökare engagerade och uppmärksamma på kommande händelser.

Använda plugins för att lägga till en nedräkningstimer

Ett av de enklaste sätten att lägga till en nedräkningstimer i WordPress är att använda ett plugin. Här är några av de mest populära alternativen:

Countdown Timer Ultimate

Countdown Timer Ultimate är ett populärt och användarvänligt plugin som gör det enkelt att skapa och anpassa nedräkningstimrar.

1. Installera och aktivera pluginet:
   • Gå till Plugins > Lägg till nytt i WordPress-adminpanelen.
   • Sök efter ”Countdown Timer Ultimate” och klicka på ”Installera nu”.
   • Aktivera pluginet när installationen är klar.
2. Skapa en ny timer:
   • Gå till Countdown Timer > Add Timer.
   • Ge din timer ett namn och ställ in datum och tid för nedräkningen.
3. Anpassa utseendet:
   • Välj layout, färger och stilar för att matcha din webbplats design.
   • Klicka på ”Save Timer” för att spara dina inställningar.
4. Infoga timern på din webbplats:
   • Kopiera kortkoden som genereras av pluginet.
   • Klistra in kortkoden på den sida eller det inlägg där du vill visa timern.

Evergreen Countdown Timer

Evergreen Countdown Timer är ett annat kraftfullt plugin som låter dig skapa både standard- och ”evergreen” (återkommande) timers.

1. Installera och aktivera pluginet:
   • Gå till Plugins > Lägg till nytt i WordPress-adminpanelen.
   • Sök efter ”Evergreen Countdown Timer” och klicka på ”Installera nu”.
   • Aktivera pluginet när installationen är klar.
2. Skapa en ny timer:
   • Gå till Evergreen Countdown > Add New Timer.
   • Välj om du vill skapa en standard- eller evergreen-timer och ställ in datum och tid.
3. Anpassa timern:
   • Välj design och anpassa färger och typsnitt.
   • Klicka på ”Save Timer” för att spara dina inställningar.
4. Infoga timern på din webbplats:
   • Kopiera kortkoden och klistra in den på den sida eller det inlägg där du vill visa timern.

Använda anpassad kod för att lägga till en nedräkningstimer

Om du föredrar att inte använda ett plugin kan du också lägga till en nedräkningstimer med hjälp av anpassad HTML, CSS och JavaScript.

• Skapa en ny sida eller ett nytt inlägg:
  • Gå till Sidor > Lägg till ny eller Inlägg > Lägg till nytt i WordPress-adminpanelen.
  • Ge sidan eller inlägget ett namn och publicera det.
• Lägg till HTML:
  • Redigera sidan eller inlägget och växla till textredigeraren (HTML-läge).
  • Lägg till följande HTML-kod där du vill att timern ska visas:

<div id="countdown">
<div>
<span id="days"></span>
<div>Dagar</div>
</div>
<div>
<span id="hours"></span>
<div>Timmar</div>
</div>
<div>
<span id="minutes"></span>
<div>Minuter</div>
</div>
<div>
<span id="seconds"></span>
<div>Sekunder</div>
</div>
</div>

• Lägg till CSS:
  • Lägg till följande CSS i din temas stilmall (style.css) eller via Anpassa > Extra CSS i WordPress-adminpanelen:

#countdown {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 20px;
}

#countdown div {
margin: 0 10px;
}

#countdown span {
display: block;
font-size: 2em;
}

• Lägg till JavaScript:
  • Lägg till följande JavaScript i din temas funktioner (functions.php) eller genom att använda en plugin för anpassade skript:

<script>
// Sätt datum och tid för nedräkningen
var countDownDate = new Date("Dec 31, 2023 23:59:59").getTime();

// Uppdatera nedräkningen varje sekund
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;

var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;

if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
</script>

• Publicera sidan eller inlägget:
  • Uppdatera och publicera sidan eller inlägget för att se nedräkningstimern i aktion.

Slutsats

Att lägga till en nedräkningstimer i WordPress kan enkelt göras med hjälp av plugins eller anpassad kod. Plugins som Countdown Timer Ultimate och Evergreen Countdown Timer erbjuder användarvänliga alternativ med många anpassningsmöjligheter. För de som föredrar en mer anpassad lösning kan HTML, CSS och JavaScript användas för att skapa en nedräkningstimer från grunden. Följ stegen i denna guide för att skapa en engagerande nedräkningstimer som passar dina behov och förbättrar användarupplevelsen på din webbplats.