Enkelt dattertema til Twenty Twelve

Siden vi fikk det nye stan­dard­te­ma­et Twen­ty Twel­ve, har jeg jeg vært på utkikk etter en løs­ning på de sto­re artik­le­ne på for­si­den og kate­go­ri­si­de­ne. Nå har jeg fun­net løs­nin­gen, noe man også kan se på selve nett­ste­det her. Skjerm­bil­de: Trans­for­ma­tion­PowerTo­ols

Kne­pet er beskre­vet i den­ne artik­ke­lenOBS! Artik­ke­len er på engelsk! Jeg skal imid­ler­tid gjen­gi hva jeg gjor­de uten­om de tip­se­ne jeg fikk uta­skjærs. De er bort­imot banalt enk­le!

Det er lurt å ta en utskrift av den­ne artik­ke­len mens man fik­ler seg fram. Nederst er det en kna­pp som man enkelt tryk­ker på (ref. Print Fri­end­ly). Da får man opp et skjerm­bil­de som gjør det enkelt å skri­ve ut. Alter­na­tivt tryk­ker man ctrl+shift+P…

Dattertemaer

Det førs­te og vik­tigs­te had­de jeg alle­re­de «på stab­bu­ret». Da snak­ker jeg om en sner­ten utvi­del­se (engelsk: plu­gin) som heter One-Click Child The­me. Det­te er et mye enk­le­re grep enn tid­li­ge­re, da vi fik­let med map­per, filer og slikt på egen hånd.

Kjært barn har man­ge navn. Dat­ter­tema er den etab­ler­te over­set­tel­sen av child the­me nå. Før het de avleg­ge­re. Hvor­vidt man er bota­ni­ker eller språk­vi­ter, spil­ler mind­re rol­le. Poen­get med et dat­ter­tema er at de end­rin­ger man vil fore­ta, de blir ikke borte ved en opp­da­te­ring av for­el­der­te­ma­et (parent the­me). Kan­skje er det her at dat­ter er den bes­te over­set­tel­sen av alle, all den tid vi snak­ker om en for­el­der. Og hva man ned­kom­mer med, er jo under­ord­net. Nes­ten. Som i det vir­ke­li­ge livet, er det aller bes­te at bar­net er friskt og vel­fun­ge­ren­de, ikke sant?!?

Dat­ter­te­ma­er er vel­dig smar­te for oss som ikke bru­ker engelsk som hoved­språk. Vi tren­ger en rek­ke små­fik­ser som det ikke er like lurt å fore­ta direk­te i for­el­der­te­ma­et.

Utgangs­punk­tet er det­te: Der­som man hol­der seg med dat­ter­te­ma­er, vil spør­rin­ge­ne all­tid hen­te funk­sjo­ner i for­el­der­te­ma­et med mind­re de ikke er til­pas­set i et dat­ter­tema. Det­te er jo meget smart, Og det gir oss en ytterst smi­dig meto­de for å gjø­re spe­si­el­le end­rin­ger, som vi vil behol­de uav­hen­gig av opp­da­te­rin­ger av et for­eldre­tema. I til­legg nyter man alle for­de­le­ne som for­el­der­te­ma­et måt­te ha.

Oppsett av dattertema

Etter å ha instal­lert utvi­del­sen One-Click Child The­me, er det tid for å lage ens eget dat­ter­tema.  

1. Det tema­et man skal lage en dat­ter av, må være akti­vert. Hvis et annet tema er akti­vert, er det alt­så det tema­et man lager en dat­ter av — ikke det man kan­skje had­de tenkt å bru­ke på nett­ste­det. Etter­på. (Det er vel­dig enkelt å gjø­re den­ne brø­le­ren…)

