La guia completa de miniatures i mides d'imatge destacades a WordPress

La guia completa de miniatures i mides d'imatge destacades a WordPress

Una imatge val més que mil paraules, tret que s’hagi redimensionat de manera inadequada, en aquest cas és una mica vergonyós. WordPress conté eines poderoses per redimensionar imatges i miniatures, però heu de saber com fer-hi front.





Seguiu llegint per saber tot el que heu de saber sobre les mides d’imatges a WordPress i la gestió d’imatges destacades.





Edició de PHP en fitxers WordPress

Aquesta publicació conté codi PHP per a WordPress. És possible que vulgueu llegir el nostre curs gratuït d’errors de PHP abans d’intentar modificacions al vostre tema.





Si no us sentiu còmode obrint els fitxers de temes o no voleu perquè es perdran amb futures actualitzacions de temes, podeu utilitzar el fitxer Les meves funcions personalitzades plugin per afegir blocs de codi.

https://en-gb.wordpress.org/plugins/my-custom-functions/



Conceptes bàsics sobre la mida de la imatge de WordPress

Al tauler d’administració de WordPress, probablement ja en coneixeu Configuració > Mitja.

com ordeno Gmail per remitent?

Aquestes són les tres mides d'imatge predeterminades, que WordPress crida: miniatura , mitjà , i gran . La mida de la miniatura té un paràmetre especial per retallar a la dimensió exacta que especifiqueu aquí. No cal que tingui una dimensió de proporció 1: 1; podeu configurar-lo com vulgueu.





Quan el retall estigui habilitat, les imatges s’escalaran i se centraran, tot el que no s’adapti serà descartat.

La configuració mitjana i gran funciona de manera lleugerament diferent, ja que especifiqueu màxim per a amplada i alçada, i les imatges es reduiran en conseqüència. Si la imatge és massa petita, no es crearan aquestes mides.





Quan pengeu una imatge nova, l'original es desa i està disponible per inserir-la en una publicació a mida completa i la resta de mides d'imatges registrades es creen automàticament.

Addició de mides d’imatges personalitzades a WordPress

És possible que les tres mides que es defineixen de manera predeterminada a WordPress no siguin suficients, motiu pel qual els temes i els connectors poden afegir les seves pròpies mides personalitzades. Si esteu còmode editant els fitxers del tema, també podeu fer-ho.

Obriu el directori de temes i cerqueu el fitxer funcions.php dossier. Afegiu el fitxer següent codi, una per a cada mida d'imatge que vulgueu definir:

add_image_size( 'my-thumbnail', 400, 200, true);

Cada mida de la imatge nova necessita un nom, amplada i alçada i si les imatges haurien de retallar-se exactament a aquesta mida ( cert o bé fals ). Per a les parts estructurals d’un tema o widget, en general voleu retallar perquè no trenqui el disseny.

És possible que tingueu la temptació de crear moltes mides d’imatges personalitzades, però ho heu de fer amb moderació. Cada mida de la imatge que definiu es generarà per a cada imatge que pengeu, fins i tot si només la volíeu fer amb la imatge destacada.

Per tant, si teniu set mides d’imatges personalitzades, més les tres predeterminades, cada imatge que pengeu generarà 10 petites còpies d’ella mateixa. Si considereu que una sola publicació pot incloure 10 imatges, es crearan 100 fitxers només per a aquesta publicació.

No podeu crear una mida d'imatge personalitzada i especificar que només s'ha d'utilitzar per a les imatges destacades.

A més, fins i tot si ja no utilitzeu una mida personalitzada determinada i heu suprimit aquest codi (o heu canviat els temes), les imatges antigues romandran al servidor per sempre. WordPress no us suprimirà les imatges no utilitzades. En un lloc tan antic o tan gran com MakeUseOf, això significa que es malgasten uns quants centenars de gigabytes emmagatzemant imatges que ja no s’utilitzen.

Per a llocs més petits, el Netejador de suports el connector pot ajudar-vos, però primer sempre feu una còpia de seguretat completa.

https://wordpress.org/plugins/media-cleaner/#description

Mides d'imatges personalitzades per utilitzar-les en contingut de publicacions

Per defecte, les mides d'imatges personalitzades no apareixeran al quadre desplegable quan s'insereix una imatge en una publicació. L'únic que hi veureu és la miniatura, la mitjana, la gran i la mida completa (en funció de la mida de la imatge original, ja que no es canviarà).

Si voleu que la mida personalitzada també aparegui a la llista, necessitarem una mica més de codi. Torneu a afegir al vostre fitxer funcions.php dossier:

function image_sizes_to_mediapicker( $default_sizes ) {
return array_merge( $default_sizes, array(
'my-thumbnail' => __( 'My Thumbail Size' ),
) );
}
add_filter( 'image_size_names_choose', 'image_sizes_to_mediapicker' );

