Kuckovic.com | Wordpress Tema Design

Om WordPress Tema Design

Okay, så langt så godt.
Nu begynder vi virkeligt at tænke på, hvordan siden skal kodes. Index filen kræver faktisk ikke meget kodning i sig selv. Den kan næsten klare sig med bare at kalde på header, content, sidebar og footer. Og det er det jeg vil vise her herunder. Her er et eksempel på, hvordan en index.php fil skal se ud som minimum, for at du kan se bare lidt på din side:

Index.php

<?php get_header(); ?>

Her kan du skrive det der skal vises på din forside.
Det er også her at loopet skal komme ind i billedet – og husk at implementere din CSS heri også!
Brug en masse “div”-tags, som laver forbindelser til din style.css

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Dette er det din index fil indeholder – meget kortfattet selvfølgelig. Der er jo også en masse koder, som man ikke lige ved hvilken funktion de har. Det er så her at WordPress Codex kommer ind i billedet – og for at være mere præcis, skal du nok bruge Template Tags. Template tags virker kun hvis du bruger PHP (<?php – ?>) – ellers kan du bruge den til næsten alt!

Altså, i ovenstående har vi jo allerede kaldt på header, sidebar og footer – nu skal vi have indholdet vist på hjemmesiden. Det er her loopet kommer ind i billedet. Du kan læse mere om loopet senere, jeg vil nu vise dig hvordan du BRUGER det i index.php filen.

Når du kalder på loopet, skal du bruge følgende kode:

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

Som sagt, vil jeg senere fortælle lidt mere om, hvad selve loopet gør.
Dette skal du indsætte det sted, hvor du ønsker dit indhold vist. Og hvis du allerede har forberedt CSS-filen, er det ikke svært, for så ved du jo hvor det hele skal være. En god idé kan også være, at man starter med at lave hele siden som HTML, indtil man har det ønskede resultat, derefter kan man begynde at implementere WordPress. Nå, men nok om det – lad os se hvordan din index.php fil ser ud indtil videre:

<?php get_header(); ?>

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Som du har bemærket, bruger jeg ikke CSS i dette eksempel, og det gør jeg ikke fordi, at alle folk bruger typisk deres forskellige CSS tags, så for at undgå misforståelser, så benytter jeg mig ikke af dem nu. Nå, men som du også kan se ovenover, mangler vi titlen og indholdet på dit indlæg. Indtil videre har vi bare “kaldt” på dit indlæg – vi har ikke kaldt på de forskellige dele af indlægget endnu. Det gør vi med nedenstående koder:

  • <a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
    Denne kode kalder på indlæggets titel, og gør det til et link som man kan klikke på, for at komme ind på selve indlægget.
  • <?php the_excerpt(); ?>
    Denne kode kan bruges på to måder. Altså, for det første kalder den på indlæggets indhold, altså det du har skrevet. Men der er to måder at gøre det på. Man kan, som ovenover, bruge “excerpt” eller man kan bruge “post” – Excerpt kalder kun på et resumé af dit indlæg, altså det viser ikke hele indlægget, i modsætning til “post”, som kalder på hele indlægget. Du kan altid ændre dette.

Når de så også er indsat på i din index.php fil, vil den se ud som herunder:

<?php get_header(); ?>

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
<?php the_excerpt ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Nu er vi faktisk meget tæt på at være færdige med index filen – vi skal bare have afsluttet PHP funktionen.
Som du ser på linje 2, bruger vi i PHP koden et “if”, på godt dansk betyder det “hvis”. Den streng siger faktisk på dansk “hvis der findes et indlæg” – den skal vi have afsluttet nu, og det gør vi ved at bruge nedenstående kode:

<?php endwhile; ?>
<?php endif; ?>

Og når det hele så er sat ind, har vi den komplette index fil, som kalder på de vigtigste WordPress funktioner. Den ser således ud:

<?php get_header(); ?>

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
<?php the_excerpt ?>

<?php endwhile; ?>
<?php endif; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Videre til trin 4 – Start på din Header

Udgivet af Kucko den 29 - maj - 2010 under Temaudvikling

Nu er jeg nemlig ved at skrive en artikel om, hvordan du laver dit eget WordPress tema.
Du kan følge udviklingen her: Lav dit eget WordPress tema

Så har du mod på det, og vil du være med til at bidrage til den store WordPress verden, synes jeg du skal tage udfordringen op. Jeg har prøvet at gøre det så brugervenligt som muligt – men det er ikke altid nemt. Jeg er slet ikke færdig med alle artiklerne, for det tager lidt tid at skrive dem, men de skal nok komme allesammen. Vil du selv være med til at bidrage, er du meget velkommen til at skrive en mail til support@kuckovic.com

PS: Jeg prøver at skrive ca. én af artiklerne pr. dag – så følg med hver dag på bloggen!

Udgivet af Kucko den 29 - maj - 2010 under Forsiden

