Tilpasse et child-theme

Denne vejledning handler om tilpasning af standard-temaet Twenty Fourteen gennem child-tema.

Når WordPress indlæser style-sheets, indlæses det oprindelige tema først efterfulgt af child-temaet. Fordelen er at den sidst indlæste stil vinder. Dvs. uanset hvordan udseendet er defineret i hovedtemaet, er det ændringen i child-temaet der bestemmer.

Style.css-filen for selve Twenty Fourteen er meget stor – på hele 4317 linjer. En del af stilene nedarves, og det kan derfor være meget svært at finde den stil der styrer udseendet på et konkret element. Det er derfor meget nemmere i stedet at tilføje en ændring i style.css-filen i child-themet. Den indeholder nemlig som udgangspunkt meget lidt.

Ændringen behøver kun at vedrøre den klasse, som du ønsker ændret, og den kan meget nemt findes via browserens webudviklerværktøj. Nedenstående stammer fra Chromes “Vis detaljer om elementet” (F12), men Firefox og IE har noget tilsvarende.

 Ændring af udseende

I nedenstående eksempel vil jeg ændre den meget sorte farve i Twenty Fourteen. Temaet selv giver mig ikke mulighed for at ændre noget. Selv om ordet “Baggrund” optræder i tilpasningen af temaet, er det kun skærmens baggrund der menes. På billedet nedenfor markeret med rødt.

image001

Jeg har derfor anbragt markøren på det sorte område og åbnet Vis detaljer om elementet. Det giver nedenstående resultat:

Som det ses, hedder elementets klasse “#secondary” image008og i css’en er farven sat til transparent. Dvs. det er en anden stils farve der “trænger” igennem. Det er heldigvis ligemeget. Jeg kan dobbeltklikke på ordet “transparent” og derved få lov til selv at definere farven, her yellow. Chrome giver mig med det samme lov til at se resultatet…

Det er ikke smukt, men det er nyttigt. Jeg overfører nu stilen til min style.css-fil ved simpelt hen at copypaste fra Chrome og derefter indsætte i filen. Det kan gøres enten via almindelig filadgang på computeren eller ved at gå til Kontrolpanel/Dashboard, vælge Temaer/Editor. Se illustrationen nedenfor:

image010

Når jeg derefter opdaterer filen, skifter min hjemmeside permanent udseende…

Den sorte topdel findes på samme måde. Den hedder i øvrigt “.header-main” og har ikke nogen defineret farve i css’en. Men læg mærke til at Chrome giver dig mulighed for selv at indsætte farven i css’en, og altså på forhånd lege med forskellige muligheder. Nedenunder ses den urettede kode til venstre og den rettede kode til højre.

image012 image014

Du er altså ikke nødt til at nøjes med eksisterende muligheder, men kan selv indsætte nye. Brug fx Dreamweaver til at finde den rigtige CSS-kode.

 Ændring af indholdet

Som bekendt styrer CSS kun udseendet af elementerne. Opsætningen af elementerne styres af de php-filer, der styrer opsætningen af de enkelte sider. Her er det vigtigt at forstå at det skærmbillede du ser i WP, er sammensat af mange php-filer, der hver især styrer en del af siden. Nedenfor har jeg forsøgt at gengive hvordan en typisk WP-hjemmeside kan være sammensat, og hvilke filer der styrer det pågældende område.

wp-opbygning

Når du skal ændre fx rækkefølgen af elementer på en side eller helt fjerne et af dem, skal du først finde den php-fil, der styrer området. Dernæst skal du kopiere den pågældende php-fil ind i child-temaet, åbne den og lave din ændring.

Det er altså lidt mere kompliceret end ved CSS-ændringer, men det gode er at du bare skal slette php-filen igen, hvis du ikke kan få det til at virke.

Ændring af header-billedets placering

Nedenfor viser jeg hvordan du kan ændre placeringen af header-billedet i Twenty Fourteen, således at topmenuen står ovenover billedet og ikke nedenfor (som på illustrationen nedenfor):

image015

Først skal du kopiere filen header.php fra Twenty Fourteen’s mappe over i dit child-temas mappe. Åbn den. Find vej til området, der styrer “body”. Det er cirka omkring linje 33. Find flg.:

<?php if ( get_header_image() ) : ?>
 <div id="site-header">
 <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>
 </div>
 <?php endif; ?>

Alt dette skal du kopiere og flytte nedenunder den kode, der styrer topmenuen (starter omkring linje 50). Den ser sådan ud:

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
 <button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
 <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
 <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
 </nav>
 </div>

Resultatet skulle gerne se således ud:

Andre situationer kan selvfølgelig være mere svære, men dette er grundprincippet.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

Endnu en side om WordPress