Hogyan adjunk képeket WordPress 2022a bemutató hozzátéve képek klasszikus és Gutenberg szerkesztők (+ csökkentése fájlméret)

ma mi lebontják, hogyan adjunk képeket WordPress és csökkenti a fájl méretét (tartani az oldalak & hozzászólás betöltése a lehető leggyorsabban).

amikor csak a tanulás alapjait, hogyan kell kezdeni egy blog, van egy csomó, hogy kitaláljuk, értem. Beszéltünk arról, hogyan lehet megváltoztatni a betűméretet, megváltoztatni a betűszínt, kattintható linket készíteni és még sok más itt.

a jó hír az, hogy 2022-ben nagyon könnyű megtanulni, hogyan lehet képeket hozzáadni a WordPress-hez az összes használhatósági frissítéssel és fejlesztéssel, amelyet az elmúlt évtizedben láttak.

ebben a gyors oktatóanyagban megmutatom, hogyan lehet képeket hozzáadni a WordPress bejegyzéseihez, mind a klasszikus szerkesztőben (amelyet inkább használok), mind az újabb Gutenberg szerkesztőn keresztül.

most merüljünk bele a képek Hozzáadásába a WordPress bejegyzéseihez—miközben a lehető legnagyobb mértékben csökkentjük a fájlméretüket, hogy összhangban maradjunk a SEO legjobb gyakorlataival, és hogy az oldalak a lehető leggyorsabban töltődjenek be.

Hogyan adjunk képeket WordPress (és csökkenti a fájl méretét) 2022

  1. Képek hozzáadása a klasszikus WordPress szerkesztő bejegyzéseihez
  2. Képek hozzáadása a Gutenberg WordPress szerkesztő bejegyzéseihez
  3. Kiemelt kép hozzáadása a WordPress bejegyzéséhez

most gyorsan, mielőtt belemerülnénk a képek WordPress-hez történő hozzáadásáról szóló oktatóanyagba, megmutatom, hogyan lehet csökkenteni a kép fájlméretét (segítve a bejegyzések gyorsabb betöltését) 2 egyszerű lépésben.

telepítse az (ingyenes) tömörítés JPEG & PNG képek Plugin által Tiny PNG

 kép tömörítés WordPress Plugin (Tiny PNG)

letöltheti az ingyenes Compress JPEG & PNG Images plugint a WordPress-hez itt a WordPress plugin könyvtárból.

Alternatív megoldásként megkeresheti a bővítményt, és közvetlenül a beépülő modul menüjéből is telepítheti, amely itt elérhető a blog adminisztrációs szakaszának bal oldalán—vagy nézze meg ezt a gyors bemutatót a WordPress bővítmény telepítéséről:

új Plugin hozzáadása Screenshot

miután telepítette a Compress JPEG & PNG Images plugint, minden új kép, amelyet feltölt a WordPress blogjára, automatikusan optimalizálódik, és a fájlméret a lehető legnagyobb mértékben csökken, anélkül, hogy veszélyeztetné a kép minőségét.

Megjegyzés: Ez a legjobb képtömörítő plugin a piacon messze. Havonta akár 500 ingyenes képtömörítést tesz lehetővé (ami sokkal több, mint amire valószínűleg szüksége lesz), mielőtt fizetős csomagra kellene frissítenie $ – on.009 / kép túl az első 500 minden hónapban. Ez egy komoly alku, és nem talál jobb tömörítési plugint, amely több ingyenes kreditet biztosít.

ha azonban közvetlenül a saját számítógépén szeretné elvégezni a képtömörítést (ingyen korlátlan), akkor ajánlom az ImageOptim alkalmazást.

töltsd fel a képeidet

ez az! Komolyan, ez ilyen egyszerű.

miután telepítette a tömörítési bővítményt a blogjára—vagy először tömörítette az egyes képeket a számítógépére—, készen áll arra, hogy feltöltse őket a WordPress bejegyzéseire vagy oldalaira.