Herunder er der en liste over de filer, som et komplet WordPress tema skal indeholde.
Denne liste er kun et minimum. Du kan tilføje alle de filer du vil, men som sagt, dette er kun “Basic”.

  • Category.php
  • Comments.php
  • Footer.php
  • Functions.php (der kommer mere om denne fil)
  • Header.php
  • Index.php
  • Page.php
  • Sidebar.php
  • Single.php
  • Style.css

Gerunder følger så en forklaring på, hvilken funktion de forskellige filer har.

Category.php
Viser en liste over alle de kategorier der er brugt på din side.

Comments.php
Denne fil viser kommentarerne i dit indlæg. Du kan selv bestemme hvordan de skal vises, og så er det denne fil du skal lege med.

Footer.php
Dette er footeren på din side. Her kan du skrive Copyright, eller anden information om din side.

Functions.php
Denne fil kan gøre meget ved dit tema. Du kan gøre flere af dine filer “Widgetized”, eller du kan lave temafunktioner.

Header.php
Dette er headeren på din side. Her vil du typisk indsætte dit logo osv.

Index.php
Dette er den vigtigste side af dem alle. Det er forsiden på din side, det er derfor vigtigt at den er kodet rigtigt.

Page.php
Denne fil sørger for at vise de enkelte sider på din hjemmeside. Så hvis du ikke vil have sidebaren med på dine sider, skal du ændre det i denne fil.

Sidebar.php
Denne fil er også meget vigtig for din side. Det er nemlig sidebaren – altså den du finder enten til højre, eller venstre på din side. Her kan du indsætte kategorier, arkiver, søg-knap, reklamer og meget meget mere. Kun fantasien sætter grænser.

Single.php
Denne fil viser det enkelte indlæg.

