Html kód beszúrása HTML oldalra.

Sőt, azonnal tisztázni szeretném, hogy a kódot magába a cikkbe fogjuk beilleszteni, hogy olvasóink lemásolhassák anélkül, hogy magának a szövegnek a begépelésével vesztegetik az időt. Így növeljük erőforrásunk kényelmét () - ezúttal. A cikkek pedig professzionálisabbak és teljesebbek lesznek – ez kettő.

Azt is szeretném megjegyezni, hogy az ebben a cikkben található információk hasznosak lesznek azok számára, akik – amint mondjuk – hogyan tehetnek különféle kiegészítéseket a webhelyen, vagy olyan felhasználók számára, akik egyszerűen szeretnek megosztani hasznos információ. És nem számít, hogy ez az információ kód :) Egyébként elárulok egy kis titkot: ez a projekt a Wp-Syntex plugin segítségével jelenítjük meg.

Felmerülhet a kérdés: „Miért használjuk?” A válasz egyszerű - ízlés és szín szerint nincsenek elvtársak. Tréfa. Valójában azért választottuk ezt a bővítményt, mert könnyen használható, tökéletesen vizuális stílust ad a különféle programozási nyelvekhez (css, html, java, javascript, perl, sql stb.), és nem terheli túl a szerverünket. .

Nos, mivel a Wp-Syntexről szót ejtettem, használjuk a példáját annak bemutatására, hogyan lehet kódot beszúrni a WordPress cikkeibe.

Először telepítenie kell ezt a bővítményt. A cikkben arról beszéltünk, hogyan kell ezt megtenni . Ezért írja le ezt az akciót Nem fogok itt állni.

Ennek eredményeként a következőket fogja látni:

A kiadni kívánt kód

Ezenkívül ebben a kódban a php helyett más programozási nyelvet is beilleszthet, például css vagy java. Ugyanakkor a tervezési stílus kinézet meg fog változni.

A Wp-Syntex további szolgáltatásai

Ha hozzáadja az attribútumot a nyitó "pre" címkéhez vonal, vagyis a beillesztendő kód így fog kezdődni:

A kiadni kívánt kód

Remélem észreveszed a különbséget?

Van még egy apró tulajdonság, amire szüksége lehet – ez megszökött. Lehetővé teszi a karakterek html kódjainak közvetlenül a karakterekké alakítását. Például a ">"-t ">-re konvertálja. Pénzt keresni ezt a funkciót, a nyitó „pre” címkébe illessze be a következő attribútumot:

escape = "igaz"

Ennek megfelelően a címke így kezdődik:

< pre lang= "php" line= "1" escaped= "true" >

Az interneten is találtam információt, hogy telepíthet egy másik bővítményt (WP-Syntax Button), amely a mi bővítményünkkel együtt működik, és egy kódbeszúró gombot ad a WP szerkesztőhöz. Nem voltam túl lusta, és úgy döntöttem, hogy kipróbálom.

A telepítéskor azonnal megriadt az a tény, hogy elég régóta nem frissítették, és nem tesztelték a mi WordPress verziónkkal. Hát mit mondjak, jogos volt a félelmem.

A WP-Syntax Button aktiválása után úgy döntöttem, hogy megpróbálok beszúrni egy java szkriptet az egyik cikkünkbe. Mindent az utasítások és ajánlások hegyén leírtak szerint csináltam. Beszúrtam a szkriptet a cikkbe, kiválasztottam és megnyomtam a „kód” gombot.

Ezután jelezte a programozási nyelvet és a sor számát, ahonnan a script kimenetnek kezdődnie kell.

Felteheti a kérdést, hogy miért írtam erről a kísérletről ebben a cikkben? Ezzel azt akartam mondani, hogy amikor információkat keres az interneten, figyeljen a megjelenés dátumára. Végtére is, nagyon nagy a valószínűsége annak, hogy a régi cikkben szereplő információk több évvel ezelőtt relevánsak voltak, és Ebben a pillanatban egyszerűen nem működik, és használata vagy megvalósítása sebezhetővé teheti a projektet.

Blogunkon igyekszem minden anyagot naprakészen tartani, folyamatosan figyelemmel kísérem a frissítéseket, és ha szükséges, módosítok a már megírt cikkeken.

Ha szeretne naprakész információkat kapni az Ön email, akkor azt ajánlom.

