Pablo F Burgueño

Requadre imatges en WordPress

És possible afegir una vora o requadre a les imatges que il lustren els posts escrits en WordPress. Per a això n'hi ha prou amb incloure una llegenda a la fotografia en el seu panell d'edició.

No obstant això, determinats themes no suporten aquesta opció per defecte i mostren únicament el text de la llegenda sota la imatge amb alineació a l'esquerra i sense marc. Si aquest és el teu cas, com també ha estat el meu, el que has de fer és editar una mica el full d'estils (style.css ).

Com sempre, recomano fer una còpia de seguretat del full d'estils abans de començar a editar-la. La forma més senzilla de fer el backup és seleccionar el contingut del css i enganxar-lo al bloc de notes, encara que també pots descarregar l'arxiu directament de FTP.

Un cop hagis completat el backup, busca en el full d'estil les línies referents a imatges perquè el text que afegim quedi al seu lloc i sigui fàcil de trobar en el futur. Haurien de ser similars a aquestes:

  1
 2
 3
 4
 5
 6

  img, a: link img, a: visited img (border: 0px solid # 999; padding: 1px;)
 img.left, img.center, img.right, img.norm (margin: 5px 12px 5px 0; border: 1px solid # 999; padding: 1px;)
 img.left (float: left; margin: 0 12px 5px 0;)
 img.center (display: block; margin: 0 auto 5px auto;)
 img.right (float: right; margin: 0 0 5px 12px;)
 img align left (float: left; margin: 0 12px 5px 0;) 

A continuació, just a sota d'aquestes línies, enganxeu el següent codi:

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14

  . Wp-caption img (
 margin-left: 5px;
 margin-right: 5px;
 padding: 0;
 border: 0 none;
 )
 . Wp-caption (
 background-color: # F3F3F3;
 border: 1px solid # DDDDDD;
 margin-bottom: 10px;
 margin-top: 5px;
 padding: 4px 0;
 text-align: center;
 ) 

Un cop actualitzis l'arxiu, podràs veure els resultats en la teva pròxima imatge amb llegenda.

Si el text del post i el quadre de la imatge es mostren excessivament junts o fins i tot enganxats, pots incloure en el .wp-caption , entre la línia de margin-bottom i la de margin-top , aquesta línia per solucionar:

  1

  margin-right: 10px; 

Espero que aquest post tècnic et serveixi d'ajuda. Si l'explicació t'ha resultat útil o coneixes altres trucs per fer això mateix, escriu el teu comentari aquí sota.