Kuckovic | Danske WordPress temaer

Om WordPress Tema Design

Mange WordPress brugere bruger denne funktion, for at gøre deres blog flot og funktionel.
Kan du finde ud af lidt CSS, HTML og PHP, så er du rustet til at kunne lege med Page Templates.

Krav til denne tutorial:
CSS Kendskab: ***
HTML Kendskab: ***
PHP Kendskab: *

Som du kan se, kræver denne tutorial ikke den helt store kunnen.
Man skal dog tænke lidt på, hvordan man opsætter det hele, så din side ikke ser ALT for uprofessionel ud.
Det første du skal gøre er, at oprettet en ny PHP-fil, dette kan du gøre i programmet Dreamweaver – som jeg helt sikkert anbefaler.

Når du har oprettet din fil, skal du starte med at indsætte PHP tags, de ser således ud:

<?php  = Denne bruges KUN i starten af en PHP-kode
?> = Denne afslutter en PHP-kode

Når du har indsat den første af de to koder, skal du til at indsætte navnet på din skabelon, så kommer koden til at se således ud, indtil videre:

<?php
/*
Template Name: Her indtaster du navnet på din skabelon
*/
?>

Som du kan se, afslutter jeg koden efter denne “sektion”, det gør det mere overskueligt at arbejde med, så det kan du også roligt gøre.
Når du har skrevet navnet på din skabelon, kan du sådan set allerede uploade den til din “Template Folder”, altså den mappe dit tema er gemt i, det kan f.eks. være: http://www.dinhjemmeside.dk/wp-content/themes/temanavnet/

Det var vel ikke svært at gøre, og du skal selvfølgelig bruge en FTP-protokol for at kunne uploade din skabelon.
Nå, men vi skal videre i programmet, nu skal vi nemlig til at indsætte indholdet!
Hvis du gerne vil have, at din skabelon KUN skal vise indlæg, UDEN “header”, “footer” og “sidebar”, så skal du bare indsætte dit loop i et sæt nye PHP-tags. Så kommer det til at se ud således:

<div id=”content”>
<?php
if (have_posts()) :
while (have_posts()) : the_post(); ?>

<div id=”post-<?php the_ID(); ?>”>
<div>

<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>

</div>

Som du ser her, er dette loop kun til at vise dine indlæg, der er ikke kommentarer med eller noget andet.
Men, det er sat i en CSS-div, nemlig den der hedder “content” som man har kodet i sin CSS-fil.

Hvis du så leger lidt mere med din CSS, så kan du få vist dine indlæg på en pæn måde, og hvis du vil have alt det andet med, altså header, footer og sidebar, skal du indsætte disse PHP-tags:

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

Som man kan læse sig frem i koden, “kalder” denne php-funktion på headeren, footeren og sidebaren.
Så hvis du indsætter dem de rigtige steder i sin skabelon, kommer den til at ligne din forside lidt, det kommer selvfølgelig an på hvor meget du leger med CSS og andre funktioner med PHP, hvis man da kan finde ud af det.

Her er en komplet kode, at en skabelon:

<?php
/*
Template Name: Guide
*/
?>
<?php get_header(); ?>

<div id=”casing”>

<div id=”content”>
<?php
if (have_posts()) :
while (have_posts()) : the_post(); ?>

<div id=”post-<?php the_ID(); ?>”>
<div>

<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>

</div>

<div>
<div>

<div></div>

</div>

</div>

<div>    <span> <?php the_author(); ?></span> <span><?php comments_popup_link(‘0 Kommentarer’, ‘1 Kommentar’, ‘% Kommentarer’); ?></span>
</div>

</div>
<?php endwhile; ?>

<div id=”navigation”>
<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>
</div>

<?php else : ?>

<h1>Her kan du skrive en overskrift til en fejl 404</h1>
<p>Her kan du uddybe lidt</p>
<?php endif; ?>

</div>
<?php get_sidebar(); ?>

<?php get_footer(); ?>

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

Nu vil jeg fortælle lidt om hvordan man “tilføjer”, om man vil, temafunktioner til sit WordPress tema.
Det var meget svært i starten, og jeg skulle lede længe efter en artikel der kunne fortælle mig lidt om det.
Alle artikler om dette, som fortæller dig bare lidt om hvordan man gør, er selvfølgeligt på engelsk, og er svære at forstå.
Desuden fortæller de overhovedet ikke detaljeret, hvordan du gør.

