Het paneel met aangepaste koptekstafbeeldingen inschakelen in WordPress 3.0

Als jullie geen kans hebben gehad om WordPress 3.0 uit te proberen, dan mis je. We hebben veel berichten over WordPress 3.0-functies gemaakt en hebben ook WordPress 3.0-screenshots getoond. Een van de opmerking-waardige upgrade in deze versie is een nieuw standaardthema genaamd Twintig tien. Dit thema heeft veel geweldige functies ingeschakeld, maar een van de functies die veel gebruikers willen is het paneel Aangepaste headers. In dit artikel zullen we met u delen hoe u aangepaste headers kunt inschakelen met een back-end admin-paneel in WordPress 3.0.

Wat precies zal deze functie doen?

Er wordt een tabblad in uw beheerdersvenster gemaakt, waarmee u de koptekstafbeeldingen kunt wijzigen. U kunt standaardafbeeldingen registreren als u een themaontwerper bent om gebruikers meer opties te geven. Het stelt gebruikers ook in staat om aangepaste afbeeldingen voor de header te uploaden. Als laatste, maar zeker niet de minste, maakt deze functie gebruik van postminiaturen op afzonderlijke berichtpagina's. Als uw postminiatuur groot genoeg is om in de kopgrootte te passen, gebruikt deze uw postminiatuur als koptekst in plaats van de standaardafbeelding. Als uw miniatuur groter is, wordt deze voor u verkleind.

Bekijk de Screencast

Hoe dit toe te voegen?

We hebben de code rechtstreeks overgenomen van Twenty Ten's functions.php het dossier. U moet de volgende codes in uw thema's plakken functions.php het dossier.

 array ('url' => '% s / images / headers / berries.jpg', 'thumbnail_url' => '% s / images / headers / berries-thumbnail.jpg', 'description' => __ ('Berries' , 'yourtheme')), 'cherryblossom' => array ('url' => '% s / images / headers / cherryblossoms.jpg', 'thumbnail_url' => '% s / images / headers / cherryblossoms-thumbnail.jpg ',' description '=> __ (' Cherry Blossoms ',' yourtheme ')),' concave '=> array (' url '=>'% s / images / headers / concave.jpg ',' thumbnail_url '=> '% s / images / headers / concave-thumbnail.jpg', 'description' => __ ('Concave', 'yourtheme')), 'fern' => array ('url' => '% s / images / headers / fern.jpg ',' thumbnail_url '=>'% s / images / headers / fern-thumbnail.jpg ',' description '=> __ (' Fern ',' yourtheme ')),' forestfloor '=> array ('url' => '% s / images / headers / forestfloor.jpg', 'thumbnail_url' => '% s / images / headers / forestfloor-thumbnail.jpg', 'description' => __ ('Forest Floor' , 'yourtheme')), 'inkwell' => array ('url' => '% s / images / headers / inkwell.jpg', 'thumbnail_url' => '% s / images / headers / inkwell-t humbnail.jpg ',' description '=> __ (' Inkwell ',' yourtheme ')),' path '=> array (' url '=>'% s / images / headers / path.jpg ',' thumbnail_url ' => '% s / images / headers / path-thumbnail.jpg', 'description' => __ ('Path', 'yourtheme')), 'sunset' => array ('url' => '% s / images / headers / sunset.jpg ',' thumbnail_url '=>'% s / images / headers / sunset-thumbnail.jpg ',' description '=> __ (' Sunset ',' yourtheme '))));  stop als; if (! function_exists ('yourtheme_admin_header_style')): / ** * Hiermee kleurt u de koptekst die wordt weergegeven in het paneel Uiterlijk> Koptekstbeheer. * * Gerefereerd via add_custom_image_header () in yourtheme_setup (). * * @since 3.0.0 * / function yourtheme_admin_header_style () ?> #headimg height: px; breedte: px;  #headimg h1, #headimg #desc display: geen;   

Dat is jibbroes voor mij. Leg het alsjeblieft uit

Natuurlijk kan dit voor sommigen van jullie jibisch overkomen. Dit is meestal voor thema-ontwerpers, maar we zullen ons best doen om het op te splitsen. Voordat we beginnen, moet je ervoor zorgen dat je deze code kopieert en plakt in je code-editor, zodat je de nodige wijzigingen kunt aanbrengen.

Opmerking: We gebruiken / images / headers / als de map waar u uw standaard header-afbeeldingen zult opslaan.

• U start de code door een functie te maken yourtheme_setup ().
• In regel 21 definiëren we de standaardkopafbeelding. Merk op dat er een variabele% s is die in feite een tijdelijke aanduiding is voor de URI van de themabesturing.
• Regel 25 en 26 definieert de breedte en hoogte van de afbeelding. Standaard is deze ingesteld op 940 px breed en 198 px hoog. U kunt dit wijzigen door deze twee regels te bewerken.
• Vanaf regel 42 beginnen we met het registreren van de standaard headers. Dit zijn de afbeeldingen die worden weergegeven als keuzerondje in uw beheerdersvenster. Als u meer opties nodig heeft, volgt u gewoon het gebruikte formaat.
• In regel 95 kiezen we de header-styling. U hoeft deze instellingen niet te wijzigen omdat u ze al hebt opgegeven in regel 25 en 26.

Dat is alles wat u doet voor het functions.php-bestand van het thema. Vervolgens gaan we in op hoe je dit aan je thema gaat toevoegen.

Code om toe te voegen aan uw thema

Deze code gaat waarschijnlijk in de thema's header.php het dossier. Je kunt het stylen zoals je wilt.

ID) && (/ * $ src, $ width, $ height * / $ image = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'post-thumbnail')) && $ image [1]> = HEADER_IMAGE_WIDTH): // We hebben een nieuwe headerafbeelding! echo get_the_post_thumbnail ($ post-> ID, 'post-thumbnail'); anders:?>  

Wat doet deze code??

• Eerst wordt gecontroleerd of het een enkele post of een pagina is. Het controleert ook of deze post / pagina een miniatuur heeft en of deze groot genoeg is.
• Als de pagina één pagina is en een thumbnail heeft die groot genoeg is, wordt de miniatuur voor die post weergegeven.
• Als het geen enkele pagina is of als de postminiatuur niet groot genoeg is, wordt de standaardkop weergegeven.

We hopen dat deze tutorial nuttig was. We hebben een paar e-mails gekregen waarin we deze tutorial hebben gevraagd, dus hebben we de code uit het Twenty Ten-thema gehaald. Als u vragen heeft, kunt u dat stellen in de opmerkingen.