Bruger skabeloner for sider

Det valgte tema til at repræsentere ens indhold i WordPress indeholder forskellige skabeloner til både sider (pages) og indlæg (posts). Hvis man ikke er tilfreds med de skabeloner kan man lave et child-tema hvor man laver formateringen om på forskellige måder

  1. Man kan lave custom css formatering i css filen i child-temaet, som overskriver formateringen fra forældretemaet. Dette vil så gælde alle sider eller alle indlæg.
  2. Man kan lave nye sideskabeloner, som eksisterer sammen med de gamle. Og derved kan man også vælge om en side/indlæg skal sættes op i temaets skabelon eller i en bruger-oprettet skabelon.
  3. Man kan oprette nye bruger widget områder. Dette omtales i næste indlæg.

For at lave en ny side eller indlæg-skabelon skal du først kopiere den eksisterende skabelon fra forældretemaet til child temaet. I twenty Seventeen bliver det til “page” for sider og “single” for indlæg. Dem omdøber vi så til page-custom.php og single-custom.php.

For at fortælle WordPress, at vi nu har en ny brugerskabelon, skal du i starten af filen give den en titel. Det første i en side ser ud som følger:

Starten af en page skabelon i Twenty Seventeen, page.php
Den nye skabelon er navngivet “Custom” i filen page-custom.php

Og den nye har nu fået et navn, som WordPress finder og identificerer som en ny skabelon.
Nedenunder er der et billede af hvordan en almindelig side ser ud i Twenty Seventeen.

Twenty Seventeen – eksempel på en almindelig side.

Det synes vi ikke at de altid skal se ud, så vores custom side template skal fremvise den på følgende måde:

Hvordan en custom sideskabelon, viser siden

Meningen er så, at man skal vælge mellem de to skabeloner, når man opretter en ny side.

Først kan man gå til den gamle siden, højreklikke og vælge “undersøg”, så finder man side-headeren og titlen, ser at formatteringen er som følger:

Default formattering for entryheader

Den floater til venstre og er kun 36%. vi fjerner float : left og ændrer width til 100%. Desuden skal vi have overskriften i midten. (text-align : center). Så det ser sådan ud

Custom formattering for entryheader.

På samme måde gør vi titlen 20px stor:

Overskriften bliver sat til 20px

På samme måde gør vi entry indholdet 100% bredt:

Indholdet gøres 100% bredt

Disse egenskaber skal vores nye sideskabelon indeholde. For at vi ikke kommer i karambolage med andre css. klasser, så laver vi nogle nye,

  1. entry-header -> custom-header-page, som indeholder den ny formattering for entry header
  2. page-title –> custom-title-page, formatering af titlen
  3. entry-content -> custom-content-page, formatering af siden

og opretter dem i filen style.css i childt temaet. Nu mangler der 2 ting.

  1. Vi skal omdøbe klasserne, i filen page, – og
  2. vi skal specificere at det er en custom – indhold

Når vi ser på filen page-custom ser vi at klasserne ikke defineres der. Derimod hentes de fra en anden fil, ‘template-parts/page/content-page.php’ ved kald af funktionen,

get_template_part( 'template-parts/page/content', 'page' );

I funktionsreferencen for funktionen get_template_part står der bl. a.
For the $name parameter, if the file is called “{slug}-special.php” then specify “special”. I vores tilfælde er special=custom.

Men først skal vi lave en ‘template-parts/page/content-custom.php’ . Vi tager simpelt hen den fra forældre temaet (template-parts/page/content-page), kopierer den til child-temaet og omdøber den til “content-custom”. Derefter skal vi ændre koden i vores custom side til:

get_template_part( 'template-parts/page/content', 'custom' );

Det vil sige, at nu har vi udført step 2, så mangler vi bare at omdøbe klasserne i filen content-custom.php.:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="custom-header-page">
	<?php the_title( '<h1 class="custom-title-page">', '</h1>' ); ?>
	<?php twentyseventeen_edit_link( get_the_ID() ); ?>
    </header><!-- .entry-header -->
    <div class="custom-content-page">
	<?php
	    the_content();
            wp_link_pages(
		array(
		    'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
		    'after'  => '</div>',
	    ));  ?>
    </div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->

Når man så opretter en side får man så valget mellem standard og custom:

Og når man vælger Custom, – så får man en side som Custom page vist oven for

Skriv et svar

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.