Kuckovic | Danske WordPress temaer

Om WordPress Tema Design

I slutningen af December, fik jeg en henvendelse fra en læser her på bloggen. Han spurgte pænt, om man kunne bruge WordPress som en almindelig hjemmeside, i stedet for at bruge den som en blog. Det kan man sagtens, og det er det jeg vil vise med denne guide.

Jeg vil i denne guide komme ind på følgende punkter:

  • Sider og undersider (Hvordan styres de nemmest)
  • Hvordan fjerner man “post meta” (skrevet af, dat og kategori)
  • Vertikale og horisontale menuer (hvad er mest “in” og hvad er smartest)
  • Kategorier

Skulle du stadig sidde fast efter denne guide, vil jeg anbefale at du skriver en mail til mig, hvorefter jeg vil forsøge at hjælpe dig med problemet.
Derefter vil jeg rette det til i artiklen, så andre ikke også kommer i klemme samme sted som dig.
Nu starter vi!

  • Sider og undersider

Alle hjemmesider har sider og under-sider, så man nemmere kan navigere rundt på den enkelte hjemmeside.
I WordPress er det ikke anderledes, for her har du mulighed for netop det samme. Jeg vil vise hvordan du i WordPress opretter en enkel side, og derefter opretter en underside til den side.

F.eks. vil jeg oprette en side der hedder “Dyr“, og i undersiderne kan man indsætte “kat, hund, fugl” og hvad man nu ellers har brug for.
Det er faktisk ikke så svært, men du skal lige starte med at logge ind i “Admin-menuen” til din WordPress blog.

Når du så har logget ind på din hjemmeside, skulle adminmenuen gerne se helt normal ud. Altså, i venstre sider har du alle dine værktøjer, og fra midten og over til højre kan du læse de nyeste nyheder fra WordPress.org, se hvor mange artikler du har skrevet osv.
Det vi skal fokusere på, er fanebladet “Sider” – resten kan du sådan set godt “gemme af vejen” (Klikke på den lille pil til højre for fanebladet) – for på denne måde holder du din admin-menu meget mere overskuelig.

Så skal vi jo oprette en ny side, og det gør du ved at klikke på “Tilføj ny” eller hvis din blog er på engelsk, klikker du selvfølgelig på “Add new”.
Når du så har gjort det, skal du skrive sidens navn, altså alt i alt skal du bare oprette en ny side, som du har gjort hidtil.
Det du måske ikke har prøvet endnu er, at oprette en underside til den side du nu kalder, f.eks., “dyr“.
Vi starter med at oprette en underside som hedder “Katte” – Så kan vi arbejde os udfra det.

Du skal oprette en side som den du oprettede lige før, denne gang skal du ikke udgive den med det samme!
Du skal nemlig gøre den til en underside til “Dyr” – Det gøres således:

  1. Når du har skrevet alt det der nu skal stå på denne side, skal du kigge til højre under fanebladet “Egenskaber”
  2. Der vil du finde en “Drop-down boks”, hvor der står “Forælder”  – indtil videre skulle der gerne stå:
    “Forside (ingen forælder)” – men hvis du klikker, skulle “Dyr” gerne dukke op – og det er dén du skal vælge.
  3. Nu må du gerne klikke på “Udgiv”

Nu er din side, “Dyr”, udgivet med en underside, f.eks. “Katte” – hvis du går ind på bloggens forside vil du nu kunne se at “Katte” er en underside til “Dyr”. Det er dog langtfra alle WordPress temaer der “håndterer” underside som man ønsker det. Det kan faktisk se helt dumt ud på nogle temaer. Det kræver så, at man selv retter det hele til i CSS-filen og den fil hvor din menu befinder sig (typisk header.php).
Men til de der bruger et WordPress tema som håndterer det meget pænt – “Tillykke, I har nu en side med en underside!”

  • Hvordan fjerner man “post meta”

Til denne guide, vil jeg anbefale, at man har et godt program, så man kan se forskel på PHP og HTML.
Det kunne f.eks. være Adobe Dreamweaver eller det “lettere” udgave PHP Viewer som også varmt kan anbefales.
Jeg anbefaler sådan et program da man her skal ind og rode med netop PHP-koder i diverse filer fra din tema mappe. Vi skal faktisk have fat i alle de filer der viser post-meta, det kan være filer som:

  1. index.php
  2. single.php
  3. page.php
  4. archive(s).php

Der kan sagtens være flere filer, det er derfor vigtigt at du kigger hele din hjemmeside igennem for HVOR der netop er alt det post-meta.
Inden jeg fortæller dig hvordan man fjerner “post meta”, vil jeg først fortælle lidt om hvad det er.