Videó „Hogyan lehet HTML-kódot beszúrni egy cikkbe”

Barátaim, ha valaki szeretné látni, hogyan történik ez, akkor rögzítettem egy videót nektek. És emlékeztetlek arra, hogy van egy YouTube csatornánk is, amelyre szintén lehet feliratkozni.

Kapcsolódó cikkek:

Nos, remélem, nem volt bonyolult a cikk, és részletesen el tudtam mesélni, hogyan lehet html kódot beszúrni egy weboldalba felesleges gondok nélkül.

Ne hanyagolja el blogja esztétikáját. Hiszen olvasónk, mint az életben, a ruhája alapján találkozik veled, és az esze alapján lát el.

Nekem ennyi!

Viszlát!

Üdvözlettel, Kalmykov Anton

Sziasztok kedves olvasók!

Beszéljünk az oldalon található programkódról. A webmesternek gyakran kódot kell beillesztenie egy webhely egy vagy több oldalába. A WordPress lehetővé teszi a php, java, html, css stb. használatát. kódot kétféleképpen: a webhelymotor által értelmezett végrehajtható parancsokként, illetve olvasható és másolható szövegként. Ebben a cikkben példákat tekintünk meg arra, hogyan lehet kódot beszúrni egy WordPress oldalba, hogy az helyesen és szépen jelenjen meg a látogatók számára.

Kód mint szöveg: miért van rá szükség?

Nem gyakori a programkód megjelenítésének szükségessége a WordPressben. Nyugodtan kijelenthetjük, hogy az orvosi, építőipari vagy kulináris blogok tulajdonosainak valószínűleg nem lesz ilyen kérdése. Ugyanez nem mondható el az olyan témáknak szentelt projektek szerzőiről, mint a készítés és fejlesztés, a webdesign és programozás, az alkalmazásfejlesztés stb.

Az egyes kódsorok közzétételének szükségessége néha túlmutat a kívánt töredék webhelyhez való hozzáadásával. Az ezzel járó vágy, hogy „szépen csináld”, a kódszintaxis kiemelésén és bizonyos megvalósítási módokon nyugszik. A kódkiemelés egy webhelyen jelentősen megkönnyítheti az adatok észlelését a látogatók számára, akik hozzászoktak olyan fejlett szerkesztők használatához, mint a .

Ha egyszerűen beilleszti a kódot egy cikkbe, a WordPress értelmezni fogja és eltorzítja a közzététel során. Ezért az ilyen típusú adatokat mindig fel kell dolgozni. Ez a probléma megoldható különböző utak: a szükséges címkék manuális felírásával az oldalra, a WordPress szerkesztőbe épített gombbal és különféle bővítmények használatával.

Hogyan adjunk kódot egy cikkhez bővítmény nélkül

A WordPress a webhely rendszergazdájának saját eszközt kínál, amely a tartalomkezelő rendszer részét képezi a probléma megoldására.

A vizuális tartalomszerkesztőben hozzáadott egy vagy több kódsorból álló blokk szöveges módba váltáskor a címkék összes karakterét lecseréli< и >szimbólumok < És >

Megmutatja a CMS-nek, hogy egy bizonyos kódrészletnek „ahogy van” meg kell jelennie az oldalon, ez így van szöveg szerkesztő A WordPress-t ki kell emelni, és egy címkével „csomagolni” kell az eszköztár gombjával:


Az oldalon valahogy így fog kinézni:











Név 1
Név 2


1. érték
2. érték


Ha meghatározott behúzásokkal szeretne kódot beszúrni egy WordPress-oldalba, amikor vizuális tartalomszerkesztőről szöveges szerkesztőre vált, használhatja a html címkét 
A behúzások kialakításához használt összes további szóköz megőrzése.  Elem tartalma ÉS Alapértelmezés szerint a böngészők monospace betűtípussal jelenítik meg.
Példa arra, hogyan lehet HTML-kódot beszúrni egy oldalba beépülő modulok nélkül címkével a WordPressben 

 

 
 Név 1
 Név 2
 
 
 1. érték
 2. érték
 

Ugrás a címkére 
Az univerzális attribútumok alkalmazhatók, különösen az attribútum stílus, egy elem meghatározására szolgál CSS használatával.  Az alábbi példa az attribútumok értékét mutatja be stílus be van állítva a megjelenített szöveg színe, a blokk háttérszíne, a blokkszegély vastagsága, színe és görbületi sugara:

