De complete gids voor aanbevolen miniaturen en beeldformaten in WordPress

Een foto zegt meer dan duizend woorden - tenzij de afbeelding ongeschikt is gemaakt, in welk geval het honderd woorden waard is. Okay - dus misschien is dat een minder bekende versie van een oud gezegde of iets dat ik zojuist verzonnen heb, maar waar het om gaat is: WordPress is erg krachtig als het gaat om thumbnails en beeldformaten - je hoeft alleen maar te weten hoe je ermee moet omgaan. Lees verder voor alles wat u moet weten over beeldformaten in WordPress en het beheren van aanbevolen afbeeldingen.

Let op: dit bericht is vrij zwaar met PHP - niets te ingewikkeld, maar je wilt misschien onze gratis PHP-spoedcursus lezen voordat je wijzigingen in je thema probeert.

De basis Eerst

In het WordPress-beheerdersdashboard weet je waarschijnlijk al van instellingen -> Media.

Dit zijn de drie standaardafbeeldingsformaten, die WordPress noemt: thumbnail, medium, en groot. Het miniatuurformaat heeft een speciale instelling die moet worden bijgesneden in de exacte dimensie die u hier opgeeft. Dit hoeft geen 1: 1 dimensie te zijn - u kunt dit instellen zoals u wilt - maar afbeeldingen worden gecentreerd en bijgesneden, wat betekent dat elk deel van uw afbeelding dat niet in die dimensies past nadat het is verkleind, gewoon wordt weggesneden.

De middelgrote en grote instellingen werken iets anders, in dat zul je specificeren maximum afmetingen voor zowel de breedte als de hoogte, en de afbeeldingen worden dienovereenkomstig verkleind. Als de afbeelding te klein is, worden die afbeeldingsformaten gewoon niet gemaakt. Wanneer u een nieuwe afbeelding uploadt, wordt het origineel opgeslagen en beschikbaar om op volledige grootte in een bericht in te voegen, en worden de andere geregistreerde beeldformaten automatisch gemaakt.

Deze drie beeldgroottes, evenals het origineel volledige grootte, zijn de enige die beschikbaar zijn wanneer u een bericht bewerkt en media invoegt, dus ik heb de neiging om groot in te stellen als de absolute breedte van mijn thema voor pagina's en berichten over de volledige breedte, en gemiddeld als breedte van de kolom met normale inhoud.

Meer maten maken

Bij het bewerken van een thema of het maken van widgets zijn de drie formaten die zijn gedefinieerd in uw media-instellingen mogelijk niet voldoende. Ik laat die altijd alleen voor inhoud - definieer dan een aantal nieuwe beeldgroottes erin functions.php bestand, zoals dit:

add_image_size ('mijn thumbnail', 400, 200, waar);

Elke nieuwe afbeeldingsgrootte heeft een naam-, breedte- en hoogtedimensie nodig en of afbeeldingen al dan niet moeten worden bijgesneden tot precies deze afmeting (waar of niet waar). Voor structurele delen van een thema of widget wilt u over het algemeen knippen zodat de lay-out niet wordt verbroken.

Uitgelichte afbeelding

Sinds versie 2.9, heeft WordPress ons toegestaan ​​om een ​​specifieke afbeelding in te stellen als de “aanbevolen afbeelding” voor een bericht. Deze afbeelding wordt niet in de hoofdtekst van de post ingevoegd (tenzij u deze zelf invoegt), maar kan in plaats daarvan structureel in uw thema worden gebruikt - als een miniatuur naast de berichttitel, of misschien in de kop bij het bekijken van die specifieke post. Het is niet lui om een ​​uitgelichte afbeelding te plaatsen, op basis van het aantal thema's en widgets. Plak dit fragment in functions.php om u eraan te herinneren wanneer u een bericht opslaat als u er één bent vergeten in te stellen (bron):

 add_action ('save_post', 'wpds_check_thumbnail'); add_action ('admin_notices', 'wpds_thumbnail_error'); functie wpds_check_thumbnail ($ post_id) // wijzigen naar een aangepast berichttype als (get_post_type ($ post_id)! = 'post') terugkomt; if (! has_post_thumbnail ($ post_id)) // stel een overgang in om de gebruikers een admin-bericht set_transient ("has_post_thumbnail", "no") te tonen; // ontkoppel deze functie zodat deze oneindig niet lus remove_action ('save_post', 'wpds_check_thumbnail'); // update het bericht stel het in om wp_update_post op te stellen (array ('ID' => $ post_id, 'post_status' => 'draft')); add_action ('save_post', 'wpds_check_thumbnail');  else delete_transient ("has_post_thumbnail");  functie wpds_thumbnail_error () // controleer of de overgang is ingesteld en geef het foutbericht als (get_transient ("has_post_thumbnail") == "no") echo "
U moet Uitgelichte afbeelding selecteren. Uw bericht is opgeslagen maar kan niet worden gepubliceerd.
"; delete_transient (" has_post_thumbnail ");

WordPress biedt een handige functie om de afgebeelde afbeelding te krijgen en te gebruiken in thema's:

the_post_thumbnail ( 'my-thumbnail', array ( 'class' => 'my_post_thumbnail_css_class'));

De functie heeft twee parameters nodig: het benoemde formaat dat u zoekt en alle kenmerken die u wilt doorgeven, zoals een aangepaste CSS-klasse (Opmerking: u kunt het alt-attribuut niet overschrijven). Als u een heel oud thema aanpast, moet u mogelijk ook het volgende aan uw functions.php toevoegen:

add_theme_support ( 'post-miniaturen');

