Delo z blokom slik WordPress: Kako dodati slike v WordPress [+Secret tip]

Delo z blokom slik WordPress: Kako dodati slike v WordPress [+Secret tip]

Za številne uporabnike je delo s sliko lahko zelo neprijetno. Ni vedno lahko izbrati pravega razmerja stranic ali pravilno spremeniti velikosti slik, da so dobro videti v celotni postavitvi.

  1. Zakaj uporabljati blok slik WordPress
  2. Kako dodati slike z blokom WordPress Image
  3. Dodatni postopek oblikovanja slik
  4. Dodaten nasvet od nas znotraj članka

Starejše različice WordPressa (do v5.0) dodajajo slike z gumbom +Dodaj medije. Težava je bila v tem, da je bilo treba sliko tudi ob minimalni spremembi velikosti znova naložiti. To pomeni izgubo časa in odvečne klike.

Novi urejevalnik Gutenberg, ki temelji na blokih, spreminja način dodajanja slik v WordPress in tako poenostavlja postopek za končne uporabnike. V tem članku vam bomo predstavili praktični vodnik o dodajanju in urejanju bloka Slike v WordPressu. Poleg tega bomo razložili še eno možnost lepljenja slik - kako kopirati in prilepiti sliko v območje vsebine z le nekaj kliki. Predstavili vam bomo tudi novo dodane funkcije, ki prihajajo iz WP 5.3.

Najprej pa se pogovorimo o tem, zakaj morate v objavah in straneh uporabljati slike.

Zakaj je blok slik WordPress obvezen za vašo spletno stran

Pritegnite pozornost

Slike pritegnejo pozornost obiskovalcev spletnega mesta. Morajo biti zanimive, da bodo obiskovalce dlje časa zadržale na vaši spletni strani. Pomislite na prispevek na blogu brez slik. To je le skupek besedila. Na prvi pogled ni preveč zanimiv, čeprav bi lahko bil dragocen in poln informacij. Poleg tega lahko fotografije pomagajo, da si bolje predstavljate in opišete svojo temo.

Zaradi tega moramo uporabiti blok slik WordPress, da se osredotočimo na pomembne stvari.

Primer 2 blogov s slikami ali brez njih
Primer 2 blogov s slikami ali brez njih

Ilustrativno besedilo in kontekst

Slike so prav tako pomemben del za razumevanje vsebine, saj obiskovalcem omogočajo, da bolje razumejo, o čem je članek. Z infografikami lahko razložite zapletene povezave in stvari poveste na preprost način. Obiskovalcem pomaga, da se bolje orientirajo v problemu, o katerem govorite.

Primer infografike
Infografika za boljšo razlago besedila

Naj bo spletna stran lepša

Poleg tega slike lepo zaokrožijo celotno zasnovo spletnega mesta. Ne gre le za postavitev spletne strani, temveč tudi za uporabnost. Pravilno izbrana in postavljena slika lahko obiskovalcu pomaga, da lažje brska po vaši spletni strani.

Kako dodati slike v urejevalniku blokov WordPress

Če želite vstaviti sliko v objavo ali stran, morate dodati blok jedra - Blok slike. To lahko storite na več načinov:

- Uporaba "+" v zgornji vrstici ali kjer koli v urejevalniku

Dodajte slikovni blok s klikom na "+"
Dodajanje WordPress slikovnega bloka s klikom na "+"

- Uporaba poševnice "/" in nato zapis besede "image".

Dodajanje bloka slik z uporabo poševnice
Dodajanje bloka slik z uporabo poševnice "/"

Ustvarjen bo nov blok, v katerega lahko dodate dejanske slike.

Nalaganje slik v WordPress

Kako namestiti slike na želeno mesto?

  • Uporabite Upload in izberite sliko s trdega diska.
  • Uporabite knjižnico medijev, kjer lahko izberete slike, ki so bile že naložene na spletno mesto.
  • Uporabite miško in povlecite ter spustite sliko
  • Vstavite naslov URL slike
Možnosti za nalaganje slik
Razpoložljive možnosti za nalaganje slik - ena od njih je povleci in spusti sliko iz mape

