NSFF.no publiseringsguide

Om denne guiden

nsff.no ble i 2016 redesignet og satt opp på publiseringsløsningen WordPress med themet DIVI. Themet kommer med en sidebygger som enkelt lar de som publiserer opprette egen layout på en side – plassering av tekst, bilder og andre elementer – uten kunnskap om HTML. Her forklares bruken av denne sidebyggeren, samt en del andre mer generelle aspekter ved publisering på WordPress.

nsff.no nettstedskart

nsff.no består av tre hovedseksjoner:

1. Funksjoner og informasjon direkte knyttet til den enkeltes medlemskap, samt verktøy for de med tillitsverv i klubbene og i NSFF. Bildeinnlevering, resultatregistrering, klubbregister, medlemsregister. Her kreves innlogging, denne seksjonen nås via menyen helt i topp av siden (på blå bakgrunn).
2. Daterte nyhetsartikler om aktiviteter i regi av NSFF og de internasjonale organisasjonene NFFF, FIAP, UNICA.
3. Informasjonssider av mer statisk karakter, om organisasjonen. Disse kan nås uten innlogging. Medlemsfordeler, generelt om NM-konkurransene, organisasjonens kontaktopplysninger, historikk, vedtekter. Disse sidene er igjen delt inn i fem underseksjoner, med tema om medlemskap, om generell fotoaktivitet, om konkurranser, og om å være sosialt aktiv med hobbyen. En egen seksjon om NSFF som organisasjon er tilgjengelig via egen meny helt i toppen av nettsida.

Innlegg vs Sider

WordPress opererer med to metoder for publisering av innhold. Innlegg benyttes for nyhetsartikler og annet innhold av efemerisk/ tidsaktuell art, og sorteres kronologisk etter publiseringsdato. Sider benyttes for å presentere innhold av mer statisk karakter (informasjonssider, kontaktopplysninger, konkurranseregler, o.l.), og kan sorteres av forfatteren.

Merk: nsff.no er delt inn i fire sideseksjoner; se nettstedskartet. Alle nye sider skal opprettes som underside til en av disse fire.

Innlegg: https://nsff.no/wp-admin/edit.php
Sider: https://nsff.no/wp-admin/edit.php?post_type=page

Innlegg (nyhetsartikler)

Nye innlegg opprettes via https://nsff.no/wp-admin/edit.php eller via menypunkt + Legg til som er synlig i toppfeltet på hele nettstedet når man er logget inn.

Teksteditoren har to visningsmodus; Visuell og Tekst. Om man er noenlunde komfortabel med å forholde seg til enkel HTML (titler, bilder, lenker) er Tekstmodus å foretrekke. Dette fordi man vil se uønsket HTML-kode som kan ha sneket seg med via klipp og lim fra andre kilder, og fordi det er enklere å se hvilke tekstpartier som er formaterte f.eks. med bold eller kursivert font.

Ved bruk av Visuell modus og innliming av tekst fra annen kilde (Word-dokument, nettside) SKAL knappen Lim inn som tekst brukes. Dette for å «vaske» teksten for skjulte formateringskoder. Denne finnes i rad 2 i verktøyraden over teksteditoren, fold denne ut med knappen Vis/skjul verktøylinje dersom kun én rad vises.

Den enkelte bruker kan velge å skjule de overflødige boksene ved å klikke på fliken Visningsinnstillinger helt i toppen av et innleggs redigeringsvisning og ta vekk hake for disse. Dette vil så gjelde for alle innlegg for denne brukeren, men har ikke effekt for andre brukere.

DIVI Builder, en innføring

nsff.no er satt opp med en utvidelse – DIVI Builder – som gjør det enkelt å endre layout på en side uten å kunne HTML. Builderen brukes i liten grad på Innlegg, men alltid på Sider. For sider på nsff.no er det opprettet forhåndsdefinerte layouter som så er lagret i DIVI Builder sitt bibliotek. Disse predefinerte layouter kan tilpasses, og man kan også opprette nye layouter fra scratch.

