Cum de a adăuga o frontieră în jurul unei imagini în WordPress

Doriți să adăugați o margine în jurul imaginilor în WordPress? Recent, unul dintre utilizatorii noștri ne-a cerut o modalitate ușoară de a adăuga frontieră în jurul unei imagini în WordPress. În timp ce puteți utiliza CSS, este confuz pentru începători. În acest articol, vă vom arăta o modalitate ușoară de a adăuga marginea imaginii în WordPress fără a modifica orice cod HTML sau CSS.

Tutorial video

Dacă nu vă place videoclipul sau aveți nevoie de mai multe instrucțiuni, continuați să citiți.

Metoda 1: Utilizarea unui plugin pentru a adăuga o margine de imagine în WordPress

Această metodă este pentru începători care nu doresc să editeze niciun HTML sau CSS. Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul WP Image Borders. La activare, trebuie să vizitați Setări »Fronturi imagine WP pentru a configura setările pluginului.

Prima secțiune din setările pluginului vă permite să vizați imagini. Puteți adăuga margini la toate imaginile din mesajele dvs. WordPress, bifând caseta de lângă "Adăugați chenare la toate imaginile din postările pe blog" opțiune.

Alternativ, puteți viza anumite clase CSS pentru a avea granițe. Vă vom arăta cum să adăugați o clasă CSS la o anumită imagine mai târziu în acest articol. Acum puteți pune orice în clasa CSS .border-image.

A doua secțiune din setările pluginului vă permite să personalizați setările de frontieră. Puteți alege un stil, o lățime, o rază și o culoare.

Ultima secțiune de pe pagina cu setări vă permite să adăugați umbre la imagini. Puteți introduce o distanță orizontală și verticală, rază de neclaritate și raspândire, precum și culoarea umbrei în cutie. Dacă nu doriți să adăugați umbre de picătură la imaginile dvs., puteți lăsa pur și simplu aceste câmpuri goale.

Nu uitați să faceți clic pe butonul Salvați modificările pentru a stoca setările pluginului.

Dacă ați selectat prima opțiune "Adăugați chenare la toate imaginile din postările pe blog", atunci nu mai trebuie să faceți altceva.

Ar trebui să vedeți margini de imagine pe toate imaginile postate pe blog.

Cu toate acestea, dacă ați selectat cea de-a doua opțiune pentru a afișa numai bord pentru anumite imagini, atunci trebuie să urmați următorul pas.

Adăugarea clasei CSS la o imagine în WordPress

Dacă doriți doar să adăugați frontiere în jurul imaginilor selectate, atunci va trebui să spuneți WordPress care imagini ar trebui să aibă granițe. Puteți face acest lucru adăugând o clasă CSS imaginilor care au nevoie de granițe.

Pur și simplu încărcați imaginea și adăugați-o la postarea dvs. După adăugarea imaginii, faceți clic pe acesta în editorul vizual și apoi faceți clic pe butonul de editare din bara de instrumente.

Acest lucru va aduce un popup de editare a imaginilor, care va arăta detaliile imaginii. Trebuie să faceți clic pe opțiunile avansate pentru ao extinde și apoi să introduceți clasa css a imaginii.

Sugestie: asta este .border-image pentru că am selectat-o ​​în setările pluginului nostru.

Apoi faceți clic pe butonul de actualizare pentru a salva și a actualiza setările imaginii. Asta e tot, imaginea ta va avea acum o clasă suplimentară. Deoarece utilizați pluginul WP Image Borders, pe această imagine se va afișa o margine.

Metoda 2: Utilizarea HTML & CSS pentru a adăuga Image Borders în WordPress

Adăugarea frontierelor de imagini folosind CSS / HTML este o modalitate mai rapidă și mai rapidă de a obține frontiere în jurul imaginilor în WordPress. Există multe moduri în care puteți face acest lucru și vă vom arăta pe toți. Puteți alege ceea ce este mai bine pentru dvs..

Adăugarea de frontiere folosind stiluri in-line în WordPress

După ce ați încărcat și inserat imaginea într-o postare WordPress, comutați la editorul de text. Veți vedea cod HTML pentru imaginea dvs. Va arata cam asa:

Puteți adăuga cu ușurință stilul CSS în codul HTML astfel:

Simțiți-vă liber să schimbați lățimea marginii, culoarea, umplutura și marginea la propriile nevoi.

Adăugarea frontierei imaginii în tema WordPress sau tema copilului

Dacă doriți să adăugați permanent margini la toate imaginile din mesajele și paginile blogului WordPress, atunci puteți adăuga CSS direct în tema WordPress sau subiectul copilului.

Cele mai multe teme WordPress au deja aceste reguli de stil definite în foaia de stil a temei, care este de obicei fișierul style.css. Puteți modifica CSS-ul existent sau puteți adăuga propriul CSS într-o temă de copil.

WordPress adaugă clase de imagini implicite tuturor imaginilor. Pentru a vă asigura că imaginile din postările / paginile dvs. au o margine de imagine, trebuie să vizați toate aceste clase. Iată un fragment CSS simplu pentru a începe:

 img.alignright float: right; marja: 0 0 1em 1em; frontieră: 3px solid #EEEEEE;  img.alignleft float: left; marja: 0 1em 1em 0; frontieră: 3px solid #EEEEEE;  img.aligncenter display: bloc; margin-stânga: auto; margin-dreapta: auto; frontieră: 3px solid #EEEEEE;  img.alignnone frontieră: 3px solid #EEE;  

Dacă doriți să utilizați numai margini de imagine atunci când aveți nevoie de ele, puteți adăuga o clasă CSS în imaginile dvs. (vedeți mai sus). Adăugați reguli de stil pentru această clasă CSS în tema sau tema copilului.

 img.border-image margine: 3px solid #eee; padding: 3px; margin: 3px;  

Sperăm că acest articol v-a ajutat să adăugați imagini în jurul imaginilor de pe blogul WordPress. De asemenea, este posibil să doriți să vedeți ghidul nostru privind modul de salvare a imaginilor optimizate pentru web pentru a vă grăbi site-ul WordPress.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.