Manj znana metoda dodajanja slik WordPress

Poleg nalaganja slik prek okna za nalaganje, kot smo že omenili, obstaja še en način vstavljanja slik (in to tako hiter!). Z izboljšanim urejevalnikom WordPress lahko:

  • Kopiranje slike iz katere koli vsebine ali
  • Sliko preprosto povlecite s kazalcem miške.

Nato vstavite ali premaknite (spustite) izbrano sliko na želeno mesto v območju vsebine.

Povlecite in spustite sliko iz objavljenega prispevka v območje vsebine
Povlecite izbrano sliko in jo spustite, kamor želite (neposredno v urejevalnik WordPressa)

Enako tehniko lahko uporabite tudi, če želite prilepiti sliko, zajeto z zaslona. Potrebni so le trije preprosti koraki. Prvi, morate narediti posnetek zaslona s funkcijo tiskanja zaslona. Windows 10 na primer ponuja privzeto orodje Snippet, imenovano Snip & Sketch, ki je na voljo tudi prek bližnjice - na tipkovnici pritisnite skupaj tipki Win+Shift+S. Nato izberite območje slike, ki ga želite zajeti. Zadnji korak je prilepiti kopirano sliko (ali njen del) v območje vsebine z osnovno bližnjico Ctrl+V.

In kaj se zgodi s sliko WordPressa, ki ste jo vstavili v urejevalnik? Slika se samodejno doda v knjižnico medijev, kjer jo lahko urejate.

Omejene možnosti metapodatkov slik

Pri urejanju slik lahko nastavite naslov, podnapis, opis in alternativno besedilo. Na žalost ne morete spremeniti imena datoteke slike - ostane samodejno generirano ime, kot je npr. slika-1.png in tako naprej. Ta vrsta imena datoteke je lahko zaradi nasprotja s priporočili za poimenovanje datotek nekoliko slabša pri optimizaciji SEO. Zato morate ta vidik upoštevati, preden slike iz WordPressa premaknete v območje vsebine.

Poravnava slik

Ena glavnih funkcij je poravnava slik. Ne glede na to, ali ste dodali blok slik WordPress v objavo ali stran, morate vedno upoštevati postavitev glede na zasnovo spletnega mesta. Na podlagi tega lahko poravnavo slike izberete v orodni vrstici nad njo. Privzeto lahko sliko poravnate levo, desno ali sredinsko. Nekatere teme WordPressa omogočajo, da so slike sredinsko poravnane kot široka ali polna širina. To je res odvisno od funkcij teme, saj tega ne podpirajo vse teme.

Nastavitve poravnave slik
Možnosti poravnave slik

Spreminjanje velikosti slik

Revolucionarna funkcija bloka slik v urejevalniku WordPress je praktično spreminjanje velikosti. Preprosto povlecite stran slike, da jo zmanjšate ali povečate. Tako lahko prilagodite velikost slike glede na besedilo v vsebini. Urejevalnik samodejno ohranja razmerja slike, kar pomeni, da vam ni treba skrbeti za deformacije.

Spreminjanje velikosti slik
Gladko spreminjanje velikosti slike z lovljenjem njenih ročajev

Nov slog bloka, ki preoblikuje sliko v obliko kroga

Če uporabljate najnovejšo razpoložljivo različico WordPressa, ste morda opazili nov slog obrezovanja kroga, ki ga lahko uporabite za svojo sliko. Obliko slike lahko spremenite prek zgornje orodne vrstice s klikom na prvo ikono "Spremeni vrsto ali slog bloka". Privzeta oblika (pravokotnik) se bo razrezala v obliko kroga.

Oblika kroga slike
Novo oblikovanje v slogu kroga za vaše slike

Nove funkcije v bloku Slike v WordPressu (dodane v WP 5.3)

Podpora za slike visoke ločljivosti

