Munka a WordPress képblokkal: Hogyan adjunk hozzá képeket a WordPressben [+Titkos tipp]

Sok felhasználó számára a képekkel való munka nagyon frusztráló lehet. Nem mindig könnyű kiválasztani a megfelelő képarányt vagy átméretezni a képeket, hogy jól nézzenek ki az egész elrendezésben.

1. Miért érdemes használni a WordPress Image blokkot
2. Hogyan adjunk hozzá képeket a WordPress Image block segítségével
3. További formázási képek feldolgozása
4. Extra tipp tőlünk a cikk belsejében

A régebbi WordPress verziók (v5.0-ig) a +Add Media gomb segítségével adnak hozzá képeket. A probléma az volt, hogy még a kép méretének minimális megváltoztatásával is újra fel kellett tölteni. Ez időveszteséget és felesleges kattintásokat jelent.

Az új blokk alapú szerkesztő, a Gutenberg megváltoztatja a képek WordPressbe való beillesztésének módját, hogy egyszerűbbé tegye ezt a folyamatot a végfelhasználók számára. Ebben a cikkben gyakorlati útmutatót mutatunk a WordPress képblokk hozzáadásáról és szerkesztéséről. Emellett elmagyarázzuk a képek beillesztésének egy újabb lehetőségét - hogyan másolhatsz és illeszthetsz be egy képet a tartalmi területre néhány kattintással. Bemutatjuk továbbá az újonnan hozzáadott funkciókat is, amelyek a WP 5.3-tól érkeznek.

De először beszéljünk arról, hogy miért érdemes képeket használni a posztokban és oldalakon.

Miért WordPress kép blokk must-have a weboldaladon

Figyelemfelkeltés

A képek vonzzák a weboldal látogatóinak figyelmét. Érdekesnek kell lenniük, hogy a látogatókat tovább tartsa a weboldalán. Gondoljon egy blogbejegyzésre képek nélkül. Az csak egy csomó szöveg. Első ránézésre nem túl érdekes, még akkor sem, ha értékes és tele van információval. Ráadásul a képek segíthetnek elképzelni és jobban leírni a témádat.

Emiatt a WordPress Image blokkot kell használnunk, hogy a figyelmet a fontos dolgokra összpontosítsuk.

Szemléltető szöveg és kontextus

A képek a tartalom megértéséhez is elengedhetetlenek, mert lehetővé teszik a látogatók számára, hogy jobban megértsék, miről szól a cikk. Az infografikáknak köszönhetően bonyolult összefüggéseket magyarázhat el, és egyszerű módon mondhatja el a dolgokat. Segít a látogatóknak jobban eligazodni a problémában, amiről beszélsz.

Szebbé teszi a weboldalt

Emellett a képek szépen kiegészítik az egész weboldal kialakítását. Nem csak a weboldal elrendezéséről van szó, hanem a használhatóságról is. A helyesen kiválasztott és elhelyezett kép segíthet a látogatónak, hogy könnyebben böngészhesse weboldalát.

Hogyan adjunk hozzá képeket a WordPress blokkszerkesztőhöz

Ahhoz, hogy képet illesszen be a bejegyzésbe vagy az oldalba, hozzá kell adnia egy core blokkot - Kép blokkot. Ezt többféleképpen is megteheted:

- A "+" gomb használata a felső sávban vagy bárhol a szerkesztőben

- A "/" ferdehajlás használata és a "kép" szó írása utána

Új blokk jön létre, ahová tényleges képeket adhat hozzá.

Képek feltöltése a WordPress-be

Hogyan lehet a képeket oda tenni, ahová akarod?

• Használja a Feltöltés funkciót, és válasszon ki egy képet a merevlemezről.
• Használja a Médiatárat, ahol kiválaszthatja a már feltöltött képeket a weboldalára.
• Használja az egeret és húzza & ejtse a képet
• Kép URL-cím beillesztése

Kevésbé ismert módszer a WordPress képek hozzáadására

A képek feltöltése mellett a korábban említett feltöltési ablakon keresztül, van egy másik módja is a kép beillesztésének (és ez egy nagyon gyors módja!). A továbbfejlesztett WordPress-szerkesztővel képes vagy:

• Kép másolása bármely tartalomból, vagy
• Csak "húzza" a képet az egérkurzorral.

Ezután illessze be vagy mozgassa (ejtse) a kiválasztott képet a kívánt helyre a tartalmi területen.

Ugyanezt a technikát használhatja abban az esetben is, ha a képernyőről rögzített képet szeretné beilleszteni. Mindössze három egyszerű lépésre van szükség. Az első, képernyőképet kell készítenie a nyomtatási képernyő funkció használatával. A Windows 10 például biztosítja a Snip & Sketch nevű alapértelmezett Snippet eszközt, amely gyorsbillentyűvel is elérhető - csak nyomja le a Win+Shift+S billentyűkombinációt együtt a billentyűzeten. Ezután válassza ki a rögzíteni kívánt képterületet. Az utolsó lépés a másolt kép (vagy annak egy részének) beillesztése a tartalmi területre az alap Ctrl+V billentyűkombinációval.

És mi történik a WordPress képpel, amit beillesztettél a szerkesztőbe? Nos, automatikusan hozzáadódik a Médiatárhoz, ahol szerkesztheted ezt a képet.

Képi metaadatok korlátozott lehetőségei

A képszerkesztésen belül beállíthatja a kép címét, feliratát, leírását és alternatív szövegét. Sajnos a kép fájlnevét nem tudja megváltoztatni - a kép megtartja az automatikusan generált nevét, mint pl. image-1.png és így tovább. Ez a fajta fájlnév a SEO-optimalizálás szempontjából kissé hátrányos lehet, mivel ütközik a fájlnév-ajánlásokkal. Ezért ezt a szempontot figyelembe kell vennie, mielőtt a WordPress képeket a tartalmi területre áthelyezné.