Style.css
Dette er rammen om din side. Her kan du designe alt. Denne fil bestemmer nemlig hvordan din side skal se ud. Vær sød ved den, og den er sød ved dig (-:

Videre til trin 3 – Begynd på index.php

Udgivet af Kucko den 29 - maj - 2010 under Temaudvikling

Velkommen til en lille introduktion om, hvordan du laver dit eget WordPress tema.
I introduktionen vil du kunne læse lidt om, hvordan du gør, og hvad der kræves af dig, for at lave dit eget tema.
Vi skal lige have en ting på det rene. Jeg viser dig ikke ALLE koder i en fil, jeg fortæller bare “In basic” hvordan du gør.

Tags
Når du bruger PHP, skal du jo bruge et start- og et slut-tag. Start-tagget ser således ud: “<?php” og slut-tagget ser således ud: “?>“. Det er ikke kun PHP-tags du kommer til at bruge i dit tema. Der er andre vigtige tags som “<div> – </div>” og “<ul>, <ol>, <li> – </li>, </ol>, </ul>“, som man typisk bruger til at liste tin.

Tags skal desuden lukkes i den rigtige rækkefølge. Det nytter ikke at et “div”-tag bliver lukket at et “ul”-tag, altså herunder ser du den forkerte måde at lukke forskellige tags på:

<div id=”header”><ul> Dummytekst </div></ul>

Altså, ovenover er problemet, at et “div”-tag, lukker et “ul”-tag – og det går ikke. Det er ikke det første tag der skal lukkes først, det er faktisk omvendt. Det sidste brugte tag skal lukkes først. Se et eksempel herunder:

<div id=”header”><ul> Dummytekst </ul></div>

Her kan du se, at et “ul”-tag lukker et “ul”-tag. Dette er den rigtige måde at lukke tags på.

Hvad kræves der af mig?
Der kræves faktisk næsten ingenting. Læg mærke til at jeg bruger ordet næsten – for selvfølgelig kræves der lidt af dig. Først og fremmest, skal du været afklaret med, hvordan dit tema skal se ud. Det er en god idé at lave et layout i Photoshop, som du så kan følge til punkt og prikke. Derudover kræves der en smule kendskab til PHP og CSS. Ved du ikke hvordan PHP fungerer, så kan jeg varmt anbefale disse PHP Tutorials, og hvis du ikke kan CSS, anbefaler jeg disse CSS Tutorials – Skal vi så komme igang!

Videre til trin 2 – De nødvendige filer

Udgivet af Kucko den 28 - maj - 2010 under Temaudvikling

Nu er det endelig ved at være tid.
Projektet har været undervejs længe, og de hårde WP gutter har flere gange måtte udskyde release datoen, for WordPress 3.0. Som WordPress bruger ser jeg frem til at opgradere til det nye WordPress. Kan du slet ikke vente med at prøve det nye WP, kan du nu downloade WordPress 3,0 BETA 2 versionen.

Her er en række nye features i det nye WordPress:

  1. WordPress og WordPress MU smelter sammen til ét!
    Det betyder, at du nu kan skabe et blogging-netværk, og have flere blogs på din side!
  2. Lav dit eget admin login.
    Nu vælger WordPress ikke længere dine login informationer. Du får nemlig selv lov til at bestemme hvad din administrator bruger skal hedde. Desuden, får du heller ikke et helt indviklet password du skal enten huske på, eller ændre så snart du er logget ind – for det vælger du også selv nu!
  3. Flere måder at lave indlæg på!
    I stedet for bare at lave en side eller et indlæg, har du nu mulighed for at lave en Portfolio, produkt katalog, bibliotek og meget meget mere. Så nu kan du selv bestemme hvordan dit indhold skal vises på din side.
  4. Administrer dine menuer meget nemmere!
    Nu kan du, vha. Drag & Drop funktionen nemmere administrere dine menuer. Hvad skal være underside, og hvilke sider der slet ikke skal vises på din side!
  5. Skift baggrund!
    Jeps, også dette er en nyhed! Nu kan du nemlig ændre dit baggrundsbillede, helt uden at skulle rode i CSS-filerne!

Der er mange fede funktioner i WordPress 3.0 – langt flere end det jeg har nævnt her.
Er du meget nysgerrig, så kan du som sagt downloade en BETA 2 release lige her

Har jeg glemt noget, eller har du en rettelse til dette indlæg. er du meget velkommen til at skrive en kommentar.
Tak for denne gang…

Udgivet af Kucko den 27 - maj - 2010 under Forsiden

Nu har jeg søgt længe efter det!
I IE har man LiveWriter, men hvad har man i Firefox? INTET!
Eller intet, hvis ikke man kendte til “WordPress Helper” – det addon er genialt!

Dette plugin er genialt, fordi det har så mange funktioner lige ved hånden.
Hvis du finder noget du gerne vil blogge om på nettet, så skal du bare højreklikke nede i den nederste værktøjslinje, og derefter klikke på “Write a Post” – så enkelt er det!

Desuden har dette addon til Firefox rigtig mange andre fede funktioner, som jeg endnu ikke har testet.
Men indtil nu, lover dette addon rigtig godt. Så hvis du bruger WordPress på DIN hjemmeside, så er der simpelthen ikke andet for, end bare at hente det addon, som må være det Ultimative WordPress Addon til Firefox.

Det kan hentes på følgende webadresse: WordPress Addon

Udgivet af Kucko den 20 - maj - 2010 under Forsiden

I denne tutorial, vil jeg vise dig hvordan du laver forskellige sider, der viser forskellige kategorier.
Lad os sige du har en kategori der hedder “Fotos” og vil gerne have den vist på en side som hedder “Foto”, hvilket vil være meget logisk, skal du såmænd bare gøre som der står herunder, så kan du ikke gå helt galt i byen. Lad os begynde!

Lad os antage at du har en fotoblog, hvor du vil vise alle de billeder du har taget, men du vil også fortælle nogle tips og tricks om fotografering. Så kan denne tutorial være meget nyttig. For hvis du starter med at oprette kategorier du vil bruge på dit site, så er du faktisk allerede godt i gang. Når du er kommet så langt, og lad os så sige, at du har oprettet en kategori som hedder “Fotos”, som du gerne vil vise på en side du har oprettet, som meget logisk hedder “Fotos”. At de hedder det samme gør ingen forskel, det gør det kun nemmere for dig at finde rundt i alle dine filer.

Dernæst skal du faktisk oprette en ny WordPress Page Template, læs den artikel som jeg har skrevet, ved at klikke på linket. Når du har gjort det, kan vi fortsætte her. For når du har oprettet dit page template, som du måske også navngiver “Fotos”, skal du indsætte nedenstående kode, for at få det til at virke hensigtsmæssigt:

<?php query_posts(‘category_name=Fotos’); ?>

Den kode skal du indsætte i Loopet. Loopet ser typisk således ud:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Du kan indsætte koden imellem disse to linjer, og så skulle indlæg med kategorien “Fotos” være det eneste der bliver vist på denne side. Du har nu næsten sat det hele op som du skal, vi mangler lige at uploade filen, og vælge den rigtige skabelon til din side. Som jeg sagde, er du næsten klar. Nu skal du uploade din fil, og den skal uploades til din tema-mappe. Så hvis du bruger temaet “Sandbox”, skal du uploade filen til “www.ditdomæne.dk/wp-content/themes/Sandbox”. Så er du næsten klar, nu skal du ind og redigere din sides skabelon. Det gør du ved at logge ind i admin-menuen, og gå ind for at redigere siden. Under “Udgiv” fanen, ser du fanen “Egenskaber” – og under egenskaber finder du “Skabelon” – dér skal du finde den skabelon du lige har oprettet.

Du skal nu bare trykke på “Udgiv” – og så er du faktisk klar!
Nu viser din side, “Fotos”, kun indlæg som er udgivet under kategorien “Fotos” – meget smart, ik’?

Udgivet af Kucko den 18 - maj - 2010 under Featured Tips&Tricks

Abonnér

VIDEO

TAGS

POPULÆRT