most nézzük meg, hogyan lehet képeket hozzáadni a WordPress-hez.

1. Képek hozzáadása a klasszikus WordPress szerkesztő

ha olyan vagy, mint én, és továbbra is a klasszikus WordPress szerkesztő elrendezést részesíti előnyben a bejegyzések hozzáadásához/szerkesztéséhez, akkor kövesse itt.

másrészt, ha az újabb Gutenberg szerkesztőt használja a bejegyzés tartalmához, akkor ugorjon a következő szakaszra az áttekintéshez. Ha nem biztos abban, hogy melyik szerkesztőt használja, nézze meg az alábbi képernyőképeket, és hasonlítsa össze őket a szerkesztő kinézetével. Szeretné használni a klasszikus szerkesztőt, de nem tudja, hogyan szerezze be? Szánjon 2 percet arra, hogy kövesse a Yoast egyszerű bemutatóját a klasszikus szerkesztő telepítéséről a WordPress blogjára.

1. Nyissa meg azt a bejegyzést, amelyhez képeket ad hozzá (és keresse meg a megfelelő helyet)

először meg kell győződnie arról, hogy benne van-e abban a bejegyzésben, amelyhez képet szeretne hozzáadni.

ezután a kurzort pontosan arra a helyre kell navigálnia a bejegyzésben, amelyhez hozzá szeretné adni a képet.

2. Kattintson a szerkesztő tetején található” Média hozzáadása ” gombra

ez a gomb itt így fog kinézni:

 pillanatkép a Média hozzáadása gombról (klasszikus WordPress szerkesztő)

Miután rákattintott a” Média hozzáadása ” gombra, megjelenik a képernyő, ahová feltöltheti a képfájlt.

3. Kattintson a “fájlok feltöltése”

kattintson a “fájlok feltöltése” fülre, és a képernyőre kerül, ahol a választó eszközzel kiválaszthatja a képfájlt, ahonnan a számítógépen található.

 új kép feltöltése a WordPress-ben (klasszikus szerkesztő)

Alternatív megoldásként, ha egy képfájlt húz az asztalról, és feltölti azt—kihagyhatja a” fájlok feltöltése ” képernyőt, és csak egyenesen mozoghat a kép húzásához és eldobásához (a következő lépésben van egy bemutató).

4. Töltsd fel a Képfájlodat

inkább húzom a képfájlokat az asztalomról, és dobom őket a fájlfeltöltőbe (ahelyett, hogy a választóval keresném meg őket a számítógépen), mivel sokkal gyorsabb.

itt egy gyors videó / GIF bemutató arról, hogyan adhat hozzá képet az asztalról a WordPress-be:

hogyan adjunk egy új képet a WordPress (Classic Editor) GIF

miután feltöltötte a képet, a tömörítés plugin fog működni ez a varázslat, hogy segítsen csökkenteni a fájl méretét (a színfalak mögött).

Megjegyzés: Mielőtt befejezné a képbeállításokat, és rákattintana a “Beszúrás a hozzászólásba” gombra, ki kell írnia egy SEO—barát Alt szöveget a képéhez-valami, ami leírja a képen zajló események jellegét, és ideális esetben az egyik olyan célszóval szövik, amelyet remélsz, hogy a cikk végül rangsorol (az organikus keresési eredmények között).

5. Válassza ki a képbeállításokat, majd kattintson az “Insert into post”

végül néhány lehetőséget kell megadnia a képhez. Ez magában foglalja:

  • a kép megjelenítésének igazításának ellenőrzése a bejegyzésben (mindig a középre igazítást választom)
  • a kép linkjének létrehozása egy másik oldalra vagy bejegyzésre a blogján (vagy egy külső linkre, amelyre az olvasókat irányítani szeretné)
  • megjelenítési méret (mindig azt javaslom, hogy töltse fel teljes méretben, hogy elkerülje a képminőség romlását)

Image Options in WordPress

