Kako dodati sliku u WordPress html. Kako popraviti uobičajene slikovne pogreške u WordPressu. Učitavanje slika u wordpress, načini dodavanja slike u wordpress post

Mnoge web stranice koriste sličice za ilustraciju teme određenog članka. To vam omogućuje da stranici date više boje, da izgleda profesionalnije i dosljednije, a također zainteresirate posjetitelja za gledanje materijala.

Ako ste vlasnik web stranice koja pokreće WordPress, tada vam neće biti teško prikazati bilo koju sliku kao sličicu za post ili stranicu, budući da je ova funkcija ugrađena u jezgru sustava prema zadanim postavkama.

Štoviše, omogućuje vam da primijenite određenu obradu kako biste prikladnije prilagodili izlaz pregleda, uzimajući u obzir dizajn vaše stranice.

Dodavanje slike za pregled u objavu ili stranicu u WordPressu

Prikazivanje slika za ilustraciju sadržaja objave ili stranice u WordPressu prilično je jednostavno. Da biste to učinili, kada kreirate novi unos, samo trebate kliknuti gumb "Postavi sličicu" koji se nalazi u donjem desnom kutu prozora uređivača.

Ispred vas će se pojaviti skočni prozor u koji možete prenijeti sliku sa svog računala ili odabrati jednu iz WordPress biblioteke datoteka. Nakon toga možete postaviti parametre kao što su:

  • Naslov – pojavljuje se kada zadržite kursor;
  • Potpis – može se prikazati pomoću posebnog koda;
  • atribut alt – alternativni tekst, prikazan umjesto slike koja nedostaje;
  • Opis - Kratki opis sadržaj slike.

Osim toga, također je moguće urediti sliku promjenom njezinog razmjera ili obrezivanjem na željenu veličinu. Samo je vrijedno napomenuti da se veličina također može odrediti instaliranom temom, te promjene neće utjecati na rezultat. Osim toga, postoji i jedan važna nijansa– neki predlošci koriste izlaz velikog pregleda za objavu na glavnom mjestu i malog u sadržaju objave, ili obrnuto.

Problem duplih slika u postovima

Ako postavite minijaturu za objavu u WordPressu, neke teme će je prikazati ne samo na popisu objava na glavnoj stranici, već i na stranici jedne objave. Dakle, ako želite postaviti istu sliku unutar objave, ali različite veličine, ona će izgledati kao duplikat.

Postoje dva načina da se ispravi ovaj nesporazum. Možete izbrisati sliku koju ste ručno postavili u objavu ili onemogućiti automatski prikaz slika za pregled u sadržaju. To je prilično jednostavno učiniti, ali ćete morati malo kopati po kodu instalirane teme.

Da biste uklonili sličicu iz sadržaja objave, prije svega morate pronaći redak koda koji je odgovoran za njen izlaz. Nakon toga postavite uvjet pod kojim će se prikazivati ​​samo na početna stranica ili u kategoriji.

Lokacija ovog retka može varirati, ali svoju pretragu uvijek trebate započeti s datotekom "Single.php". Koristeći standardni Twenty Sixteen WordPress predložak kao primjer, trebate otvoriti uređivač koda koji se nalazi u " Izgled» upravna ploča. Ovdje ćete morati otvoriti datoteku “Single.php” i pronaći redak u kodu koji je odgovoran za prikaz sadržaja. Ovako izgleda:

get_template_part("dijelovi-predloška/sadržaj", "jedan");

Iz ovog retka postaje jasno da trebate nastaviti pretraživanje u datoteci "content-single.php". Kada otvorite ovu datoteku u editoru, pronaći ćete ovaj redak:

Upravo je ona odgovorna za prikaz sličice na stranici zasebnog članka. Imajte na umu da ovaj redak može izgledati drugačije ovisno o određenom predlošku, ali mora sadržavati riječi "post" i "thumbnail". Samo trebate zamijeniti ovu liniju s:

Sve je vrlo jednostavno, ali svaki pojedini slučaj može dodati probleme. Stoga, da biste se spasili od nepotrebnih glavobolja, trebali biste učiniti sigurnosna kopija mjesto prije unošenja izmjena.

Omogućite podršku za sličice u predlošku

Iako je ovo ugrađena značajka WordPressa, radit će samo ako je podržava instalirani predložak. Gotovo svi moderni WordPress predlošci podržavaju ovu značajku, ali ponekad postoje iznimke. U tom slučaju možete sami omogućiti pregled izlaza. Da biste to učinili, samo trebate dodati nekoliko oznaka datotekama predloška.