Hvad er temafunktioner?
Dette kan være et spørgsmål, som mange nybegyndere indefor WordPress stiller sig selv. Det er bestemt ikke et dumt spørgsmål, for der er faktisk mange der ikke ved hvad det er, eller hvordan de bruges ordentlig. Tema funktioner kan f.eks. være en boks i dit tema, som f.eks. i temaet Edge, hvor der står “Highly Customizable”, hvor man kan skrive nogle nyheder osv.
Den tekst der står i den rubrik kan ændres vha. Tema Funktioner.

Temafunktionen finder du typisk i fanebladet “Udseende”, eller nederst i sidebaren i admin-menuen.
Forskellige WordPress designere, som f.eks. NattyWP, vælger at placere deres temafunktioner i bunden. Men kig først i “udseende” fanen.
Det kan hedde hvad-som-helst. Men typisk vil det have noget med selve temanavnet at gøre. Hvis temaet er Sandbox f.eks. ville linket typisk hedde “Sandbox Theme Options” eller bare “Sandbox Options”.

Hvordan virker Tema Funktioner?
Du kan finde en del forskellige indstillinger under disse funktioner.
F.eks. er der mange temaer det tilbyder at implementere din Twitter bruger på hjemmesiden. Så beder den dig bare indtaste dit brugernavn, hvorefter den så viser de seneste “Tweets” på din hjemmeside.

Der findes utallige funktioner man kan bruge, det er selvfølgelig op til designeren at bestemme hvilke funktioner han/hun vil tilføje til det tema designeren udvikler. Personligt er jeg selv ved at udvikle et SEO-venligt tema til WordPress, derfor har jeg lavet den mulighed, at man kan skrive meta-tags og meta-beskrivelse, så man bliver mere synlig i søgemaskinerne.

Hvordan tilføjer jeg temafunktioner til mit tema?
Dette er også nyt for mig. Det er ikke mere end en uge siden jeg fandt ud af dette. Men det viser sig, at det har været lige for næsen af mig hele tiden. Først spurgte jeg Brian Brandt om, hvordan jeg gjorde. Hans hjælp hjalp mig på vej, i starten. Jeg var helt fortabt, og hvis jeg i fremtiden skulle lave Premium Temaer, blev jeg nødt til at lære hvordan man gør.

Nu har jeg lært det, og det er ikke så svært som man skulle tro. Det sværeste i hele processen er at lave functions.php-filen. Den skal være korrekt, for du kan ellers risikere, at din side slet ikke kan blive vist, og det skulle jo helst ikke ske.
Har du et tema, som du føler mangler enten flere funktioner, eller mangler tema funktioner i det hele taget, så tilbyder jeg at implementere det i dit tema.

Men, hvis du, som jeg selv, vil gøre  det selv, så skal du læse herunder, for nu viser jeg dig hurtigt hvordan du gør.

  1. Du skal starte med at åbne din functions.php-fil. Den finder du i din tema-mappe.
    Mappen kan du finde i “…/wp-content/themes/”
  2. Det første man gør, når du har åbnet filen, er at du angiver et tema navn, og et “kortnavn”, altså et kaldenavn til temaet, som du skal bruge senere i de andre filer. Dette gør du ved at aller først at skrive “<?php
    Klik her for at se et screenshot af functions.php
    hvor jeg allerede har skrevet det hele.
  3. De første 4 linjer i filen, efter “<?php siger selv. Tema-navn, kort-navn, en indstilling, og så kommer selve indstillingerne (” $options = array ( “). Herunder, og nu mener jeg alle de nedenstående “array( “, giver alle felterne under tema funktioner.
  4. Klik her for at se hvordan disse “array ( ” kommer til at se ud, når du trykker på Tema Funktioner under “Udseense”-fanebladet.
    Hvis du kigger på de to billeder, vil du nemt kunne finde en sammenhængen. Derefter er det nemt selv at danne flere felter.
    Brug evt. disse billeder til inspiration :-)
  5. Nu skal vi have det hele koblet sammen med WordPress Admin Brugerfladen, og det er her det bliver lidt tricky.
    Ikke nok med at du skal forbinde det hele, du skal skam også sørge for, at det hele passer sammen.
    I stedet for at forklare ALT her, så kan du downloade MIN functions.php-fil – Download den her

Dette er del 1 af min “Tema Funktioner”-artikel.
Følg med på bloggen, hvor du så kan se del 2 inden længe.
I del 2 vil jeg forklare selve functions.php-filen, samt indholdet af filen.

Mange hilsner
Aris Kuckovic

Udgivet af Aris Kuckovic den 1 - november - 2009 under Featured Forsiden Guide

Abonnér

VIDEO

TAGS

POPULÆRT