A HTML szerkesztése a WordPress kódszerkesztőben (kezdő útmutató)

egyszerű módot keres a HTML szerkesztésére a WordPress webhelyén?

a HyperText Markup Language vagy a HTML egy olyan kód, amely megmondja a webböngészőnek, hogyan jelenítse meg a tartalmat a weboldalakon. A HTML szerkesztése hasznos a speciális testreszabási és hibaelhárítási problémákhoz.

ebben a cikkben megmutatjuk, hogyan szerkesztheti a HTML-t a WordPress kódszerkesztőben különböző módszerekkel.

 a HTML szerkesztése a WordPress kódszerkesztőben

hogyan lehet szerkeszteni a HTML-t a WordPress kódszerkesztőben

miért kellene szerkesztenie a HTML-t a WordPress – ben?

a WordPress témák és bővítmények ezreit kínálja a webhely megjelenésének megváltoztatásához és a különböző elemek testreszabásához egyetlen kódsor megérintése nélkül.

a bővítményeknek és a témáknak azonban vannak korlátai, és előfordulhat, hogy nem a keresett funkciókat kínálják. Ennek eredményeként előfordulhat, hogy nem tudja úgy formázni webhelyét, ahogy szeretné.

itt hasznos a HTML szerkesztése. A HTML kód segítségével könnyedén elvégezheti a fejlett testreszabást. Ez nagy rugalmasságot és ellenőrzést biztosít a webhely kinézete és működése felett.

ezenkívül a HTML szerkesztésének megtanulása segíthet azonosítani és kijavítani a hibákat a WordPress webhelyén, ha nincs hozzáférése az irányítópulthoz.

Megjegyzés: Ha nem szeretné szerkeszteni a HTML-t, de továbbra is teljes testreszabási lehetőségeket szeretne, akkor javasoljuk egy drag and drop WordPress oldalkészítő használatát, mint például a SeedProd.

ennek ellenére nézzük meg a HTML szerkesztésének különböző módjait egy WordPress webhelyen.

bemutatjuk, hogyan kell szerkeszteni a HTML-t a Blokkszerkesztő és a klasszikus szerkesztő segítségével, és megmutatjuk a kód hozzáadásának egyszerű módját is a webhelyéhez. Az alábbi linkekre kattintva ugorhat előre a kívánt szakaszra.

  • hogyan kell szerkeszteni HTML WordPress blokk szerkesztő
  • hogyan kell szerkeszteni HTML WordPress klasszikus szerkesztő
  • hogyan kell szerkeszteni HTML WordPress widgetek
  • hogyan kell szerkeszteni HTML WordPress téma szerkesztő
  • hogyan kell szerkeszteni HTML WordPress FTP segítségével
  • egyszerű módja annak, hogy adjunk kódot WordPress

a HTML szerkesztése a WordPress Blokkszerkesztőben

a WordPress Blokkszerkesztőben többféle módon szerkesztheti a bejegyzés vagy az oldal html-jét.

először is használhat egyéni HTML-blokkot a tartalmában HTML-kód hozzáadásához.

a kezdéshez lépjen át a WordPress irányítópultjára, majd adjon hozzá egy új bejegyzést/oldalt, vagy szerkesszen egy meglévő cikket. Ezután kattintson a plusz ( + ) jelre a bal felső sarokban, és adjon hozzá egy ‘egyéni HTML’ blokkot.

 hozzáadása egyéni HTML blokk WordPress

egyéni HTML blokk hozzáadása a WordPress - ben

Ezután írja be az egyéni HTML-kódot a blokkba. Az ‘Előnézet’ opcióra kattintva ellenőrizheti, hogy a HTML-kód megfelelően működik-e, és hogyan fog kinézni a tartalom az élő webhelyén.

 egyéni HTML kód a WordPress szerkesztőben

egyéni HTML-kód a WordPress szerkesztőben

a HTML-kód hozzáadásának vagy megváltoztatásának másik módja a WordPress Blokkszerkesztőben egy adott blokk HTML-jének szerkesztésével.

ehhez egyszerűen válasszon ki egy meglévő blokkot a tartalomban, majd kattintson a hárompontos menüre. Ezután kattintson a ‘Szerkesztés HTML-ként’ lehetőségre.

 kattintson a három pontra, és válassza a Szerkesztés HTML-ként lehetőséget

kattintson a három pontra, és válassza a Szerkesztés HTML-ként

ekkor megjelenik az egyes blokkok HTML-je. Szerkessze a tartalom HTML-jét. Hozzáadhat például egy nofollow linket, megváltoztathatja a szöveg stílusát, vagy hozzáadhat más kódot.

 egyéni blokk HTML-jének szerkesztése

