Lav et responsive WordPress tema (næsten) fra scratch

En af årsagerne til WordPress’ popularitet er at det er let at komme i gang med. Mange webhoteller tilbyder 1-click install af WordPress, og der er masser af let tilgængelige temaer og plugins som man kan downloade og installere for at give det nye website det udseende og den funktionalitet som man ønsker.

Det kan imidlertid være svært at finde et eksisterende tema med præcis det rigtige udseende til et bestemt projekt. I denne arktikel og i de efterfølgende vil vi gerne demonstrere hvordan man med udgangspunkt i Underscores kan bygge sit eget responsive WordPress tema med præcis den opbygning og den funktionalitet som man ønsker.

At tweake et WordPress-tema
Alle der har prøvet at lave en WordPress-hjemmeside med udgangspunkt i et færdigt tema ved at det kan være svært at få det til at se helt rigtigt ud – de første 90% går som en leg, og så kan der gå dage med at få mingeleret de sidste detaljer på plads. Nogle gange lykkes det til sidst, men andre gange ender man med at slække på kravene så de passer til det valgte tema, eller man må ind og hacke i temaets kode, med efterfølgende problemer med opdatering og vedligeholdelse.

Vores egen erfaring er at det bedst kan betale sig at arbejde med færdige temaer hvis man fra starten beslutter sig for at man vil holde sig til det som temaet kan fra fødslen. Hvis man skal til at lave tilretninger, nye templates eller lignende, så er man som regel bedre stillet ved at lave sit eget tema. Det kræver ganske vidst at man ved lidt om HTML, PHP og CSS, men det gør tilpasning af et eksisterende tema også – og så slipper man for at skulle bruge tid på at sætte sig ind hvordan et kompliceret færdigt tema er opbygget.

Underscores
Når vi laver WordPress hjemmesider til vores egne projekter, så er de som regel baseret på _s, også kendt som Underscores, som er udviklet af Automattic. _s er et grundtema – hvis man blot downloader og installerer det, ser det ikke ud af ret meget, men til vores brug er det blot en fordel at det ikke indeholder en masse kompliceret styling som vi først skal bruge tid på at pille ud. s kommer til gengæld med en stor del af den grundfunktionalitet som vi har brug for hver gang vi laver et ny WordPress site, i form af velstruktureret kode som er let at forstå og arbejde videre med.

I denne artikel og de efterfølgende vil vi demonstrere hvordan man kan bruge _s som udgangspunkt for et custom WordPress tema til et lille kommunikationsbureau, Webðings. Den færdige hjemmeside er ikke særligt omfattende, men den illustrerer mange af de elementer som man skal bruge i et responsive WordPress tema. Det endelige resultat kan du se her – i artiklerne forklarer vi trin for trin hvordan du gør hvis du har lyst til at prøve selv.

1. Download Underscore_S basis-tema

Underscore_s downloades fra underscores.me. Vælg “advanced options” og udfyld felterne:

Theme Name: Vi kalder vores “Webðings”
Theme Slug: den maskinlæsbare udgave af temaets navn, i dette tilfælde “webthings”
Author: Dit eller dit firmas navn
Author URI: Dit eller dit firmas website
Description: En kort beskrivelse af temaet (vises i temaoversigten i kontrolpanelet).

underscore_s

Download underscore_s

Underscore_s findes også på Github.

2. Upload dit nye tema til din WordPress-installation

Vælg WordPress-tema

og aktiver det. Check også hvordan det ser ud – kønt er det ikke, endnu!

3. Indstillinger i WordPress

Ret indstillingerne via kontrolpanelet:

  • Kontrolpanel > Indstillinger > Generelt: Sidetitel og tagline
  • Kontrolpanel > Indstillinger > Diskussion: Slå evt. kommentarmuligheden fra, hvis den ikke skal bruges
  • Kontrolpanel > Indstillinger > Permanente links: vælg f.eks. ‘Navn på indlæg’

4. Temafilerne

_s-temaet består af følgende filer:

Sideskabeloner, stylesheet mm:
index.php – Standardskabelon som bruges hvis der ikke findes en mere specifik skabelon. Den bruges f.eks. til forsiden hvis man vælger at vise de seneste indlæg på forsiden.
page.php – Standardskabelon til sider
single.php – Visning af et enkelt indlæg
404.php – Den side der vises hvis serveren af en eller anden grund ikke kan åbne en URL.
archive.php – Skabelon til visning af kategorier, tags, m.m.
search.php – Søgeresultater

header.php – indeholder bl.a. site title, site description og navigation
sidebar.php – indeholder widgets
comments.php – indeholder kommentar-formularen og visning af kommentarer baseret på en funktion i inc/template-tags.php (se nedenfor)
footer.php – indeholder bl.a. WordPress-link

style.css – stylesheet, hvor udseendet (skrifttyper, farver m.m.) bestemmes. I _s er udgangspunktet et skrabet stylesheet der blot indeholder nogle fornuftige resets (så alle browsere så vidt muligt viser siden på samme måde) og skelettet som kan bruges til at lave det færdige stylesheet.

functions.php – hvor temaets funktioner definere, mere om det senere

Template parts:
Af hensyn til overskueligheden (og for at undgå at gentage den samme kode flere steder) benytter _s sig af template parts, dvs. filer med php-kodeblokke der kan hentes ind i andre templates:

content-none.php – Bestemmer hvad der vises når der ikke er noget indhold på en side eller hvis et søgeresultat er tomt
content-page.php – Indholdet på en WordPress-side; overskrift og indhold, men f.eks. ikke dato og forfatter.
content-single.php – Indholdet på et enkelt indlæg; overskrift, indhold, dato, forfatter, kategori, evt. tags samt kommentarer
content.php – Indholdet, som vises på f.eks. arkivsider, søgeresultater

F.eks. hentes indholdet af content-page.php ind i page.php med dette kald:

<?php get_template_part( 'content', 'page' ); ?>

Tema-foldere:
/inc/ – ekstra funktioner som anvendes i temaet /js/ – JavaScript, bl.a. til menuen /languages/ – .pot-fil der kan bruges som udgangspunkt for oversættelse af temaet /layouts/ – css til layouts med venstre- eller højrestillet sidebar

5. Baggrundsfarve (Custom Background)

_s giver mulighed for at baggrundsfarven kan skiftes fra kontrolpanelet, via Udseende > Baggrund. Det er ikke altid man ønsker at bruge denne mulighed – hvis ikke, så kan disse linjer i functions.php udkommenteres eller slettes:

add_theme_support( 'custom-background', apply_filters( 'webthings_custom_background_args', array( 'default-color' => 'ffffff', 'default-image' => '', ) ) );

6. Tilføj muligheden for at bruge thumbnails til indlæg (Featured Images)

Som regel vil vi gerne give mulighed for at bruge thumbnails i indlæg. I functions.php fjernes de to skråstreger som udkommenterer funktionen. Denne linje

//add_theme_support( 'post-thumbnails' );

rettes til

add_theme_support( 'post-thumbnails' );

I functions.php kan man også definere forskellige billedstørrelser, det er en god idé hvis du i temaet har brug for mere end de tre forskellige billedstørrelser man kan definere via Kontrolpanel > Indstillinger > Medier. Tilføj de ønskede billedstørrelser, så koden kommer til at se sådan ud:
`addthemesupport( 'post-thumbnails' );

add_image_size('thumb', 220, 280, true); add\_image\_size('small', 400, 9999, false);
add\_image\_size('medium', 700, 9999, false);
add\_image\_size('large', 1100, 9999, false);

I specifikationen af “thumb” størrelsen har vi givet de præcise billeddimensioner (220×280 pixel) som billedet skal croppes til. I de øvrige størrelser skalerer vi billederne proportionalt – vi angiver den ønskede bredde og sætter højden til 9999px (tallet skal blot være større end højden i pixels på det største billede som vi uploader).

content.php tilpasses, så indlæggets thumbnail vises på oversigtssiden (archive.php) og linker til selve indlægget. Tilføj følgende kode mellem <article> og <header> i content.php:

<article id="post-<?php the_ID(); ?>" <?php post_class('media'); ?>> <a class="image" href="<?php the_permalink(); ?>"><?php if (has_post_thumbnail()) { the_post_thumbnail('thumb'); } else { } ?> </a> <header class="entry-header">

Bemærk, at vi også lige fik sneget en class selector på post_class – den skal vi bruge til styling senere.
Hvis en større udgave af thumbnail-billedet skal vises på selve indlægget, tilføjes følgende kode i content-single.php (lige under </header>):

<?php if (has_post_thumbnail()) {
the_post_thumbnail('medium'); } else { } ?>

Her bruger vi medium-størrelsen af billedet, og det linker ikke til noget.

7. Udskifteligt header-billede/logo (Custom Header Image)

Hvis slutbrugeren skal kunne udskifte header-billedet (f.eks. et logo) via kontrolpanelet fjernes udkommenteringen af denne linje i functions.php:

//require get_template_directory() . '/inc/custom-header.php';

bliver til

require get_template_directory() . '/inc/custom-header.php';

Dernæst skal følgende kode fra /inc/custom-header.php tilføjes til header.php, mellem de to <div> “site-branding” og “site-navigation”:

<?php if ( get_header_image() ) : ?><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt=""></a>

Størrelsen på header-billedet kan defineres i inc/custom-header.php, hvor værdierne “width” og “height” ændres til det ønskede:

function webthings_custom_header_setup() { add_theme_support( 'custom-header', apply_filters( 'webthings_custom_header_args', array( 'default-image' => '', 'default-text-color' => '000000', 'width' => 1000, 'height' => 250, 'flex-height' => true, 'wp-head-callback' => 'webthings_header_style', 'admin-head-callback' => 'webthings_admin_header_style', 'admin-preview-callback' => 'webthings_admin_header_image', ) ) ); } add_action( 'after_setup_theme', 'webthings_custom_header_setup' );

8. Forskellige måder at præsentere kategorier

Metadata
Vi vil gerne have muligheden for at publicere nyheder løbende, som vises med metadata – dvs. dato, forfatter, kategori m.m. – og mulighed for at tillade kommentarer. Alle andre kategorier skal vises uden metadata og kommentarer.

Via Kontrolpanel > Indlæg > Kategorier omdøbes kategorien “Ikke kategoriseret” til “Nyheder”, husk også at ændre den korte titel (‘slug’) til “nyheder”.

Find kategoriens ID ved at checke url’en mens du redigerer kategorien:
underscores.webthings.dk/wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=1&post_type=post. Denne ID skal bruges i en Conditional Tag i content.php.

Thumbnails og indhold
media blocks

Vi vil gerne vise thumbnails til venstre for indholdet, i hvert fald på større skærme. Derfor har vi brug for lidt ekstra mark-up til vores styling.

Thumbnails er allerede føjet til content.php. Nu skal <header> og <content> pakkes ind i en ekstra div, som skal bruges til styling af kategorivisningen:

<div class="content-text"> <header class="entry-header"> ... </footer><!-- .entry-footer --> </div>

og desuden vil vi også fjerne datoen og linket til kategorien på alle andre kategorier end ‘Nyheder’. I <header> i content.php erstattes:

<?php if ('post' == get_post_type()) : ?>

med:

<?php if (in_category(1)) : ?>

og hele footeren i content.php skal også have en conditional, så linket til kategorien kun vises, hvis det er ‘Nyheder':

<?php if (in_category(1)) : ?><footer class="entry-footer"> ... </footer> <!-- .entry-footer --><?php endif; ?>

Og endelig skal den engelske tekst også fjernes, det sker ved at fjerne ordene “Posted in ” fra denne linje i content.php:

<span class="cat-links"><?php printf(__('Posted in %1$s', 'underscores'), $categories_list); ?> </span>

Her er hele koden til content.php:

Desuden skal visningen af datoen forenkles lidt, vi vil bare vise datoen, ikke ‘Posted on…’. I filen /inc/template-tags.php skal denne kode:

printf( __( '<span class="posted-on">Posted on %1$s</span><span class="byline"> by %2$s</span>', 'webthings' ),

erstattes med

printf( __( '<span class="posted-on">%1$s</span>', 'underscores' ),

9. Visning af et enkelt indlæg

Vi har allerede tilføjet thumbnail-billedet til content-single.php.

Datoen skal kun vises hvis indlægget er i kategorien “Nyheder” og desuden samler vi meta-oplysningerne i entry-headeren og sletter entry-footeren:

<div class="entry-meta"> <?php underscores_posted_on(); ?></div><!-- .entry-meta -->

i content-single.php udskiftes

<div class="entry-meta"> <?php underscores_posted_on(); ?> </div><!-- .entry-meta -->

med:

<?php if (in_category(1)) : ?> <div class="entry-meta"> <?php underscores_posted_on(); ?>, <?php the_category(', '); ?> <?php the_tags(': ', ', '); ?> </div><!-- .entry-meta --> <?php endif; ?>

Herefter slettes hele “entry-footer” i content-single.php.

Desuden fjerner vi links til forrige og næste indlæg ved at fjerne følgende kode fra single.php:

<?php underscores_post_nav(); ?>

10. En sideskabelon uden sidebar

En ny sideskabelon oprettes ved at lave en kopi af page.php – vi kalder den den page-wide.php og giver den skabelon-navnet ‘No sidebar’. I page-wide.php rettes “Template Name” til “No sidebar”:

<?php /** Template Name: No sidebar
* @package s */ get_header(); ?>

For at centrere indholdet omdøber vi “site-main” til “site-wide”:

<main id="main" class="site-main" role="main">

erstattes med:

<main id="main" class="site-wide" role="main">

Desuden skal sidebaren fjernes, og sidens indhold centreres. Sidebaren fjernes ved at slette denne kode:

<?php get_sidebar(); ?>

Nu har vi to sideskabeloner at vælge imellem: ‘Standard’ og ‘No sidebar’.

11. Sproget

_s er lavet med engelsk som grundsprog. Alle engelske tekstbidder er indsat i kald til WordPress oversættelsesfunktioner, __() og _e(). Man kan bruge filen languages/underscores.pot som udgangspunkt for egne oversættelser med Poedit.

Hvis temaet skal bruges til en “rent” dansksproget hjemmeside, er det som regel lettere at fjerne WordPress oversættelsesfunktioner og skrive de danske tekster direkte i temafilerne.

Du kan læse mere om den “rigtige” måde at oversætte WordPress temaer på i Translating WordPress Themes.

12. Men den har jo ikke noget tøj på!

På trods af alle de ændringer vi allerede har lavet, ser vores website jo forfærdeligt ud, helt nøgent, så i næste kapitel går vi igang med at tilføje layout, farver osv. via CSS.

uden styling

13. Indhold

Inden vi arbejder videre med flere ændringer til tema-filerne, tilføjes og struktureres indholdet. Vi skal bruge en forside, en kontakt-side, et par indlæg i kategorien ‘Nyheder’, samt indlæg i kategorien ‘Medarbejdere’.

  • Hvor mange kategorier?
  • Hvilke sider?
  • Menu oprettes og indstilles
  • Hvad skal vises på forsiden?
  • Kommentarer eller ej?

Du kan importere indholdet fra vores demo-site (Kontrolpanel > Værktøjer > Importer). Hent og udpak denne zip-fil: Webðings indhold

Dette er den første artikel i en serie om at bygge WordPress-temaer.

Næste kapitel: Mobile First

Links:
Se _s starter temaet i den “rå” udgave
Se en demo af temaet med de foreløbige tilpasninger
underscore_s på github
Temafiler til denne artikel