Kaip rodyti kodą jūsų WordPress

Jei naudojate plėtros svetainę, projekto dokumentaciją, skyrių apie produkto ar kitą panašų į "WordPress" svetainę, tikėtina, kad jums reikės vienu metu rodyti kodą. Priklausomai nuo vartojamos kalbos, tai gali būti nedidelis skausmas ar tikrai didelis skausmas.

Šį savaitgalio "WordPress" projektą aš paaiškinsiu, kodėl tai yra toks įdomus ir ištirti kai kurias pasirinktis, kurias norite gražiai ir lengvai rodyti savo WordPress svetainėje.

Kodėl kodavimas yra sudėtingas

Kad suprastumėte, kodėl kodo rodymas yra sunkus, jums reikia žinoti paprastą HTML kodą. Kodas kai kurti paryškintas tekstas yra supakuoti jį žyme. Norėčiau paryškinti šį sakinį, kurį iš tikrųjų parašiau <strong> Pusjuodis tekstas </ bold> į mano WordPress redaktorių.

WordPress kodas
Rodomas kodas jūsų svetainėje gali būti sudėtinga, jei jūs nežinote kaip.

Kol kas taip gerai, bet dabar sunkiai: ką aš noriu parodyti, kaip tai padariau?

Bet kuriuo metu, kai įvedu <strong> į redaktorių, jis bus interpretuojamas kaip HTML kodas, o tai reiškia, kad jis išnyks ir vietoj jo bus naudojamas teksto supratimui.

Kita problema, kurią mes turime, yra sintaksės pabrėžimas. Net jei kodas rodomas teisingai, gali būti sunku perskaityti be tinkamo stiliaus.

Kodekso rodymas

Geriausias būdas parodyti kodą yra specialiųjų reikšmių simbolių konvertavimas į HTML objektus. Galbūt jau žinote, kad kartais turėsite įvesti & vietoj paprasto ampersando, kad jis atrodytų tinkamai. Tai yra, nes & yra simbolis "simbolis" HTML objekte.

HTML objektai nėra interpretuojami kaip kodai, tačiau jie yra tokie patys kaip ir jų neegzistuojantys partneriai. Norint parodyti man, kaip sukurti drąsų tekstą, turėtumėte įvesti:

1
<stiprus>paryškintas tekstas</ bold>

< yra HTML objektas, kuris yra mažesnis nei ženklas (taigi ir lt) ir > yra HTML objektas didesnis nei ženklas - taigi ir gt.

Kodo pridėjimas prie "WordPress" Paskelbkite paprastą būdą

Paprasčiausias būdas pridėti kodą prie jūsų pranešimų yra naudoti HTML objektus ir apvyniokite viską <Pre> žymos Ši žyma rodoma kodui, o daugelyje temų bus tinkamas stilius. Greitas pavyzdys, ką aš turiu galvoje, tiesiai iš pranešimo:

1 2 3 4 5 6 7
Norėdami pridėti motyvacijos tekstą į viršutinį plotą, tiesiog įjunkite funkciją į admin_notices, pvz., Taip:
<iš anksto>add_action( ‘admin_notices’, ‘show_mot_text’ );
funkcija show_mot_text () {
$ text = get_motivation_text ();
echo "<p id=’wp-admin-motivation’>$ tekstas</p>";
} </iš anksto>

Atkreipkite dėmesį, kad aš pradėjau kodą iškart po atidarymo žymos ir aš užrašiau uždarymo žymą iškart po paskutinio kodo simbolio. Būtų švaresnis, jei juos įtrauktų į naujas eilutes, bet daugelis "Javascript" sintaksės žymeklių interpretuos šias eilučių plyšes kaip faktines eilučių plyšius. Taigi, gera mintis įeiti į įprotį nepalikti linijos plyšių čia.

Tai veikia puikiai, tačiau tai yra košmaras palaikyti. Jei ten yra daugybė žymų, ne tik nelyginė pastraipa tampa "HTML" elementų sutrikimu, todėl labai sunku redaguoti kodą. Jei man reikia pasinaudoti šiuo metodu, iš tikrųjų naudojau mano teksto redagavimo priemonę, norėdami sukurti HTML elementus.