Det opereres med seksjoner (blå), rader (grønn) og moduler (grå). Man setter inn en seksjon, deretter en rad, og bestemmer så hvor mange moduler denne skal ha i bredden (minimum 1, maksimum 4). Moduler, rader og seksjoner kan enkelt flyttes rundt på siden ved hjelp av dra-og-slipp.

Modulenes funksjon er forhåndsprogrammert. Mest brukt på nsff.no er modulene Tekst, Bilde og Galleri.

Forklaring av de ikoner som vises på fargefeltet til rad, kolonne og modul. OPPDATERT 2020: noen ikoner er endret, nye bilder kommer.

Hamburger (tre vertikale streker) TANNHJUL åpner elementet for redigering av utseende og innhold. 

Rute foran annen rute dupliserer elementet, med alt innhold. Innholdet kan deretter redigeres i duplikatet, uten at det får effekt på originalelementet.

Tredelt rute (forekommer kun på rad) lar en endre antall kolonner og/eller breddeforhold mellom i de enkelte kolonner, i denne raden.

X Søppelkasse sletter elementet. (Ctrl + Z lar deg angre, Cmd +Z på Mac.)

Sider

Når man skal opprette en SIDE på nsff.no skal DIVI Builder alltid benyttes. Denne aktiveres ved å klikke på lilla knapp merket Bruk DIVI Builder, inne i redigeringsvisning for siden.

Klikk på Last fra bibliotek i den lilla topprammen, deretter Legg til fra bibliotek. Her finnes en rekke forhåndsopprettede layouts – oppsett – for de ulike sider. I hovedregel er det Samleside eller Underside som skal benyttes.

Når en layout har lastet fra biblioteket må man tilpasse noen av enkeltelementene ved å redigere innholdet. Alle elementer har en ledetekst som indikerer om det skal redigeres eller ikke. Klikk på tannhjulikon for å åpne hvert av de elementer som skal redigeres.

Nedenfor vises layout for Underside, der elementene Innholdstekst og Sidekolonne må redigeres:

Siden «Finn din klubb» er underside til siden «Bli medlem». Siden «Arnold Hoddevik» er underside til siden «Kurs- og foredragsholdere», og under-underside til siden «Bli medlem».

Bilder

Bilder finnes under menypunktet Media, https://nsff.no/wp-admin/upload.php. Man kan laste opp bilder her på forhånd, eller “on the fly” når man oppretter eller redigerer et innlegg eller en side.

Bilders filnavn før opplasting må ikke inneholde særnorske tegn (æ, ø, å).

Størrelse og format

Det er begrensning på opplasting til server på 1MB. Bilder må derfor ofte skaleres før de publiseres. Bruk gjerne “Save for web” i Photoshop.

Maks bredde bør være 1920px, maks høyde på bilder i portrettorientering (stående) bør være 1280px. Noe større enn dette er lite hensiktsmessig for visning i nettleser.

Landskapsorientering (liggende format) i ratio 8:5 foretrekkes for et innleggs hovedbilde, kalt Framhevet bilde. Dette lastes opp via egen boks i høyrekolonnen på et innleggs redigeringsvisning og brukes 2 steder: som minibilde på forsiden samt som forhåndsvisningsbilde ved deling i sosiale medier.

Man kan også med fordel ta seg bryet med å tilpasse egne versjoner av Framhevet bilde nettopp for sosiale medier. Disse lastes opp via boksen Yoast SEO under innleggets teksteditor. Per mars 2017 er perfekt størrelse på bilde ment for deling på Facebook 1200 x 630 piksler. For Twitter er det 1024 x 512 piksler.

Metadata

Ved opplasting av bilder skal man fylle ut feltene for Tittel, Bildetekst og Alt-tekst. Dette har som hensikt å:

• lette arbeidet med å finne igjen bildet i mediabiblioteket senere
• opprette en bildetekst som vises under bildet i innlegg
• gjøre bildet tilgjengelig for spesialnettlesere og søkemotorer

Illustrasjonene nedenfor viser utfylling av felt for beskrivelse av bilder. Bildetittel genereres automatisk etter mønster fra filnavnet, men bør endres til noe mer intuitivt og beskrivende for senere søk. Endringer lagres automatisk.