Eden največjih poudarkov WP 5.3 je izboljšana obdelava slik na platformi WordPress. Delo s slikami ima zdaj dve glavni funkciji:

  1. Nadaljevanje nalaganja - če nalagate fotografije visoke ločljivosti in internetna povezava odpove, se postopek nalaganja samodejno nadaljuje od prekinjene točke.
  2. Samodejno obračanje slik - najnovejša različica WP zagotavlja, da se nepravilno obrnjene slike samodejno obračajo v pravilen položaj, ko so naložene.

Nastavitve v Inšpektorju

Če želite nastaviti natančne dimenzije, lahko v urejevalniku uporabite inšpektorja v desni stranski vrstici. Nastavitve velikosti slike ponujajo pripravljene formate, kot so sličica, srednja, velika ali polna velikost. Širino in višino lahko seveda nastavite v pikslih ali odstotkih.

Razpoložljive nastavitve velikosti slike
Nastavitve velikosti slike

To je zelo hitro in praktično, saj lahko vse spremembe velikosti slike naredite prav znotraj bloka WordPress Images in vse na enem mestu v urejevalniku blokov.

Druge nastavitve bloka Slike

Kako dodati naslov URL

Slike se lahko uporabljajo kot statične slike ali pa jih je mogoče tudi klikniti in se nanje povezati:

  •   Medijska datoteka
  •   Priponka Stran
  •   URL po meri
Nastavitve povezav na slike
Razpoložljive nastavitve povezave do slike

Kako urediti sliko v bloku slike WordPress

Vsako sliko lahko uredite, ko kliknete ikono svinčnika. Odprlo se bo modalno okno s knjižnico medijev, v katerem lahko napišete besedilo alt, naslov, podnapis in opis. Na enak način, kot ste to že vajeni početi v starejših različicah WordPressa s klasičnim urejevalnikom.

Podrobnosti o slikah za namene SEO
Podrobnosti o slikah, ki jih morate izpolniti za izboljšanje SEO vaše spletne strani

Zakaj je pomembno, da so ta besedila izpolnjena?

Če obiskovalci kliknejo na sliko, da bi si jo ogledali večjo, vidijo naslov slike (na primer Citadela domača stran) in ne imena datoteke slike. Če pride do težav pri nalaganju slike, se na vašem spletnem mestu prikaže tudi nadomestno besedilo.

Dodatni nasveti

Poleg vseh teh razlogov in nastavitev za WordPress Images blocks je najpomembnejša stvar. S slikami lahko pridobite več obiskovalcev na svoji spletni strani. Kako jih torej pridobiti?

Dandanes so ljudje leni brati. Raje se pomikajo po slikah, da bi našli odgovore. Kako to, da se vaše fotografije in slike lahko uvrstijo? Odgovor so besedila. Za optimizacijo SEO sta zelo pomembna popoln naslov in opis slike. Ne pozabite izpolniti alternativnega besedila. Potem lahko Google bolje razume sliko. Tako boste imeli več možnosti, da jo uvrstite v rezultate iskanja slik.

2 načina dodajanja napisa slike

Dodajanje napisa slike je z uporabo urejevalnika blokov zelo enostavno. Tik pod sliko je prostor za pisanje besedila. To je prvi način - napis je napisan za točno to sliko na določeni podstrani.

Podnapis na sliki
Napis, napisan neposredno pod sliko

Drugi način je, da napis slike napišete z ikono svinčnika (Uredi sliko) v Knjižnici medijev. Na ta način dodajate napis k sliki globalno na celotnem spletnem mestu. To pomeni, da če boste isto sliko uporabili na treh različnih mestih, bo vedno uporabljala ta napis.

Dodajanje napisa slike v knjižnici Mediji
Podnapis na sliki dodan prek medijske knjižnice

Ali vam je všeč, kako enostavno je dodajanje slik v blok Slike v WordPressu? Preizkusite ga sami!

Izvedite več o naši povsem novi temi Citadela WordPress in njenih po meri izdelanih paketih postavitev. Ti so bili posebej zasnovani in razviti za različne vrste podjetij, podpirajo pa tudi nov način urejanja vsebine prek urejevalnika blokov WordPress.