Prije svega, trebate otvoriti datoteku “functions.php” koja se nalazi u mapi teme i dodati sljedeći redak:

add_theme_support("post-thumbnails");

Ovo će omogućiti prikaz minijature za objavu ili stranicu tijekom izrade. Ako želite omogućiti ovu značajku samo za snimanje, trebate dodati sljedeći redak:

add_theme_support("post-thumbnails", array("post"));

Ali samo za ovakvu stranicu:

add_theme_support("post-thumbnails", array("stranica"));

Zatim morate odrediti dimenzije pomoću jedne od dvije metode koje nude funkcije WordPressa: proporcionalna promjena veličine ili obrezivanje. U prvom slučaju, slika će biti proporcionalno (bez izobličenja) komprimirana dok ne stane na zadanu širinu i visinu. Na primjer, ako je izvorna slika 100 × 50, a vi ste naveli 50 × 50, tada će rezultat biti 50 × 25. Kod za prvu metodu izgleda ovako:

postavi_veličinu_sličice_objave(50, 50);

Prednost ove metode je što će se slike prikazati u cijelosti. Loša strana je što će svi biti različitih veličina, što ne odgovara uvijek dizajnu stranice. Ali moguće ih je ograničiti samo širinom, ostavljajući izvornu visinu. To se može učiniti jednostavnim navođenjem velikog broja kao drugog parametra, na primjer, 9999.


Drugi način promjene veličine je obrezivanje. U ovom slučaju, slika se izrezuje kako bi odgovarala ciljnom omjeru širine i visine slike, a zatim se komprimira kako bi što je moguće bolje odgovarala navedenim parametrima. Kodirati ovu metodu izgleda ovako:

set_post_thumbnail_size(50, 50, true);

Prednost je u tome što će sve slike biti iste, ali nedostatak je što će dio slike biti izrezan, što može uvelike utjecati na njen sadržaj, pa čak i iskriviti značenje.

Sada kada su svi parametri postavljeni, preostaje samo prikazati sličicu utvrđena tema. Da biste to učinili, morate dodati malu liniju koda u datoteke stranica na kojima to želite učiniti. Linija izgleda ovako:

Zaključak

Ovaj članak pruža samo osnovne parametre pomoću kojih možete stvoriti najprikladniju ilustraciju sadržaja objave u WordPressu za dizajn vaše web stranice. Uz korake opisane ovdje, također možete organizirati prikaz zadane sličice za sve objave, staviti bilo koji potpis na nju ili čak dodati nekoliko različitih slika u jedan članak.

Slike web stranica sastavni su dio ne samo dizajna, već i sadržaja. Bez slika, posjetitelj će vidjeti samo sivi informacijski sadržaj koji nije atraktivan. Nemoguće je zamisliti modernu web stranicu bez slika.

Najčešće se slike mogu naći na obrazovnim projektima, novinski portali, online trgovine i druge vrste web stranica. Stoga postoji potreba za učitavanjem slika na stranicu. Postoje dva najčešća načina za dodavanje slika u WordPress. To je ono što ćete sada naučiti.

Prijenos slika u WordPress s vašeg računala

Vjerojatno je već iz naslova jasno o čemu govorimo. Za prijenos slika u WordPress otvorite stranicu ili objavu na koju želite postaviti sliku. Zatim kliknite na gumb "Dodaj medij". Velik je i uočljiv pa ne bi trebalo biti problema s pronalaženjem. Zatim kliknite gumb "Odaberi datoteku" da biste otišli na prozor za odabir. Pronađite željenu sliku na računalu i kliknite gumb "Otvori".

Prije nego što to učinite, preporučujemo da provjerite naslov slike. Mora se sastojati od latiničnih slova. U suprotnom, postoji mogućnost problema s njegovim prikazom na stranici vaše web stranice na nekim preglednicima i uređajima.

Prijenos slike u WordPress s drugih internetskih stranica

Ovdje je sve, kao iu prvom slučaju, krajnje jednostavno, osim što datoteku ne preuzimate sa svog računala, već s drugog mjesta. Da biste to učinili, morate znati URL slike. Pronađite sliku koja vam se sviđa na internetu i kliknite je desnom tipkom miša. Kliknite na stavku izbornika "Kopiraj URL slike". Nakon toga, URL slike bit će u međuspremniku.

