Aangepaste afbeeldingsformaten gebruiken in uw thema en de grootte van bestaande afbeeldingen wijzigen

In deze zelfstudie leert u hoe u aangepaste afbeeldingen kunt maken die u kunt gebruiken in uw WordPress-thema. Waarom aangepaste beeldformaten gebruiken? U hoeft dus niet elke afbeelding die u uploadt naar de Mediabibliotheek te bewerken. Op deze manier krijgt elke afbeelding die wordt geüpload alle aangepaste gedefinieerde afbeeldingsformaten automatisch gegenereerd. Het kan in de post of pagina worden ingevoegd met behulp van de Media Gallery of uit de lus. Lees verder om erachter te komen hoe.


Stap 1 Definiëren van aangepaste afbeeldingsformaten

Voor uw thema om aangepaste beeldformaten te ondersteunen, moet u het bestand functions.php in de map met thema's bewerken. Open de functies van je thema.php en controleer of je een regel hebt die er zo uitziet:

add_action ('after_setup_theme', 'function_name');

Deze haak wordt genoemd tijdens de initialisatie van een thema. Het wordt meestal gebruikt voor het uitvoeren van basisinstellingen, registratie en initialisatie voor een thema, waarbij "function_name" de naam is van de functie die moet worden aangeroepen.

Als u een dergelijke regel heeft gevonden, vindt u ook de methode met dezelfde naam als de tweede parameter van die add_action-methode.

Als u geen regel kunt vinden die er zo uitziet, moet u deze toevoegen en ook een methode gebruiken als de 2e parameter:

add_action ('after_setup_theme', 'setup'); functie-instelling () // ...

Om nu miniaturen voor uw thema in te schakelen, voegt u de volgende regels toe in de hierboven gedefinieerde methode:

functie-instelling () // ... add_theme_support ('post-thumbnails'); // Deze functie maakt ondersteuning voor post-thumbnails voor een thema mogelijk // Alleen inschakelen voor posts: // add_theme_support ('post-thumbnails', array ('post')); // Alleen inschakelen voor berichten en aangepaste berichttypen: // add_theme_support ('post-thumbnails', array ('post', 'movie')); // Registreer een nieuw beeldformaat. // Dit betekent dat WordPress een kopie van de berichtafbeelding met de opgegeven dimensies // maakt wanneer u een nieuwe afbeelding uploadt. Registreer er zoveel als nodig is. // Aangepaste afbeeldingsformaten toevoegen (naam, breedte, hoogte, bijsnijden) add_image_size ('featured-image', 620, 200, true); // ...

Stap 2 Afbeeldingen weergeven met aangepaste formaten

Plaats een aangepast beeld in de post met behulp van de mediagalerij

Als u een afbeelding in een post of pagina uit de mediagalerij wilt invoegen, voegt u het volgende filter in het bestand functions.php in:

add_filter ('image_size_names_choose', 'custom_image_sizes_choose'); function custom_image_sizes_choose ($ sizes) $ custom_sizes = array ('featured-image' => 'Uitgelichte afbeelding'); return array_merge ($ sizes, $ custom_sizes); 

Wat deze code doet, is het samenvoegen van uw aangepaste beeldgroottes met die gedefinieerd in WordPress, zodat het resultaat de onderstaande afbeelding zal zijn.

Voeg een aangepast formaat afbeelding in de lus in

Als u bijvoorbeeld de afbeelding met de naam "featured-image" wilt weergeven, moet u binnen de lus deze regels toevoegen:

 'featured-image')); stop als; ?>

Dit zal controleren of op de post / pagina een afbeelding is bijgevoegd en zal een label waarmee de afbeelding op de gewenste grootte wordt weergegeven.


Stap 3 Het formaat van bestaande afbeeldingen wijzigen

Voor deze taak is er een plug-in om te helpen, Thumbnails opnieuw te genereren. Het kan alles, een batch of afzonderlijke afbeeldingen regenereren. Als u de afbeeldingsformaten wijzigt en ze opnieuw genereert, worden de afbeeldingen met de vorige afmetingen niet verwijderd.


Voorbeeld

Stel dat u deze functie binnen uw thema wilt gebruiken. Van de / Wp-content / themes / name-of-the-theme map open functions.php met je favoriete teksteditor. Als je thema geen after_setup_theme actie gedefinieerd, moet u er een toevoegen. De code voor de aangepaste afbeeldingsformaten wordt toegevoegd aan die gedefinieerde methode.

Opmerking: dit zijn gereserveerde namen voor afbeeldingsafmetingen: thumb, thumbnail, medium, large, post-thumbnail. Het toevoegen van een aangepaste afbeeldingsgrootte met een gereserveerde naam heeft voorrang op de vooraf gedefinieerde waarden.

add_action ('after_setup_theme', 'setup'); functie-instelling () // ... add_theme_support ('post-thumbnails'); // Deze functie maakt ondersteuning voor post-thumbnails mogelijk voor een thema add_image_size ('header', 600, 200, true); // header image add_image_size ('custom-size1', 400, 200); // 400 pixels breed en 200 pixels hoog, proportioneel verkleind formaat aanpassen_formaat ('custom-size2', 400, 200, true); // 400 pixels breed en 200 pixels hoog, bijgesneden // ...

De. Bewerken content.php of inhoud single.php of inhoud page.php bestanden, kunt u de afbeelding met de juiste grootte weergeven voor de berichtkop onder of onder de berichttitel.

Als u de andere twee aangepaste formaten wilt kiezen in de mediagalerij, voegt u het volgende filter toe:

add_filter ('image_size_names_choose', 'custom_image_sizes_choose'); function custom_image_sizes_choose ($ sizes) $ custom_sizes = array ('custom-size1' => 'Mijn aangepast formaat 1', 'custom-size2' => 'Mijn aangepast formaat 2'); return array_merge ($ sizes, $ custom_sizes); 

Een echt voorbeeld van hoe dit werkt en hoe het kan worden gebruikt: gurde.com


Referenties

  • add_action ()
  • after_setup_theme
  • add_theme_support ()
  • add_image_size ()
  • the_post_thumbnail ()

volgende

Een galerij genereren met aangepaste beeldformaten en JavaScript toevoegen om in te zoomen op de afbeeldingen en ertussen te schakelen (muis en toetsenbord).