miután kiválasztotta ezeket az opciókat, készen áll arra, hogy kattintson az “Insert into post” gombra, és jó vagy!

ez a gomb Itt lesz a képernyő jobb alsó sarkában:

helyezze be a kép gombot a WordPress

most vissza fog térni a szerkesztő ablakába, és látni fogja az imént hozzáadott képet, ott ülve, ahol feltöltötte.

ne feledje, hogy még mindig van néhány gyors & egyszerű szerkesztési lehetőség, ha úgy dönt, hogy valamit meg akar változtatni az új kép megjelenítésével:

  • manuálisan átméretezheti, ha megragadja az egyik sarkot, és felfelé vagy lefelé húzza a méretét
  • akkor kattintson lefelé a kép közepére, és húzza körül a poszton belül az áthelyezéshez
  • bármikor törölheti a képet, ha rákattint a “backspace” vagy a “delete” gombra a billentyűzeten, és kezdje elölről

és ez az ez! Megtanulta, hogyan adhat hozzá képet a WordPress-hez a klasszikus szerkesztővel.

2. Képek hozzáadása a Gutenberg WordPress szerkesztő

bejegyzéseihez a Gutenberg WordPress szerkesztőben a bejegyzés szerkesztési lehetőségei sokkal másképp fognak kinézni, mint amit a klasszikus szerkesztőben láthat.

Gutenberg A tartalom hozzáadását/szerkesztését olyan “blokkok” rendszerén keresztül közelíti meg, mint a szövegblokkok, fejlécblokkok, képblokkok stb. Tehát merüljünk bele a képek hozzáadásába Gutenbergben.

1. Válassza ki a” Kép hozzáadása ” ikont

miután megbizonyosodott arról, hogy képet ad hozzá a bejegyzés megfelelő helyére, válassza a “Kép hozzáadása” ikont. Így fog kinézni itt:

Képek hozzáadása a Gutenberg WordPress szerkesztőben

miután rákattintott a “kép hozzáadása” ikonra, néhány lehetősége lesz arra, hogyan adhat hozzá képet a bejegyzéséhez.

2. Válassza ki, hogyan adja hozzá a képet

Gutenbergben van néhány gyors lehetősége a kép hozzáadására a WordPress programban. Ez magában foglalja:

  • Feltöltés (amely megnyit egy választó képernyőt, amely lehetővé teszi a képfájl kiválasztását a számítógépről)
  • Médiakönyvtár (amely a meglévő képkönyvtárhoz vezet—ahonnan húzhatja is & csepp egy képben)
  • Beszúrás az URL-ből (ha van olyan kép, amely valahol az interneten található, amelyet importálni szeretne, beillesztheti ezt a linket ide)

itt van egy pillanatkép ezekről a lehetőségekről (személy szerint csak a “Feltöltés” gombra kattintok, és gyorsan megragadom a kívánt képet az asztalomról):

Gutenberg Képbeállítások hozzáadása

3. Töltse fel a képet

miután kiválasztotta a feltölteni kívánt képet, csak kattintson a “Megnyitás” gombra, és hozzáadódik a bejegyzéséhez.

Kép megnyitása képernyőkép

most, hogy hozzáadta a képet, egy kisebb indexkép jelenik meg új blokkként a bejegyzésben.

itt egy screenshot, hogyan fog kinézni:

kép hozzáadva Screenshot

4. Képbeállítások & Gyorsszerkesztési lehetőségek

mielőtt továbblépne, be kell tárcsáznia a képbeállításokat (a SEO legjobb gyakorlatai szerint).

és csakúgy, mint a klasszikus szerkesztő, akkor képes lesz arra, hogy meghatározza a sok különböző beállításokat és tulajdonságokat egy képet. Gutenbergnél ez csak egy kicsit másképp történik. A Képbeállítások ehelyett a jobb oldalsávon találhatók (miután először rákattintott a képre).

így néznek ki ezek a Beállítások:

Gutenberg képszerkesztési lehetőségek