7 razmišljanje o »Working with WordPress Image block: How to add images in WordPress [+Secret tip]«

  1. pravzaprav ni nobene prave spremembe pred/po urejevalniku gutemberg. Vse te možnosti so že obstajale. in resnica je, da je urejevalnik gutemberg popolna katastrofa, zato so elementor, divi in visual composer tako priljubljeni. Resnično upam, da bo vaša naslednja izdaja 100% združljiva s temi gradniki, saj wordpressovega urejevalnika nihče več ne uporablja 😀

    1. Pozdravljeni,

      hvala za komentar. Ja, predloga bo združljiva z vsemi vtičniki WordPress, napisanimi v skladu s Kodeksom in standardi WordPress.

      Na zdravje!
      Zlatko

    1. Pozdravljeni,

      hvala za vprašanje. To je naša osnovna dejavnost, da vsak od naših izdelkov redno posodabljamo.
      Če vas zanima možnost nadgradnje iz City Guide na temo Citadela, ki bo popolnoma združljiva z wordpressovim urejevalnikom gutenberg, je odgovor: da, nameravamo sprostiti vtičnik, zaradi katerega boste lahko upravljali migracijo iz teme City Guide na temo Citadela, razširjeno z vtičnikom imenika Citadela (1. vtičnik naj bi bil kmalu sproščen).

      Iskreno!
      Ekipa AIT

  2. Opazil sem, da je mogoče prilepiti sliko neposredno v urejevalnik Gutenberg. To povzroči, da se slika doda v knjižnico medijev z imenom slika-1, slika-2 itd...

    Funkcija, ki je nisem prebral na tej strani, zato jo je morda dobro dodati.

    To je še posebej uporabno, če je bila slika posneta z orodjem windows snippet (Win+shift+S). Nato jo lahko prilepite neposredno v članek na mestu, kjer je postavljen kurzor.

    Največja pomanjkljivost te metode je, da nisem našel načina za urejanje imena datoteke med lepljenjem ali po njem.. Zato ne bo zelo SEO prijazno.

  3. Pozdravljeni
    Imam težave z dodajanjem slik v temo "Multi Author Blog". Zdi se, da je nemogoče dodati drugo ali tretjo sliko v vrteči se drsnik na vrhu vsake objave v blogu. To pomeni, da je drsnik po nekaj sekundah prazen, kot da bi pričakoval drugo sliko.
    Prosim, lahko to popravite?
    Druga možnost: vprašanje - "Multi Author Blog" je pomemben za Archnetwork (imamo partnerja na Slovaškem), saj ga uporabljamo kot platformo za "poročanje" za udeležence naših projektov Nature. Ali je v vaši knjižnici alternativna tema, ki bi jo lahko uporabili na enak način?
    Blair Urquhart (doživljenjska naročnina - oddelek IT Archnetwork)

    1. Pozdravljeni,

      Hvala za prijavo. Najprej, če lahko, preverite različice svoje teme/vtičnika z najnovejšimi: priporočamo brezplačno uporabo vtičnika AIT Updater -> https://www.ait-themes.club/wordpress-plugins/ait-updater/ , (ali dokumentacijo, kako nastaviti vtičnik: https://www.ait-themes.club/doc/updater-plugin-documentation/
      Navodila za aktivacijo izdelka najdete na: https://www.ait-themes.club/doc/theme-activation/

      Če težava še vedno traja, nam zagotovite nekaj slik ali se obrnite na nas prek foruma za podporo s poročilom AIT SysInfo: https://www.ait-themes.club/wordpress-plugins/ait-sysinfo/. Naši tehniki so vam pripravljeni pomagati pri vseh težavah, povezanih s temami: Podpora strankam je na voljo med delovnimi dnevi od 8.00 do 17.00 po srednjeevropskem času, saj nisem mogel ponoviti vaše težave. Revolution slider deluje pravilno.

      Drugič,
      paketu izdelkov Citadela je dodanih nekaj zanimivih funkcij, zato si oglejte primerjalno tabelo: https://www.ait-themes.club/next-generation-directorypro/

      Če vam lahko pomagamo pri čem drugem, se obrnite na nas.

      Lep pozdrav!
      Zlatko
      Ekipa AIT

Komentarji so zaprti.