I de siste utgavene av bloggprogramvaren WordPress og WP MU dukket det opp funksjoner for å bytte ut topp-bildet på temaer direkte fra temavelgeren i kontrollpanelet. Hvis et tema støtter dette er det veldig fort gjort å bytte ut toppbilde på temaet samt fargen på eventuell tekst over bildet. Veldig få WP tema har støtte for denne funksjonaliteten, men det er (relativt) fort gjort å tilpasse et hvilket som helst tema til å støtte dette, og det er også enkelt å legge til slik støtte om du lager et nytt tema fra bunnen av.
Hvorfor gidde?
Det første spørsmålet er kanskje hvorfor, hvorfor lære hvordan du kan gjøre dette? Først og fremst er slik funksjonalitet ekstra praktisk på WPMU tjenester som denne ettersom søte jenter som lager seg en gratis blogg ikke kan endre temafilene selv.
Det er også en veldig fin ting å ha i temaer du legger med WordPress-installasjoner du lager for andre mennesker som ikke er l33t og/eller verken kan eller vil leke med PHP-filer. Dessuten er det mye enklere å bytte toppbildet på temaet du bruker enn å laste opp en fil via scp/ftp og så knote med en CSS fil selv om du tilfeldigvis er l33t. Hvis du kan et minimum av PHP og CSS og du bruker/er interessert i WordPress er dette absolutt en kul ting å vite hvordan man legger til i temafiler.
Hvordan lage WP temaer / endre tema-filer slik at det er mulig å bytte topp-bilde
Det første du må gjøre er å se hvor og hvordan temaet laster bildet.
Temaet Benevolence, fra 2005, lar deg ikke bytte ut bildet. Last temaet, venstreklipp pÃ¥ bildet og trykk “egenskaper”. Det viser at toppbilde-filen heter “masthead.jpg”.
Se så hvor i CSS filen dette lastes, i dette tilfellet under #masthead:
#masthead {
position: relative;
top: 0px;
background: url(’images/masthead.jpg’);
width: 700px;
height: 225px;
margin: 0px;
margin-top: 0px;
}
Kopier background: url(’images/masthead.jpg’); til en tekstfil og noter at bildet skal lastes i #masthead {}, Fjern sÃ¥ background: linjen fra style.css. Se ogsÃ¥ hva som setter fargen pÃ¥ eventuell tekst over bildet. I den orginale CSS filen er det #blogTitle a som setter fargen pÃ¥ tittelen, som er en peker. Det er det ogsÃ¥ viktig Ã¥ notere. Merk ogsÃ¥ hvordan #blogTitle plasserer teksten. Fjern sÃ¥ color: ???; linjene som setter fargen pÃ¥ teksten over bildet, i mange temaer (som benevolence) er den samme fargen satt for samme element mer enn nødvendig… merk ogsÃ¥ at a:visited og a:hover ikke bør være satt for teksten over bildet, hvis du laster opp et bilde og velger en tekstfarge som passer til bildet bør den fargen brukes pÃ¥ teksten uansett om teksten er en lenke som har eller ikke har vært klikket tidligere..
Neste skritt er å definiere noen konstanter i functions.php, som lastes automatisk av WP, samt to funksjoner. De nødvendige konstantene er:
define(’HEADER_IMAGE’, ‘%s/images/masthead.jpg’);
define(’HEADER_IMAGE_WIDTH’, 700);
define(’HEADER_IMAGE_HEIGHT’, 225);
define(’HEADER_TEXTCOLOR’, ‘000333′);
Merk at %s automatisk byttes ut med filstien til temaet. Det nødvendige er høyden, bredden og filnavnet til det orginale temabildet.
Så er det nødvendig med en funksjon som lager et enkelt stilsett til administrasjonsdelen for temaer.
function admin_header_style() { ?>
<style type=”text/css”>
#headimg {
background: url(<?php header_image() ?>) no-repeat;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1 {
position: relative;
top: 50px;
left: 20px;
font-family: ‘Arial Black’;
font-size: 8pt;
text-transform: uppercase;
text-align: left;
}
<?php if ( ‘blank’ == get_header_textcolor() ) { ?>
#headimg h1 {
display: none;
}
<?php }else{ ?>
#headimg h1 a{
color: #<?php header_textcolor() ?>;
}
#headimg #desc {
display: none;
}
<?php } ?>
</style>
<?php }
Målet her er å gjøre at forhåndsvisningen i tema-velgeren skal være så lik resultatet som vises i bloggen som mulig.
WP definerer i tematilpasseren tema-feltet som #headimg, blogg-tittelen som #heading h1 og “slagordet” som #desc.
Elementene i CSS-filen for administrasjon må bruke eventuelle brukerinnstillinger. I tillegg trenger vi støtte for at get_header_textcolor() kan være satt til blank, som betyr at det ikke skal være tekst over bildet.
Det er alt som trengs i admin-funksjonen for å gjøre det mulig å velge tema-toppbilde og tekstfarve. Funksjonene inkludert i wp-admin/admin-header.php tar seg av resten.
Så er det nødvendig med en funksjon for å vise selve temabildet og teksten. Det gjøres ved hjelp av funksjonene header_image() og header_textcolor().
Igjen drar vi sjekken if ( ‘blank’ == get_header_textcolor() ) for Ã¥ finne ut om det ikke skal være tekst over bildet, i hvis fall den bør skjules med display: none;.
function header_style() { ?>
<style type=”text/css”>
#masthead {
background: url(<?php header_image() ?>);
}
<?php if ( ‘blank’ == get_header_textcolor() ) { ?>
#blogTitle a {
display: none;
}
<?php }else{ ?>
#blogTitle {
color: #<?php header_textcolor() ?>;
}
#blogTitle a {
color: #<?php header_textcolor() ?>;
}
<?php } ?>
</style>
<?php }
Og da er det bare én liten detalj som mangler:
if ( function_exists(’add_custom_image_header’) ) {
add_custom_image_header(’header_style’, ‘admin_header_style’);
}
…som laster funksjonene og sørger for at de blir tatt i bruk henholdsvis nÃ¥r temaet lastes og nÃ¥r temavelgeren i administrasjonspanelet lastes. Det er strengt tatt ikke nødvendig Ã¥ sjekke om funksjonaliteten eksisterer, men det er “en veldig god vane”. Kanskje du gir temafilene til noen som kjører en WordPress-utgave med haugevis av sikkerhetshull (stort sett alle utgavene < 2.1 og WPMU 1.2.0…) og sÃ¥ fÃ¥r de helt hetta fordi temaet ikke fungerer, etc. (Men jeg er litt alene om Ã¥ synes if ( function_exists(’ … ‘)) er veldig undervurdert nÃ¥r det gjelder modulære CMS-systemer. Men meg om det).
Her er benevolence med par linjer fjernet fra CSS-filen og functions.php som vist i seksjoner over slik at det er mulig å velge temabildet fra WP:
Raskt og enkelt
Hvis et tema støtter å bytte ut bildet er det bare å
- 1) velge en fil å laste opp,
- 2) velge hvilken del av bildet som skal brukes (kutting av utvalgt del av bildet er innebygget i WP )
Og vips, så er den valgte delen av bildet brukt som temaets toppbilde.
Ting å være oppmerksom på.
Definer NO_HEADER_TEXT hvis det ikke er tekst på bildet - så dukker ikke fargevelgeren opp i administrasjonspanelet (den skrives ut i html-koden, men skjules ved hjelp av CSS):
define( ‘NO_HEADER_TEXT’, true );
Merk at dette er en av de ørten innstillingene der WP-utviklerne viser hvor “skarpe” de er; denne linjen mÃ¥ ikke være i functions.php (eller være kommentert) om du vil si at NO_HEADER_TEXT er false. Som wp-admin/custom-header.php avslører:
<?php if ( !defined( ‘NO_HEADER_TEXT’ ) ) {
(…)
(Jeg nevner dette fordi det er noe som kjennetegner hele WP-koden. Du kan enten si “Ja” til noe eller ikke nevne innstillingen, hvis du nevner en innstilling betyr det stort sett “true” uansett om du velger “true” eller “false”…)
Ingen tekst over bildet gjør det naturligvis mye enklere å skrive den nødvendige lille CSS-biten.
Merk også at det bare er mulig å velge en farge fra administrasjonspanelet. Noen temaer har f.eks bloggtittel og slagord over bildet (med ulike farger..) og da må begge tekstfeltene settes til samme farge.
Mesteparten av funksjonaliteten for å la brukere bytte tema-bildet ligger allerede i WP nå, så dette er noe alle nye temaer bør ha (og tema-forfattere bør oppdatere gamle temaer til å støtte dette..).
Hvis du vil prøve hvordan topp-bilde bytteren fungerer kan du logge på dette nettstedet med demo / demo.
