WordPress egy robusztus tartalomkezelő rendszer, amely az interneten található összes webhely több mint felét működteti. A beépített CRM megkönnyíti a webhely létrehozását, még akkor is, ha még soha nem írt számítógépes programot. Noha nagyon egyszerű egy normál szövegblokkot megjeleníteni egy WordPress webhelyen, ez nem mondható el a számítógépes kódról. Egy kódrészletet megfelelően meg kell jeleníteni ahhoz, hogy a nézők elemezzék és megértsék. És itt jönnek be a WordPress kódblokkok.
Ha szeretné tudni, hogyan kell kódblokkokat használni a WordPressben, akkor jó helyen jár. Ebben a cikkben végigvezetjük a teljes folyamaton, hogy elkezdhesse megosztani a kódrészleteket olvasóival. További információért folytassa az olvasást.
A kódblokkok használata a WordPressben
Egy számítógépes program normál weboldalszövegként való megjelenítése katasztrofális lehet. Sok felhasználó számára nehéz lesz elképzelni és megérteni. Szerencsére sok WordPress szerkesztő rendelkezik kódblokkoló funkcióval, amely lehetővé teszi a számítógépes programok kódformátumban történő megjelenítését.
Szerencsére a kódblokkok használata a számítógépes kód megjelenítésére viszonylag egyszerű. A kezdéshez át kell váltania a natív WordPress szerkesztőre, mivel előfordulhat, hogy egyes szöveges beépülő modulok nem rendelkeznek ezzel a funkcióval. Ha ezt megtette, kövesse az alábbi lépéseket egy kódblokk hozzáadásához egy webhely oldalához:
- Nyissa meg azt a weboldalt, amelyhez kódblokkot szeretne hozzáadni az „Új” gombra kattintva.
- Írja be a „/code” parancsot, és nyomja meg az „Enter” gombot.
- Írja be vagy illessze be a megjeleníteni kívánt kódot, és nyomja meg az „Enter” billentyűt.
- A kódblokk eszköztárat tovább használhatja az imént írt kód megjelenésének testreszabásához. Például a „B” gombbal félkövérre írhat egy sort, vagy az „i” gombbal dőlt betűt írhat.
- Ha végzett a weboldal létrehozásával, kattintson az „Előnézet” gombra, hogy megtekinthesse, hogyan fog kinézni a kódblokk az élő verzióban.
- Ha elégedett a végeredménnyel, nyomja meg a „Frissítés” gombot, hogy mások is lássák a kódblokkot.
A kódblokk tipográfiájának megváltoztatása
A tipográfia sokat beszél, és nemcsak a kódblokk, hanem az egész weboldal esztétikáját is megbonthatja vagy megbonthatja. A kódblokk tipográfiájának megváltoztatásához kövesse az alábbi lépéseket:
- Jelölje ki azt a kódblokkot, amelynek tipográfiáját módosítani szeretné.
- Kattintson a „Beállítások” ikonra a képernyő jobb felső sarkában.
- A „Tipográfia” részben adja meg a kívánt tipográfiát.
- A módosítások mentéséhez kattintson a „Frissítés” gombra.
Tovább testreszabhatja a blokk esztétikáját a szín, a háttér, a betűköz és a sorköz megváltoztatásával.
Ha például sötét témájú webhelye van, akkor azt is szeretné, hogy a kódblokk más hátteret kapjon.
Hogyan lehet törölni egy kódblokkot a WordPress-ben
A kódblokkok nem állandóak, és a WordPress weboldal bármely más eleméhez hasonlóan törölheti őket. A folyamat menete a következő:
- Nyissa meg azt a weboldalt vagy bejegyzést, amelyen a törölni kívánt kódblokk található.
- Kattintson a törölni kívánt kódblokkra a kiemeléshez.
- A kódblokk tetején megjelenő widgeten kattintson a három pontra.
- A lehetőségek közül válassza a „Kód eltávolítása” lehetőséget.
A fenti műveletnek a teljes kódblokkot törölnie kell a weboldalról. Alternatív megoldásként egyszerűen kiválaszthatja a blokkot, és megnyomhatja a „Törlés” gombot. A „Ctrl” + „Shift” + „Z” billentyűket egyszerre is lenyomhatja, és ez ugyanazt az eredményt fogja elérni.
Már közzétett kódblokk szerkesztése
Időnként előfordul, hogy hibákat követ el. Előfordulhat, hogy egy jobb módszerre is rábukkanhat az ötlet kódon keresztüli végrehajtására. A WordPress lehetővé teszi a már meglévő kódblokkok szerkesztését az alábbi utasítások követésével:
- Nyissa meg azt az oldalt, amelyen a szerkeszteni kívánt kódblokk található.
- Kattintson a „Szerkesztés” gombra.
- Kattintson a kódblokkra a kódszerkesztés engedélyezéséhez.
- Ha végzett a módosításokkal, kattintson a „Frissítés” gombra.
Kódblokk hozzáadása a WordPress webhelyéhez plugin segítségével
Ha gyakran ad hozzá kódrészleteket webhelyéhez, akkor a legjobb, ha beszerez egy robusztusabb beépülő modult. Az egyik népszerű hatékony és kiváló kódblokk a SyntaxHighlighter Evolved csatlakoztat.
Ennek a beépülő modulnak előnye van a natív WordPress szerkesztővel szemben, mivel:
- Kiemeli a kódrészletben lévő sorok számát
- Több programozási nyelvet támogat
- Lehetővé teszi a nézők számára a megjelenített kód másolását és beillesztését
A következőképpen használhatja a beépülő modult a webhelyén található kódrészletek jobb kezelésére:
- Telepítse és aktiválja a SyntaxHighlighter Evolved csatlakoztat.
- Nyissa meg az oldalt vagy tegye közzé, ha kódblokkot szeretne hozzáadni.
- Engedélyezze a szerkesztést, és kattintson a plusz gombra.
- Keresse meg a „SyntaxHighLighter Evolved” kifejezést, és nyissa meg az első megjelenő találatot.
- Illessze be vagy írja be a kódot a rendelkezésre álló kódblokkba.
- Kattintson a beállítások ikonra a képernyő jobb felső sarkában, és lépjen a „Block” fülre.
- Adja meg, hogyan jelenjen meg a számozás, és mely kódsorokat szeretné kiemelni.
- Bekapcsolhatja az „URL-ek kattinthatóvá tétele” beállítást is, ha kattinthatóvá szeretné tenni a kódot.
A kódblokk színének és formázási sémájának megváltoztatásához kövesse az alábbi lépéseket:
- Lépjen a „Beállítások” elemre, és keresse meg a „SyntaxHighlighter” részt.
- Módosítsa a blokk témáját.
- Kattintson a „Mentés” gombra az „Előnézet” gombra, hogy megtekinthesse, hogyan fognak kinézni a változtatások élő módban.
További GYIK
Hogyan lehet egy kódblokkot kattintható hivatkozássá tenni?
Ha kódot szeretne blokkolni egy hivatkozást a WordPress szerkesztővel, kövesse az alábbi lépéseket:
1. Válassza ki a hivatkozásként használni kívánt kódsort.
2. Az előugró widgetben válassza ki a hivatkozás ikont. Alternatív megoldásként megnyomhatja a „Ctrl” + „K” billentyűket a billentyűzeten.
3. Írja be az URL-címet, amelyre a kódot hivatkozni szeretné, és nyomja meg az „Enter” billentyűt.
Ki tudom emelni a kódot a WordPress szerkesztő által biztosított kódblokk-szerkesztővel?
Nem, a natív WordPress-szerkesztő által biztosított kódblokk nem teszi lehetővé a felhasználók számára a kód másolását és beillesztését. Ehhez szüksége lesz egy speciális kódblokk-szerkesztő bővítményre, például a „SyntaxHighligher Evolved” bővítményre.
Az Elementor rendelkezik kódblokkoló funkcióval?
Az Elementor egy népszerű fogd és vidd beépülő modul, amelyet WordPress-webhelyek készítésére használnak. Sajnos, ha a beépülő modult használja webhelyek létrehozásához, akkor nem fog olyan blokkot találni, amely lehetővé tenné a számítógépes programok formázását a webhelyén. Ezért a feladat befejezéséhez át kell váltania a hagyományos WordPress szerkesztőre.
Indítsa el webhelyét
Függetlenül attól, hogy programozási blogot vezet, vagy egyszerűen csak szeretne kódrészleteket megosztani a webhelyén, a kódblokkok használatának ismerete rendkívül fontos a WordPressben. A kódblokkok megkönnyítik az olvasókat, és összességében növelik a webhely felhasználói élményét. És amint láthatja, a kódblokkok beillesztése viszonylag egyszerű folyamat, különösen a natív WordPress-szerkesztővel.
Próbáltad már használni a WordPress által biztosított kódblokkokat? Mi a helyzet a SyntaxHighlighter Evolved beépülő modullal? Kérjük, ossza meg velünk tapasztalatait az alábbi megjegyzések részben.
