Tilpassning av Wordpress - Enterprise Theme

Transkript

1 Del 2 - Tilpassning Tilpassning av Wordpress - Enterprise Theme Del 1 var en gjennomgang av hvordan man setter opp det tekniske som kreves for å kjøre en Wordpress webside/blogg. Installere webserver (Apache) og database server (mysql) på lokal maskin. Lage en mysql-bruker og en tom database. Laste ned alle php-filene til Wordpress og starte Wordpress slik at databasen får nødvendige tabeller og innhold. Del 2 er en introduksjon til hvordan man tilpasser Wordpress til den funksjonaliteten og det utseende som man ønsker. Det er vanlig å velge et tema som er i nærheten av den strukturen og oppdelingen man ønsker. Så gjør man de endringer som er nødvendige. Her er noen av endringene som det er naturlig å gjøre: 1. Aktivere nytt tema og gjøre noen innstillinger 2. Bytte banner og bakgrunnsgrafikk 3. Menylinje (farger og grafikk) 4. Widget-områder på førstesiden 5. Menystruktur 6. Opplasting av bilder (Posts / Pages) 7. Installere ønskede plugins og widgets 8. Diverse 1. Aktivere nytt tema: Last ned nytt tema og lagre det under Application/mamp/2medd/wp-content/themes/ (Enterprise) Velg Apperance -->Themes i menyen. Velg Activate på det temaet du vil bruke. Themaene fra Studiopress.com består av to deler. Det er et rammeverk som kalles Genesis som må ligge i Theme-mappen, og så er det et child thema som må aktiveres. Vi skal bruke child-temaet Enterprise. Innstillinger i Dashboard: Genesis --> Theme settings: a. Endre Dynamic text til Image logo under General Settings. b. Fjerne alle kryss under Breadcrumbs hvis du ikke ønsker å vise You are here... på alle sidene. c. Fjerne Home link og velg Custom Nav Menu under Primary Navigation hvis du ønsker å bygge opp menye manuelt. Side 1

2 2. Bytte banner og bakgrunnsgrafikk: Banner I Enterprise temaet så ligger deler av banneret i en fil som heter logo.png. Lag et nytt bilde i Photoshop med en bredde på 960 og en høyde på ca Lagre banneret som logo.png i Image-mappen (overskriv det som ligger der fra før). I stylesheet-filen style.css på ca. linje 151 endres høyden på logoen til 200 og bredden til 960 slik at hele logoen blir synlig. Bakgrunnsmønster Hvis man ønsker et møster på bakgrunnen kan man lage en png-fil som legges i image-mappen, og referer til den i body-taggen i stylesheet-filen. Selv om mønsteret er lite og dekker et lite område så vil det automatisk repeteres til høyre og nedover slik at det dekker hele browservinduet. Mønsteret kan godt være gjennomsiktig slik at man ser bakgrunnsfargen på websiden. For at bakgrunnen skal være synlig på siden av websiden må man sette en begrenset bredde på Wrap (960 eller litt mer...) Bakgrunnsgrafikk uten eget banner Man kan også velge å fjerne hele banneret slik at bakgrunnen blir synlig. Da kan man lage banner-designet på bakgrunnnen istedenfor. Da må man fjerne logoen i stylesheet-filen (kommentere ut koden på linje 149). /* background: url(images/logo.png) left top no-repeat; */ For å få en åpning på toppen over websiden må headeren gjøres høyere. Sett høyden til 200..header-image #title-area... { float: left; width: 960px; height: 200px;... body { background: #d0b988 url(images/bg.png); width: 980px;... #wrap { width:960px; margin: 0 auto 0; padding: 0; #header { height: 200px; margin: 0 auto 0; padding: 0; Hvis man ønsker et midtstilt bakgrunnsbilde som ikke repeteres, og en fast bakgrunnsfarge som dekker alt utenfor bakgrunnsbildet kan man endre koden til: background: #d0b988 url(images/bg.png) no-repeat center top; 3. Menylinja (Farger og grafikk) Det grafiske på menylinja er styrt av bilder som ligger i image-mappa (nav.png, navhov.png, navline.png) Skrifttyper og skriftfarger må ordnes i stylesheet-filen. Linjenr. ca. 317: #nav li a { color: #EEEEEE; display: block; font-size: 12px; margin: 0; padding: 13px 17px 12px 15px; text-decoration: none; text-shadow: # px 1px; position: relative; background: url(images/navline.png) no-repeat right; #nav li a:hover, #nav li a:active { background: url(images/navhov.png) top; color: #333333; text-shadow: #FFFFFF 1px 1px; Side 2

