Enkelt dattertema til Twenty Twelve

Siden vi fikk det nye standardtemaet Twenty Twelve, har jeg jeg vært på utkikk etter en løsning på de store artiklene på forsiden og kategorisidene. Nå har jeg funnet løsningen, noe man også kan se på selve nettstedet her. Skjermbilde: TransformationPowerTools

Knepet er beskrevet i denne artikkelen. OBS! Artikkelen er på engelsk! Jeg skal imidlertid gjengi hva jeg gjorde utenom de tipsene jeg fikk utaskjærs. De er bortimot banalt enkle!

Det er lurt å ta en utskrift av denne artikkelen mens man fikler seg fram. Nederst er det en knapp som man enkelt trykker på (ref. Print Friendly). Da får man opp et skjermbilde som gjør det enkelt å skrive ut. Alternativt trykker man ctrl+shift+P…

Dattertemaer

Det første og viktigste hadde jeg allerede «på stabburet». Da snakker jeg om en snerten utvidelse (engelsk: plugin) som heter One-Click Child Theme. Dette er et mye enklere grep enn tidligere, da vi fiklet med mapper, filer og slikt på egen hånd.

Kjært barn har mange navn. Dattertema er den etablerte oversettelsen av child theme nå. Før het de avleggere. Hvorvidt man er botaniker eller språkviter, spiller mindre rolle. Poenget med et dattertema er at de endringer man vil foreta, de blir ikke borte ved en oppdatering av foreldertemaet (parent theme). Kanskje er det her at datter er den beste oversettelsen av alle, all den tid vi snakker om en forelder. Og hva man nedkommer med, er jo underordnet. Nesten. Som i det virkelige livet, er det aller beste at barnet er friskt og velfungerende, ikke sant?!?

Dattertemaer er veldig smarte for oss som ikke bruker engelsk som hovedspråk. Vi trenger en rekke småfikser som det ikke er like lurt å foreta direkte i foreldertemaet.

Utgangspunktet er dette: Dersom man holder seg med dattertemaer, vil spørringene alltid hente funksjoner i foreldertemaet med mindre de ikke er tilpasset i et dattertema. Dette er jo meget smart, Og det gir oss en ytterst smidig metode for å gjøre spesielle endringer, som vi vil beholde uavhengig av oppdateringer av et foreldretema. I tillegg nyter man alle fordelene som foreldertemaet måtte ha.

Oppsett av dattertema

Etter å ha installert utvidelsen One-Click Child Theme, er det tid for å lage ens eget dattertema.  

1. Det temaet man skal lage en datter av, må være aktivert. Hvis et annet tema er aktivert, er det altså det temaet man lager en datter av – ikke det man kanskje hadde tenkt å bruke på nettstedet. Etterpå. (Det er veldig enkelt å gjøre denne brøleren…)

Kikker man litt nærmere på menyene til venstre i Kontrollpanel etter å ha installert utvidelsen, vil en se at det er kommet til et nytt menyelement som heter Child Theme. Klikk dette, så framkommer det et litt stusslig skjermbilde til høyre for menyene i Kontrollpanel.

  • For det første må jo barnet ha et navn. Personlig kombinerer jeg navnet på foreldertemaet med mitt eget navn, jfr. terjetwelve. Man bør altså ikke gjøre som Pippi Langstrømpe som insisterer på å bruke alle fornavn, ved alle anledninger. Slik holder jeg dem atskilt, dog med en henvisning til hvilket tema jeg til en hver tid har som forelder. Dette er lurt fordi det kan fort bli mange døtre, etter hvert…
  • Dernest ber utvidelsen deg om en beskrivelse av dattertemaet. Det er legio om man vil skrive inn noe som helst, eller å la feltet stå tomt. Dette har egentlig liten betydning, med mindre man har tenkt å lage et sprekt tema som man vil legge ut som GPL.
  • Det siste punktet er svært enkelt, naturligvis. Det er her man fyller inn navnet på den som har opprettet dattertemaet. Som regel er det jo en selv.

Forutsetninger for koden

Etter å ha satt opp et dattertema på nettstedet, er det på tide å begå dette litt kryptiske som vi kaller «koding». For å få dette til, må en lage en egen fil som heter functions.php (hele navnet, takk!). Denne filen setter opp Temainnstillinger, dog uten å lage et eget skjermbilde og/eller menyelement i Kontrollpanel.