Aš parašau įprastą kodą ir naudojau savo teksto redaktorių, kad visus HTML objektus paverstų vienu metu. Jei jums reikia pakeisti kodą, galite įterpti konvertuotą versiją ir juos iššifruoti į tinkamus simbolius. Jei naudojate Atom.io, galite naudoti HTML objektai paketą, jei naudojate "Sublime", galite naudoti HTML: koduoti specialiuosius simbolius komanda

Net jei jūs gaunate gerą darbo eigą, ji tiesiog atrodo taip nepaklusnė "WordPress" pranešimų redaktoriuje, o tai - toli nuo greito darbo eigos.

Geresnio kodo darbo eiga

Geresnis būdas pridėti kodą prie svetainės yra naudoti papildinį šiuo tikslu. Daugelis įskiepių naudoja Javascript komponentą, kad pridėtumėte sintaksės išraišką ir kitas jūsų kodo parinktis. Mano mėgstamiausias sintaksės žymeklis yra "Prism" ir, laimei, yra papildinys, kuris įtraukia jį į "WordPress".

Kapas Prism WP, įdiekite jį ir pradėkite rašyti kodą, vadovaudamiesi toliau pateiktomis gairėmis.

  • Wrap savo kodą į <Pre> ir <Code> Žymos taip pat
  • Kodas gali gauti specialią klasę, kuri žymi tikslinę kalbą, kuri yra naudojama pabrėžti
  • Jei norite nurodyti eilučių numerius, turite įjungti įjungimo nustatymus ir pridėti eilučių numeriai klasė į pre elementą.

Kodo pavyzdys, kuris dabar yra aukščiau, atrodo taip kodo redaktoriuje:

1 2 3 4 5
<iš anksto klasė="eilučių numeriai"> <kodas klasė="kalba-php">add_action( ‘admin_notices’, ‘show_mot_text’ );
funkcija show_mot_text () {
$ text = get_motivation_text ();
echo “<p id="wp-admin-motivacija"> $ text </p>”;
} </kodas> </iš anksto>

Tai atrodo daug geriau, ar ne? Tai taip pat yra puikus produktas, pagal nutylėjimą jis atrodo kaip žemiau esantis paveikslėlis. Naudojant dvidešimt penkiolika temų.

&quot;Prism&quot; žymeklio išvestis
"Prism" žymeklio išvestis

Yra keletas kitų temų, kurias galite naudoti, peržiūrėkite Prizmė pagrindinis puslapis. Temos gali būti pakeistos dešiniau su apvaliais daiktais. Įskiepis leidžia jums pakeisti temą į įskiepio nustatymus.

Išorės paslaugos

Yra daugybė paslaugų, kurios leidžia įterpti kodą, pvz., Esme, JSFiddle ir pastebin. Kiekviena iš šių paslaugų turi "WordPress" įskiepius, kuriuos galite įterpti į "WordPress" įrašus, pvz., Mes čia WPMU DEV su Gists.

Aš rekomenduoju eiti į įskiepių paieška puslapyje "WordPress" ir ieškodami pageidaujamo teikėjo, per kelias sekundes rasite puikų papildinį.

Pasidaryk pats

Aš visada norėčiau pasiūlyti "pasididžiavimo" sprendimus problemai, todėl pabandykime padaryti tam tikrus dalykus sau. Nepamirškime į visą išskirtinę sritį - tai iš tiesų labai sudėtinga - bet mes galima Darykite daug, kad "WordPress" būtų žymiai lengvesnis kodo įterpimas.

Didžiausia problema, su kuria susiduriame, yra "HTML" objektų problema. Ką mes norėtume - parašyti kodą taip, kaip yra ant "backend", ir parodyti jį taip pat kaip ir išorėje, be interpretavimo kaip žymas. Tai, kaip mes galime padaryti, yra pridėti filtrą the_content.

Idėja yra ta, kad prieš pateikiant turinį mes peržiūrėsime turinį bet kokiam teksto kodo žymėjimui ir pakeisime visus specialiuosius jo simbolius su HTML elementais.