Post meta fortæller dig lidt om det enkelte indlæg. Altså hvem der har skrevet artiklen, hvornår den er udgivet, i hvilken kategori, og i nogle tilfælde kan man under “post meta” se hvor mange kommentarer der er skrevet til hver enkelt indlæg. Og det er alt det vi skal have fjernet.
Følg nu godt med!

  1. Du åbner den pågældende side i dit redigeringsprogram (Dreamweaver eller PHP Viewer)
  2. Hvis vi antager, at du har åbnet “index.php” i programmet, skal vi nu finde ud af hvor alt det post meta står henne.
    I denne guide vil jeg tage udgangspunkt i temaet “WordPress Default” – altså det tema ALLE WordPress-blogge får installeret samtidig med at deres blog bliver installeret. I dette tema er det super nemt at lokalisere “post meta”.  Du skal finde det sted i filen der står:
    <p class=”postmetadata”> Du skal begynde at slette alt derfra indtil du når til </p>.
  3. Når du har slettet det, skal du gemme filen og uploade den til din server igen, nu skulle alt “post meta” gerne være væk fra din forside.
  4. Nu gentager du bare proceduren indtil du har fået fjernet “post meta” fra alle de andre sider du ikke vil have det på.
  5. Voila!
  • Vertikale og horisontale menuer

Ja, man kan diskutere det meget. Hvad er flottest, hvad er mest “in”, hvad er mest praktisk. Alle disse spørgsmål afhænger i virkeligheden af hvilket tema du vælger at bruge på din WordPress hjemmeside. Bruger du f.eks. “WordPress Default” som vi snakkede om før, synes jeg i hvertfald ikke at man behøver at ødelægge et tema med en horisontal menu. Temaet i sig selv er enkelt og unikt, så hvorfor begynde at pille ved det.

Der er absolut ingen tvivl om, at en horisontal menu er mest “in” for tiden. Personligt foretrækker jeg da også selv denne slags menu, som jeg også har det her på kuckovic.com, men det er som sagt forskelligt fra bruger til bruger.

Hvis du har downloadet et WordPress tema som ikke har en horisontal menu, er dette ikke svært at lave om på.
Det man skal er, at man skal selv lave en i CSS-filen, og implementere den i headeren. Jeg vil gerne vise jer det i en artikel hvis i har brug for det.
Skriv gerne i en kommentar eller i en mail hvis i mangler sådan en guide – jeg er altid parat ved tasterne!

  • Kategorier

Nu er vi kommen til den sidste del af denne artikel, vi er nemlig kommet til snakken om kategorier.
Det kan godt være at kategorier ikke ser så “fancy” ud på en hjemmeside, men de er uhyre brugbare! Hver gang jeg er inde og kigge på en hjemmeside, kigger jeg altid efter kategorier, for de kan præcisere det jeg leder efter. Hvis man f.eks. har en side hvor man sælger biler, vil enhver bruger på siden sætte pris på at bilerne er kategoriseret. Det kan f.eks. vær i prisklasser eller mærke, man kan kategorisere lige som man vil, og også i flere kategorier. Men hvis man vil have en hjemmeside som ikke minder om en blog, selvom man bruger WordPress, så kan jeg måske godt se at det ikke ser så sk**e smart ud – men man skal altid huske, de er ufattelig brugbare!

Følgende artikler er aktuelle indenfor dette emne:

Som jeg skrev tidligere i denne artikel, hvis du stadig føler at der mangler noget, er du altid velkommen til at kontakte mig på support@kuckovic.com, jeg svarer så snart jeg får mulighed for det, og bare rolig, din mail ryger ikke i glemmebogen!

Håber I fandt denne artikel nyttig!
Rigtig god weekend – Med venlig hilsen

Aris Kuckovic

Udgivet af Aris Kuckovic den 17 - januar - 2010 under Featured Guide Tips&Tricks

Hej igen bloggere.

Jeg håber at I alle har haft en hyggelig jul med en masse skønne gaver (som I kunne bruge).
Jeg sad lidt i går, og tænkte på, hvordan man kan udvikle sine egne widgets – og nu skal jeg prøve!

Jeg ved godt, at der flere steder på nettet findes et Adsense Widget, men ville det ikke være sjovere hvis man nu selv kunne lave et?
Så ved man 100% hvordan det virker, hvilke evt. fejl og mangler det har.
I hvertfald, har jeg bestemt mig for, at jeg vil i gang med at lave mit eget widget. Når jeg er færdig med det, vil jeg udgive det her på bloggen, så I alle kan få “glæde” af det.

Ha´ en fortsat god 2. juledag, og et godt nytår når vi kommer så langt.
Aris Kuckovic

Udgivet af Aris Kuckovic den 25 - december - 2009 under Nyheder

I denne artikel, vil du kunne læse om, hvordan du designer din egen header til WordPress.
Du skal væbne dig med tålmodighed, for nogle gange kan CSS drille!

Jeg vil gennemgå følgende punkter i denne artikel:

  1. Hvordan du ændrer logoet i din header
  2. Hvordan du tilføjer et Adsense felt i din header