Kik­ker man litt nær­me­re på meny­ene til venst­re i Kon­troll­pa­nel etter å ha instal­lert utvi­del­sen, vil en se at det er kom­met til et nytt meny­ele­ment som heter Child The­me. Klikk det­te, så fram­kom­mer det et litt stuss­lig skjerm­bil­de til høy­re for meny­ene i Kon­troll­pa­nel.

  • For det førs­te må jo bar­net ha et navn. Per­son­lig kom­bi­ne­rer jeg nav­net på for­el­der­te­ma­et med mitt eget navn, jfr. ter­jetwel­ve. Man bør alt­så ikke gjø­re som Pip­pi Lang­strøm­pe som insis­te­rer på å bru­ke alle for­navn, ved alle anled­nin­ger. Slik hol­der jeg dem atskilt, dog med en hen­vis­ning til hvil­ket tema jeg til en hver tid har som for­el­der. Det­te er lurt for­di det kan fort bli man­ge døt­re, etter hvert…
  • Der­nest ber utvi­del­sen deg om en beskri­vel­se av dat­ter­te­ma­et. Det er legio om man vil skri­ve inn noe som helst, eller å la fel­tet stå tomt. Det­te har egent­lig liten betyd­ning, med mind­re man har tenkt å lage et sprekt tema som man vil leg­ge ut som GPL.
  • Det sis­te punk­tet er svært enkelt, natur­lig­vis. Det er her man fyl­ler inn nav­net på den som har opp­ret­tet dat­ter­te­ma­et. Som regel er det jo en selv.

Forutsetninger for koden

Etter å ha satt opp et dat­ter­tema på nett­ste­det, er det på tide å begå det­te litt kryp­tis­ke som vi kal­ler «koding». For å få det­te til, må en lage en egen fil som heter functions.php (hele nav­net, takk!). Den­ne filen set­ter opp Tema­inn­stil­lin­ger, dog uten å lage et eget skjerm­bil­de og/eller meny­ele­ment i Kon­troll­pa­nel.

Det er mulig jeg lager en artik­kel om hvor­dan man får til det­te, også. Svært man­ge tema­er har det­te «rett ut av bok­sen» — slik Twen­ty Twel­ve har i utgangs­punk­tet. Et dat­ter­tema får ikke til­delt noe slikt uten et par lin­jer til med kode i … ja, nett­opp! Du gjet­tet vel den! Det­te må også til­pas­ses i functions.php!

  • funtcions.php lager du på din egen enhet. I Win­dows gjør man det­te aller enk­lest med Notis­blokk. Du fin­ner pro­gram­met under Til­be­hør til meny­en under Win­dows-logo­en — også kjent som Start-meny­en.

- Det bes­te er imid­ler­tid et eget et pro­gram som en kan lage kode­snut­ter med. Et av de bes­te på nett er gra­tis og heter Note­p­ad++ Det­te er i til­legg det mest opti­ma­le for Linux-fol­ket. Med det får man sli­ke snert­ne sider å job­be med som i bil­det helt øverst i artik­ke­len, også. Num­me­rer­te lin­jer er vel­dig smart der­som noe er i uor­den for­di man får en refe­ran­se om hvor fei­len fin­nes, både når det gjel­der fil­navn og i hvil­ken lin­je pro­ble­met sit­ter.

  • Det sen­tra­le poen­get er at man ikke benyt­ter et van­lig tekst­pro­gram som f. eks. Micro­soft Office, Libre­Office eller enhe­tens stan­dard skrive­pro­gram. Grun­nen er at dis­se pro­gram­me­ne leg­ger til en rek­ke tekst­at­tri­but­ter som f. eks. mel­lom­rom, etc. i det skjul­te. Slikt vil vi ikke ha med. Teks­ten (dvs. den kopier­te koden) må være rå, uten til­pas­nin­ger, tekst­at­tri­but­ter, m.m.

NB! Har man trik­set og fik­set med sam­me fil­navn til fle­re tema­er, er det anbe­falt å ha et sys­tem for orga­ni­se­rin­gen av dem. Ellers over­skri­ver man en gam­mel snutt, som had­de betyd­ning i et annet tema. Alt går tapt hver enes­te gang filen over­skri­ves, på egen enhet!

  • Ved lag­ring skal hele fil­nav­net functions.php skri­ves inn. Ellers blir den lag­ret som en van­lig tekst­fil. Det end­rer ikke en tød­del i Word­Press. Alt­så er job­ben for­gje­ves! Det sen­tra­le er selv­sagt at functions.php skal kom­mu­ni­se­re med pro­gram­met PHP, der­av beho­vet for .php i slut­ten av fil­nav­net. 

 Selve kodesnutten