Også innholdet i bunnfeltet på alle sider på nsff.no styres via Widgets. Igjen er det kun superbruker som har tilgang til detaljstyring av innholdet her.

Menyer

Toppmenyen / navigasjonen for nettstedet nsff.no redigeres her: https://nsff.no/wp-admin/nav-menus.php

Medlemsmeny er menyen som ligger helt øverst på nettstedet, med personlige lenker for enkeltmedlemmer pluss lenke til NSFF Magasin. Undersidemeny er menyen som ligger på linje med logoen.

Redigering av meny

Velg først hvilke av de to menyene du skal endre; Medlemsmeny eller Undersidemeny (1). Andre menyer som eventuelt finnes i listen skal ikke redigeres av andre enn superbrukere.

• Legge til: Bruk boksene i venstre side av menyredigeringen for å finne sider, innlegg, kategorier å legge til i menyen, ev. for å legge til egendefinerte lenker som menypunkt. (2)
• Slette: Klikk på pilen i boksen for hvert menypunkt for å folde ut boksen og få tilgang til felt for endring av tekst eller ev. sletting av menypunktet. (3)
• Endre rekkefølge: Dra og slipp menypunkt opp- og nedover i lista for å endre rekkefølge. (4)
• Endre hierarki: Dra og slipp sidelengs for å legge et menypunkt som underpunkt til et annet. (4) Dette vises i form av en nedtrekksmeny ute på nettstedet.

Det skal aldri være mer enn to nivå i menypunkt-hierarkiet.

Alle sider på nsff.no skal kunne nås med maksimalt 3 klikk. Ved behov for utfyllende informasjon på undersider benyttes ulike moduler som faner, trekkspill, eller lignende for å unngå mye scrolling. Det skal sjeldent eller aldri opprettes under-undersider, og det er derfor heller ikke behov for mer enn to menynivåer.

Yoast SEO

Yoast SEO er et verktøy for å sjekke at man har oppfylt krav for god synlighet i søkemotorer. Trafikklys indikerer hvordan man ligger an, og det gis gode forklaringer til scoren som oppnås. Både synlighet og lesbarhet vurderes. Semantisk korrekt tekst – inndelt i paragrafer med undertitler – belønnes, det gjør også korte setninger.

Vær oppmerksom på at ved bruk av DIVI Builder må siden publiseres før man får reell score (Yoast “ser” ikke innholdet i modulene).

Man bestemmer seg for et nøkkelord for artikkelen og så analyserer Yoast SEO ut fra dette. Nøkkelordet bør forekomme i innleggstittel og tidlig i selve teksten, og gjerne gjentas i en undertittel. Det er om å gjøre å finne nye nøkkelord for hvert innlegg, noe som kan være utfordrende f.eks. når man for fjerde år på rad skal skrive en invitasjon til NM i foto. Ingen umulighet, dog!

Bruk knappen Edit snippet og fyll deretter ut feltet Meta-beskrivelse for å spisse teksten som skal vises for innlegget på Google og andre søkemotorer. Man ser av fargeindikator når det er perfekt mengde tekst; oransje er for lite, grønn er perfekt, oransje med rød tekst indikerer for mye tekst. For lang tekst vil bli kuttet av ved forhåndsvisning hos Google, Bing etc.

På fanen for deling kan man spesifisere en egen tekst og et eget bilde for deling på Facebook og for deling på Twitter. Dette er ikke viktig dersom man har gjort jobben rett med Framhevet bilde og teksten under Meta-beskrivelse. Det er imidlertid egne mål for perfekt format på delingsbilder til sosiale medier, så det kan være verdt det å lage egne versjoner av Framhevet bilde for dette formålet.

Per mars 2017 er perfekt størrelse på bilde ment for deling på Facebook 1200 x 630 piksler. For Twitter er det 1024 x 512 piksler, hvilket vil si at disse er svært like i ratio.

Andre felt enn de som er nevnt over skal man ikke redigere eller fylle ut på Yoast SEO for nsff.no.