Az oldalon megjelenő blokkok attribútumokkal történő formázásának lehetőségei meglehetősen szélesek, de nem korlátlanok.  A figyelembe vett címkék használata indokolt, ha példaként egyetlen sor vagy kis kódrészlet kerül az oldalra.  RÓL RŐL gyönyörű design ilyenkor mondanom sem kell, rendkívül minimalista lesz a beillesztés eredménye, de sokaknak ez is elég.
A szintaxiskiemelés megvalósítását lehetővé tevő összetett formázás a beépülő modulok munkájának eredménye, amelyről az alábbiakban lesz szó.
Kódbeillesztési bővítmények a WordPresshez
A hivatalos WordPress tárhelyből több bővítmény közül választhat, amelyek lehetővé teszik bármilyen kód (php, java, html, css) gyönyörű megjelenítését: soronként és az elemek megfelelő kiemelésével.
SyntaxHighlighter Evolved

Egy általános bővítmény kód beillesztéséhez a WordPressbe, fejlett és hatékony, amelynek beállítási oldalán alkalmazhatja a hét elérhető téma egyikét, és szükség esetén kiválaszthatja a sorszámozás és az eszköztár megjelenítését, az URL-ek kattinthatóvá tételét, a kódmező összecsukását , állítsa be a hosszú zsinórok automatikus tekercsét stb.  A kimenet vizuális előnézete és a használt attribútumok leírása is rendelkezésre áll.
A bővítményben SyntaxHighlighter Evolved minden rendelkezésre áll, amire szüksége lehet.  Nagyon egyszerű kódot beszúrni egy WordPress cikkbe, ehhez engedélyeznie kell a beépülő modulnak a címke feldolgozását a beállításokban 
Vagy használja a megfelelő rövid kódokat:
Példa példa példa példa
WP-szintaxis

Egy másik bővítmény, amely hosszú ideje méltán élvezi az elismerést a webmesterek körében.  Jelenleg a hivatalos adattár statisztikái több mint 10 ezer aktív telepítést mutatnak.  Sajnos a bővítmény egy éve nem frissült, de továbbra is megfelelően látja el a megadott funkcióit.
WP-szintaxis nincs saját beállítási oldala.  Ez a WordPress beépülő modul a kód szerkesztésére, pontosabban annak beillesztésére és a szintaktikai kiemelés típusának megváltoztatására a címkét használja 
Nyelvválasztó attribútummal:

 
példa
példa
példa
A támogatott nyelvek listája a beépülő modul oldalán található.
Tulajdonság vonal a címkében a sorszámozást jelenítjük meg, az értéke annak a sorszámnak felel meg, amelytől a visszaszámlálás kezdődik.  Ha a kód HTML objektumokat tartalmaz, akkor ajánlott az attribútum használata megszökött jelentéssel igaz opcióként:
példa

Példa a CSS-kód kimenetére és kiemelésére a bővítmény használatával:
 1