feltétlenül adja meg a képbeállításokat legalább ehhez a két tulajdonsághoz:

  • írás SEO-barát alternatív szöveget, amely leírja a képet, és szövi a kulcsszó kifejezés
  • képméret (én mindig megjeleníti a képeket teljes méretben, hogy elkerüljék a minőségromlás)

a “stílus” beállításokra kattintva hozzáadhat néhány árnyaltabb stílus & beépített vágási funkciót a Gutenberg segítségével.

5. Moving Images Around Within a Post via Gutenberg

a Gutenberg szerkesztő fókuszának egyik nagyon jó mellékhatása a tartalom “blokkjainak” használata, az, hogy milyen könnyen mozgathatja képeit (vagy bármilyen tartalmi blokkot, ami azt illeti) egy poszton belül.

miután egyszer rákattintott az átrendezni kívánt képre a bejegyzésben—a “fel” és a “le” nyilak jelennek meg közvetlenül a kép mellett.

kattintson ezekre a nyilakra a kép felfelé vagy lefelé mozgatásához a bejegyzés belsejében, így:

 a képblokkok áthelyezése a Gutenberg WordPress szerkesztőben (GIF)

és ennyi! Készen állsz.

most már megtanultad, hogyan kell hozzáadni egy képet a WordPress-hez a Gutenberg szerkesztőben is .. ..

3. Kiemelt kép hozzáadása a WordPress

a kiemelt képek elengedhetetlenek a WordPress blogban—mert ezek a képek jelennek meg a blogbejegyzések tetején (és mind a keresési eredmények, mind a közösségi média platformokon, amikor a tartalmat megosztják).

végül, de nem utolsósorban, így adhat hozzá kiemelt képet egy bejegyzéshez (vagy oldalhoz) a WordPress-ben.

a WordPress szerkesztőablak jobb alsó sarkában megjelenik egy szakasz a Kiemelt kép hozzáadásához. Kattintson a “Kiemelt kép beállítása” gombra, és a normál képfeltöltési képernyőre kerül, ahol hozzáadhatja azt a képet, amelyet a bejegyzés tetején szeretne megjeleníteni (a keresési eredmények között és a közösségi platformokon is).

 Hogyan adhatunk hozzá kiemelt képet a WordPress-ben

miután feltöltötte a használni kívánt képet, és rákattintott a “Kiemelt kép beállítása” gombra, visszatér a szerkesztő képernyőjére ,és a jobb alsó sarokban megjelenik a kép kis indexképe (annak megerősítéséhez, hogy hozzáadta a megfelelő képet), mint így:

Kiemelt kép képernyőkép példa

elég egyszerű, igaz?

ha rossz képet választott (vagy később módosítani szeretne), akkor egyszerűen kattintson a” Kiemelt kép eltávolítása ” szövegre, és lehetősége lesz kiválasztani vagy feltölteni egy másik képet, amelyet a bejegyzésben szerepeltetni szeretne.

végső gondolatok arról, hogyan lehet képet hozzáadni a WordPress-hez

a képek hozzáadása a WordPress bejegyzéseihez nem kell nehéznek lennie.

akár a klasszikus szerkesztőt, akár a Gutenberget használja blogjához, a WordPress mögött álló csapat keményen dolgozott azon, hogy a képek hozzáadása nagyon egyszerű folyamat legyen.

ha továbbra is problémái vannak, kérjük, írjon nekem egy megjegyzést a bejegyzés alján, és örömmel segítek elhárítani az esetleges problémákat.

mára ennyi!

mi csak arról, hogyan kell hozzáadni a képeket a WordPress 6257 >

mint amit látsz? Iratkozzon fel, hogy több blogot és tanácsot kapjon.

További Blogolási Oktatóanyagokat Szeretne?

menj át, és nézd meg a végső útmutatót a blog elindításához és a pénzkereséshez ebben az évben.

Write a Comment

Az e-mail-címet nem tesszük közzé.