Logotyp vetenskapsrådet
logo_mobile

Banner i Wordpress

Här hittar du manualen för hur du lägger upp en banner på en webbplats i Wordpress.

För Wordpress använder vi tillägget WPFront Notification Bar.

WPFront Notification Bar hittas i admingränssnittet bland webbplatsens tillägg.

Simple Banner har ett kugghjul som ikon

Så här fungerar bannern

Notification Bar är ett WordPress-plugin som låter dig visa en banner längst upp eller längst ner på din webbsida. Bannern kommer att innehålla ett meddelande och en knapp (valfritt) som låter dig meddela besökaren om en ny funktion, nyheter eller varningar och hänvisa dem till en annan plats ifall så önskas.

Funktioner:

  • Visa ett meddelande med en knapp (valfritt)
  • Knappen öppnar en URL eller kör JavaScript
  • Placera bannern på toppen eller botten
  • Kan fixeras i position (Sticky Bar)
  • Ställ in vilken höjd du vill
  • Ställ in antalet sekunder innan bannern visas
  • Visa en stängningsknapp för besökaren
  • Ställ in antalet sekunder innan automatisk stängning
  • Färgerna är helt anpassningsbara
  • Visa en Återöppna-knapp
  • Välj de sidor/inlägg som du vill visa aviseringen
  • Välj de användarroller du vill ska visa aviseringen

Pluginets inställningar finns i admingränssnittet under Inställningar (Settings) -> Notification Bar när pluginet är aktiverat.

Inställningar

Display

Följande inställningar ska/kan göras under DISPLAY-alternativ, resterande vid behov och kunskap av pluginet.

Aktivera bannern på webbplatsen genom att klicka i enable.

Redaktören kan göra inställningar för att anpassa bannern

Välj placering Top / Bottom. Enligt vårt designsystem skall denna placeras i topp.

placering av banner

Välj om bannern ska vara placerad i topp under skrollning eller om den följer med sidan när du skrollar.

fixera bannern i topp eller vid scrollning.

Du kan välja om du vill att bannern ska dyka upp efter ett visst antal sekunder annars anger du värdet 0.

ställ in tid för banner

Lägg till en knappen som gör det valbart att klicka bort bannern. Detta är obligatoriskt.

knapp för klicka ur banner

Vill du att bannern ska fortsätta vara avstängd för användaren under resten av besöket EFTER det att besökaren har klickat bort den med krysset så ska denna kryssas i.

knapp för att stänga bannern

Under inställningar för Display på forskning.se:

I fältet Theme Sticky Selector anges nedanstående för att bannern ska lägga sig ovanför sidhuvudet.

#main-navigation

Content

Följande inställningar ska/kan göras under CONTENT-alternativ, resterande vid behov.

Text ska skrivs i det vanliga redaktörsvertyget wysiwyg. Här kan du också länka din text. Viktig är att om du står på ”Visuellt” läge och kan enbart använda dig av textformat ”Stycke”. Vi länkning markerar du den text som du vill ska vara en länk, klicka sedan på knappen som liknar en kedja och följ anvisningarna.

innehåll-banner

Filter

Följande inställningar ska/kan göras under FILTER-alternativ, resterande vid behov.

Vid användande av banner under tidsperiod så anges Start and End Date och ange datum och tid, annars välj alternativet None.

tidsperiod för banner

Du kan välja om bannern ska synas på alla eller ett urval av sidor. Alternativ för visning av banner finns enligt följande.

välj sida för banner

Alternativ All pages så syns banner på alla sidor.

Alternativ Only in landing page så syns bannern enbart på startsidan.

Alternativ Include in following pages kan du styra vilken sida, post och taxanomier den skall visas på. Leta reda på aktuell sida, post eller taxanomi du vill använda och klicka i. Man kan som alternativ 2 gå in på aktuell sida, post eller taxanomi i admin och välja den man vill använda genom att ta reda på vilket ID den använder. Genom att ställa muspekaren på aktuell sida, post eller taxanomi i admin så får du i nedre vänstra hörn upp ett ide (nummer) som i detta fall är 16190. Fyll i detta nummer i raden under Include in following pages och separera med kommatecken.

välj ut sidor med ID

Alternativ Exclude in following pages är motsatsen till ovan, du markerar istället vilka poster du INTE vill att bannern skall visas på.

Du kan också välja för vilka användare bannern skall visas för, välj bara ett allternativ.

välj användare

Flerspråkig webbplats med plugin Polylang

Har du en webbsida med flera språk så följer man anvisningarna ovan men för att få översättning på meddelandet får man i adminmenyn klicka in sig på Språk (Language) -> Översättningar (Translations).

Väl inne på Översättningar så får man välja WPFront Notification Bar i rullistan Visa alla grupper. Klicka på filter.

När du gjort alla inställningar klickar du på Spara ändringar i högerspalten. Nedan finns instruktioner till utvecklare som ställer in färg och CSS.

Color

Följande inställningar ska/kan göras under COLOR alternativ, resterande vid behov och kunskap av plugin.

Bar Color skall ha värden #000000 (Svart) i båda alternativen.

färg banner

Messege Text Color skall ha värde #ffffff (Vit).

textfärg banner

Close Button Color skall ha värden enligt följande #000000, #000000, #ffffff

kryssruta färg

CSS

Följande inställningar ska/kan göras under CSS alternativ, resterande vid behov och kunskap av plugin.

För att följa vårt designsystem så ska följande kod klistras in i denna ruta.

kod för CSS

Kod vi använder är följande och måste klistas in i rutan ovan för att inte skrivas över i eventuell uppdatering av pluginet.

#wpfront-notification-bar a {
color: #ffffff;
text-decoration: underline;
}

#wpfront-notification-bar p {
color: #ffffff;
}

#wpfront-notification-bar a:hover {
text-decoration: none;
}

.wpfront-notification-bar.wpfront-fixed {
display: block;
}

.wpfront-notification-bar table {
float: left;
}

.wpfront-notification-bar div.wpfront-div {
text-align: left;
}

.wpfront-notification-bar div.wpfront-message {
padding: 1rem 2.5rem 1rem 1.25rem;
line-height: 1.5;
width: 100%;
}

.wpfront-notification-bar div.wpfront-close {
top: 50%;
right: 1.25rem;
font-weight: bold;
line-height: 0px;
font-size: 20px;
font-weight: normal;
padding: 0;
border-radius: 0;
}

När alla dessa inställningar är inställda så klicka på Spara ändringar i högerspalten.