Under har jeg limt inn den koden som jeg har end­ret til mitt behov.

Aller vik­tigst er det at helt øverst i filen det stå:

<?php

NB! Ingen mel­lom­rom, selv ikke før linje­skift for­di det­te er selve syn­tak­sen (rege­len) for en spør­ring i Word­Press mot PHP.

Legg mer­ke til bru­ken av /(skråstrek) og *(stjer­ne). Det­te er slikt man­ge har brent seg på for­di mel­lom dis­se teg­ne­ne er det kom­men­tar­fel­ter til eget, internt bruk. Meget hen­dig hvis man skal ha en rek­ke spe­sial­funk­sjo­ner og/eller tema­inn­stil­lin­ger uten­om et for­el­der­tema  Skal man ha tekst­bry­ting over fle­re lin­jer, så åpner man kom­men­tar­fel­tet med /**(én skrå­strek og to stjer­ner). Så leg­ger man til én stjer­ne for hver hver nye, påbe­gyn­te lin­je vi even­tu­elt tren­ger, innen vi avslut­ter fel­tet med det **/(to stjer­ner og en skrå­strek).

NB! I det øvers­te kom­men­tar­fel­tet (det som star­ter med /** og slut­ter med **/) har jeg lagt inn et par paren­te­ser. I ste­det for dem,  skal man skri­ve inn sitt eget selv­lag­de navn på dat­ter­te­ma­et. Og husk: Hvert linje­skift må åpne med en stjer­ne.

Vide­re har jeg for hver av mine nye funk­sjo­ner plus­set på litt tekst over hver. De er inn­kaps­let med /* og */) Da har jeg over­sikt over hvil­ke til­pas­nin­ger som gjør hva i mine inn­stil­lin­ger i dat­ter­te­ma­et.

For å få til­pas­nin­ge­ne på plass, til­ord­ner jeg dem med klas­sen add_filter. Det­te er en smi­dig måte å leg­ge til egne ting som hek­ter seg (eng. hooks) inn i Word­Press-løk­ka (eng. loop).

I mitt til­fel­le har jeg til­pas­set tema­et til å vise to kolon­ners for- og kate­go­ri­side®. Øns­ker man fle­re kolon­ner i et av mal­do­ku­men­te­ne, så må det til­ord­nes nye klas­ser. Poen­get er at add_filter er en kom­man­do som hek­ter mitt to-kolon­ners opp­sett inn i tema­et. Vil man ha fle­re, så skif­ter man ut tal­let  two i category_two_column_classes inne i paren­te­sen med det antall en øns­ker. Dis­se må være på engelsk for­di Word­Press kre­ver det.

Her er mine inn­stil­lin­ger 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 mer­ke til at de to for­skjel­li­ge tema­inn­stil­lin­ge­ne er omtrent prikk like med unn­tak for lin­jen

if( is_home() ) :

i ste­det for

if( is_category() ) :

Leser man mel­lom /* og */, så har jeg for­klart hvor­for det­te er gjort. Det­te skyl­des at for­si­den refe­re­rer til et annet mal­do­ku­ment enn en kate­go­ri­side. Ver­re er det ikke.

Når det­te er fer­dig, og filen er vel lag­ret på eget stab­bur, er det tid for å få den dit den hører hjem­me, alt­så las­tet opp til nett­ste­det. Det­te avhen­ger av hvil­ken meto­de man benyt­ter. Selv har jeg en fil­hånd­te­rer hos min til­by­der Uno­Euro. And­re vel­ger å over­fø­re filer med ftp (les: en fil­over­fø­rings­pro­to­koll). Noen har sågar en local­host, osv. Det er man­ge vei­er til Roma, sågar omvei­er. Uan­sett skal filen las­tes inn i temamap­pen for ditt dat­ter­tema på nett­ste­det.

Da er halve job­ben gjort!

Men, det skjer jo ingenting?!?

Ten­ker den utål­mo­di­ge, som har sjek­ket nett­ste­dets for­si­de. Vel. Man er halv­veis, som sagt.

