Kuckovic.com | Wordpress Tema Design

Om WordPress Tema Design

Begynd på din Header

Velkommen til det næste skridt af min “Lav dit eget WordPress tema” guide.

Nu skal du lære, hvad en Header.php fil indebærer.

Headeren er en af de vigtigste dele af din blog. Det er typisk der alles øjne fører hen, når man kommer ind på en hjemmeside. Den er med til at fortælle om det er noget professionelt, eller om det er noget plat man laver. Forestil dig en blog uden en header, altså uden nogen form for logo, tekst eller bare billeder – svært at forestille sig, ikke?

Ikke nok med at Headeren “præsenterer” din blog, den indeholder vigtige informationer. Herunder er den en liste over, hvad Headeren bl.a. indeholder af vigtige informationer:

  • Google Analytics (Hvis man har valgt at skrive koden her i stedet for Footeren)
  • META-Tags (Gør dig synlig i søgemaskiner)
  • Logo
  • Ofte et søgefelt

Det er derfor vigtigt, at du ved hvad du gør, hvis du selv vil kode hele headeren. Et godt tip herfra er, at du læser WordPress Codex grundigt igennem, så du ved hvad du piller ved, i stedet for at lave noget, der kan ødelægge det hele for dig. Codex kan være dig behjælpelig på mange punkter, så du skal ikke føle dig fortabt, hvis det ikke går som du ønsker det.

Det er som sagt meget vigtigt, at din header er kodet korrekt, og herunder er der et udpluk fra Header.php i Sandbox temaet (det mest simple tema til WordPress) – og et godt råd er – BRUG DEN!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes() ?>>
<head profile=”http://gmpg.org/xfn/11″>
<title><?php wp_title( ‘-’, true, ‘right’ ); echo wp_specialchars( get_bloginfo(‘name’), 1 ) ?></title>
<meta http-equiv=”content-type” content=”<?php bloginfo(‘html_type’) ?>; charset=<?php bloginfo(‘charset’) ?>” />
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘stylesheet_url’) ?>” />
<?php wp_head() // For plugins ?>
<link rel=”alternate” type=”application/rss+xml” href=”<?php bloginfo(‘rss2_url’) ?>” title=”<?php printf( __( ‘%s latest posts’, ‘sandbox’ ), wp_specialchars( get_bloginfo(‘name’), 1 ) ) ?>” />
<link rel=”alternate” type=”application/rss+xml” href=”<?php bloginfo(‘comments_rss2_url’) ?>” title=”<?php printf( __( ‘%s latest comments’, ‘sandbox’ ), wp_specialchars( get_bloginfo(‘name’), 1 ) ) ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’) ?>” />
</head>

Videre til Trin 5 – “Det såkaldte Loop” – Ikke tilgængeligt endnu

Udgivet af Kucko den 14 - juni - 2010 under Temaudvikling

Begynd på index.php

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

De nødvendige filer

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

Introduktion

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

Abonnér

VIDEO

TAGS

POPULÆRT