Share
Met alle schermen met een hoge resolutie die vandaag beschikbaar zijn, is het alleen maar logisch dat uw WordPress-thema ondersteuning biedt voor het weergeven van afbeeldingen van hogere kwaliteit. Dat betekent dat je functionaliteit moet toevoegen om deze afbeeldingen te maken bovenop een manier om de juiste te laden, afhankelijk van de schermresolutie van de eindgebruiker.
Er zijn nogal wat plug-ins beschikbaar voor gewone WordPress-gebruikers die retina-ondersteuning aan hun site toevoegen. Een zoekopdracht uitvoeren in de plug-in WordPress-plug-in brengt deze als de top vijf naar voren:
Elke plugin benadert het toevoegen van retina-ondersteuning op een andere manier, hoewel ze allemaal vrijwel dezelfde twee componenten gebruiken: een detectiescript en een functie voor het maken van netfoto's. Voor ontwikkelaars die deze functie rechtstreeks willen toevoegen aan hun thema's, is het eerste dat u hoeft te doen, het juiste JS-bestand om de schermresolutie van de gebruiker te detecteren.
Het heeft alleen zin om een hogere beeldkwaliteit weer te geven als de eindgebruiker gebruikt een retina-display. Voor onze doeleinden is de beste manier om JavaScript te gebruiken. Ik gebruik graag een script genaamd retina.js van Imulus. Hij weegt slechts 4 kb en voegt alle functionaliteit toe die nodig is om een retina-display te detecteren en de juiste afbeelding te laden.
Kopieer de retina.js bestand in uw thema's / JS map. Het moet op de juiste plek zitten om het in te leveren.
Voeg het volgende toe aan uw thema's functions.php het dossier:
Accentsconagua
add_action ('wp_enqueue_scripts', 'retina_support_enqueue_scripts'); / ** * Retina.js in de wachtrij plaatsen * * Deze functie is gekoppeld aan de actiehaak 'wp_enqueue_scripts'. * / function retina_support_enqueue_scripts () wp_enqueue_script ('retina_js', get_template_directory_uri (). '/js/retina.js', ",", true); Dat is echt alles wat je nodig hebt voor de detectie van dingen. Vervolgens komen de functies om afbeeldingen van hogere kwaliteit te maken.
U moet ervoor zorgen dat elke keer dat een afbeelding wordt geüpload, er een versie van hogere kwaliteit wordt gemaakt en opgeslagen @ 2x toegevoegd aan de bestandsnaam. Het detectiescript zoekt naar dat achtervoegsel om indien nodig de retinetoepassingsversie van de afbeelding te laden.
Om er zeker van te zijn dat er automatisch een afbeelding die klaar is om een retina te maken automatisch wordt gemaakt wanneer een afbeelding wordt geüpload, moet je het juiste WordPress-filter gebruiken. De juiste te gebruiken is wp_generate_attachment_metadata.
Dit gaat in je thema's functions.php het dossier:
add_filter ('wp_generate_attachment_metadata', 'retina_support_attachment_meta', 10, 2); / ** * Retina-afbeeldingen * * Deze functie is gekoppeld aan de filterhaak 'wp_generate_attachment_metadata'. * / function retina_support_attachment_meta ($ metadata, $ attachment_id) foreach ($ metadata als $ key => $ value) if (is_array ($ value)) foreach ($ value as $ image => $ attr) ifeach (is_array ($ attr)) retina_support_create_images (get_attached_file ($ attachment_id), $ attr ['width'], $ attr ['height'], true); retourneer $ metadata; De bovenstaande functie controleert of het geüploade bestand een afbeelding is. Als dat zo is, verwerkt het het met behulp van de retina_support_create_images () functie.
Met alles op zijn plaats om te controleren of een afbeelding is geüpload, is het volgende dat je nodig hebt een functie om een retina-ready versie van een hogere kwaliteit te verwerken en te maken.
Dit moet ook in uw thema's gaan functions.php het dossier:
/ ** * Maak voor het netvlies bruikbare afbeeldingen * * Gerefereerd via retina_support_attachment_meta (). * / functie retina_support_create_images ($ file, $ width, $ height, $ crop = false) if ($ width || $ height) $ resized_file = wp_get_image_editor ($ file); if (! is_wp_error ($ resized_file)) $ filename = $ resized_file-> gener_bestandsnaam ($ width. 'x'. $ height. '@ 2x'); $ resized_file-> formaat wijzigen ($ width * 2, $ height * 2, $ crop); $ resized_file-> save ($ filename); $ info = $ resized_file-> get_size (); return array ('file' => wp_basename ($ filename), 'width' => $ info ['width'], 'height' => $ info ['height'],); return false; Nu wordt er een nieuw netvlies-klaar beeld gemaakt met het dubbele formaat van het origineel. Plus @ 2x wordt aan de bestandsnaam toegevoegd, zodat het detectiescript zijn magie correct aan de voorkant kan bewerken.
Dat is vrijwel alles wat je nodig hebt, maar het toevoegen van een extra functie is een goed idee om dingen op te ruimen wanneer een afbeelding wordt verwijderd.
Als een gebruiker een afbeelding uit de mediabibliotheek verwijdert, kunt u net zo goed alle extra netvlies-klaar afbeeldingen die ook zijn gemaakt, verwijderen.
Plaats dit laatste codeblok in uw thema's functions.php het dossier:
add_filter ('delete_attachment', 'delete_retina_support_images'); / ** * Verwijder klaar-gemaakte afbeeldingen * * Deze functie is gekoppeld aan de filterhaak 'delete_attachment'. * / function delete_retina_support_images ($ attachment_id) $ meta = wp_get_attachment_metadata ($ attachment_id); $ upload_dir = wp_upload_dir (); $ path = pathinfo ($ meta ['file']); foreach ($ meta als $ key => $ value) if ('sizes' === $ key) foreach ($ value as $ sizes => $ size) $ original_filename = $ upload_dir ['basedir']. '/'. $ path ['dirname']. '/'. $ Grootte [ 'bestand']; $ retina_filename = substr_replace ($ original_filename, '@ 2x.', strrpos ($ original_filename, '.'), strlen ('.')); if (file_exists ($ retina_filename)) ontkoppelen ($ retina_filename); Het kost niet veel om uw thema klaar te maken voor ondersteuning van het netvlies. Met slechts een paar functies en een extra JavaScript-bestand kunnen uw gebruikers ervoor zorgen dat hun afbeeldingen er altijd goed uitzien op elk type scherm.
Als u opmerkingen of feedback heeft over iets dat u hierboven hebt gelezen, aarzel dan niet om het hieronder te bespreken.