Képigazítás

A képigazítás az egyik fő funkció. Nem számít, hogy a WordPress képblokkot a bejegyzéshez vagy az oldalhoz adja-e hozzá, mindig figyelembe kell vennie az elhelyezést a webhely kialakításától függően. Ennek alapján a kép igazítása kiválasztható a felette lévő eszköztárban. Alapértelmezés szerint a képet balra, jobbra vagy középre igazíthatja. Egyes WordPress témák lehetővé teszik, hogy a képeket széles vagy teljes szélességben középre lehessen állítani. Ez valóban a téma jellemzőitől függ, mivel nem minden téma támogatja.

Képek átméretezése

A WordPress szerkesztőben a képblokk forradalmi funkciója a praktikus méretváltoztatás. Egyszerűen húzza a kép oldalát, hogy kisebb vagy nagyobb legyen. Így a kép méretét a tartalomban lévő szöveg függvényében állíthatod be. A szerkesztő automatikusan megtartja a kép arányait, ami azt jelenti, hogy nem kell aggódnia a deformációk miatt.

Új blokk stílus, amely egy képet kör alakúvá alakít át

Ha a WordPress legújabb elérhető verzióját használod, akkor észrevehetted, hogy egy új circle-crop stílust használhatsz a képedhez. A kép alakja a felső eszköztáron keresztül változtatható meg az első "Blokk típus vagy stílus módosítása" ikonra kattintva. Az alapértelmezett (téglalap) alakot kör alakúra vágja.

Új funkciók a WordPress Images blokkban (a WP 5.3-ban)

Nagy felbontású képek támogatása

A WP 5.3 egyik legnagyobb fénypontja a WordPress platformon javított képfeldolgozás. A képekkel való munka mostantól két fő funkcióval rendelkezik:

1. Feltöltés folytatása - Ha nagy felbontású fényképeket tölt fel, és az internetkapcsolat megszakad, a feltöltési folyamat automatikusan folytatódik a megszakadt ponttól.
2. Automatikus képforgatás - a WP legújabb verziója biztosítja, hogy a helytelenül elforgatott képek feltöltéskor automatikusan a megfelelő pozícióba forognak.

Beállítások az Ellenőrben

A pontos méretek beállításához használhatja a szerkesztő jobb oldalsávjában található Ellenőrzést. A képméretbeállítások olyan kész formátumokat kínálnak, mint a miniatűr, közepes, nagy vagy teljes méret. A szélességet és a magasságot természetesen pixelben vagy százalékban is beállíthatja.

Nagyon gyors és praktikus, mert minden képméretváltoztatást közvetlenül a WordPress Images blokkban végezhetsz el, és mindent egy helyen, a blokkszerkesztőben.

Egyéb Képek blokk beállításai

URL-cím hozzáadása

A képek használhatók statikus képként vagy kattinthatóak és linkelhetők:

•   Média fájl
•   Csatolt oldal
•   Egyéni URL

Hogyan szerkesszünk képet a WordPress Image blokkban

Minden kép szerkeszthető a ceruza ikonra kattintva. Megnyílik a Médiatár modális ablak, ahol alt szöveget, címet, feliratot és leírást írhat. Ugyanúgy, ahogyan ezt már a régebbi WordPress verzióban a klasszikus szerkesztővel megszoktad.

Miért fontos, hogy ezeket a szövegeket kitöltsék?

Ha a látogatók a képre kattintva nagyobb méretben látják a kép címét (például Citadela honlap), és nem a kép fájlnevét. Továbbá, ha bármilyen probléma merül fel a kép betöltésével, alternatív szöveg jelenik meg a weboldalán.

Extra tippek

Mindezen okok és a WordPress Képek blokkok beállításai mellett ott van a legfontosabb dolog. Képek használatával több látogatót nyerhetsz a weboldaladra. Tehát hogyan szerezheted meg őket?

Manapság az emberek lusták olvasni. Inkább a képeket görgetik végig, hogy válaszokat találjanak. Hogyan lehet, hogy a fotók és képek rangsorolnak? A szövegek a válasz. Nagyon fontos a SEO optimalizáláshoz a tökéletes képcím és leírás. Ne felejtsd el kitölteni az alternatív szöveget. Akkor a Google jobban megérti a képet. Így nagyobb esélyed lenne arra, hogy a képkereső találatok között rangsoroljon.

2 módja a képfelirat hozzáadásának

A képfelirat hozzáadása a blokkszerkesztő segítségével nagyon egyszerű. Közvetlenül a kép alatt van egy hely a szöveg megírására. Ez az első módja - A képaláírás pontosan ehhez a képhez íródik az adott aloldalon.

A második mód a kép feliratának megírása a Médiatárban található ceruza ikon segítségével (Kép szerkesztése). Így a képfeliratot globálisan az egész weboldalon hozzáadja. Ez azt jelenti, hogy ha ugyanazt a képet három különböző helyen használja, mindig ezt a feliratot fogja használni.

Tetszik, hogy milyen könnyű a képek hozzáadása a WordPress Image blokkban? Próbáld ki te magad!

Tudjon meg többet a vadonatúj Citadela WordPress témánkról és a hozzá tartozó egyedi elrendezési csomagokról. Ezeket kifejezetten különböző típusú vállalkozások számára terveztük és fejlesztettük ki, és támogatják a tartalomszerkesztés új módját is a WordPress blokkszerkesztőn keresztül.