Sada idite na konzolu, otvorite stranicu ili objavu na koju želite postaviti sliku i kliknite na gumb "Dodaj medij". Zatim idite na karticu "Umetni sa stranice". U dugom redu zalijepite URL slike koju ste prethodno kopirali. Da biste to učinili, desnom tipkom miša kliknite na njega i odaberite "Zalijepi". Spremite i slika se učitava.

Međutim, upamtite da ako instalirate sliku ovom metodom, možete je izgubiti na svojoj web stranici ako izvorni izvor izbriše sliku ili promijeni njezinu adresu.

Ovo su bile najprikladnije i najčešće metode dodavanja slike u WordPress.

Zanimat će vas efekt koji se može primijeniti na sliku u WordPressu.

WordPress ima puno funkcija za slike, koje, nažalost, nisu uvijek jasne početnicima. U ovom ću članku govoriti o najčešćim pogreškama, poteškoćama koje se mogu pojaviti pri radu sa slikama i kako ih popraviti.

Kako učitati slike na WordPress?

Slike se učitavaju u WordPress putem alata za učitavanje medija, koji vam omogućuje umetanje slike u članak izravno sa zaslona za uređivanje objave ili stranice jednostavnim klikom na gumb "Dodaj medij".

Osim toga, možete izravno učitati slike na Medijske datoteke a zatim ih koristiti u postovima ili na stranicama. Da biste to učinili, kliknite na Mediji » Dodaj novo i prenesite potrebne slike.

Sve slike postavljene na stranicu možete pogledati klikom na Medijske datoteke » Knjižnica.

Ako ste dodali više slika u post/stranicu, ima smisla stvoriti galeriju i/ili dodati pomični klizač koji će omogućiti vašim korisnicima pregled svih slika bez ponovnog učitavanja stranice.

Kako poravnati slike lijevo/desno?

Dok pregledavate članke na internetu, vjerojatno ste primijetili da neki od njih imaju tekst oko malih slika. To se može učiniti pomoću funkcije "poravnaj lijevo/desno". U tom slučaju možete izravnati sliku neposredno prije učitavanja u snimku.

U početku, kada učitate sliku u post, tekst će se nalaziti neposredno ispod nje. Kliknite na fotografiju i vidjet ćete redak s potrebnim opcijama, a možete ih odabrati i klikom na gumb "Uredi".

Kada kliknete, ispred vas će se pojaviti prozor za uređivanje slika u kojem možete odabrati željeno poravnanje i odmah vidjeti kako će tekst teći oko slike.

Funkcija poravnanja također se može pronaći na alatnoj traci uređivač teksta. Kliknite na sliku da biste je aktivirali i odaberite lijevo ili desno poravnanje - tekst će se lijepo omotati oko slike.

Kako dodati opis ispod slike?

U WordPressu ispod svake slike možete napisati opis. Da biste to učinili: kliknite na fotografiju, odaberite "Uredi" iu prozoru uređivača pronađite polje "Potpis", unesite traženi naslov ili opis.

Kako prikazati fotografije u stupcima i redovima?

Vrlo često čujem pitanje kako možete prikazati slike u stupcu ili u redu. U međuvremenu, WordPress ima ugrađenu opciju za to, tj. galerijska funkcija. Da biste uredno prikazali više slika u stupcu ili retku, morate stvoriti galeriju.

Da biste to učinili: kliknite na gumb Dodajte medijsku datoteku. U prozoru programa za učitavanje koji se pojavi, kliknite na "Stvori galeriju" i prenesite potrebne fotografije. Nakon što prenesete svoje slike, svaku možete označiti naizmjeničnim klikanjem na njih i unosom teksta u blok "naslov" ili "naslov". Provjerite jeste li odabrali sve potrebne slike i kliknite na gumb "Stvori novu galeriju".

U prozoru Uredi galeriju možete dodati opis slike (da biste to učinili, prvo morate kliknuti na nju), promijeniti parametre i promijeniti redoslijed slika. Kada napravite sve potrebne izmjene, ne zaboravite kliknuti gumb "Umetni galeriju".

Kôd galerije (u starijim verzijama) ili sama galerija (novije verzije WordPressa) pojavit će se u uređivaču objava.

Svojoj objavi također možete dodati prekrasan pomični klizač. , koji će korisnicima omogućiti pregled cijele galerije bez ponovnog učitavanja stranice.

Kako popraviti nedostajuću sličicu za objavu?