3 4. Widget-områder på førstesiden Home Top Left Det blå feltet kan endres ved å endre på bildet som heter home-top-left.png. Når man endrer dette bildet så vil det komme fram en blå kant til høyre. Det er fordi bildet er 10 piksler smalere enn den blå boksen det ligger i. Løsningen er å gjøre bildet 10 piksler videre. Home Top Right Dette området er 600x235 piksler og er godt egnet til en bildevisning. Under plugins ligger det en plugin som heter Rotating-Images. Denne kan aktiveres og settes opp med bilder som roterer. Etter aktivering kommer DisplayBuddy opp i Dashboardmenyen og her ligger RotatingImages. Opprett en ny Gruppe og legg inn bildene du ønsker. Sett størrelsen til bildevisningen til 600x235. Fra widget-menyen kan du sette denne bildevisningen inn i Home-top-right. Side 3

4 Home Middle #1 (#2 og #3), Home Bottom #1 (#2 og #3) Disse widget-områdene brukes normalt til å presentere informasjon fra sider og poster. Når man legger inn f.eks. en Page så kan man i widgetområdet vise et bilde og tekst fra den aktuelle siden. Bilde som vises på forsiden ligger i Pagen som et Featured Image. I Pagen legges dette bildet til på vanlig måte bortsett fra at man velger Use as featured image istedenfor Insert into post. Alternativt kan man legge til bilde i Pagen ved å trykke på Set featured Image. Dra widgeten Genesis - Featured Page over i widgetområdet Home Middle #1 og velg hvilken side som skal vise. Sett så egenskapene for hvordan informasjon fra denne siden skal komme på forsiden. Side 4

5 5. Menystruktur Menystrukturen i Wordpress er basert på Pages og hvordan disse er koblet til hverandre. Hvis man ønsker et undermenyvalg må man velge en annen side som Parent. Det er også mulig å lage en tilpasset meny. Det gir endel fordeler: Da er det enkelt å bytte ut Home med Hjem Hovedmeny-valg kan være ikke aktive Rekkefølgen på menyvalgene kan styres God oversikt over undermenyvalg Tilpasset meny lages under menyvalget Menues på Dashboard. Man starter med å trykke Add new for å lage en ny meny. Så krysserman av på hvilke Pages man ønsker skal inngå, og legger til dem. Egne menyvalg som Hjem legges til under Custom Links og linkes opp til den siden man ønsker. Hvis man ønsker ikke aktive hovedmenyvalg legger man også til dette under Custom Links. På url så må man skrive et eller annet for å få lagt til menyvalget. Dette fjernes igjen under Custum når man har lagt menyvalget til menyen og skal tilpasse. Side 5

6 6. Opplasting av bilder (Pages/Posts) De fleste benytter Wordpress sin upload-funksjonen for å legge ut bilder på websiden. Da legges bildene i en egen mappestruktur på webserveren. wp-content/uploads/2011/ Trykk på bildesymbolet ved siden av Upload/insert når du trenger et bilde i posten eller siden du holder på med. Velg en fil du vi laste opp til websiden, og trykk Insert into post nederst på siden. Husk å lagre (update/publish) siden for å legge ut endringen i posten/siden. En annen måte er å legge bildene i en egen mappestruktur under wp-content/uploads, og skrive selve bildelinkene i html manuelt. Det krever noe mer kunskap, men man får mer kontroll, og det kan i noen tilfeller være enklere. Html-koden blir også mer oversiktlig når man gjør det selv. NB! Det er smart å ha en lokal mappestruktur hvor man har en kopi av alle bilder som er lagt ut på websiden. 7. Installere plugins Shaddowbox JS brukes for å vise bilder på fin måte... i en boks med kantlinje og skygge. Installasjon: På trykker du på menyvalget Extend, deretter velger du Plugins. Søk etter Shadowbox-js og velg riktig plugins fra listen. Trykk på Download knappen og last ned plugins filene Legg mappen shadowbox js inn i wp-content/themes/plugins I Wordpress velger du Plugins og aktiver den nye shadowboxjs. Innstillinger: På Settings har det nå blitt et nytt valg som heter Shadowbox-js hvor du kan stille inn plugins n. Sett Enable Smart Loading til True Fjern effekten på alt untatt Images. Side 6

7 8. Diverse Avrunnede hjørner Avrunnede hjørner krever spesielle koder tilpasset de forskjellige nettleserne. Kodene i dette temaet håndterer Mozilla Firefox, Safari, Google Chrome og Konqueror. (NB! bindestreken er en del av css-koden) CSS-kode for alle hjørnene til et objekt: -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; CSS-kode for enkelthjørner til et objekt: -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -khtml-border-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; Breadcrumbs Breadcrumbs er en funksjon som viser hvor man befinner seg i menystrukturen på websidene. Det er en nyttig funksjon, men kan ødelegge litt i et ryddig design. Innstillingene gjøres under Genesis --> Theme Settings. Side 7