Forestil dig at sætte en pæn, funktionel review bar ind i WordPress på 5 minutter. Ingen kode. Gratis med Superb Addons. En review bar viser stjerner, procent eller en farvet progress bar. Besøgende forstår hurtigt kvaliteten af dit indhold eller produkt.
En review bar handler ikke kun om udseende. Den øger troværdighed og får flere til at klikke rundt på siden. Sider med tydelige ratings får ofte højere klikrater. Mål effekten i Google Analytics 4 ved at sammenligne klik før og efter, så ser du forskellen sort på hvidt.
Guiden starter med den hurtige plugin-løsning via Superb Addons, som giver en klar fordel uden bøvl. Vil du have fuld kontrol over design og performance, kommer der et simpelt HTML/CSS-snippet til manuel tilpasning. Til sidst gennemgår vi, hvordan du håndterer gæsteanmeldelser og udvider listen over anmeldelser for mere engagement.
Sådan bruger du Superb Addons til en gratis review og rating bar
Start med at finde plugin’et. Gå til WordPress-dashboardet, vælg Plugins → Tilføj nyt, og søg efter “Superb Addons”. Tryk Installer nu, og aktiver bagefter. Når det er gjort, får du en ny blok i Gutenberg kaldet “Review/Rating Bar”. Søg efter “Superb Review Bar”, når du vil indsætte den.
Når blokken ligger på siden eller i indlægget, sæt den op med det samme. Giv den en titel som “Ydelse”. Vælg en score, fx 4,5 ud af 5 eller 90%. Vælg en farve, der matcher designet. Tilføj flere kriterier som Design, Support eller Pris ved at tilføje ekstra linjer. Sortér rækkefølgen, slå animationer til eller fra, og vælg visning som stjerner eller procent. Det går hurtigt at finpudse.
Vil du ramme temaets stil, så brug Globale stilarter under Farver og justér farverne derfra. Det giver et ensartet udtryk og undgår hårde kontraster. Superb Addons fylder lidt. CSS- og JS-filerne er små, ofte under 20 KB, fordi der kun indlæses det, blokken behøver. Tjek hastigheden i PageSpeed Insights og se især på LCP (Largest Contentful Paint) og CLS (Cumulative Layout Shift). Ser tallene fornuftige ud, har du en pæn rating bar, der ikke gør siden tung.
Avanceret rating bar med HTML og CSS samt gæsteanmeldelser og metode
Vil du styre din rating bar i WordPress uden plugins? Brug ren HTML og CSS. Indsæt HTML i en HTML-blok på indlæg eller side, og læg CSS under Tilpasser → Yderligere CSS.
“`html
Ydelse
4.5/5
“`
css .rating { display: grid; grid-template-columns: 1fr 3fr auto; gap: .5rem; align-items: center; margin: .5rem 0; } .bar { background: #eee; border-radius: 6px; overflow: hidden; height:10px; } .bar span { display:block; height:100%; background:#00b37e; transition: width .6s ease; } .score { font-weight:600; }
Kopiér komponenten til flere kriterier som Pris, Support eller Design, og justér bredden på span for at vise din score. Skift farver via CSS-variabler, så alt matcher dit tema.
Til gæsteanmeldelser giver WordPress’ Kommentarer en enkel løsning. Et kontaktformular-plugin som WP-Forms eller Contact Form 7 indsamler navn, score (1 – 5) og kort tekst. Vis anmeldelser i en liste under dine vurderinger, sorteret nyeste først for frisk feedback. Beregn gennemsnittet automatisk med shortcode på serveren eller lidt JavaScript i browseren.
js const reviews = document.querySelectorAll('.guest .score'); const count = reviews.length || 1; // undgå division med nul const overallAvg = [...reviews].reduce((a, el) => a + Number(el.dataset.val), 0) / count; document.querySelector('.avg').textContent = overallAvg.toFixed(2); // et avg-element skal findes i markup'en
Det giver besøgende et hurtigt overblik over den samlede bedømmelse fra rigtige brugere. For troværdighedens skyld giver en “Om mit vurderingssystem”-sektion mening. Beskriv vægtning (fx Ydelse tæller mest), skala (1 – 5 stjerner) og datakilder, egen test plus brugerfeedback. Link til sektionen øverst via anker (#mit-vurderingssystem). Det gør alt mere transparent og styrker tilliden hos dine læsere.
Det handler om balance mellem nemhed og frihed. Vil du hurtigt have en flot review bar uden besvær, så brug Superb Addons-plugin’et gennemgået tidligere. Foretrækker du minimal belastning og fuld designfrihed, så vælg HTML/CSS plus manuelt opsatte gæsteanmeldelser.
Begge veje giver dine besøgende klar info om kvaliteten, og det er værdifuldt for enhver side.