Det er mulig jeg lager en artikkel om hvordan man får til dette, også. Svært mange temaer har dette «rett ut av boksen» – slik Twenty Twelve har i utgangspunktet. Et dattertema får ikke tildelt noe slikt uten et par linjer til med kode i … ja, nettopp! Du gjettet vel den! Dette må også tilpasses i functions.php!

  • funtcions.php lager du på din egen enhet. I Windows gjør man dette aller enklest med Notisblokk. Du finner programmet under Tilbehør til menyen under Windows-logoen – også kjent som Start-menyen.

– Det beste er imidlertid et eget et program som en kan lage kodesnutter med. Et av de beste på nett er gratis og heter Notepad++ Dette er i tillegg det mest optimale for Linux-folket. Med det får man slike snertne sider å jobbe med som i bildet helt øverst i artikkelen, også. Nummererte linjer er veldig smart dersom noe er i uorden fordi man får en referanse om hvor feilen finnes, både når det gjelder filnavn og i hvilken linje problemet sitter.

  • Det sentrale poenget er at man ikke benytter et vanlig tekstprogram som f. eks. Microsoft Office, LibreOffice eller enhetens standard skriveprogram. Grunnen er at disse programmene legger til en rekke tekstattributter som f. eks. mellomrom, etc. i det skjulte. Slikt vil vi ikke ha med. Teksten (dvs. den kopierte koden) må være rå, uten tilpasninger, tekstattributter, m.m.

NB! Har man trikset og fikset med samme filnavn til flere temaer, er det anbefalt å ha et system for organiseringen av dem. Ellers overskriver man en gammel snutt, som hadde betydning i et annet tema. Alt går tapt hver eneste gang filen overskrives, på egen enhet!

  • Ved lagring skal hele filnavnet functions.php skrives inn. Ellers blir den lagret som en vanlig tekstfil. Det endrer ikke en tøddel i WordPress. Altså er jobben forgjeves! Det sentrale er selvsagt at functions.php skal kommunisere med programmet PHP, derav behovet for .php i slutten av filnavnet. 

 Selve kodesnutten

Under har jeg limt inn den koden som jeg har endret til mitt behov.

Aller viktigst er det at helt øverst i filen det stå:

<?php

NB! Ingen mellomrom, selv ikke før linjeskift fordi dette er selve syntaksen (regelen) for en spørring i WordPress mot PHP.

Legg merke til bruken av /(skråstrek) og *(stjerne). Dette er slikt mange har brent seg på fordi mellom disse tegnene er det kommentarfelter til eget, internt bruk. Meget hendig hvis man skal ha en rekke spesialfunksjoner og/eller temainnstillinger utenom et foreldertema  Skal man ha tekstbryting over flere linjer, så åpner man kommentarfeltet med /**(én skråstrek og to stjerner). Så legger man til én stjerne for hver hver nye, påbegynte linje vi eventuelt trenger, innen vi avslutter feltet med det **/(to stjerner og en skråstrek).

NB! I det øverste kommentarfeltet (det som starter med /** og slutter med **/) har jeg lagt inn et par parenteser. I stedet for dem,  skal man skrive inn sitt eget selvlagde navn på dattertemaet. Og husk: Hvert linjeskift må åpne med en stjerne.

Videre har jeg for hver av mine nye funksjoner plusset på litt tekst over hver. De er innkapslet med /* og */) Da har jeg oversikt over hvilke tilpasninger som gjør hva i mine innstillinger i dattertemaet.

For å få tilpasningene på plass, tilordner jeg dem med klassen add_filter. Dette er en smidig måte å legge til egne ting som hekter seg (eng. hooks) inn i WordPress-løkka (eng. loop).

I mitt tilfelle har jeg tilpasset temaet til å vise to kolonners for- og kategoriside(r). Ønsker man flere kolonner i et av maldokumentene, så må det tilordnes nye klasser. Poenget er at add_filter er en kommando som hekter mitt to-kolonners oppsett inn i temaet. Vil man ha flere, så skifter man ut tallet  two i category_two_column_classes inne i parentesen med det antall en ønsker. Disse må være på engelsk fordi WordPress krever det.

Her er mine innstillinger i function.php:

<?php
/** (navnet på dattertemaet) functions.php definerer funksjoner i dattertemaet 
* (temanavnet).
* Setter opp dattertemaet og tilbyr noen hjelpefunksjoner som blir brukt i temaets
* maldokumenter. Andre kode snutter er knyttet til forskjellige handlinger og 
* filtre som hekter (eng: hooks) seg inn i WordPress. **/

/* Dette første filteret lager to kolonner på kategorisidene. */
add_filter('post_class','category_two_column_classes');

function category_two_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-column-post-left';
endif;
return $classes;
}
/** Dette filteret legger til to kolonner på forsiden, 
også kalt Hjem i mange temaer. **/
add_filter('post_class','home_two_column_classes');