Als u liever alleen de daadwerkelijke URL van de afgebeelde afbeelding ophaalt in plaats van de vereiste HTML ook weer te geven, probeert u dit in plaats daarvan (de gemiddelde afbeeldingsgrootte verkrijgen in dit voorbeeld):

$ thumbnail = wp_get_attachment_image_src (get_post_thumbnail_id (), 'medium'); echo $ thumbnail [0];

Afbeeldingen regenereren

Telkens wanneer u uw standaardafbeeldingsformaten wijzigt of een nieuwe groottedefinitie maakt, is deze alleen van toepassing op nieuwe uploads. Al uw bestaande afbeeldingen blijven de oorspronkelijke afmetingen. Wees echter nooit bang, er is een geweldige plug-in die door je berichten zal gaan en deze nieuwe beeldgroottes voor jou zal regenereren. Met AJAX Thumbnail Rebuild kunt u kiezen welke formaten u wilt regenereren en langzaam door uw archief werken. Hiermee worden de afbeeldingen die in berichten zijn ingevoegd niet gewijzigd, maar deze worden op het punt van invoeging hersteld. Als u afbeeldingen opnieuw genereert, is de nieuwe grootte beschikbaar voor gebruik in uw thema's of in toekomstige berichten, maar u kunt de grootte van bestaande afbeeldingen die al zijn ingevoegd niet automatisch bewerken.

U zult twee nadelen ondervinden bij het maken van nieuwe afbeeldingen. Ten eerste, zelfs als de afbeeldingsgrootte die u hebt gemaakt alleen wordt gebruikt voor de afgebeelde afbeelding als onderdeel van een thema, wordt een nieuwe versie van elke afzonderlijke afbeelding die u ooit heeft geüpload, gemaakt - niet alleen de afgebeelde afbeelding. Dit is een beperking van WordPress; een uitgelichte afbeelding is net als elke andere en je kunt hem niet specifiek richten met de add_image_size () functie. Gelukkig laat de Thumbnail Rebuild-plugin je dit eigenlijk wel beperken alleen aanbevolen afbeeldingen uit het archief - maar alle toekomstige afbeeldingsuploads worden beheerd door WordPress en het maakt de nieuwe afbeeldingsgrootte voor alles. Nu zou een goed moment zijn om ook het verschil tussen JPG en PNG te leren. Weten wanneer te gebruiken Welke bestandsindeling: PNG versus JPG, DOC versus PDF, MP3 versus FLAC Weten wanneer te gebruiken Welke bestandsindeling: PNG versus JPG, DOC versus PDF, MP3 versus FLAC Kent u de verschillen tussen JPG en PNG, of MP3 en FLAC? Als u niet weet welke bestandsindelingen u moet gebruiken, laat ons u dan door hun onderscheidingen leiden. Meer lezen, zodat u weet dat u in de toekomst het optimale formaat zult gebruiken.

Ten tweede, zelfs als u niet langer een bepaalde grootte gebruikt, blijven deze op de server staan ​​- WordPress zal geen ongebruikte afbeeldingen voor u verwijderen. Op een site als MakeUseOf met honderdduizenden afbeeldingen betekent dit een paar gigabytes verspild. Voor kleinere sites helpt de Image Cleanup-plug-in door te scannen en geeft u de optie om te verwijderen; maar grotere sites zullen wat command-line en regex fu moeten leren (zie onze beknopte handleiding vooraan de slag met de Linux-opdrachtregel Een beknopte handleiding Aan de slag met de Linux-opdrachtregel Een beknopte handleiding Aan de slag met de Linux-opdrachtregel Met Linux kunt u heel veel geweldige dingen doen en het is echt niet moeilijk om te leren. Lees verder ). Neem altijd eerst een volledige back-up, voor het geval het iets verwijdert dat het niet zou moeten hebben.

Mijn thema verandert niet

Je hebt dus een thema bewerkt met je nieuwe afbeeldingsformaten en hebt alle bestaande aanbevolen afbeeldingen correct geregenereerd - maar de juiste maat wordt nog steeds niet weergegeven? Je hebt waarschijnlijk wat CSS toegepast op de afbeelding of het wordt DIV dan omkaderd. Gebruik de foutopsporingsmodus van uw browser Zoek uit Websiteproblemen met Chrome-ontwikkelaarstools Of Firebug bereken problemen met de website met Chrome-ontwikkelaarstools of Firebug Als u mijn jQuery-zelfstudies tot nu toe hebt gevolgd, is het mogelijk dat u al een aantal codeproblemen tegenkomt en niet bekend bent om ze te repareren. Wanneer je geconfronteerd wordt met een niet-functioneel stuk code, is het erg ... Lees meer om de aanstootgevende CSS te vinden en dienovereenkomstig aan te passen. En vergeet niet, je kunt het formaat alleen wijzigen als de bronafbeelding groot genoeg is - WordPress en de miniatuurinvoegtoepassing zullen afbeeldingen niet opschalen vanwege kwaliteitsverlies.

WordPress is bijna 11 jaar oud, dus het is een bewijs van zijn kracht en flexibiliteit dat het een van de weinige web-apps is die al zo lang in leven is gehouden en niet is vervangen. Functies zoals postminiaturen zijn nu alomtegenwoordig op het web en tot zijn verdienste is WordPress altijd op de hoogte gebleven van designtrends. Let wel, Ghost ziet er goed uit Wordpress Killer? Welkom bij Ghost (en hoe je het op een Raspberry Pi installeert) Wordpress Killer? Welcome To Ghost (en hoe het op een Raspberry Pi te installeren) Meer lezen .

Heeft u problemen met aanbevolen afbeeldingen? Plaats in de reacties en ik zal kijken of ik je kan helpen.

Ontdek meer over: Wordpress.