szerkessze az egyes blokkok HTML-jét

ha a teljes bejegyzés HTML-jét szeretné szerkeszteni, akkor használhatja a ‘kódszerkesztőt’ a WordPress Blokkszerkesztőben.

a kódszerkesztőt a jobb felső sarokban található három pont lehetőségre kattintva érheti el. Ezután válassza a ‘kódszerkesztő’ lehetőséget a legördülő lehetőségek közül.

 hozzáférés a Kódszerkesztőhöz

nyissa meg a kódszerkesztőt

a HTML szerkesztése a WordPress Classic Editorban

ha a WordPress classic Editort használja, akkor könnyen szerkesztheti a HTML-t a szöveges nézetben.

a szöveges nézet eléréséhez egyszerűen szerkesszen egy blogbejegyzést, vagy adjon hozzá egy újat. Ha a klasszikus szerkesztőben van, kattintson a ‘szöveg’ fülre a cikk HTML-jének megtekintéséhez.

 kattintson a klasszikus szerkesztő szövegére a HTML szerkesztéséhez

kattintson a szövegre A Klasszikus szerkesztőben a HTML szerkesztéséhez

ezt követően szerkesztheti a tartalom HTML-jét. Például félkövér szavakkal kiemelheti őket, használhatja a dőlt stílust a szövegben, listákat hozhat létre, tartalomjegyzéket adhat hozzá stb.

hogyan lehet HTML-t szerkeszteni a WordPress widgetekben

tudta, hogy HTML-kódot adhat hozzá és szerkeszthet webhelye widget területén?

a WordPress-ben az egyéni HTML-widget segítségével testreszabhatja az oldalsávot, a láblécet és az egyéb widget-területeket. Beágyazhatja például a kapcsolatfelvételi űrlapokat, a Google Térképet, a cselekvésre ösztönzés (CTA) gombokat és más tartalmakat.

kezdheti azzal, hogy átmegy a WordPress adminisztrációs paneljére, majd lépjen a Megjelenés ” Widgetek. Ezután folytassa az egyéni HTML widget hozzáadását a ‘Hozzáadás’ gombra kattintva.

 egyéni HTML Widget hozzáadása

egyéni HTML Widget hozzáadása

ezután ki kell választania, hogy hova szeretné hozzáadni az egyéni HTML widgetet, és ki kell választania egy pozíciót. A widget területe a használt WordPress témától függ. Például hozzáadhatja a lábléchez, a fejléchez vagy más területekhez.

 válassza ki az egyéni HTML-widget területét és pozícióját

válassza ki a területet és pozíciót az egyéni HTML widgethez

miután kiválasztotta a widget területet és pozíciót, kattintson a ‘Widget mentése’ gombra.

Ezután kattintson az egyéni HTML widgetre, írja be a HTML kódot, majd kattintson a ‘Mentés’ gombra.

 adja meg az egyéni HTML-t

írja be az egyéni HTML

most már látogasson el a honlapon, hogy az egyéni HTML widget akcióban.

 egyéni HTML előnézet

egyéni HTML előnézet

a HTML szerkesztése a WordPress Theme Editor alkalmazásban

a webhely HTML-jének szerkesztésének másik módja a WordPress Theme Editor (kódszerkesztő).

azonban nem javasoljuk, hogy közvetlenül szerkessze a kódot a Témaszerkesztőben. A legkisebb hiba a kód beírásakor megszakíthatja webhelyét, és megakadályozhatja a WordPress irányítópult elérését.

Továbbá, ha frissíti a témát, akkor az összes változás elvész.

ennek ellenére, ha fontolgatja a HTML szerkesztését a témaszerkesztő segítségével, akkor érdemes biztonsági másolatot készíteni a webhelyéről, mielőtt bármilyen változtatást végezne.

ezután lépjen át a megjelenés ” témaszerkesztő a WordPress irányítópultjáról. Most egy figyelmeztető üzenet jelenik meg a témafájlok közvetlen szerkesztéséről.

 téma szerkesztő figyelmeztetés WordPress

Theme editor warning in WordPress

miután rákattintott az ‘Értem’ gombra, látni fogja a témafájlokat és a kódot. Itt kiválaszthatja, hogy melyik fájlt szeretné szerkeszteni, és elvégezheti a módosításokat.

 WordPress téma szerkesztő

WordPress Theme Editor

hogyan lehet szerkeszteni a HTML-t a WordPress-ben az FTP használatával

a HTML szerkesztésének másik alternatív módja a WordPress témafájlokban az FTP, más néven file transfer protocol service.

