Har en del gånger funderat över om jag ska modifiera det tema jag valt för denna webbplats. Jag har alltid kommit fram till samma svar. Att det inte är värt det för mig, om det innebär att jag skulle behöva göra ändringarna varje gång grund-temat uppdateras.

Men till slut satte jag mig och gjorde en sökning och hittade så klart en lösning. Det går att använda ett barn-tema, att ärva från ett annat tema och göra ändringar i barnet. Jag har följt anvisningarna på Wordress enligt länk 1 nedan.

Det jag vill göra är att modifiera sidhuvudet så att den tar mindre plats. Den vita ytan ovan bilden med texten och sökfunktionen, dessa vill jag flyta ovanpå bilden.

Låt oss tänka oss att jag vill modifiera temat med namnet ”twentyeleven”, då gör jag enligt nedan.

Filer

../wp-content/themes/
../wp-content/themes/twentyeleven-child/../wp-content/themes/twentyeleven-child/functions.php
../wp-content/themes/twentyeleven-child/style.css

Jag skapade en mapp under ../wp-content/themes/ som heter till exempel ”twentyeleven-child”. Att namnge barn-teman med ”child” i slutet är rekommenderat, men inget krav. Därefter skapade jag två filer, functions.php och style.css. I functions.php finns kod för att läsa in både stil från förälder-temat, och i style.css så finns så klart den stil-beskrivning som gör det jag vill.

functions.php

<?php
 /*
 2016-11-14
 Rickard Persson
 Following https://codex.wordpress.org/Child_Themes
 All I want is to change the header for the parent theme, to
 not use so much space.
 The function my_theme_enqueue_styles() is used to load the styles. First
 from the parent theme, and next from this child-theme.
 */
 function my_theme_enqueue_styles() {

 // Below is 'twentyeleven-style' for the Twenty Eleven theme.
     $parent_style = 'parent-style'; 

    // Parent style
     wp_enqueue_style( $parent_style, 
  get_template_directory_uri() . '/style.css' );
     // Child style
     wp_enqueue_style( 'child-style',
         get_stylesheet_directory_uri() . '/style.css',
         array( $parent_style ),
         wp_get_theme()->get('Version')
     );
 }
 add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Funktionen visar hur man först läser från förälderns CSS, och sedan från barnets CSS. Med hjälp av ”get_template_directory_uri()” hämtas sökvägen från föräldern, och med ”get_stylesheet_directory_uri()” så hämtas sökväg till barnet. Att det finns fler invariabler när det läses in från barnet har jag inte tagit reda på orsaken till. Koden tycker jag är rätt så självförklarande i övrigt.

style.css

/*
  Theme Name:   Twenty Eleven Child
  Theme URI:    https://www.ripop.se
  Description:  Twenty Eleven Child Theme
  Author:       Rickard Persson
  Author URI:   https://www.ripop.se
  Template:     twentyeleven
  Version:      1.0.0
  License:      GNU General Public License v2 or later
  License URI:  http://www.gnu.org/licenses/gpl-2.0.html
  Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
  Text Domain:  twenty-11-child
 */
 /*
 Following the exelent documentation on 
 https://codex.wordpress.org/Child_Themes
 */

#branding hgroup {
     position: absolute;
 }

Här är det viktigt att man anger ”Template” som pekar på rätt ”förälder”. Man behöver inte ha med alla dessa poster som jag har gjort ovan. Tema-namn, beskrivning, template och kanske något annat kan behövas, är osäker på minimi-kraven. Det är dock alltid bra att fylla i så mycket som möjligt av den metadata som går att fylla i. Den ändring av CSS som jag gjort i slutet av filen är inte intressant att orda om i denna text.

Kommentar

Glöm inte att PHP-filer får inte avslutas med ”?>” som man normalt tänker sig, och som nästan alltid beskrivs att man ska göra i PHP-manualer. Jag hade nästan glömt bort detta och hade först en liten kris, och tänkte att jag inte skulle använda denna metod. Men när jag kom på att jag läst om detta att låta PHP-filerna avslutas öppna, så fungerade allt som det skulle.

Bör också nämnas att de ändringar som gjorts, innebär att layouten inte fungerar så bra på mindre skärmar. I en mobil så kläms sidhuvudet ihop, så att texten ”Rickard Persson …” göms bakom menyn. Det var mindre bra. Från vad jag kan tolka det så ställs vissa saker in i sidhuvudet dynamiskt, antingen via kod eller någon media-notering. Får se om jag hittar någon lösning på detta.

Länkar:

1. https://codex.wordpress.org/Child_Themes