1. Hvordan ændrer jeg logoet i min header?
At ændre ens logo i headeren er ikke et krævende stykke arbejde. Når du åbner din header.php-fil, kan du se hvor dit logo skal være.
Det  kan være at der i din header.php står noget lignende:

<div id=”logo”>
<img src=”Her kommer din URL til dit logo/>
</div>

Som du kan se ovenfor, hedder div-tagget “logo” og i din URL, kan du helt til sidst se hvad dit logo hedder og hvor du kan finde det.
I fleste tilfælde vil der stå noget lignende dette:

<div id=”logo”>
<img src=”/images/logo.gif/>
</div>

Allerede her, kan du se hvad dit logo hedder, og hvor dit logo er gemt henne.
Altså, dit logo hedder “logo.gif” og kan findes i mappen “images” – Så er det bare at finde billedet og ændre det til dit eget!
Når du har ændret det, skal du bare uploade det under samme navn, og husk samme format!
Så har du ændret dit logo :-)

2. Hvordan tilføjer jeg et Adsense felt i min header?
Denne del er lidt mere kompliceret – det kræver lidt kendskab til CSS, og meget meget lidt kendskab til PHP – faktisk skal du kun kunne én kode.
For at kunne indsætte en Adsense-blok i din header (eller andre steder på bloggen) skal du vide fra starten hvilken størrelse du vil have.
En “normal” banner-størrelse er 468×60, det er også den størrelse jeg vil gå ud fra i denne guide.
Nu starter vi – du skal gøre følgende:

  1. Oprette en Adsense bruger hvis du ikke har en. Det kan du gøre her
  2. Nu skal du åbne følgende filer:

    • Style.css (eller din primære CSS-fil (CSS-filer ender altid på “.css”))
    • Header.php
  3. Når du har åbnet de filer, skal du starte med at “lege” i CSS-filen. Du skal nemlig lave din “blok” hvor dit Adsense-indhold bliver vist. Vi gik jo ud fra størrelsen 468×60 – så det vil vi også gøre her.
    Herunder er der et eksempel på en CSS-fil, hvor jeg har lavet en blok til Adsense.

.Adsense {
width:468px;
height:60px;
border:none;
margin-left:Her skriver du i pixel (“??”px) hvor mange pixel blokken skal rykke ind fra venstre;
margin-top:Her skriver du i pixel (“??”px) hvor mange pixel blokken skal rykke ind fra toppen;
}

I de to værdier “margin-left” og “margin-right” kan du som sagt indsætte de pixel du vil, for at rykke blokken hel til den ønskede plads. Du kan faktisk rykke så meget rundt med den på siden som du ønsker. Husk! Hvis du får problemer med at få det til at virke, er du velkommen til at skrive til mig på support@kuckovic.com

Nu har du så lavet din blok, hvori dit Adsense-indhold kan være – smart ikk?
Nu skal vi bare have dit Adsense ind i headeren – så nu skal du åbne filen header.php.

Når du har åbnet header.php, kan du i filen se ét eller andet sted (forhåbentlig) at der står noget lignende: “<div id=”header”>”
Umiddelbart derefter, vil der komme et andet div-tag, som er en “class”. Den kan f.eks. hedde: “<div class=”logo”>”
Når du har fundet det sted hvor <div class=”logo”> slutter med et </div>, skal du indsætte den værdi du lige har lavet til Adsense.
Dvs. DIN kode skal se således ud (hvis vi stadig går ud fra at du har en class der hedder “logo”):

<div id=”header”>
<div class=”logo”><img src=”Her er der nok en URL til dit logo” /></div>
<!– Her skal du så indsætte DIN kode! -!>
<div class=”Adsense”>
Her kommer den kode som du har fået fra Adsense!
</div>
<— Afslutter <div class=”Adsense”>
</div> <— Afslutter <div id=”header”>

Nu tænker du nok: “Hvorfor skal jeg skrive “class” og ikke “id” – Det skal jeg fortælle dig!
Et punktum (.) betegner en “class” og en firkant (#) betegner et ID. Jeg skriver en artikel senere på min blog, om forskellen på ID og Class.
Når du har tilføjet din kode, og tilpasset positionen på din blok, skal du bare uploade de 2 filer via din FTP, og du skulle gerne have Adsense i din header efter ca. 10 minutter (Google skal gennemgå dine søgeord, for at optimere indholdet).

Spørgsmål vedr. denne artikel?
Så er du i hvertfald meget velkommen til at kontakte mig på support@kuckovic.com.
Og hvis du mangler en artikel om noget andet som du kunne tænke dig at vide lidt om, er du velkommen til at skrive det til mig i en mail eller en kommentar, og jeg skal forsøge at hjælpe dig.

Ha’ en kanon jul, og et rigtig godt nytår – pas på jer selv!
Aris Kuckovic

Udgivet af Aris Kuckovic den 24 - december - 2009 under Guide Tips&Tricks

Abonnér

VIDEO

TAGS

POPULÆRT