ez egy szabványos szolgáltatás, amely az összes WordPress tárhelyfiókhoz tartozik.

a kódszerkesztő helyett az FTP használatának előnye, hogy az FTP kliens segítségével könnyen kijavíthatja a problémákat. Így nem záródik ki a WordPress irányítópultjából, ha valami megszakad a HTML szerkesztésekor.

az indításhoz először ki kell választania egy FTP szoftvert. A Filezillát fogjuk használni ebben az oktatóanyagban, mivel ez egy ingyenes és felhasználóbarát FTP kliens Windows, Mac és Linux számára.

miután kiválasztotta az FTP klienst, be kell jelentkeznie a webhely FTP szerverére. A bejelentkezési adatokat a tárhelyszolgáltató vezérlőpultjának irányítópultján találja meg.

miután bejelentkezett, a webhely különböző mappáit és fájljait fogja látni a ‘távoli webhely’ oszlopban. Menj előre, és keresse meg a téma fájlokat megy wp-content ” téma.

mostantól különböző témákat láthat a webhelyén. Válassza ki a szerkeszteni kívánt témát.

 keresse meg a témafájlokat az FTP kliensben

keresse meg a téma fájlokat FTP kliens

következő, akkor kattintson a jobb gombbal a téma fájlt szerkeszteni a HTML. Ha például módosítani szeretné a láblécet, kattintson a jobb gombbal a láblécre.php fájl.

számos FTP kliens lehetővé teszi a fájl megtekintését és szerkesztését, majd a módosítások elvégzése után automatikusan feltölti azokat. A Filezillában ezt a ‘Nézet/Szerkesztés’ opcióra kattintva teheti meg.

 témafájl letöltése és szerkesztése

töltse le és szerkessze a témafájlt

javasoljuk azonban, hogy a módosítások végrehajtása előtt töltse le a szerkeszteni kívánt fájlt az asztalra.

a HTML szerkesztése után kicserélheti az eredeti fájlt. További részletekért javasoljuk, hogy kövesse az FTP használatával kapcsolatos útmutatónkat a fájlok feltöltéséhez a WordPress programban.

Kód hozzáadásának egyszerű módja a WordPress programban

a kód hozzáadásának legegyszerűbb módja a WordPress fejlécek és láblécek beszúrása WordPress plugin.

a WPBeginner csapata tervezte ezt a bővítményt, így percek alatt könnyedén hozzáadhat kódot a webhelyéhez, és 100% – ban ingyenesen használhatóvá tettük.

segít a kód rendezésében is, mivel egy helyen tárolja. Ráadásul megakadályozza a kód kézi szerkesztésekor felmerülő hibákat.

további előny, hogy nem kell aggódnia a kód törlése miatt, ha úgy dönt, hogy frissíti vagy megváltoztatja a témát.

az első dolog, amit meg kell tennie, a Fejlécek és láblécek beszúrása plugin telepítése és aktiválása a webhelyén. További részletekért kövesse a WordPress plugin telepítésének részletes bemutatóját.

miután a plugin aktív, akkor feje fölött Beállítás ” Insert fejlécek és láblécek az admin panel.

ezután hozzáadhatja a HTML kódot a webhelyéhez a fejlécben, a törzsben és a láblécben.

tegyük fel például, hogy figyelmeztető sávot szeretne megjeleníteni a webhelyén. Egyszerűen beírhatja a HTML kódot a’ Scripts in Body ‘ mezőbe, majd kattintson a Mentés gombra.

 HTML-kód hozzáadása a Fejlécek és láblécek beszúrása plugin segítségével

a HTML-kód hozzáadása a Fejlécek és láblécek beszúrása plugin

emellett hozzáadhat egy Google Analytics követőkódot és Facebook pixelt a fejlécbe, vagy hozzáadhat egy Pinterest gombot a webhely láblécéhez a plugin segítségével.

további részletekért lásd a fejléc és lábléc kód hozzáadásának útmutatóját a WordPress programban.

reméljük, hogy ez a cikk segített megtanulni a HTML szerkesztését a WordPress kódszerkesztőben. Érdemes megnéznie útmutatónkat arról is, hogy mennyibe kerül valójában egy WordPress webhely felépítése, vagy megnézheti a legfontosabb okokat, amelyek miatt a WordPress-t a webhelyéhez kell használnia.

ha tetszett ez a cikk, akkor kérjük, iratkozzon fel YouTube-csatornánkra a WordPress video oktatóanyagokhoz. A Twitteren és a Facebook-on is megtalálhat minket.

Leave a Reply

Vélemény, hozzászólás?

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