U mnogim WordPress teme Sličice objava prikazane su na glavnoj stranici i na arhivskim stranicama (, arhive po datumu itd.). Kako ne biste zaboravili umetnuti sličice na stranici za uređivanje postova, s desne strane nalazi se blok pod nazivom “Post Thumbnail” (pogledajte snimak zaslona). Pritisnite Postavi sličicu.

Ako ne možete pronaći ovaj meta okvir, tada u gornjem desnom kutu kliknite na gumb "Postavke zaslona" i potvrdite okvir pored "Post Thumbnail".

Kako popraviti dvostruku sličicu za objavu?

Jedan od uobičajenih problema za početnike je stvaranje dvije sličice za jednu objavu odjednom. To se događa kada korisnik učitava sliku u tekst objave, a zatim također postavlja sličicu u odgovarajući metabox. To dovodi do činjenice da će se u nekim temama ista slika prikazati dva puta, ali u različitim veličinama. Evo kako to izgleda u praksi:

To se događa jer većina WordPress tema automatski postavlja prvu sliku dodanu u objavu kao minijaturu, tako da ponekad nema potrebe posebno postavljati minijaturu za objavu.

Slika je prevelika - kako izrezati sliku u uređivaču bloga?

Prilikom preuzimanja slika s pametnih telefona ili fotoaparata ispada da su jako velike. WordPress ima sjajnu značajku u kojoj automatski stvara tri veličine za vašu prenesenu sliku: malu, srednju i veliku. Međutim, ponekad postoji potreba izrezati fotografiju na željenu veličinu. Naravno, WordPress nije Photoshop, ali također ima nekoliko osnovnih ugrađenih funkcija, kao što su skaliranje, obrezivanje i rotiranje slike.

Učitajte sliku: Dodajte medije » Učitajte datoteke. Na desnoj strani u "opcijama datoteke" vidjet ćete vezu "Uredi". Kliknite na njega i naći ćete se u prozoru za uređivanje slika.

Ovdje možete vidjeti osnovne funkcije uređivača: obrezivanje, rotiranje, promjena veličine itd.

Kako umetnuti sliku u zaglavlje WordPress stranice?

Slika zaglavlja teme u WordPressu jedna je od njegovih karakteristika. Danas mnoge teme imaju ugrađenu podršku za takve slike, tako da webmasteri mogu jednostavno promijeniti glavne slike tema svojih web stranica. Na primjer, prema zadanim postavkama tema Twenty Thirteen dolazi s nekoliko slika zaglavlja i možete odabrati onu koja vam se najviše sviđa.

Kao administrator, možete učitati bilo koju sliku koju želite u zaglavlje stranice; da biste to učinili, slijedite rutu: Izgled » Zaglavlje.(V nova verzija: Opcije teme » Zaglavlje). WordPress će vam reći zahtjeve veličine za sliku koja se može koristiti za zaglavlje stranice. Ako postavite sliku odgovarajuće veličine, ona će stati kako treba i izgledati kako treba, ali ako ne, morat ćete je izrezati na željenu veličinu.

Možete učitati onoliko slika koliko mislite da je potrebno i one će biti nasumično prikazane na stranici ili možete odabrati samo jednu klikom na " Odaberite Slika" (odaberite sliku).

Kako dodati pozadinsku sliku?

Mnoge WordPress teme ne samo da podržavaju slike zaglavlja, već i sličnu značajku za pozadinska slika mjesto. Kako biste provjerili ima li tema koju ste odabrali ovu funkciju, idite na administrativnu ploču. Izgled, trebala bi postojati poveznica "Pozadina".

Prenesite bilo koju sliku koju želite sa svog računala ili je odaberite iz biblioteke datoteka. Nakon što odaberete slike, moći ćete pregledati stranicu i također moći urediti pozadinsku sliku. Na primjer, možete napraviti standardni fiksni ili popločani zaslon, ili možete imati pomicanje. Spremite promjene i pogledajte kako sve izgleda.

Kako pronaći besplatne slike za web stranicu?

Postovi sa slikama izgledaju mnogo impresivnije i zanimljivije. No, naravno, nemamo svi svoje unikatne fotografije za postove koje objavljujemo i zato ih moramo preuzimati s interneta. Postavlja se pitanje gdje pronaći lijepe i što je najvažnije besplatne slike koje možete legalno koristiti na svojoj web stranici? Srećom, postoji mnogo slika na kojima možete pronaći besplatne slike koje odgovaraju vašem ukusu.

Kako dodati oznake slikama?

