Share
Med alle de høyoppløselige skjermbildene som er tilgjengelige i dag, er det bare fornuftig at WordPress-temaet inneholder støtte for å vise bilder med høyere kvalitet. Det betyr at du legger til funksjonalitet for å lage disse bildene, på en måte å laste den riktige av, avhengig av sluttbrukerens skjermoppløsning.
Det er mange plugins tilgjengelig for vanlige WordPress-brukere som vil legge til retina-støtte til deres nettsted. Å gjøre et søk i WordPress-plugin-katalogen bringer opp disse som topp fem:
Hver plugin tilnærming til å legge til retina støtter forskjellig, selv om de alle ganske mye bruker de samme to komponentene: et deteksjonsskript og en retina-klar bildeopprettingsfunksjon. For utviklere som ønsker å legge denne funksjonen direkte til deres temaer, er det første du trenger å gjøre, å inkludere den riktige JS-filen for å oppdage brukerens skjermoppløsning.
Det er bare fornuftig å vise et høyere kvalitetsbilde hvis sluttbruker bruker en netthinnen. For vårt formål er den beste måten med JavaScript. Jeg liker å bruke et skript som heter retina.js av Imulus. Det veier inn på bare 4kb og legger til all front-end-funksjonaliteten du trenger for å oppdage en retina-skjerm og laste det riktige bildet.
Kopier over retina.js filen inn i temaet ditt / js mappe. Det må være på riktig sted for å kunne kjenne det.
Legg til følgende i temaet ditt functions.php fil:
Accentsconagua
add_action ('wp_enqueue_scripts', 'retina_support_enqueue_scripts'); / ** * Enqueueing retina.js * * Denne funksjonen er knyttet til 'wp_enqueue_scripts' action krok. * / funksjon retina_support_enqueue_scripts () wp_enqueue_script ('retina_js', get_template_directory_uri (). '/js/retina.js', "," true); Det er virkelig alt du trenger for gjenkjenningssiden av ting. Deretter kommer funksjonene til å lage bilder av høyere kvalitet.
Du må sørge for at hver gang et bilde lastes opp, opprettes og lagres en høyere kvalitetsversjon @ 2x lagt til filnavnet. Deteksjonsskriptet søker etter det aktuelle suffikset for å laste inn retina-klar versjon av bildet hvis nødvendig.
For å sikre at et retina-klar bilde opprettes automatisk når et bilde er lastet opp, må du koble til riktig WordPress-filter. Den riktige å bruke er wp_generate_attachment_metadata.
Dette går i temaet ditt functions.php fil:
add_filter ('wp_generate_attachment_metadata', 'retina_support_attachment_meta', 10, 2); / ** * Retina bilder * * Denne funksjonen er knyttet til filterkroken 'wp_generate_attachment_metadata'. * / funksjon retina_support_attachment_meta ($ metadata, $ attachment_id) foreach ($ metadata som $ key => $ verdi) if (is_array ($ value)) foreach ($ verdi som $ image => $ attr) if ($ attr)) retina_support_create_images (get_attached_file ($ attachment_id), $ attr ['bredde'], $ attr ['høyde'], sant); returnere $ metadata; Ovennevnte funksjon kontrollerer for å se om den opplastede filen er et bilde. Hvis det er, prosesserer det det ved hjelp av retina_support_create_images () funksjon.
Med alt på plass for å sjekke om et bilde er lastet opp, er den neste tingen du trenger en funksjon for å behandle og lage en retina-klar høyere kvalitetsversjon.
Dette må også gå i temaet ditt functions.php fil:
/ ** * Lag retina-klare bilder * * Referert via retina_support_attachment_meta (). * / funksjon retina_support_create_images ($ fil, $ bredde, $ høyde, $ crop = false) hvis ($ bredde || $ høyde) $ resized_file = wp_get_image_editor ($ file); hvis (! is_wp_error ($ resized_file)) $ filnavn = $ resized_file-> generate_filename ($ width. 'x'. $ høyde. '@ 2x'); $ resized_file-> resize ($ width * 2, $ height * 2, $ crop); $ resized_file-> save ($ filnavn); $ info = $ resized_file-> get_size (); returner array ('file' => wp_basename ($ filnavn), 'bredde' => $ info ['bredde'], 'høyde' => $ info ['høyde'];); returnere false; Nå vil et nytt retina-klar bilde bli opprettet på dobbel størrelse av originalen. I tillegg til @ 2x vil bli lagt til filnavnet slik at deteksjonsskriptet kan fungere sin magi korrekt på forsiden.
Det er stort sett alt du trenger, men det er en god ide å legge til en ekstra funksjon for å kunne rydde opp ting når et bilde blir slettet.
Hvis en bruker sletter et bilde fra mediebiblioteket, kan du også ødelegge alle de ekstra retina-klare bildene som ble laget også.
Plasser denne siste kodeblokken i temaet ditt functions.php fil:
add_filter ('delete_attachment', 'delete_retina_support_images'); / ** * Slett retina-klare bilder * * Denne funksjonen er festet til "delete_attachment" filterkroken. * / funksjon delete_retina_support_images ($ attachment_id) $ meta = wp_get_attachment_metadata ($ attachment_id); $ upload_dir = wp_upload_dir (); $ path = pathinfo ($ meta ['fil']); foreach ($ meta som $ key => $ verdi) if ('sizes' === $ key) foreach ($ verdi som $ size => $ size) $ original_filename = $ upload_dir ['basedir']. '/'. $ path ['dirname']. '/'. $ Størrelse [ 'file']; $ retina_filename = substr_replace ($ original_filename, '@ 2x.', strrpos ($ original_filename, '.'), strlen ('.')); hvis (file_exists ($ retina_filename)) unlink ($ retina_filename); Det tar ikke mye å få temaet klart for netthinnen. Med bare noen få funksjoner og en ekstra JavaScript-fil, kan brukerne sørge for at bildene deres alltid ser bra ut på alle typer skjermer.
Hvis du har kommentarer eller tilbakemelding på alt du leser over, kan du gjerne diskutere det nedenfor.