Això funciona filtrant la llista de selectors de suports. Combinem la matriu de llista de mides originals amb les mides noves que també vulguem que apareguin. Canvieu 'la meva miniatura' i 'La meva mida de miniatura' a la vostra mida personalitzada i al nom amable de lectura humana que vulgueu que aparegui.

Les imatges destacades són una sola imatge associada a una publicació, però no necessàriament inserida al contingut de la publicació. Sovint els fan servir temes de la capçalera, de la pàgina inicial o de la barra lateral. No obstant això, pel que fa a la mida de la imatge, no es tracten de manera diferent a les imatges normals.

Per a cada mida que hàgiu definit, totes les imatges que es pengin es duplicaran i redimensionaran, inclosa la imatge destacada.

com esbrinar qui et va trucar

Si no veieu l'opció Estableix la imatge destacada a la pantalla d'edició de publicacions, és possible que el vostre tema no admeti la funció. Podeu forçar el suport afegint la línia següent al tema funcions.php fitxer, però suggeriria encaridament trobar un tema nou.

La manca de suport per a quelcom tan bàsic com les imatges destacades seria indicatiu de codi obsolet en altres llocs.

add_theme_support('post-thumbnails');

Per utilitzar la imatge destacada al vostre propi tema o connectors, utilitzeu the_post_thumbnail () funció per generar l'etiqueta d'imatge:

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

La funció té 2 paràmetres: la mida anomenada que esteu cercant (en aquest cas 'la meva miniatura') i els atributs que vulgueu passar, com una classe CSS personalitzada.

Si preferiu obtenir només l'URL real de la imatge destacada que l'HTML requerit, proveu-ho (obtenint la mida mitjana de la imatge en aquest exemple):

com crear un diagrama de flux a Excel
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
echo $thumbnail[0];

Regeneració de miniatures de WordPress

Sempre que canvieu les dimensions d'imatge predeterminades o creeu una mida d'imatge personalitzada, només s'aplicarà a nou càrregues. Totes les imatges existents es mantenen a les dimensions originals.

Si voleu canviar la mida de les imatges carregades prèviament, necessitareu un connector. Reconstrucció de miniatures AJAX us permet seleccionar quines mides voleu regenerar i funcionarà lentament a través del vostre arxiu.

https://wordpress.org/plugins/ajax-thumbnail-rebuild/

Hi ha algunes limitacions i trampes que hauríeu de conèixer.

Tot i que les imatges destacades es poden canviar de mida automàticament, cap connector no pot reescriure el contingut de les publicacions. Per exemple, si heu afegit una imatge a una publicació a gran mida (que pot ser que tingués 500 px en aquell moment), canviant la definició de gran no canviarà la mida de la imatge a la publicació. Es mantindrà a 500 px, tret que editeu la publicació i torneu a inserir la mateixa imatge a la nova mida.

Com s’ha esmentat, si teniu moltes mides d’imatges, generareu moltes imatges. Afortunadament, la Reconstrucció de miniatures us permet limitar-ho a només apareixen imatges . Però, de nou, recordeu que això només s'aplica a la vostra imatge anterior. Totes les futures càrregues d'imatges seran gestionades per WordPress, és a dir, es crearan totes les mides d'imatges per a tot.

Ara seria un bon moment per aprendre també diferència entre JPG i PNG de manera que sabreu utilitzar el format òptim en el futur.

Porteu el vostre lloc de WordPress al següent nivell

Voleu modificar el vostre tema de WordPress? L’ús d’imatges, colors i posicionament d’elements del vostre tema es defineix principalment per CSS i HTML, de manera que us recomanem que consulteu aquests tutorials pas a pas per aprendre CSS i HTML.

I si us interessen els temes, doneu una ullada a aquests temes fantàstics de WordPress per a una cartera de fotografies.

El vostre lloc de WordPress s’estavella massa sovint? Esteu pagant massa? Canvieu a un servei d’allotjament conegut com InMotion Hosting (descompte especial MakeUseOf amb aquest enllaç ) o Bluehost (descompte especial MakeUseOf amb aquest enllaç ).

Compartir Compartir Tweet Correu electrònic A continuació s’explica per què l’FBI va emetre un advertiment sobre el ransomware Hive

L'FBI va emetre una advertència sobre una varietat de ransomware especialment desagradable. A continuació s’explica el motiu pel qual cal ser especialment cautelós amb el ransomware de Hive.

Llegiu a continuació
Temes relacionats
  • Programació
  • Wordpress
Sobre l'autor James Bruce(707 articles publicats)

James té un BSc en Intel·ligència Artificial i està certificat CompTIA A + i Network +. Quan no està ocupat com a editor de ressenyes de maquinari, li agrada LEGO, VR i els jocs de taula. Abans d’incorporar-se a MakeUseOf, era tècnic d’il·luminació, professor d’anglès i enginyer de centres de dades.

Més de James Bruce

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us