Ako imate web stranicu na kojoj su slike i/ili bilo koje druge medijske informacije glavni sadržaj, tada ćete prije ili kasnije shvatiti da WordPress ima dovoljno ograničena količina funkcije za organiziranje slika. Stoga bih u ovom slučaju toplo preporučio korištenje oznaka kako biste posjetiteljima olakšali navigaciju kroz vaš sadržaj. Da biste to učinili, morat ćete preuzeti i aktivirati dodatak Media Tagger .

Značajna prednost ovog dodatka je to što može primijeniti objavljene oznake posta na slike. Ako prethodno niste registrirali oznake, to ćete morati učiniti tako da odete na Postovi » Oznake. Dodatak također dolazi s ugrađenim widgetom za pretraživanje koji se može dodati na vašu bočnu traku ili bilo koje drugo područje widgeta, tako da vaši korisnici mogu pregledavati slike na temelju svojih odabranih oznaka.

Kako umetnuti slike iz izvora trećih strana?

Obično se ovo pitanje postavlja prilikom premještanja web stranice s jednog mjesta na drugo. Događa se da prilikom premještanja slike ostanu na starom mjestu. Najčešće se ovaj problem susreće bivši vlasnici blogove na platformama kao što su: , Joomla, Tumblr i WordPress.com. Također se događa da se slike ispravno prikazuju na novom mjestu, ali se učitavaju s (prethodnog) resursa treće strane. Kako biste riješili ovaj problem, preuzmite i aktivirajte dodatak za uvoz vanjskih slika. Dodatak će skenirati sve vaše objave i prikazati sve slike preuzete s izvora treće strane. Možete uvesti sve svoje slike odjednom pritiskom na gumb.

Kako postaviti zahtjev za postavljanje sličice za post u WordPressu?

Prilikom pokretanja stranice na kojoj nekoliko autora objavljuje svoje članke, možete naići na problem da zaborave postaviti sličicu za objavu. Ako želite podsjetiti svoje autore ili sebe da postavite sličicu, jednostavno preuzmite i aktivirajte dodatak Zahtijeva istaknutu sliku. Ovdje nema potrebe ništa konfigurirati, dodatak "radi izvan kutije". Čim ga aktivirate, svaki put kada želite objaviti post, pojavit će se podsjetnik u prozoru urednika da postavite sličicu za post, tj. Unos neće biti objavljen bez sličice, već će biti spremljen samo u skicama.

Kako konfigurirati funkciju za postavljanje zadane minijature?

Pronaći minijaturu koja savršeno pristaje uz snimku prilično je mukotrpan zadatak. Ponekad za to ne ostane vremena, a ako objavu ostavite bez sličice, stranica neće izgledati lijepo. Stoga, ako nemate posebno odabranu sličicu, onda je idealno rješenje postaviti funkciju u WordPressu da automatski koristi sliku kao sličicu.

Oni koji su barem jednom ubacili više od 5 slika u objavu susreli su se sa sljedećim problemom: ne možete dodati slike odjednom, to nije moguće u standardnim WordPress funkcijama. Svaki put kada morate otvoriti prozor za umetanje slike u uređivaču, idite u galeriju, odaberite željenu sliku i tek je onda ubacite na stranicu. Ukupno 4 nepotrebna klika na svaku sliku je neoprostiv gubitak vremena. Zamislite kako sam patio u postu o otoku Koh Samui u Tajlandu, koji sadrži više od 20 fotografija. Istina, nisam sve radio kroz uređivač, već sam kopirao kod i promijenio samo url fotografije, što se također ne može nazvati zgodnim.

Budući da planiram i dalje objavljivati ​​fotografije sa svojih putovanja, odlučio sam se pozabaviti ovom neugodnošću i potražiti dodatak. Nakon duge potrage, pronađeno je rješenje - Faster image insert plugin. Skinuo sam verziju 2.2.0. Potpuno se integrira s WordPress medijima i omogućuje vam dodavanje fotografija u samo jedan klik. Dodatak se prikazuje ispod polja sadržaja.

U ovom slučaju možete učitati sve slike odjednom kroz standardni flash loader motora. Nakon toga trebate malo pričekati dok se ne pojave potvrdni okviri, a zatim označite potrebne datoteke i kliknite na "Umetni odabrane slike".

Zatim sve što trebate učiniti je dodati mali tekst za opis slika i vaš post je spreman!

Usput, jeste li primijetili ovu strelicu u Google rezultatima?