Aš iš tikrųjų parašiau mažą papildinį pavadinimu "Smart Code Escape" tai padaryti keletą mėnesių atgal. Tai puikus kažko naudingo pavyzdys, kuris naudoja visas 15 eilučių kodą. Paimkime dabar.

Pirmas dalykas, kurį norėsite padaryti, yra sukurti papildinį. Mes turime patogu kurti papildinio vadovą už jus, jei nežinote kaip.

Trumpai: Sukurkite aplanką savo įskiepių aplanke, pavadintame "smart-code-escape" ir failą, esantį to aplanko pavadinime smart-code-escape.php. Į failą įtrauksite šį turinį, kurį laiką paaiškinsiu viską.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
<? PHP
/*
* Plugin pavadinimas: Smart Code Escape
* Plugin URI: https://github.com/danielpataki/Smart-Code-Escape
* Aprašymas: konvertuoja mažiau nei, daugiau nei ir simbolius į jų HTML
elementai prieš žymes, kol jie išvedami puslapyje. Jūs visada pamatysite
redaktoriuje nepakeista versija, todėl kodą lengva keisti. Jis nepakeis kodo
Žymės tiesiai prieš žymes, kad palaikytų "Prism" stiliaus išryškinimą.
* Versija: 1.1
* Autorius: Daniel Pataki
* Autorius URI: http://danielpataki.com
* Licencija: GPL v2
* Licencijos URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/
funkcija smart_code_escape_pre( $ duomenys ) {
preg_match("@ (<code. *>) (. *) (<\ / code>) @ isU", $ duomenys[2], $ atitinka );
if( !tuščias( $ atitinka )) {
grįžti $ duomenys[1] . $ atitinka[1] . str_replace( masyvas( "&", "<", ">" ), masyvas( "&", "<", ">" ), $ atitinka[2]) . $ atitinka[3] . $ duomenys[3];
}
kitas {
grįžti $ duomenys[1] . str_replace( masyvas( "&", "<", ">" ), masyvas( "&", "<", ">" ), $ duomenys[2]) . $ duomenys[3];
}
}
add_filter ( "the_content", "smart_code_escape_content", 9 );
funkcija smart_code_escape_content( $ turinys ) {
$ turinys = preg_replace_callback("@ (<pre. *>) (. *) (<\ / pre>) @ isU", "smart_code_escape_pre", $ turinys );
grįžti $ turinys;
}

Tikrasis įskiepis turi inline kodo dokumentaciją, jei jus domina atsisiųskite iš saugyklos ir pažiūrėkite. Pirmas dalykas, kurį reikia pastebėti, yra tai, kad pridėjau filtrą the_content. Šis filtras atlieka atgalinio ryšio funkciją, kai randamas turinys <Pre> žymos

Atgalinio ryšio funkcija (smart_code_escape_pre ()) rūpinasi konversija. Jis patikrina, ar turinys yra apvyniotas a <Code> pirma žyma Maniau, kad pridėsiu tai, kad įsitikintumėte, jog įskiepis nesuderinamas su esamais kodų įskiepiais, pvz., Prisma, apie kurį minėjau anksčiau. Aš darau prielaidą, kad jei kas nors pridės savo kodą, įpakuos jį į a <Pre> ir a <Code> Pažymėkite, kad rimtai įsivaizduokite kodą ir jau turite sistemą.

Jei <Pre> žymė nėra kodo blokelyje, funkcija pakeičia visus specialiuosius simbolius savo HTML elementais.

išvada

Kaip matote, pridėjus kodą į jūsų svetainę nėra sunku, jums reikia žinoti, kodėl simboliai yra užkoduoti ir visi esate nustatyti.

Jei turite puikių būdų pridėti kodą į savo svetainę, praneškite mums toliau pateiktose pastabose.

Palikti atsakymą

Ši svetainė naudoja "Akismet", kad sumažintų šlamštą. Sužinokite, kaip apdorojamas jūsų komentaras.

GTranslate Your license is inactive or expired, please subscribe again!