Sisällysluettelo
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.
- Miksi käyttää WordPress Image block
- Miten lisätä kuvia WordPress Image lohko
- Lisämuotoilukuvien prosessi
- 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.
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.
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
- Käytetään vinoviivaa "/" ja kirjoitetaan sana "kuva" sen jälkeen.
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
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.
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ä.
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.
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.
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:
- Latauksen jatkaminen - Jos lataat korkearesoluutioisia valokuvia ja internet-yhteys katkeaa, latausprosessi jatkuu automaattisesti keskeytyneestä kohdasta.
- 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.
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
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.
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.
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ä.
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.
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 😀.
Hei,
kiitos kommentoinnista. Kyllä, malli on yhteensopiva kaikkien WordPress-liitännäisten kanssa, jotka on kirjoitettu WordPress Codexin ja standardien mukaisesti.
Kippis!
Zlatko
Päivitetäänkö myös City Guide -teema?
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
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.
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)
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