Stilizarea imaginilor in postari si pagini «WordPress Codex

Versiunile actuale ale WordPress au acum integrata alinierea imaginilor. WordPress adauga clase CSS pentru a alinia imaginea la dreapta, la stanga si la centrul unui paragraf, astfel incat textul sa se infasoare in jurul imaginii.

Pentru a profita de aceste noi clase CSS pentru alinierea imaginii si pentru infasurarea textului in jurul imaginii, Tema WordPress trebuie sa includa urmatoarele in stilul.css din directorul Tema WordPress.

img.alignright {float: right; margin: 0 0 1em 1em} img.alignleft {float: left; margin: 0 1em 1em 0} img.aligncenter {display: block; margine-stanga: auto; margin-right: auto} a img.alignright {float: right; margin: 0 0 1em 1em} a img.alignleft {float: left; margin: 0 1em 1em 0} a img.aligncenter {display: block; margine-stanga: auto; marginea-dreapta: auto}

Cand adaugati imaginea in blogul dvs. WordPress, selectati alinierea imaginii ca dreapta, stanga sau centru in panoul Imagine / Media.

Imaginea va fi incorporata in postarea dvs. de blog cu stilul selectat pentru aliniere, cum ar fi:

<img src = “http://example.com/images/leaf.jpg” alt = “leaf graphic” title = “leaf graph” class = “alignright size-medium wp-image-3109” height = “25” width = “30” />

Pentru mai multe informatii despre stilarea imaginilor in WordPress, consultati Infasurarea textului in jurul imaginilor. Imaginile pot avea margini, cadre, subtitrari si pot fi stilizate in multe moduri diferite. In principiu, exista doua moduri de a crea o imagine pe site-ul dvs. Puteti sa-l coafati din foaia de stil sau in linie pe o anumita imagine.

Stilizarea tuturor imaginilor

Stilizarea imaginilor dvs. din stilul.css al temei dvs. WordPress poate acoperi stilul fiecarei imagini de pe site-ul dvs. sau a anumitor imagini.

Pentru a stiliza fiecare imagine de pe site-ul dvs. pentru a arata intr-un anumit mod, cautati sau adaugati selectorul CSS pentru eticheta de imagine. Apoi adaugati stilurile la eticheta. De exemplu, sa presupunem ca doriti o margine neagra in jurul tuturor imaginilor dvs. si doriti spatiu intre margine si imagine, precum si spatiul corespunzator in jurul imaginii si al textului.

img {margin: 5px; umplutura: 10 px; chenar: negru solid 1px}

Poate vrei ceva un pic mai dramatic. Puteti modifica grosimea chenarului si setati-l pe o linie „dubla”. Si poate chiar doriti sa va izolati imaginea de restul textului, astfel incat sa mariti marginea din jurul imaginii.

img {margin: 20px; umplutura: 10 px; chenar: dublu negru 1px}

Stilizarea imaginilor specifice

Puteti adauga in foaia de stil un stil specific pentru anumite imagini. Daca ati stilat deja toate imaginile, trebuie sa va asigurati ca specificati fiecare declaratie de stil sau atribut specificat in stilul etichetei de imagine pentru a suprascrie acel atribut. Daca nu modificati marja, atunci aceasta va ramane aceeasi in noul stil. Aceasta se numeste relatia CSS parinte / copil.

Sa presupunem ca ati dori sa aveti cateva imagini in postarile dvs. in categoria Natura au un fundal verde frumos. Restul imaginilor ar trebui sa arate la fel, doar cele pe care le adaugati in categoria Natura. Pur si simplu adaugati o clasa la foaia de stil si la fiecare imagine din categoria respectiva.

Pentru a usura amintirea, vom numi clasa noastra „natura”. Vrem sa avem o margine groasa de culoare verde inchis si un fundal verde mediu in jurul imaginii pentru a o evidentia.

img.nature {margin: 20px; umplutura: 20 px; chenar: solid # 003300 4px; fundal: # 006600; }

Pe fiecare dintre imaginile din categoria respectiva, pur si simplu adaugati clasa pentru „natura”:

<img src = “leaf.gif” alt = “Frunza rosie” class = “nature” />

Daca aveti nevoie de mai multe stiluri pentru diferite imagini, puteti crea mai multe dintre ele dupa cum este necesar.

Creati direct una sau doua imagini

Exista momente in care doriti doar ca una sau doua imagini pe site-ul dvs. sa arate diferit de restul. Aceasta tehnica se numeste stiluri inline. Aplica stilurile CSS direct imaginii in sine.

De exemplu, spuneti ca doriti sa aveti o imagine izolata pe un fundal negru pentru a atrage atentia asupra acesteia.

<img src = “leaf.gif” alt = “Leaf rosu” style = “padding: 20px; fundal: negru; bordura: none” />

Aceasta nu este o tehnica de utilizat pe fiecare imagine. Se foloseste pe imagini ocazionale care au nevoie de „ceva special”.

Resurse

• Infasurarea textului in jurul imaginilor
• Proiectare si aspect WordPress
• Fotobloguri si galerii