2
3
4
5
6
7
8
.block ( keret : 2px #8E0505 ; szín : #2D0000 ; /*szöveg színe*/ padding : 2px ; /*behúzás*/ szöveg igazítása: balra; /*szöveg igazítás*/ font-család: arial;    betűméret: 14 képpont;   )
Blokk (szegély: 2px #8E0505; szín: #2D0000; /*szöveg színe*/ kitöltés: 2px; /*kitöltés*/ text-align: left; /*text alignment*/ font-family: arial; font-size : 14 képpont )
Amikor a html szerkesztőről vizuális módra váltunk, a WordPress értelmezi a címkét 
És a kód nem jelenik meg megfelelően.  Ezért a beillesztett kódblokkokkal rendelkező cikkek szerkesztésekor a tartalomszerkesztőt html módban kell használni.
Code Prettify

Egy könnyű beépülő modul, beállítások nélkül, amely lehetővé teszi kód beszúrását egy WordPress webhelyre automatikus kiemeléssel anélkül, hogy meg kellene adnia a nyelvet.  Háttérvilágítást valósít meg a címkék számára 
ÉS Az oldalon.  Egyszerű modul alapú megoldás Google Code Prettify könyvtár azoknak, akik nem szeretnének elmélyülni a blokkok szintaxisának formázásának sajátosságaiban a webhelyen megjelenített programkóddal.
Következtetés
Az ebben a cikkben tárgyalt plugin-alapú megoldások csak egy kis részét képezik annak, amit a tárhely kínál WordPress bővítmények.  A konzol menü hivatkozásainak követésével "Bővítmények – Új hozzáadása" a keresőoldalra, által kulcsszavakat KiemelÉs Szintaxis több tucat hasonló bővítményt találhat, amelyek lehetővé teszik a gyönyörű tervezést programkód.  Fontos megérteni, mennyire releváns és szükséges egy ilyen beépülő modul a webhelyen.  Talán az Ön esetében egyszerűbb lesz a kódot kézzel beszúrni a WordPress oldalra egy szövegszerkesztőben, címkék használatával 
ÉS .
Néha be kell szúrnia bizonyos információkat egy cikkbe, például egy szalaghirdetést vagy valamilyen űrlapot.  Ezek a dolgok html kódok.  Nak nek html kód beszúrása cikkbe vagy oldalba, nincs szükség speciális ismeretekre.  Ez nagyon egyszerűen történik.  Azt már tudod, hogy a html kód csak szöveg.  Cikk vagy oldal létrehozásakor válassza a Szöveg módot.  Ezután írja be a szükséges kódot.  Megment.  És ennyi, kész!
Van egy másik módja is, ez lehetővé teszi bármilyen beillesztését HTML kód bármely weboldalra.
Ez egy címke  .  Az elv a következő: Először , majd a kódod, majd.  Hadd mondjak egy példát Az Ön HTML kódjaAhol
a stílus felelős a címkén belüli szöveg stílusáért, méretéért, színéért,
margó: 10 képpont;  behúzás mérete,
szélesség: 300 képpont;  szélesség méret,
magasság: 120 képpont;  magassági méret.

P.S.  Egy kis agytorna
Három béka ült egy tó partján.  Egyikük úgy döntött, beugrik a tóba.  Hány béka maradt a parton?
Ez érdekelhet:

Hogyan lehet hírlevelet kötni az oldalhoz
2014-03-09T04:38:56+00:00 Remény WordPress html kód, illessze be a html kódotNéha be kell szúrnia bizonyos információkat egy cikkbe, például egy szalaghirdetést vagy valamilyen űrlapot.  Ezek a dolgok html kódok.  Ha HTML-kódot szeretne beszúrni egy cikkbe vagy oldalba, nincs szüksége speciális ismeretekre.  Ez nagyon egyszerűen történik.  Azt már tudod, hogy a html kód csak szöveg.  Az alkotás során...
Nadezsda Trofimova [e-mail védett] Adminisztrátor blog webhely
Esetleg ezek is érdekelhetnek:
Hogyan lehet eltávolítani a /category/ fájlt a WordPress URL-ből
Hogyan távolíthatunk el kategóriát a WordPress URL-ből, és miért szükséges?  Hogyan befolyásolja ez az előtag a webhely promócióját?
 
Hogyan lehet letiltani és engedélyezni a fájlszerkesztőt a WordPress konzolon
A WP-config.php szerkesztése valahogy kevéssé érdekelt, de egy ideje látható.  Mégis muszáj volt.  Bejelentkezem a webhelyem konzoljába, és ott nincs fájlszerkesztő.  Tudod...
 
Az Islemag WordPress téma testreszabása
Islemag az egyik legjobb ingyenes téma.
 
A WordPress visszaállítása egy régi verzióra
Üdvözlöm blogom olvasóit.  Nos, eljött az idő, és problémába ütköztem a WordPress új verziójának frissítésekor, nevezetesen a WordPress 5-ről a WordPress 4.7-re.
 
Hogyan lehet felgyorsítani egy WordPress webhelyet a HeartBeat API kikapcsolásával
Sziasztok.  Folytatjuk a WordPress oldal felgyorsításának témáját.  A Hogyan gyorsítsuk fel a WordPress-t CSS, HTML és Javascript minimalizálásával című cikkben a felesleges dolgokat eltávolítottuk a fájlokból, de...

Természetesen nem mindenkinek van szüksége ezekre az információkra, hanem csak azoknak, akik az oldalukon megosztják az olvasókkal a kóddal kapcsolatos tapasztalataikat (olvassák el az oldal zsigereit) és néhány modernizálását... nos, értitek, a „genetika” beavatkozásán keresztül!  Mire gondoltál?
Előretekintve, amíg el nem kezdem a fő történetet, elmondhatom, hogy továbbra is ásni fogok, miről fogok írni, és mi az, ami nagyon valószínű, hogy hasznos lehet számodra, ha van saját erőforrásod a billentyűzet kreativitásához az interneten .  Ezért azt javaslom, hogy kövesse az új cikkek megjelenését, nehogy lemaradjon egy új termék megjelenéséről.  Főleg, ha még nem tetted meg, vajon miért?
És most, drága szépeim, kezdődik a történet.
Felmerülhet egy ésszerű kérdés: valóban bajlódnia kell a kód beszúrásával?  Miért kell valamiféle kódkiemelést végezni, és miért nem lehet egyszerűen beilleszteni például szövegként?
És ez egyszerű - ha csak így próbálja beszúrni a kódot, akkor a megjelenítés helyett néha elkezdi végrehajtani és végrehajtja az összes olyan funkciót, amelyre szánták, és ott, ahol beszúrta.  Mindezekből a „varázslatokból” az oldal „lebeghet”, „görbülhet”, maga a cikk pedig valami homályossá, és valami köztes – csúnya!  Maga a kód pedig a maga „csupasz” formájában, egy nem túl olvasmányos „látvány”, amely a gyakorlatlan szem számára olyan emészthetetlen anyagot jelenthet, amelytől a nézőben akár vonakodás is kialakulhat, hogy bármit is megértsen, és belemerüljön annak lényegébe. történik.  Röviden: nem az!  Igen, ezt saját szemével is láthatja, ha megnézi például a kép megjelenését a kódban:

Hogy legyen „az”, több lehetőség van, pontosabban 3. Megpróbálok mindent leírni, ahogy az elején ígértem, és te magad döntöd el, melyiket lesz kényelmesebb és kellemesebb megvalósítani és érzékelni. .
Hogyan lehet szépen és helyesen beilleszteni a html kódot egy cikk törzsébe.
1. lehetőség – kódkiemelés a WP-Syntax plugin segítségével.
Pontosabban, ez az opció két bővítmény kombinációján keresztül valósul meg - a könnyebb használat érdekében.  A köteg első része a következő: WP-Syntax, és a fő funkciót látja el.  A második rész pedig egy szolgáltatási rész, és a neve WP-Syntax Button, amely egy gomb megnyomásával valósítja meg a munkát, amely éppen ezt a gombot adja hozzá a WordPress szerkesztő irányítópultjához.  Töltse le a csomag mindkét részét a blog adminisztrációs paneljén a név szerinti kereséssel vagy a motor tárhelyoldalairól.  A WP-Syntax adattároldala itt található.  És a WP-Syntax Button oldala.  Nem kisbuszon ülünk, ugye?
A telepítés szabványos - megtalálva, letöltve, aktiválva.  Kérjük, vegye figyelembe, hogy a Button bővítményt több mint két éve nem frissítették, és nincs információ arról, hogy kompatibilis-e az Önével. új verzió WordPress, ami aggaszthatja Önt.  Ha aggasztja ez a körülmény, akkor nem töltheti le a gombot, és csak a hivatkozás első részével boldogul - ez is működni fog, csak kevésbé kényelmes.  A magam nevében elmondom, hogy a teljes készletet használom és minden működik.
Ha mindent telepít, egy új „Kód” gomb jelenik meg a szerkesztőpanelen.

A beépülő modulon keresztüli kód beszúrásához először vizuális (normál, ahol szöveget ír) módban kell beillesztenie, ki kell választania az egérrel, majd kattintson a „Kód” gombra, és válassza ki a kódnak megfelelő nyelvet a legördülő listából. lefelé lista.  Ugyanakkor beállíthatja a sorok számozását az első szám megadásával a Sorszám mezőben.  A kijelölés után kattintson a Beszúrás gombra.

Ugyanakkor a poszt/oldal mentése/frissítése után valami ehhez hasonló képet fog látni szépen beillesztve a képkódoddal, pl.
Ha nem telepítette a WP-Syntax Button részt, akkor a kód beillesztéséhez ezt a kódkombinációt kell használnia:
Ide írja be a kódját

Hol, a nyelv a kód nyelve.  Ezt a kombinációt be kell illeszteni a HTML-szerkesztőbe, és be kell írni a kódot.  A támogatott nyelvek listája ezen a bővítmény oldalon található.  Ez a kód beszúrási lehetőség nem túl kényelmes, de valakinek szüksége lehet rá.  Az eredmény valami ilyesmi lesz:
 1
Ide írja be a kódját
2. lehetőség – szintaktikai kiemelés a SyntaxHighlighter Evolved beépülő modulon keresztül, amelynek a nevét pontosan lefordították.  Letöltheti, ha név szerint keres a blog adminisztrációs területén, vagy erről a beépülő modulról.  A telepítés szabványos.  Ez a bővítmény az előzőhöz hasonlóan működik, de kevésbé kényelmes verzióban.
Telepítés után lesz egy Beállítások > SyntaxHighlighter menüpont, ahol az összes beállítása lesz.  Igen, elfelejtettem mondani, hogy a bővítmény angol nyelvű és nem orosz - hátrány.  Ha valami nem világos, használja az oldal fordítását.
A beépülő modul beállításai alapértelmezettként hagyhatók – működőképesek.  Vagy beállíthatja az értékeket a képen látható módon, a beállítások példáján:

Ha összezavarodik, akkor a beállításokban van Reset gomb alapértékekre – a beállítások visszaállítása az eredetire.  És az oldal alján, a gombok alatt a kódmegjelenítés előnézete is látható - nyugodtan játszhat és kiválaszthatja a beállításokat és a kódkimenetet.  Van egy lista a támogatott nyelvekről és még sok másról Részletes leírás beállításai – minden oroszul van, majd rájössz.
A html beszúrásához ill php kód Ha egy webhelyet szeretne rögzíteni ezzel a bővítménnyel, alkalmazza a példa egyik konstrukcióját a beépülő modul beállítási oldalán (a legvégén):

Bejegyzés írásakor váltson át a HTML-szerkesztőre, válassza a lehetőséget szükséges paraméter nyelvet a példából, illessze be, és helyezze be a kódot.  Valahogy így fog kinézni:
Írja be ide a hosszú kódot
3. lehetőség – html vagy php kód beszúrása plugin nélkül.
Ha plugin nélkül szeretne HTML kódot beilleszteni a blog törzsébe, azt a következő kódba kell zárnia:
ÍRJA IDE A KÓDOT
Ahol a magasság és a szélesség a megjelenített mező magassága és szélessége a kóddal pixelben, a szín a szín.  A színt a szemcseppentő segítségével tudod kiválasztani, amiről már írtam.  A szélesség és magasság a webhely paramétereihez igazítható.  A kimenet valami ilyesmi lesz:
Ez természetesen megjelenésében és funkcionalitásában kevésbé vonzó, de nem terheli a blogot szükségtelen bővítmények, bár magam nem használom ezt a módszert.  Változásképpen hoztam el.
Szerintem most döntsd el, hogyan lehet szépen beilleszteni a html kódot a blogba.
Itt be is fejezem a dumálásomat.  Remélem, hasznodra vált a mai napon.
Egy kis pozitívum:

A közösségi gombokra kattintva várjuk a kommenteket!
Kövesse a gombokat, meséljen ismerőseinek a cikkről - ez pénzhez vezet!

Szeretné tudni, hogyan kell kódot beilleszteni egy webhelybe? A WordPress könnyebb mindent, hogy közvetlenül a cikkből lehessen másolni?
Ezt akartam kitalálni.
Amikor webhelyét WordPress CMS-en (motor) futtatja, folyamatosan fejlesztenie kell, és új, ill hasznos funkciókat, amelyek más hasonló blogokon is megtalálhatók.
Nem maradhatsz le!
Ehhez néha be kell szúrni oda kiegészítő kód.  Kifejezetten egy részletes cikket tettem közzé a weboldalamon, ahol elmondom az összes változtatást, amit a WordPress témámban (sablonban) végeztem, hogy ne vesszenek el.  Végül is, ha a sablon megváltozik, ezeket a beállításokat újra el kell végezni.
Ezen kívül van egy speciális, ami telepítve van a blogomra.  Mellesleg, ott találhat hivatkozásokat olyan cikkekre, amelyek leírják, hogy mire valók ezek a bővítmények, és hogyan lehet a legjobban telepíteni és konfigurálni őket.
Örömmel osztom meg a megszerzett hasznos információkat.  És igyekszem mindent egyszerű és érthető nyelven bemutatni, hogy még a kezdők számára is elérhető legyen.
De néha illusztrációkat kell hozzáadnom, amelyek bemutatják, hogyan változtattam meg a kódot a webhelyemen.
Eddig csak egy módszert használtam erre: beszúrtam egy fényképet a számítógép képernyőjéről.
De a képen jól látható a kód, de nem tudod lemásolni.  Ebben az esetben manuálisan kell megadni.  Ez azt jelenti, hogy hibák és félreértések lehetségesek.
Ezért, hogy megkönnyítsem olvasóim dolgát, úgy döntöttem, kitalálom, hogyan illeszthetem be a kódot egy WordPress webhelyre, hogy bárki könnyen lemásolhassa.

Sokan hivatkoznak a pluginokra: 
WP szintaxis a WP szintaxis gombbal együtt; 
SyntaxHighlighter Evolved ; 
Auto SyntaxHighlighter.
Találtam egy leírást, hogyan lehet beilleszteni a kódot plugin nélkül.  Ehhez az xmp címkét (nyitó és bezárás) szoktuk használni.  De mára elavult, és helyette a pre tag (nyitó és bezárás) használata javasolt a HTML-ben.
De nem tudtam beilleszteni a programkódot a cikkbe, csak a speciális pre vagy xmp címkéket használva.  Megpróbáltam egy div konténerbe is helyezni őket.  És másolt teljes mondat az azt ajánló webhelyekről.
A kísérlet kudarcot vallott.  A kód nem lett elmentve HTML módban történő szerkesztéskor.  Lapváltáskor (Vizuális/Szöveg) egyszerűen eltűnt a cikk szövegéből.  Valamiért ez nem működik.  Aki tudja, írjon.
Olyan információra bukkantam, hogy ezt csak a WP Syntax plugin telepítése után lehet megtenni.  Azok.  Plugin nélkül továbbra sem tudod megtenni.  Telepítettem a WordPress legújabb verzióját (akkoriban - 4.3.1).
De ezt így is megteheti.  Valamelyik oldalon láttuk a beszúrt kódot, és rákattintunk Jobb klikk egérrel választhat helyi menü„View element code”, és megnézte a kódot.  Így megtudhatja, hogyan van beillesztve.
Így megállapítottam, hogy az egyik általam ismert webhelyen a kód a Crayon Syntax Highlighter beépülő modul segítségével került beillesztésre.
Ezt a bővítményt úgy találtam, hogy az adminisztrációs panelen kerestem, és telepítettem az edzésblogra.
Kiderült, hogy nagyon könnyen használható.  Semmilyen beállítást nem változtattam, bár elég sok van belőlük.  Alapértelmezés szerint mindent elhagytam (a szerző által beállítottak szerint).
A bővítmény telepítése és aktiválása után a cikkszerkesztő módban megjelenik egy speciális gomb a menüben, amelyre kattintva beillesztheti a kódot a WordPress oldalára.


Megjelenik egy ablak a kód beillesztéséhez.

Ezután bárki kiválaszthatja és lemásolhatja ezt a kódrészletet, hogy javítsa saját blogja funkcióit.
A kód nagyon színesnek bizonyul.  Elemei különböző színekkel vannak kiemelve.  Lehetőség van mindezt személyre szabni.
Minden olyan egyszerűnek bizonyult, hogy úgy döntöttem, nem keresek jobbat.
És most, kedves olvasók, könnyedén másolhatjátok a programkódot az oldalamról.
Például ezt.
Funkciókód a WordPress webhely rendszergazdai bejelentkezésének elrejtéséhez a megjegyzésekben
 add_filter("comment_class", "udalit_class_avtora_kommentariya");  function udalit_class_avtora_kommentariya($klassi)( foreach($klassi as $kluch=>$klass) : if (strstr($klass, "comment-author-")) : unset($klassi[$kluch]); endif; endforeach; vissza $classi )
 

 add_filter("comment_class" , "udalit_class_avtora_kommentariya")
;
funkció delete_class_avtora_kommentariya($classi) (
foreach ($klass mint $kluch = > $klass) :