Det er én ting å gjø­re til­pas­nin­ger i tema­inn­stil­lin­ge­ne. En annen å få det­te på plass, med to-kolon­ners inn­de­ling av alle artik­le­ne på net­tet. Det er er her vi har nes­te knall­bom­be til et ende­lig resul­tat. Meto­den heter CSS, eller Cas­ca­ding Style She­et. Vi tren­ger alt­så et stilark (eng. style she­et).

  1. For å fin­ne den­ne filen, klik­ker man Tema­er under Utse­en­de i Kon­troll­pa­nel.
  2. Det nye dat­ter­te­ma­et må være akti­vert. Det­te er svært sann­syn­lig, i og med at man opp­ret­tet et dat­ter­tema. Er du i tvil, så kan det­te avle­ses i nav­net på fanen Gjel­den­de tema i skjerm­bil­det Hånd­ter tema­er. Du står i det­te skjerm­bil­det etter å ha klik­ket meny­ele­men­tet Tema­er til venst­re. Det­te er lis­tet øverst blant de instal­ler­te tema­ene på nett­ste­det. Hvis dat­ter­te­ma­et ikke er akti­vert, så gjør for all del det­te nå.
  3. Det er en rek­ke peke­re lis­tet opp ved siden av bil­det til dat­ter­te­ma­et. En av dis­se peker­ne heter Redi­ger CSS. Klikk det­te!
  4. Nå får du opp et skjerm­bil­de som heter CSS stilark-edi­tor, eller til­sva­ren­de. Under den grøn­ne teks­ten skal man plas­se­re de sis­te jus­te­rin­ge­ne. Det­te er hva Trans­for­ma­tion­PowerTo­ols har bereg­net for meg. Og for­hå­pent­lig deg. Lim inn den­ne snut­ten under den grøn­ne teks­ten:
.two-column-post {
 width: 47%;
 float: left;
 margin-left: 5.9%;
}

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

For­kla­ring: Punkt­um først i en set­ning er kan­skje drøyt, for de fles­te. Det­te er imid­ler­tid slikt som nett­le­se­re forstår/tegner ut nett­si­der. Punkt­u­met betyr ikke annet enn at det er nett­opp klas­sen .two-column-post vi skal ha til­pas­set, even­tu­elt .three-column… for tre kolon­ner, osv. Sam­ti­dig har vi defi­nert at bred­den per kolon­ne skal være 47% av selve inn­holdsom­rå­det (eng. con­tent area), og at vi øns­ker en marg på 5,9% rundt hver kolon­ne.

For at det­te regne­styk­ket skal bli pyn­te­lig på nett­si­de­ne, må nes­te CSS-blokk jus­te­re hele venst­re side i inn­holdsom­rå­det på nett­si­den. Ellers vil vi få et inn­rykk på 5,9%, også der, Det øns­ker vi ikke. Der­for nul­ler vi mar­gen til venst­re gjen­nom cle­ar: left; og mar­gin-left: 0; for alt som hav­ner til venst­re i inn­holdsom­rå­det, jfr. .two-coloumn-post-left.

Øns­ker man å snu nett­si­dens jus­te­ring, så byt­ter man ut alle refe­ran­ser til venst­re (eng. left) med jus­te­ring til høy­re (eng. right).

Fif­fig og enkelt, spør du meg!

I til­legg liker jeg jev­ne kan­ter på beg­ge sider av artik­le­ne. Da må jeg ha den­ne lin­jen i til­legg:

p {
text-align: justify;
}

Når det gjel­der jev­ne mar­ger i artik­ler, så er det både «enker» (eng. widows) og «laus­un­ger» (eng. orp­hans) innen typo­gra­fi. For ikke å snak­ke om at man kan få l-a-n-g-e ord som strek­ker seg halv­veis rundt øye­ep­let, med mind­re man instal­le­rer en annen, smart utvi­del­se: wp-typo­grap­hy. Dess­ver­re kan det se ut til at utvi­del­sen ikke len­ger opp­da­te­res. Men den gjør fort­satt job­ben med å dele ord, jus­te­re tekst og til­pas­se slikt som man i avis­ver­den har en desk til å gjø­re. Inn­til utvi­del­sen lager mye støy, fort­set­ter jeg å hol­de meg til den.

God blog­ging!

Print Friendly, PDF & Email

Ros, ris og bauling: