kaxigt.com

Den här artikelguiden handlar om hur du bygger ett barntema till WordPress.

Vill du bygga ett uppdateringssäkert tema så är det ett barntema du vill ha. De har dessutom blivit populära idag och det krävs inga jättestora kunskaper för att göra ett enkelt fungerande tema.

Jag ska börja med att förklara vad ett barntema är och varför du bör ha ett.

Så, vad är då ett barntema? WordPress definierar det så här:

Ett barntema är alltså ett tema som ärver både funktion och stil från ett annat tema, det vill säga ett moder/föräldratema. Barnteman rekommenderas vi att använda när vi vill modifiera ett existerande föräldratema utan att förändringarna försvinner vid varje uppdatering av modertemat. Ett barntema är alltså uppdateringssäkert.

Eftersom alla (modifierade) koder du har skrivit är placerade i barntemat så är de även lätta att överblicka, och lättåtkomliga om du skulle vilja ändra någon kod. Det är alltså också tidssparande att ha ett barntema.

Nu ska vi bygga

Börja med att skapa en mapp med barntemats namn. Det behöver absolut inte heta namnet på modertemat följt av ”Child Theme”. Välj något du vill ha. För att allt sedan ska fungera så finns det två minimikrav:

1) det måste finnas en stilmall – style.css – i vilken man anger namnet på barntemat samt vilket som är modertemat.

2) det ska finnas en funktionsfil – function.php – från vilken vi kallar på barntemats stilmall och javascript, och som kallar på resten av koderna från modertemat vilka inte ändras i barntemat.

3) Jag lägger till en tredje rekommendation och det är att du även skapar en screenshot som hänvisar till temat så du hittar det i temakatalogen. Ha för vana att alltid skapa en screenshot när du bygger dina teman. Den behöver inte vara så avancerad gjord utan det räcker med namnet på barntemat. Storleken ska vara 1200 x 900px. Vill du bygga teman till WordPress Theme Repository måste det finnas en screenshot med till temat.

Det är allt. Hur många temafiler du sedan vill ha avgör du själv. Header är bra att ha, i synnerhet om du exempelvis har twittercard och fler meta name/meta properties som till Facebook och annan social media. Väljer du att tweaka till en nästan ny layout så krävs det givetvis fler filer.

Vi ska i alla fall börja med att kika på stilmallen – style.css.

Högst upp i style.css

/*
Theme Name: Namnet på ditt barntema (nödvändig)
Author: Ditt Namn (ej nödvändig)
Author URI: (ej nödvändig)
Description: (ej nödvändig)
Tags: (ej nödvändig)
Version:1.0 (ej nödvändigt)
Template: twentytwenty eller det standardtema du väljer (nödvändig)
Text Domain: Namnet på ditt barntema (ej nödvändig men du kan skapa en)
*/

Vad gäller textdomän så kan du få en varning om att du har två stycken textdomäner när du testar barntemat i pluginet Theme Check.

Det beror på att det är ett barntema och att alla originalfiler som tillhör temat pekar mot modertemat, i synnerhet de filer du inte använder men som ändå måste finnas eftersom att modertemat omfattar alla temafiler (även de du valt bort) och är dess huvudtextdomän. Det gör inget, två textdomäner är tillåtet i barntemat förutsatt att de kallar på rätt barn/modertema.

Det finns även ett plugin som testar barnteman. Jag har inte när det här inlägget skrivs hunnit att testa just den pluggen så jag vet tyvärr inte hur funktionell den är.

Vi fortsätter.

I stilmallen kopierar du in den css från modertemat som du vill använda, och det går utmärkt att ändra på både egenskap och värde. Läs gärna mer om detta i min css-guide. Du kan också lägga till helt ny css som passar din html om du ändrar strukturen på temat.

Observera att för varje CSS-kod du kopierar in från modertemat, och som du ändrar på, kommer att bli överskrivna av barntemat (vilket ju är tanken). Fast ibland kanske du inte får de ändringar du vill ha, lägg då bara till !important sist i värdet på selectorn precis innan semicolon ; så brukar det fungera.

Functions.php

@import url(”../modertema/style.css”);
Fortfarande finns det tyvärr vissa guider där man använder sig av @import regeln. Numer används inte den för att kalla på filer/dokument utan praxis är att man ”köar” dem från respektive mapp via funktionen wp_enqueue_scripts and styles.

Källa: https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet

wp_enqueue_scripts and styles: alternativ 1
Den här koden använder du om du bara vill ändra färger och så, inga större förändringar eller nya css-attribut, selektorer och liknande, även om det fungerar.

add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
/**FUNCTION ENQEUE CHILD THEME STYLES*/
function child_theme_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

wp_enqueue_scripts and styles: alternativ 2
De flesta som gör barnteman är nog intresserade av att göra lite större modifieringar än att bara ändra färgsättningar och storlek på fonten, exempelvis lägga till nya nya attribut, selektorer, annan css, och block. Då kan det vara bättre att använda nedanstående kod.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()--->get('Version')
    );
}

Har du flera filer som ska kallas så lägger du in dem en i taget under varandra. CSS-filerna för sig och JavaScript-filerna för sig. Vissa JavaScript-filer är beroende av en CSS-fil för att fungera, då måste du kalla på dem båda. I exemplet här under ser du att funktionen ”hover” kräver både JavaScript och CSS.

// Loads JavaScript file 
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'hover-js', get_stylesheet_directory_uri() . '/js/hover.js', array( 'jquery' ), '', true );

//Loads our CSS files
// Add Font Awsome.
wp_enqueue_style( 'font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css', array(), '' );
// Add CSS hover.
wp_enqueue_style( 'hover', get_stylesheet_directory_uri() . '/css/hover.css', array(), '' );

Hur du laddar in externa filer, ex Google Font, i wp_enqueue_scripts and styles

// Add G-fonts.
function load_fonts() {
            wp_register_style('child_theme_googleFonts', 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&family=Oswald:wght@200;300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet"', array(), true );
            wp_enqueue_style( 'child_theme_-googleFonts');
        }
    add_action('wp_print_styles', 'load_fonts'); 

Sist på sidan kan du se hur min funktionsfil ser ut när jag ”köar” filerna. Kopiera den gärna om du vill men glöm inte att ändra namnet till ditt barntema.

Men exakt var lägger jag in filerna jag vill ha med?

wp_enqueue_scripts and styles alternativ 1

add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles' ); my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . style.css' }

wp_enqueue_scripts and styles alternativ 2

php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()-->get('Version') );
HÄR LÄGGER DU IN FILERNA 
}

Vill du bygga barnteman till WordPress Theme Directory? För bli godkänd behöver temat ha passerat både Theme Sniffer (delvis) och Theme Check samt att du förstår vad som krävs för att bygga teman till WordPress. Dvs deras riktlinjer.

Sökvägen för temats stilmall

get_stylesheet_directory() // PATH (parent or child) 
get_stylesheet_directory_uri() // URI (parent or child, checks for SSL)

get_stylesheet_directory() – file path to current theme directory 
get_stylesheet_directory_uri() – URL to current theme directory
get_template_directory() – file path to parent theme directory
get_template_directory_uri() – URL to parent theme directory

https://codex.wordpress.org/Function_Reference/get_stylesheet_directory
https://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri
https://codex.wordpress.org/Function_Reference/get_template_directory
https://developer.wordpress.org/reference/functions/get_template_directory_uri/

Ska du inkludera text eller bilder direkt i barntemats filer utanför loopen så behövs det alltså några ändringar i php-koden. Style.css räknas ju som huvudstilmall i roten för barntemats mapp, då används get_stylesheet_directory(). Så lägger du manuellt in bilder i ditt tema från exempelvis mappen images måste du alltså använda get_stylesheet_directory_uri().

<img src="<php echo get_stylesheet_directory_uri(); ?/>/images/my_picture.png" alt="" />

Lägger du in textfunktioner i ditt tema när du skapar egna page-templates så använder du esc_html_e

esc_html_e( 'code is poetry', 'twentytwentychild' ); 

Kaxigt enqueue-funktion

////////////////////////////////////////////////////////////////////////////////
// Enqueue scripts and stylesheets 
add_action( 'wp_enqueue_scripts', 'childtheme_enqueue_styles' );
/**FUNCTION ENQEUE CHILD THEME STYLES*/
function childtheme_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
function childtheme_enqueue_styles_scripts() {
	// Loads Custom JavaScript file 
	wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '', true );
	// Loads Custom Function JavaScript file 
	wp_enqueue_script( 'function-js', get_stylesheet_directory_uri() . '/js/function.js', array( 'jquery' ), '', true );
//Loads our CSS files
	// Add Font Awsome.
	wp_enqueue_style( 'font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css', array(), '' );
	// Add Genericon.
	wp_enqueue_style( 'genericons', get_stylesheet_directory_uri() . '/genericons/genericons.css', array(), '3.2' );
}
	add_action( 'wp_enqueue_scripts', 'childtheme_enqueue_styles_scripts' );
// Add G-fonts.
function load_fonts() {
            wp_register_style('child_theme_googleFonts', 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&family=Oswald:wght@200;300;400;700&display=swap" rel="stylesheet"', array(), true );
            wp_enqueue_style( 'child_theme-googleFonts');
  }
     add_action('wp_print_styles', 'load_fonts'); 

Ladda ned ett fördefinierat barntema.

Lycka till!