function home_two_column_classes( $classes ) {
global $wp_query;
if( is_home() ) :
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-column-post-left';
endif;
return $classes;
}

Legg merke til at de to forskjellige temainnstillingene er omtrent prikk like med unntak for linjen

if( is_home() ) :

i stedet for

if( is_category() ) :

Leser man mellom /* og */, så har jeg forklart hvorfor dette er gjort. Dette skyldes at forsiden refererer til et annet maldokument enn en kategoriside. Verre er det ikke.

Når dette er ferdig, og filen er vel lagret på eget stabbur, er det tid for å få den dit den hører hjemme, altså lastet opp til nettstedet. Dette avhenger av hvilken metode man benytter. Selv har jeg en filhåndterer hos min tilbyder UnoEuro. Andre velger å overføre filer med ftp (les: en filoverføringsprotokoll). Noen har sågar en localhost, osv. Det er mange veier til Roma, sågar omveier. Uansett skal filen lastes inn i temamappen for ditt dattertema på nettstedet.

Da er halve jobben gjort!

Men, det skjer jo ingenting?!?

Tenker den utålmodige, som har sjekket nettstedets forside. Vel. Man er halvveis, som sagt.

Det er én ting å gjøre tilpasninger i temainnstillingene. En annen å få dette på plass, med to-kolonners inndeling av alle artiklene på nettet. Det er er her vi har neste knallbombe til et endelig resultat. Metoden heter CSS, eller Cascading Style Sheet. Vi trenger altså et stilark (eng. style sheet).

  1. For å finne denne filen, klikker man Temaer under Utseende i Kontrollpanel.
  2. Det nye dattertemaet må være aktivert. Dette er svært sannsynlig, i og med at man opprettet et dattertema. Er du i tvil, så kan dette avleses i navnet på fanen Gjeldende tema i skjermbildet Håndter temaer. Du står i dette skjermbildet etter å ha klikket menyelementet Temaer til venstre. Dette er listet øverst blant de installerte temaene på nettstedet. Hvis dattertemaet ikke er aktivert, så gjør for all del dette nå.
  3. Det er en rekke pekere listet opp ved siden av bildet til dattertemaet. En av disse pekerne heter Rediger CSS. Klikk dette!
  4. Nå får du opp et skjermbilde som heter CSS stilark-editor, eller tilsvarende. Under den grønne teksten skal man plassere de siste justeringene. Dette er hva TransformationPowerTools har beregnet for meg. Og forhåpentlig deg. Lim inn denne snutten under den grønne teksten:
.two-column-post {
 width: 47%;
 float: left;
 margin-left: 5.9%;
}

.two-column-post-left {
clear: left; 
margin-left: 0;
}

Forklaring: Punktum først i en setning er kanskje drøyt, for de fleste. Dette er imidlertid slikt som nettlesere forstår/tegner ut nettsider. Punktumet betyr ikke annet enn at det er nettopp klassen .two-column-post vi skal ha tilpasset, eventuelt .three-column… for tre kolonner, osv. Samtidig har vi definert at bredden per kolonne skal være 47% av selve innholdsområdet (eng. content area), og at vi ønsker en marg på 5,9% rundt hver kolonne.

For at dette regnestykket skal bli pyntelig på nettsidene, må neste CSS-blokk justere hele venstre side i innholdsområdet på nettsiden. Ellers vil vi få et innrykk på 5,9%, også der, Det ønsker vi ikke. Derfor nuller vi margen til venstre gjennom clear: left; og margin-left: 0; for alt som havner til venstre i innholdsområdet, jfr. .two-coloumn-post-left.

Ønsker man å snu nettsidens justering, så bytter man ut alle referanser til venstre (eng. left) med justering til høyre (eng. right).

Fiffig og enkelt, spør du meg!

I tillegg liker jeg jevne kanter på begge sider av artiklene. Da må jeg ha denne linjen i tillegg:

p {
text-align: justify;
}

Når det gjelder jevne marger i artikler, så er det både «enker» (eng. widows) og «lausunger» (eng. orphans) innen typografi. For ikke å snakke om at man kan få l-a-n-g-e ord som strekker seg halvveis rundt øyeeplet, med mindre man installerer en annen, smart utvidelse: wp-typography. Dessverre kan det se ut til at utvidelsen ikke lenger oppdateres. Men den gjør fortsatt jobben med å dele ord, justere tekst og tilpasse slikt som man i avisverden har en desk til å gjøre. Inntil utvidelsen lager mye støy, fortsetter jeg å holde meg til den.

God blogging!

Print Friendly

Ros, ris og bauling: