Työskentely WordPress Image lohko: [+Salaiskärki] Miten lisätä kuvia WordPress [+Salaiskärki]

Työskentely WordPress Image lohko: [+Salaiskärki] Miten lisätä kuvia WordPress [+Salaiskärki]

Monille käyttäjille kuvien kanssa työskentely voi olla todella turhauttavaa. Aina ei ole helppoa valita oikeaa kuvasuhdetta tai muuttaa kuvien kokoa oikein, jotta ne näyttäisivät hyvältä koko ulkoasussa.

  1. Miksi käyttää WordPress Image block
  2. Miten lisätä kuvia WordPress Image lohko
  3. Lisämuotoilukuvien prosessi
  4. Extra vinkki meiltä artikkelin sisällä

Vanhemmat WordPress-versiot (v5.0:aan asti) lisäävät kuvia +Add Media -painikkeella. Ongelmana oli, että vaikka kuvan kokoa olisi muutettu vain vähän, se olisi pitänyt ladata uudelleen. Se tarkoittaa ajanhukkaa ja turhia klikkauksia.

Uusi lohkopohjainen Gutenberg-editori muuttaa tapaa lisätä kuvia WordPressiin, jotta tämä prosessi olisi yksinkertaisempi loppukäyttäjille. Tässä artikkelissa näytämme sinulle käytännön oppaan WordPressin Image-lohkon lisäämisestä ja muokkaamisesta. Lisäksi selitämme yhden lisävaihtoehdon kuvien liittämiseen - miten voit kopioida ja liittää kuvan sisältöalueelle muutamalla klikkauksella. Esittelemme sinulle myös WP 5.3:sta tulevat uudet lisätyt ominaisuudet.

Puhutaan kuitenkin ensin siitä, miksi sinun pitäisi käyttää kuvia viesteissä ja sivuilla.

Miksi WordPress Image lohko must-have sivustollesi

Herättää huomiota

Kuvat herättävät verkkosivuston kävijöiden huomion. Niiden on oltava mielenkiintoisia, jotta kävijät pysyvät sivustollasi pidempään. Ajattele blogikirjoitusta ilman kuvia. Se on vain kasa tekstiä. Ensisilmäyksellä se ei ole kovin kiinnostava, vaikka se voisi olla arvokas ja täynnä tietoa. Lisäksi kuvat voivat auttaa kuvittelemaan ja kuvaamaan aihettasi paremmin.

Tästä syystä meidän on käytettävä WordPress Image block keskittää huomiota tärkeisiin asioihin.

Esimerkki 2 blogista kuvien kanssa tai ilman kuvia
Esimerkki 2 blogista kuvien kanssa tai ilman kuvia

Havainnollistava teksti ja konteksti

Kuvat ovat myös olennainen osa sisällön ymmärtämistä, koska niiden avulla kävijät ymmärtävät paremmin, mistä artikkelissa on kyse. Infografiikan avulla voit selittää monimutkaisia yhteyksiä ja kertoa asiat yksinkertaisella tavalla. Se auttaa kävijöitä orientoitumaan paremmin ongelmaan, josta puhut.

Infograafinen esimerkki
Infografiikka tekstin selittämiseksi paremmin

Tee verkkosivustosta mukavampi

Lisäksi kuvat viimeistelevät hienosti koko verkkosivuston suunnittelun. Kyse ei ole vain sivuston ulkoasusta vaan myös käytettävyydestä. Oikein valittu ja sijoitettu kuva voi auttaa kävijää selaamaan verkkosivustoasi helpommin.

Miten lisätä kuvia WordPress lohko editor

Jos haluat lisätä kuvan Postiin tai Sivulle, sinun on lisättävä ydinlohko - Kuvalohko. Siihen on useita tapoja:

- Käyttämällä "+" -painiketta yläpalkissa tai missä tahansa muokkauksessa

Lisää kuvalohko klikkaamalla "+"
Lisäämällä WordPress Image lohko klikkaamalla "+"

- Käytetään vinoviivaa "/" ja kirjoitetaan sana "kuva" sen jälkeen.

Lisää kuvalohko käyttämällä vinoviivaa
Kuvalohkon lisääminen vinoviivalla "/"

Luodaan uusi lohko, johon voit lisätä varsinaisia kuvia.

Kuvien lataaminen WordPressiin

Miten laittaa kuvia sinne, minne haluat?

  • Käytä Upload ja valitse kuva kiintolevyltäsi.
  • Käytä mediakirjastoa, josta voit valita kuvia, jotka on jo ladattu verkkosivustollesi.
  • Käytä hiirtä ja vedä & pudota kuva
  • Lisää kuvan URL-osoite
Vaihtoehdot kuvien lataamiseen
Käytettävissä olevat vaihtoehdot kuvien lataamiseen - yksi niistä on kuvan vetäminen ja pudottaminen kansiosta.

Vähemmän tunnettu tapa lisätä WordPress-kuvia

Sen lisäksi, että lataat kuvia aiemmin mainitun latausikkunan kautta, on toinenkin tapa lisätä kuva (ja se on niin nopea tapa!). Parannetulla WordPress-editorilla voit:

  • Kopioi kuva mistä tahansa sisällöstä tai
  • Vedä kuva vain hiiren kursorilla.

Lisää tai siirrä (pudota) valittu kuva haluamaasi paikkaan sisältöalueella.

Vedä ja pudota kuva julkaistusta viestistä sisältöalueelle
Vedä valittu kuva ja pudota se sinne, minne haluat (suoraan WordPress-editoriin).

Voit käyttää samaa tekniikkaa myös silloin, kun haluat liittää näytöltä otetun kuvan. Tarvitaan vain kolme yksinkertaista vaihetta. Ensimmäinen, sinun on otettava kuvakaappaus käyttämällä tulostusnäyttöominaisuutta. Esimerkiksi Windows 10 tarjoaa oletusarvoisen Snippet-työkalun nimeltä Snip & Sketch, joka on käytettävissä myös pikanäppäimellä - paina näppäimistölläsi Win+Shift+S-näppäimiä yhdessä. Valitse sitten kuva-alue, jonka haluat kaapata. Viimeinen vaihe on kopioidun kuvan (tai sen osan) liittäminen sisältöalueelle perusnäppäinyhdistelmällä Ctrl+V.

Ja mitä tapahtuu WordPress kuva, jonka olet liittänyt editoriin? No, se lisätään automaattisesti Mediakirjastoon, jossa voit muokata tätä kuvaa.

Kuvan metatietojen rajoitetut vaihtoehdot

Kuvanmuokkauksessa voit asettaa kuvan otsikon, kuvatekstin, kuvauksen ja vaihtoehtoisen tekstin. Valitettavasti et voi muuttaa kuvan tiedostonimeä - se säilyttää automaattisesti luodun nimensä, kuten esim. kuva-1.png ja niin edelleen. Tämäntyyppinen tiedostonimi voi olla pieni haitta SEO-optimoinnin kannalta, koska se on ristiriidassa tiedostojen nimeämissuositusten kanssa. Siksi sinun on otettava tämä näkökohta huomioon ennen WordPress-kuvien siirtämistä sisältöalueelle.

Kuvan kohdistaminen

Kuvien kohdistaminen on yksi tärkeimmistä ominaisuuksista. Riippumatta siitä, lisäätkö WordPress Image lohko Post tai Page sinun pitäisi aina harkita sijoittelua riippuen sivuston suunnittelu. Sen perusteella kuvan kohdistus voidaan valita yläpuolella olevasta työkalupalkista. Oletusarvoisesti voit kohdistaa kuvan vasemmalle, oikealle tai keskittää sen. Jotkut WordPress-teemat sallivat kuvien keskittämisen leveänä tai koko leveydeltä. Se riippuu todella teeman ominaisuuksista, sillä kaikki teemat eivät tue sitä.

Kuvan kohdistusasetukset
Kuvan kohdistusvaihtoehdot

Kuvien koon muuttaminen

Vallankumouksellinen ominaisuus Image lohko WordPress editor on käytännöllinen koon muuttaminen. Vedä kuvan sivua yksinkertaisesti vetämällä, niin saat siitä pienemmän tai suuremman. Näin voit säätää kuvan kokoa sisällössä olevan tekstin mukaan. Editor pitää automaattisesti kuvan mittasuhteet, joten sinun ei tarvitse huolehtia muodonmuutoksista.

Kuvan koon muuttaminen
Sulava kuvan koon muuttaminen tarttumalla sen kahvoihin

Uusi lohkotyyli, joka muuttaa kuvan ympyrän muotoon.

Jos käytät WordPressin viimeisintä saatavilla olevaa versiota, olet ehkä huomannut uuden ympyrä-crop-tyylin, jota voit käyttää kuvallesi. Kuvan muotoa voi muuttaa yläosan työkalupalkin kautta klikkaamalla ensimmäistä "Muuta lohkon tyyppiä tai tyyliä" -kuvaketta. Oletusarvoinen (suorakulmion) muoto leikataan ympyrän muotoon.

Kuvan ympyrän muoto
Uusi ympyrän muotoilu kuvillesi

Uusia ominaisuuksia WordPress Images -lohkossa (lisätty WP 5.3:ssa)

Tuki korkean resoluution kuville

Yksi WP 5.3:n suurimmista kohokohdista on parannettu kuvankäsittely WordPress-alustalla. Kuvien kanssa työskentelyssä on nyt kaksi pääominaisuutta:

  1. Latauksen jatkaminen - Jos lataat korkearesoluutioisia valokuvia ja internet-yhteys katkeaa, latausprosessi jatkuu automaattisesti keskeytyneestä kohdasta.
  2. Automaattinen kuvien kierto - uusin julkaistu WP-versio varmistaa, että virheellisesti kierretyt kuvat kiertyvät automaattisesti oikeaan asentoon, kun ne ladataan.

Asetukset Inspectorissa

Voit määrittää tarkat mitat editorin oikeassa sivupalkissa olevan tarkastajan avulla. Kuvan kokoasetukset tarjoaa valmiita muotoja, kuten pikkukuvan, keskikokoisen, suuren tai täysikokoisen kuvan. Voit määrittää leveyden ja korkeuden tietysti pikseleinä tai prosentteina.

Käytettävissä olevat kuvakokoasetukset
Kuvan koon asetukset

Se on erittäin nopea ja käytännöllinen, koska voit tehdä kaikki kuvan koon muutokset suoraan WordPress Images -lohkon sisällä ja kaikki yhdessä paikassa lohkoeditorissa.

Muut Kuvat-lohkon asetukset

URL-osoitteen lisääminen

Kuvia voidaan käyttää staattisina kuvina tai ne voivat olla myös klikattavissa ja linkitettävissä:

  •   Mediatiedosto
  •   Liite Sivu
  •   Mukautettu URL-osoite
Kuvalinkin asetukset
Käytettävissä olevat kuvalinkkiasetukset

Miten muokata kuvaa WordPress Image lohko

Jokaista kuvaa voi muokata napsauttamalla kynäkuvaketta. Media Library -ikkuna avautuu, johon voit kirjoittaa alt-tekstin, otsikon, kuvatekstin ja kuvauksen. Samalla tavalla kuin olet jo tottunut tekemään sen vanhemmassa WordPress-versiossa klassisella editorilla.

Kuvan tiedot SEO-tarkoituksiin
Kuvan tiedot sinun pitäisi täyttää parantaa sivuston SEO

Miksi on tärkeää, että nämä tekstit täytetään?

Jos kävijät klikkaavat kuvaa nähdäkseen sen isompana, he näkevät kuvan otsikon (esimerkiksi Citadela-kotisivu) eivätkä kuvan tiedostonimeä. Lisäksi, jos kuvan lataamisessa on ongelmia, vaihtoehtoinen teksti näytetään verkkosivustollasi.

Lisää vinkkejä

Kaikkien näiden syiden ja WordPress Images -lohkojen asetusten lisäksi on tärkein asia. Voit saada enemmän kävijöitä verkkosivustollesi käyttämällä kuvia. Miten niitä siis saadaan?

Nykyään ihmiset ovat laiskoja lukemaan. He selaavat mieluummin kuvia alaspäin löytääkseen vastauksia. Miten valokuvasi ja kuvasi voivat sijoittua paremmuusjärjestykseen? Tekstit ovat vastaus. SEO-optimoinnin kannalta erittäin tärkeää on täydellinen kuvan otsikko ja kuvaus. Älä unohda täyttää vaihtoehtoista tekstiä. Silloin Google ymmärtää kuvan paremmin. Näin sinulla olisi paremmat mahdollisuudet sijoittua kuvahaun tuloksissa.

2 tapaa lisätä kuvan kuvateksti

Kuvatekstin lisääminen on erittäin helppoa lohkoeditorin avulla. Aivan kuvan alla on tilaa tekstin kirjoittamiselle. Tämä on ensimmäinen tapa - kuvateksti kirjoitetaan juuri tähän kuvaan kyseisellä alasivulla.

Kuvateksti
Kuvateksti kirjoitettu suoraan kuvan alle

Toinen tapa on kirjoittaa kuvan kuvateksti käyttämällä kynäkuvaketta (Muokkaa kuvaa) Mediakirjastossa. Näin lisäät kuvatekstin globaalisti koko sivustolle. Tämä tarkoittaa, että jos käytät samaa kuvaa kolmessa eri paikassa, se käyttää aina tätä kuvatekstiä.

Kuvatekstin lisääminen mediakirjastossa
Kuvateksti lisätty Mediakirjaston kautta

Pidätkö siitä, kuinka helppoa on lisätä kuvia WordPress Image block? Kokeile sitä itse!

Lue lisää upouudesta Citadela WordPress-teemastamme ja sen räätälöidyistä layout-paketeista. Ne on suunniteltu ja kehitetty erityisesti erilaisille yrityksille, ja ne tukevat myös uutta tapaa muokata sisältöä WordPressin lohkoeditorin kautta.

7 ajatuksia aiheesta "Working with WordPress Image block: How to add images in WordPress [+Secret tip]"

  1. itse asiassa mitään todellista muutosta ei tapahdu ennen/jälkeen gutemberg-editoria. Kaikki nämä vaihtoehdot olivat jo olemassa. ja totuus on, että gutemberg-editori on täydellinen katastrofi, siksi elementor, divi ja visual composer ovat niin suosittuja. Toivon todella, että seuraava julkaisunne on 100% yhteensopiva noiden builderien kanssa, koska kukaan ei käytä wordpress-editoria 😀.

    1. Hei,

      kiitos kommentoinnista. Kyllä, malli on yhteensopiva kaikkien WordPress-liitännäisten kanssa, jotka on kirjoitettu WordPress Codexin ja standardien mukaisesti.

      Kippis!
      Zlatko

    1. Hei,

      Kiitos kysymästä. Se on ydinliiketoimintamme, että jokainen tuotteemme pidetään säännöllisesti ajan tasalla.
      Jos olet kiinnostunut mahdollisuudesta päivittää City Guide Citadela teema, joka on täysin yhteensopiva wordpress gutenberg editor vastaus on: kyllä, aiomme vapauttaa plugin ansiosta, jonka avulla voit hallita siirtyminen City Guide teema Citadela teema laajennettu Citadela hakemisto plugin (1. plugin pitäisi julkaista pian).

      Vilpittömästi!
      AIT-tiimi

  2. Olen huomannut, että on mahdollista liittää kuva suoraan Gutenberg-editoriin. Tämä johtaa siihen, että mediakirjastoon lisätään kuva nimellä kuva-1, kuva-2 jne....

    Ominaisuus, jota en ole lukenut tältä sivulta, joten ehkäpä se olisi hyvä lisätä.

    Tämä on erityisen hyödyllistä silloin, kun kuva on napattu Windowsin pätkätyökalulla (Win+shift+S). Se voidaan sitten liittää suoraan artikkeliin juuri siihen kohtaan, jossa kursori on.

    Suurin haittapuoli tässä menetelmässä on se, että en ole löytänyt tapaa muokata tiedostonimeä sen liittämisen aikana tai sen jälkeen.... Joten se ei ole kovin SEO-ystävällinen.

  3. Hei
    Minulla on ongelmia kuvien lisäämisessä "Multi Author Blog" -teemaan. Näyttää siltä, että on mahdotonta lisätä 2. tai 3. kuvaa pyörivään liukusäätimeen jokaisen blogipostauksen yläosassa. Tämä tarkoittaa, että liukusäädin on tyhjä muutaman sekunnin kuluttua, ikään kuin se odottaisi 2. kuvaa.
    Voisitteko korjata sen?
    Vaihtoehtoisesti: kysymys - "Multi Author Blog" on tärkeä Archnetworkille (meillä on yhteistyökumppani Slovakiassa), koska käytämme sitä luontohankkeidemme osallistujien raportointialustana. Onko kirjastossanne vaihtoehtoista teemaa, jota voisimme käyttää samalla tavalla?
    Blair Urquhart (elinikäinen tilaus - IT-osasto Archnetwork)

    1. Hei,

      Kiitos, että kirjoitit. Ensinnäkin, tarkista teemasi/pluginisi versiot uusimmilla, jos voit: suosittelemme käyttämään AIT Updater -lisäosaa ilmaiseksi -> https://www.ait-themes.club/wordpress-plugins/ait-updater/ , (tai dokumentaatio siitä, miten lisäosa asetetaan: https://www.ait-themes.club/doc/updater-plugin-documentation/.)
      Tuotteen aktivointia koskevat ohjeet löydät osoitteesta: https://www.ait-themes.club/doc/theme-activation/.

      Jos ongelmasi jatkuu edelleen, anna meille joitakin kuvia tai ota yhteyttä tukifoorumin kautta AIT SysInfo -raportin kanssa: https://www.ait-themes.club/wordpress-plugins/ait-sysinfo/. Teknikot ovat valmiita auttamaan sinua kaikissa teemaan liittyvissä ongelmissa: Asiakastukea tarjotaan työpäivinä klo 8-17 Keski-Euroopan aikaa, koska en pystynyt toistamaan ongelmaasi. Revolution slider toimii oikein.

      Toiseksi,
      Citadela-tuotepakettiin on lisätty joitakin mielenkiintoisia ominaisuuksia, katso vertailutaulukko: https://www.ait-themes.club/next-generation-directorypro/

      Jos voimme auttaa sinua muulla tavoin, ota meihin yhteyttä.

      Ystävällisin terveisin!
      Zlatko
      AIT-tiimi

Kommenttien lisääminen on estetty.