www.ubcup.no
www.ubcup.no 1 Generelt 1.1 1.2 1.3 Teknisk informasjon 5 Logge inn 8 Forskjell på sider og artikler 9 2 Sider 2.1 Struktur for sidene 11 3 Artikler 3.1 3.2 3.3 Legge inn artikkel 18 Bilder 21 Kategorier styrer layouten 24 4 Verktøy og innstillinger 4.1 Hva er verktøy og innstillinger? 26 5 Tabeller 5.1 5.2 5.3 5.4 Tabellverktøy 29 Sette en tabell inn i en artikkel 30 Lage en tabell 32 Sette inn link i tabell 35 6 Kart og høydekurver 6.1 6.2 Legge inn løype og høydekurve 39 Sette inn arenaadresse og kart 44 7 Menyeditor 7.1 7.2 7.3 Meny 49 Eksterne lenker i meny 52 Sider i menyeditoren 53
7.4 7.5 7.6 Kategorier 54 Menyer med undermenyer 55 Plassering i menyen 56
www.ubcup.no - 4 Generelt
Teknisk informasjon Hva nettsiden bygger på av teknologi. Publiseringsløsning Nettsiden er basert på den til enhver tid nyeste versjon av Wordpress. I mai 2012 vil det si versjon 3.3.2, som denne veiledningen baserer seg på. Versjon 3.4 er snart ferdig, og kan ta med seg visse endringer i layout osv. Prinsippet er dog gjerne det samme, så brukerveiledningen vil ikke oppdateres kontinuerlig før det er såpass store avvik at det blir vanskelig å forstå. Du vil altså kunne oppleve at denne veiledningen og nettsiden ser litt forskjellig ut. Du vil alltid finne oppdatert supportinformasjon på http://www.wordpress.org/support/ Tema for siden Nettsiden baserer seg på proversjonen av BranfordMagazine fra DerPrinz, en tysk utvikler av temaer. I mai 2012 har vi versjon av dette temaet. Det kommer ikke like hyppige oppdateringer av temaet som av Wordpress, og det er en mer omfattende jobb å legge inn ny versjon. Det vil www.ubcup.no - 5
derfor være sjeldnere oppdateringer av temaet enn det er av nettsiden. For oppsett av siden er det gode hjelpesider på http://www.der-prinz.com/support/ Webhotell Vårt webhotell er plassert hos domeneshop.no. Vi eier 2 domener: ubcup.no og united-bakeriescup.no Begge domener eies av Oslo Terrengsykkelklubb og har Jon Gravdal som juridisk kontakt og Ørnulf Pedersen som betalingskontakt. De håndteres fra min konto hos domeneshop.no. Webhotellet er knyttet til ubcup.no. united-bakeriescup.no rutes til ubcup.no. Det samme gjelder Nissancup.no. Nissancup.no eies av mitt firma siden vi ikke hadde organisasjonsnummer dengang dette ble opprettet. Jeg overfører det domenet til Oslo Terrengsykkelcup når det nærmer seg fornyelse, som skjer 31.01.2013. (Overføring medfører ny faktura, og det er ikke nødvendig før vi skal fornye) Dersom det er behov for FTP-tilgang til webhotellet så kan dette fås fra meg. For å komme til de gamle nissancup-sidene må man benytte adressen http://www.nissancup.no/old Administratorrettigheter til www.ubcup.no Vi har pr i dag 4 med administratorrettigheter til nettsiden, dvs tilgang til "alt", oppsett, nye brukere osv. Dersom noen mener det er vesentlige mangler i brukeroppsettet så gi meg beskjed. Disse 4 er: www.ubcup.no - 6
Meg; Bjørn Birkeland, bjoebirk@me.com Morten Holo, holo.morten@gmail.com Ståle Berg, staale.berg@skrye.no Rune Meisingset, runekm@gmail.com Redaktørrettigheter innehas pr i dag av: Svein Aalrust, saalrust@online.no Jon Gravdal, jon.gravdal@zid.no Per Langseth, per.langseth@skrye.no Rune Moseby, runar.moseby@statnett.no www.ubcup.no - 7
Logge inn Logge inn gjør du ved å gå til http://www.ubcup.no/wp-admin Legg inn brukernavn og passord www.ubcup.no - 8
Forskjell på sider og artikler Sider og artikler er to forskjellige ting. En side er tekst som er ment å være statisk og vare lenge, mens artikler er mer dynamisk. Sider For ubcup.no er sider brukt til løypebeskrivelser, arenabeskrivelser, reglement osv. Sidene er knyttet til menyer og bygger opp menylinjen på forsiden. Sider knyttet mot forskjellige typer layout avhengig av hva som er hensiktsmessig for den siden. Artikler For ubcup.no er artikler det som definerer forsiden på siden. Forsidens layot styres ved å knytte ariklene til kategorier. www.ubcup.no - 9
www.ubcup.no - 10 Sider
Struktur for sidene Prinsipp for sidene Arena og løypebeskrivelse For å etablere en løypebeskrivelse lager vi 4 sider, en foreldreside og 3 barn. Hovedsiden heter "dato - arenanavn" og kan redigeres år for år. Hver arenaside har underliggende løypesider knyttet til seg, en for hver løypelengde, totalt 3 er normalt i 2012. Navn på løyper: Kort løype Middels lang løype www.ubcup.no - 11
lang løype Disse sidene knyttes til menylinjen ved å bruke menyverktøyet du finner under utseende. Nødvendige filer for sidene knyttet til en arena med løypebeskrivelser For å bygge opp siden trenger vi: Excel-ark/CSV-fil med starttider. GPX-filer med høydekurver i utm-8 koding (som er std) Tilleggsinformasjon Bilde av arenaen Visning av hierarki for sider Her ser du hvordan sidene vises når de legges inn med ovenstående hierarki. Streken "." foran angir nivået for hiearkiet. Ingen strek sier toppnivå, en strek nivå 1, to streker nivå 2. Du finner denne oversikten under "Kontrollpanel - Sider - Alle sider". www.ubcup.no - 12
Arenaside For å legge til ny side bruker du valget "sider" og legg til ny. For Arenasider bruker vi følgende Sideattributter: 1. Forelder: Ritt 2. Mal: Featured page 3. Sortering - det som er riktig for sortering under "Ritt", dvs fra 1-9- Under selve tekstediteringen finner du "tilpassede felt". Disse bruker vi i featured page-malen. Tilpassete felt featured page For arenasiden bruker vi tre tilpassete felt som er statiske. featuredpageheadline featuredpagepic featuredpagetext Bildet må lastes inn på en ftp-server og du må ha tilgang til url-en som du limer inn. Bildet skaleres ikke, og må være (bxh) 300 x 200 px. www.ubcup.no - 13
Oppdeling av en featured page 1. Featuredpagepic - følger mal 2. Featuredpageheadline - følger mal 3. Featuredpagetext - følger mal 4. Widget - settes fra "utseende - widgets - featured page top right" 5. Overskrift og tekst fra editor 6. Widget - settes fra "utseende - widgets - featured page text widgets" 7. Arenakart satt inn fra editor. Ang lenker satt til høyre i featured page text widgets så legges disse inn under menyvalget "lenker" som ligger på kontrollpanelet. www.ubcup.no - 14
Ny side for løypebeskrivelse Løypebeskrivelser: 1. Forelder er arenaside 2. Bruker vi standardmal. 3. Rekkefølge angir hvordan undersidene sorteres under foreldresiden. Jeg har sortert, "kort løype 1", "middels løype 2", "lang løype 3" www.ubcup.no - 15
Side for løypebeskrivelse - ferdig 1. Tekst fra editor 2. Widget - satt inn fra "utseende - widgeter - regular sidebar" (deles med forsiden) 3. Resultat av WP GPX maps www.ubcup.no - 16
www.ubcup.no - 17 Artikler
Legge inn artikkel Hvordan legge inn artikkel Kontrollpanel Det første du kommer til etter å ha logget inn er kontrollpanelet. Ny artikkel For å legge til artikler: 1. Innlegg 2. Legg til nytt www.ubcup.no - 18
Skrive innlegg Det er spesielt fire ting som er viktig når du skal lage en artikkel: 1. Overskrift 2. Bildefil 3. Tekst 4. Kategori Overskrift og tekst er "ganske innlysende", men jeg forklarer om bilder og kategori i egne avsnitt. Trykk lagre når du er ferdig. www.ubcup.no - 19
Overskrift Forsøk å lage overskriftene moderat lange. Det ser bedre ut på forsiden. 4-5 ord er ofte nok. www.ubcup.no - 20
Bilder Vi må ha bilder med i en artikkel. Her er hvordan du legger inn bilder. Bilder Bilder legger seg på forsiden, tilpasser seg der artikkelen skal ligge og gjør forsiden mer levende. Alle artikler må derfor ha en illustrasjon i form av et bilde, en logo, et kart e.l. i form av en jpg eller png-fil. Å legge inn et bilde er enkelt. Plasser tekstmarkøren før all tekst og velg "Last opp/sett inn" www.ubcup.no - 21
Filopplasteren Når du trykker på last opp får du denne dialogboksen Bare trekk filen over "slipp filer her" www.ubcup.no - 22
Billedinformasjon Billedbehandleren 1. Tittel er som regel billedfilens navn 2. Alternativ tekst: Vises i nettlesere som ikke kan vise bildet. Bruk gjerne tittel på bildet. 3. Billedtekst er teksten som dukker opp under bildet. Kan være f.eks foto: navn på fotograf eller hvor bildet er tatt, hvem som er på e.l. 4. Beskrivelse: Dette er for internt bruk. Frivillig å bruke 5. Stille opp: Velg venstre. 6. Størrelse: Avhenger av hvor stor fil du har lastet opp. Bilder bør ha oppløsning mellom 300 og 1000 pixler i bredden. Programmet skalerer ned til behov, så vi trenger ikke å dra for store filer ut til brukeren. 7. Når du er ferdig: Trykk "sett inn i innlegg" www.ubcup.no - 23
Kategorier styrer layouten Bruk av kategorier i layouten Kategorier styrer layouten Kategoriene styrer layouten på forsiden. Kategorien "hovedoppslag" viser artikler der jeg har markert hovedoppslag. Nyheter kommer på venstre side og Alt annet vil vises i midten. Valg av kategorier Kategorier finner du på høyre side når du skriver en artikkel. Her finner du de til enhver tid aktive kategoriene. De endres sjelden. www.ubcup.no - 24
www.ubcup.no - 25 Verktøy og innstillinger
Hva er verktøy og innstillinger? Verktøy og innstillinger er hjelpemidler for å putte ting inn i sider og artikler. 1. Vi bruker et verktøy for tabeller og moduler som legger seg under innstillinger for å lage kart. 2. Vi har to kartmoduler. Den ene er mer elegang enn den andre, men for øyeblikket virker ikke den jeg liker best så godt, så inntil det er løst bruker vi to. 3. Vi bruker også en innstilling som heter wptouch for å tilpasse siden til smarttelefoner. Denne går jeg ikke gjennom her, bare nevner at den finnes. Tabellverktøy Du finner tabellverktøyet under verktøy www.ubcup.no - 26
Innstillinger for kart Du finner kartverktøyet for kartvisning og kurver under innstillinger. Det andre verktøyet bruker vi for arena. Det finner du under artikkeleditoren. www.ubcup.no - 27
www.ubcup.no - 28 Tabeller
Tabellverktøy For å lage tabeller bruker vi tabellverktøyet Tabellverktøy Du finner tabellverktøyet ved å gå inn på "Verktøy" og "WP-table Reloaded". Dette verktøyet lager gjenbrukbare tabeller som kan importeres fra en CSV-fil. Fordelen med dette er at du kan bruke samme tabell i alle artikler om et tema, og dersom det er endringer så skjer endringen over alt. Du har altså ett sted å oppdatere tabellinformasjon, og oppdaterer over alt. www.ubcup.no - 29
Sette en tabell inn i en artikkel Sette en tabell inn i en artikkel Gå til verktøyet WP-table reloaded. Hold muspekeren over tabellen du ønsker å bruke. Trykk på shortcode Shortcode Du får opp denne dialogboksen. Kopier denne teksten "[table id=6 /] (eller den teksten du får opp). Legge tabell i artikkel eller side Tabellen kan du legge inn i en artikkel eller side mens du skriver den eller etterpå. Side og artikkel legges inn på samme måten. Når du er i artikkeleditoren: www.ubcup.no - 30
1. Velg visuell 2. kopier inn "shortcode" der du vil at artikkelen skal vises. Ferdig resultat Koden [table id=5 /] gir deg dette resultatet gitt at du har innstillingene beskrevet tidligere www.ubcup.no - 31
Lage en tabell Gå til tabellverktøyet Du finner det under verktøy - wp-table reloaded. 1. Verktøy for å lage nye tabeller 2. Eksisterende tabeller Importer csv-fil Den enkleste måten å etablere eller redigere en tabell på er å lage det i Excel, eksportere til en csv (kommadelt fil) og importere denne til tabellverktøyet. Når du er i verktøyet velger du "import table" Importverktøyet 1. Velg input. Det enkleste er en csv, men du kan også hente inn en tabell som ligger på en annen nettside. 2. Legg til eller erstatt en tabell? Her velger du om du skal lage ny tabell eller om du skal www.ubcup.no - 32
erstatte en eksistrende. Velger du å erstatte så vil du få en liste over eksistrende tabeller og du velger den du skal erstatte. 3. Her velger du om du skal laste opp en fil eller om du har andre metoder, f.eks hente fra en annen nettside. Mest vanlig er å laste opp en tabell. 4. Velg fil på din maskin. Trykk på "velg fil" for å velge din lokale fil. Må være laget som en csv fil i et tekstformat. Pass på at ikke exel lager mange ekstra ";". Disse vil synes som ekstremt mange unødige kolonner eller linjer. Du kan åpne filen i en teksteditor før du importerer og fjerne disse i forkant. Det enkleste er å bruke søk/erstatt og søke etter ;; og erstatte med ; nok ganger til at du bare har en og en ; Tabellinformasjon Her legger du tittel og tabellinformasjon du vil ha med på nettsiden vedr tabellen. Kan være lenger enn dette. www.ubcup.no - 33
Utseende for tabellen Huk av slik som du ser her. Det gir et likt visuelt inntrykk. Du finner mer informasjon under denne tabellen, men det bruker ikke vi. Det under aktiveres med å velge "use JavaScript library". Ta vekk hake her. Verktøy for tabellutseende Her kan du velge verktøy for å justere på tabellenes utseende. Du kan slå sammen celler, legge til rader, legge til kolonner, sortere tabell osv. Husk å oppdatere alt du gjør Husk å lagre for hver ting du gjør. 1. Når du bare endrer på tabellen så velger du "update changes". 2. Når du er ferdig: Save and go back www.ubcup.no - 34
Sette inn link i tabell For å legge inn link til en side i en celle Finn adressen du skal linke til Kopier adressen fra adressefeltet Verktøy for å legge inn link Velg insert link www.ubcup.no - 35
Dialogboks for link Her kopierer du inn linken du skal sende folk til. Trykk "ok" når du er ferdig Beskrivende tekst Skriv inn tekst man skal klikke på Ferdig kode Trykk windows:ctrl-c eller mac: cmd-c for å kopiere ut teksten. Første celle du klikker i får denne teksten dyttet inn i cellen. Vi skal ha mange like celler, så det er gunstig å bare kunne kopiere inn teksten. www.ubcup.no - 36
Kopier inn teksten i "løypecelle" Kopier inn teksten i celle for løype. Husk å lage ny tekst for hver løypetype. www.ubcup.no - 37
www.ubcup.no - 38 Kart og høydekurver
Legge inn løype og høydekurve For å legge inn kart og høydekurver i en side eller en artikkel. Forberedelser: Du må ha tilgang på gpx-filene du trenger lagret på din egen maskin. Gi filene navn uten mellomrom, f.eks LangsetLokkaKort.gpx eller Langsetlokka_kort.gpx Dersom du får vansker med å vise filen må du sjekke at den er UTM-8 kodet. (Det er standard, så om du ikke skjønner hva jeg skriver her så ikke bry det om det.) Gå til WP GPX Maps Du finner det under innstillinger. Verktøyet viser fortløpende tidligere innlastete filer. www.ubcup.no - 39
Last opp gpx-fil 1. Velg "Tracks" (standardvalget) 2. Trykk på velg fil Dialogboks for filvalg Velg ønsket gpx-fil. Du kan navigere deg rundt på maskinen. Kopier shortcode Kopier short code ved å trykke ctrl/cmd c (avhengig av operativsystem du bruker) Feilkilde: Denne kan noen ganger bli feil, dvs at du får med mer kode enn du skal. Dersom du er i visuell modus når du limer inn kan du få med overskytende kode når du limer inn. Lim inn i html, eller gå til html etter å ha limt inn og fjern overskytende koder. www.ubcup.no - 40
Kode for en artikkel med kart og høydekurve En artikkel ser sånn ut i visuell visning. Her ligger det også en link til siden som viser arenainformasjon for Gullhaug. Samme artikkel i html Her ser du lik artikkel i html-visning. Her ligger det også en link til siden som viser arenainformasjon for Gullhaug. www.ubcup.no - 41
Artikkel med for mye kode Her ser du koden som kan bli med ved å kopiere ut short code direkte og legge inn i visuell. Legger du den inn i HTML-visning kommer ikke koden med. Fjern evnt all kode fra og med  : og ta alt som ikke er [sgpx osv til neste] Fjern også koden </td> og under til </table> www.ubcup.no - 42
Ferdig resultat Ovenstående kode gir deg denne siden. www.ubcup.no - 43
Sette inn arenaadresse og kart For å sette inn arenaadressen bruker vi en annen kartmodul enn så lenge enn den vi bruker til gpx. Her kunne vi valgt å legge inn googlekode direkte, og der fått inn veivisning. Grunnen til at jeg bruker en annen modul er at denne har noen bra egenskaper og er den jeg helst vil bruke for kart og elevasjon, men enn så lenge er det noen problemer med det. Finn kart på Google maps Skriv inn adresse, by, land. Du vil trolig finne den før du har skrevet alt. Trykk på lenke-symbol når du er ferdig. Kopier kode Marker den vanlige koden, det er standarvalget. www.ubcup.no - 44
Legg inn som lenke Skriv inn tekst. Marker adressen. Velg lenkesymbolet i menyen for editor mens teksten er markert, og deretter kopierer du inn adressen der det står URL. Trykk på "Legg til lenke" når du er klar Kart for å vise Arenaens plassering Velg kartsymbolet Legg inn adressen Huk av for "Marker" www.ubcup.no - 45
Sett str for modulen Sett str for modulen: Bredde 600 Høyde 400 Velg zoomnivå Velg "map" og sett riktig zoom-nivå. 11 eller 12 er bra verdier. Glemmer du denne kan du skrive det rett inn i koden ved å føye til,z="11" rett før ] i koden. www.ubcup.no - 46
Ferdig editert artikkel Husk å legge til riktig tabell. Slik ser det ut med lenke, kart og tabell. De forskjellige kodene er angitt www.ubcup.no - 47
www.ubcup.no - 48 Menyeditor
Meny Navigasjonsmenyen styres av wordpress meny-system. Navigasjonsmenyen er den som ligger rett under logoen. Vi bruker forskjellige valg for å bygge opp vår meny. Pr mai 2012 har vi fra venstre til høyre: 1. Hjem - går direkte til forsiden og er en Tilpasset lenke 2. Ritt - viser statiske sider 3. Reglement - bruker kategori for artikler for å vise en samlet oversikt over reglement. 4. Påmelding - en ekstern lenke, laget ved å bruke Tilpasset lenke 5. Resultater - viser til de gamle sidene, laget ved å bruke Tilpasset lenke Menyens plassering på siden Menyen ligger rett under logoen. Vi har flere nivåer i tillegg til at vi har 1. Overordnet nivå. Brukes for alle menyene. Kun meny for ritt har flere nivåer. 2. Nivå for arena osv 3. Nivå for løyper www.ubcup.no - 49
Menyeditor Finnes under "Utseende - menyer" Her er en overordnet oversikt over menyeditoren. Man justerer nivå ved å trekke boksene horisontalt. Navn på menyen Wordpress støtter to menyer. Vi bruker bare en. Dette finner vi igjen i oppsett for temaet Vi kan lage flere menysamlinger enn disse to. Velg med nedtrekksmeny og trykk lagre når du er fornøyd. Dette må hentes inn igjen i oppsett for temaet ved evnt endring av menysamling. Endringer i menysamlingen topp-meny trenger ingen justering her. www.ubcup.no - 50
Menyvalg i temaoppsettet Aktive menyer gjøres i temaoppsettet som finnes under Utseende. Vi bruker bare primary meny. www.ubcup.no - 51
Eksterne lenker i meny Eksterne lenker i meny Ny ekstern lenke lages i boksen "tilpassede lenker". Denne finnes på venstre side i menyeditoren. Legg inn lenke og merkelapp, dvs det du vil den skal hete i menyen. Ekstern lenke i menyeditoren Slik ser en ekstern lenke ut når den er etablert i menyen. www.ubcup.no - 52
Sider i menyeditoren Hvordan bruke sider i menyeditoren Sider i menyeditoren Her finner du sider etter at du har opprettet dem. Den enkleste måten å finne riktige sider på er å velge fanen "vis alle". Når du har huket av de du vil ha med så velger du "legg til i meny" www.ubcup.no - 53
Kategorier Kategorier For å legge inn kategorier i menyvalget så går du til editoren kalt "Kategorier". Huk av og velg "legg i meny". Alle menyvalg behandles likt når de er i menyhierarkiet. www.ubcup.no - 54
Menyer med undermenyer Menyer med undermenyer 1. Øverste meny, vises i den horisontale menyen 2. Arenaer, vises i nedtrekksmenyen man får når man trykker på Ritt 2012. 3. Løypebeskrivelser, vises som utfall når muspekeren trekkes over aktuell arena. Menyer slik de vises på nettsiden Menyen over slik den ser ut når du ser på nettsiden. 1. Øverste meny, vises i den horisontale menyen 2. Arenaer, vises i nedtrekksmenyen man får når man trykker på Ritt 2012. 3. Løypebeskrivelser, vises som utfall når muspekeren trekkes over aktuell arena. www.ubcup.no - 55
Plassering i menyen Flytting av objekter i menyen. Overliggende objekter kommer til venster for eller over underliggende objekter, avhengig av hvilket nivå de ligger på. Plassering i menyen Menyboksen legger seg først nederst i menyeditoren. For å plassere denne riktig peker og klikker du på den og trekker den til riktig plass. Kan trekkes vertikalt og horisontalt. www.ubcup.no - 56
Plassering før den trekkes på riktig plass Her er menyen slik den blir plassert før justering. Meny på vei til riktig plass Her er menyen trukket opp, og du ser av markeringen av den for øyeblikket er registrert på samme nivå som langsetløkka arena, men på vei til å flyttes til riktig nivå. www.ubcup.no - 57
Meny lagt på riktig plass Her er lang løype for Langsetløkka plassert oppover og innover i hierarkiet og vil dukke opp på riktig sted i menyen. www.ubcup.no - 58
Meny plassert riktig Her er menyen slik den ser ut etter flytting. www.ubcup.no - 59