Slik aktiverer du Egendefinert Header Images Panel i WordPress 3.0

Slik aktiverer du Egendefinert Header Images Panel i WordPress 3.0 / temaer

Hvis dere ikke har hatt en sjanse til å teste ut WordPress 3.0, så mister dere ut. Vi har laget mange innlegg om WordPress 3.0-funksjoner og har vist WordPress 3.0-skjermbilder også. En av notatverdig oppgradering i denne versjonen er et nytt standardtema kalt Tjue ti. Dette temaet har mange flotte funksjoner aktivert, men et av funksjonene som mange brukere vil ha, er panelet Custom Headers. I denne artikkelen vil vi dele med deg hvordan du kan aktivere egendefinerte overskrifter med et back-end administrasjonspanel i WordPress 3.0.

Hva gjør denne funksjonen nøyaktig?

Det vil opprette en fane i administrasjonspanelet som lar deg endre topptekstbilder. Du kan registrere standardbilder hvis du er en tema designer for å gi brukerne flere alternativer. Det tillater også brukere å laste opp egendefinerte bilder for overskriften. Sist men ikke minst, bruker denne funksjonen etter miniatyrbilder på enkelt innleggssider. Hvis innleggets miniatyrbilde er stort nok til å passe på topptekststørrelsen, vil det bruke innleggets miniatyrbilde som topptekst i stedet for standardbildet. Hvis miniatyrbildet ditt er større, vil det beskjære det for deg.

Se på Screencast

Slik legger du til dette?

Vi tok koden rett fra tjue ti functions.php fil. Du må lim inn følgende koder i temaet ditt functions.php fil.

 array ('url' => '% s / bilder / headers / berries.jpg', 'thumbnail_url' => '% s / bilder / headers / berries-thumbnail.jpg', 'description' => __ ('Berries' , 'yourtheme')), 'cherryblossom' => array ('url' => '% s / bilder / hoder / cherryblossoms.jpg', 'thumbnail_url' => '% s / bilder / hoder / cherryblossoms-thumbnail.jpg ',' description '=> __ (' Cherry Blossoms ',' yourtheme ')),' konkav '=> array (' url '=>'% s / bilder / hoder / concave.jpg ',' thumbnail_url '=> '% s / images / headers / concave-thumbnail.jpg', 'description' => __ ('Concave', 'yourtheme')), 'fern' => array ('url' => '% s / bilder / headers / fern.jpg ',' thumbnail_url '=>'% s / bilder / headers / fern-thumbnail.jpg ',' description '=> __ (' Fern ',' yourtheme ')),' forestfloor '=> array ('url' => '% s / bilder / headers / forestfloor.jpg', 'thumbnail_url' => '% s / bilder / overskrifter / forestfloor-thumbnail.jpg', 'description' => __ '' '' '' ' humbnail.jpg ',' description '=> __ (' Inkwell ',' yourtheme ')),' path '=> array (' url '=>'% s / bilder / headers / path.jpg ',' thumbnail_url ' = ''% s / bilder / headers / path-thumbnail.jpg ',' description '=> __ (' Path ',' yourtheme ')),' sunset '=> array (' url '=>'% s / bilder / headers / sunset.jpg ',' thumbnail_url '=>'% s / bilder / overskrifter / solnedgang-thumbnail.jpg ',' description '=> __ (' Sunset ',' yourtheme '))));  slutt om; hvis (! function_exists ('yourtheme_admin_header_style')): / ** * Stiler topptekstbildet som vises på utseende> Header-administrasjonspanelet. * * Referert via add_custom_image_header () i yourtheme_setup (). * * @since 3.0.0 * / funksjon yourtheme_admin_header_style () ?> #headimg height: px; bredde: px;  #headimg h1, #headimg #desc display: none;   

Det er jibbrish til meg. Vennligst forklar

Of course, dette kan se jibrish til noen av dere. Dette er hovedsakelig for tema designere, men vi vil gjøre vårt beste for å bryte den ned. Før du begynner, må du kopiere og lime inn denne koden i kodeditoren, slik at du kan gjøre endringene nødvendige.

Merk: Vi bruker / bilder / overskrifter / som katalog hvor du vil lagre standard header-bilder.

  • Du starter koden ved å opprette en funksjon yourtheme_setup ().
  • I linje 21 definerer vi standardkoplingsbildet. Merk at det er en variabel% s som i utgangspunktet er en plassholder for temakataloget URI.
  • Linje 25 og 26 er der du definerer bildebredde og høyde. Som standard er den satt til 940px bred og 198px høy. Du kan endre den ved å redigere disse to linjene.
  • Fra begynnelsen av linje 42 begynner vi å registrere standardoverskriftene. Dette er bildene som vil vises som alternativ for alternativknappen i administrasjonspanelet. Hvis du trenger flere alternativer, må du bare følge formatet som brukes.
  • I linje 95 velger vi header styling. Du trenger ikke å endre disse innstillingene fordi du alreadyd efined dem i Linje 25 og 26.

Det er alt du gjør for temaets funksjoner.php-fil. Deretter skal vi gå inn på hvordan du skal legge til dette i temaet ditt.

Kode for å legge til i temaet ditt

Denne koden vil mest sannsynlig gå i temaet header.php fil. Du kan stile det, men du liker det.

ID) && (/ * $ src, $ bredde, $ høyde * / $ image = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'post-miniatyrbilde')) && $ image [1]> = HEADER_IMAGE_WIDTH): // Vi har et nytt topptekstbilde! echo get_the_post_thumbnail ($ post-> ID, 'post-miniatyrbilde'); ellers:?>  

Hva gjør denne koden?

  • Først sjekker det om det er et enkelt innlegg eller en side. Det kontrollerer også om dette innlegget / siden har et miniatyrbilde, og om det er stort nok.
  • Hvis siden er en enkelt side og har en stor nok miniatyrbilde, viser den innleggsminiaturen som er spesifikk for det innlegget.
  • Hvis det ikke er en enkelt side, eller innleggsminiatyren ikke er stor nok, vil den vise standard header.

Vi håper denne opplæringen var nyttig. Vi fikk noen e-postmeldinger som spør om denne opplæringen, så vi brøt koden ned fra temaet tjue ti. Hvis du har spørsmål, så er du velkommen til å spørre i kommentarene.