Kas soovite teada kõige lihtsamat viisi oma WordPressi saidile koodi kleepimiseks, et saaksite selle otse artiklist kopeerida?

Ma tahtsin seda välja mõelda.

Kui juhite oma veebisaiti WordPressi CMS-is (mootoris), peate seda pidevalt täiustama ja lisama uusi ja kasulikke funktsioone, mida leiate teistest sarnastest blogidest.

Sa ei saa maha jääda!

Selleks peate mõnikord sisestama sinna lisakoodi. Avaldasin konkreetselt oma veebisaidil üksikasjaliku artikli, kus räägin kõigist muudatustest, mis ma oma WordPressi teemas (mallis) tegin, et need ära ei läheks. Lõppude lõpuks, kui malli muudetakse, tuleb need kohandused uuesti teha.

Lisaks on mul spetsiaalne, mis on minu blogisse installitud. Muide, sealt leiate linke artiklitele, mis kirjeldavad, milleks need pistikprogrammid mõeldud on ning kuidas neid kõige paremini installida ja konfigureerida.

Mul on hea meel jagada kasulikku teavet, mida olen õppinud. Ja ma püüan kõike esitada lihtsas ja arusaadavas keeles, et see oleks kättesaadav ka algajatele.

Kuid mõnikord pean lisama illustratsioone, mis näitavad, kuidas ma saidil koodi muutsin.

Seni olen selleks kasutanud ainult ühte meetodit: arvutiekraani foto sisestamist.

Kuid pildil on kood selgelt näha, kuid te ei saa seda kopeerida. Sel juhul tuleb see käsitsi sisestada. See tähendab, et vigu ja arusaamatusi on võimalikud.

Seetõttu otsustasin oma lugejate ülesande hõlbustamiseks välja mõelda, kuidas kood WordPressi saidile kleepida, et igaüks saaks selle hõlpsalt kopeerida.

Paljud inimesed viitavad pistikprogrammidele:
WP süntaks koos WP süntaksi nupuga;
SüntaksHighlighter Evolved ;
Automaatne süntaksi esiletõstja.

Leidsin kirjelduse, kuidas sisestada kood ilma pistikprogrammita. Selleks kasutasime varem märgendit xmp (avamine ja sulgemine). Kuid nüüd on see aegunud ja selle asemel on soovitatav kasutada HTML-is eel- (avamis- ja sulgemis-) märgendit.

Kuid ma ei saanud programmi koodi artiklisse sisestada, kasutades ainult spetsiaalseid pre- või xmp-silte. Proovisin neid ka div konteinerisse panna. Ja ma kopeerisin kogu fraasi saitidelt, mis seda soovitasid.

Katse ebaõnnestus. HTML-režiimis redigeerimisel koodi ei salvestatud. Vahekaarte vahetades (Visuaal/Tekst) kadus see lihtsalt artikli tekstist. Millegipärast see ei tööta. Kes teab, kirjutage.

Leidsin teabe, et seda saab teha alles pärast WP Syntax plugina installimist. Need. Ilma pistikprogrammita seda ikka teha ei saa. Installisin WordPressi uusima versiooni (sel ajal - 4.3.1).

Kuid saate seda teha nii. Nägime mõnel saidil sisestatud koodi, paremklõpsasime sellel, et valida kontekstimenüüst "kuva elemendi kood" ja vaatasime koodi. Nii saate teada, kuidas see sisestatakse.

Seega tegin kindlaks, et ühel mulle tuttaval saidil sisestati kood Crayon Syntax Highlighteri pistikprogrammi abil.

Selle pistikprogrammi leidsin administraatori paneelist otsides ja treeningblogi installides.

Selgus, et seda on väga lihtne kasutada. Ma ei muutnud ühtegi seadet, kuigi neid on üsna palju. Jätsin kõik vaikimisi (autori enda konfigureeritud).

Pärast pistikprogrammi installimist ja aktiveerimist ilmub artikli redigeerimise režiimis menüüsse spetsiaalne nupp, millele klõpsates saate koodi WordPressi saidile kleepida.

Ilmub aken koodi sisestamiseks.

Seejärel saab igaüks selle koodilõigu valida ja kopeerida, et oma ajaveebi funktsioone täiustada.

Kood osutub väga värviliseks. Selle elemendid on esile tõstetud erinevates värvides. Seda kõike on võimalik enda jaoks kohandada.

Kõik osutus nii lihtsaks, et otsustasin mitte midagi paremat otsida.

Ja nüüd, kallid lugejad, saate programmi koodi minu saidilt hõlpsalt kopeerida.

Näiteks see.

Funktsioonikood WordPressi saidi administraatori sisselogimise peitmiseks kommentaarides

add_filter("comment_class", "udalit_class_avtora_kommentariya"); funktsioon udalit_class_avtora_kommentariya($klassi)( foreach($klassi as $kluch=>$klass) : if (strstr($klass, "comment-author-")) : unset($klassi[$kluch]); endif; endforeach; tagasta $classi )

Oma õpetustes toome sageli näiteid selle kohta, kuidas WordPressi sisseehitatud funktsioone täiustada ja laiendada. Sageli on see lihtsalt mõne huvitava pistikprogrammi või vidina seadistamise kirjeldus ja sageli esitame selle tekstis koodijupid, mis tuleb ühte või teise sisestada teemafail soovitud tulemuse saavutamiseks.

Nagu selgus, on paljude jaoks fraas - Kleepige see kood faili functions.php- ei ütle midagi, nii et selles õpetuses püüan kõige lihtsamal viisil näidata, mis see kood on ja kuidas see täpselt teie teemafailidele lisada. See postitus on rohkem algajatele, nii et kui olete WordPressi proff, ei näe te siin midagi uut.

Nii et lähme!

Kuidas koodi redigeerida?

Ma ei hakka liiga palju ropendama. Ma ütlen lühidalt, teil on 2 võimalust:

1. Sisseehitatud WordPressi redaktor

Asub menüüs konsoolis Välimus → Toimetaja.

• plussid: alati käepärast, saate koodis kiiresti väikseid muudatusi teha, eeldusel, et teate täpselt, kuhu lähete.
• Miinused: kõik teemafailid pole redigeerimiseks saadaval ja süntaks pole esile tõstetud, mistõttu see redaktor ei sobi tõsiseks tööks koodiga.

2. Kolmandate osapoolte programmid koodi redigeerimiseks

Sest Windows ma kasutan Notepad++ Ja Adobe Dreamweaver. Sest MacOS Võin nõu anda Coda, ja jaoks Linux Ma ei anna nõu, need tüübid teavad juba väga hästi, kuidas koodi paremini redigeerida. :-)

• plussid: ilmne, mugav märgistuse ja süntaksi esiletõstmine. Näiteks sisse Notepad++ Kui klõpsate mis tahes sildil, tõstetakse esile ka selle sulgev silt. See on väga mugav.
• Miinused: Need on ikkagi eraldi programmid, mille peate ise välja mõtlema. Mõned programmid on tasuta ja mõned tasulised.

WordPressi teema üldine struktuur

Teemafailid

Ükskõik milline WordPressi sait(või oleks õigem öelda teema, sest sait töötab siis, kui üks installitud teemadest on aktiveeritud) on tegelikult failide komplekt. Kusagil teie hostiteenuse pakkuja poolel töötlevad need failid serverid ja lõpptulemus tagastatakse teie monitorile – veebisaidile endale. Mida näete, kui külastate aadressi veebibrauseri kaudu.

WordPressi puhul on see failide komplekt iga teema puhul erinev. Aga üks on ühine omadus: see komplekt koosneb laiendiga failidest .php, .css Ja .js(WordPress ise on täielikult sisse kirjutatud PHP, Nii .php failid on mis tahes teema põhiosa).

Iga disaini teema peab olema minimaalne failide komplekt korrektseks tööks WordPressi mootorikeskkonnas. Saate avada kausta aktiivse teemaga ( site_rootwp-contentthemesyour_theme) ja tõenäoliselt leiate sealt kõik need failid:

Saidi välimus

Nüüd räägime sellest välimuse struktuur WordPressi sait. Et vältida segadust nagu " Ma tahan selle asja siia lisada" või " Pean selle nupu sinna sisestama", nimetatakse WordPressi teema teatud piirkondi tavaliselt nende õigete nimedega. Tavakülastaja, kes satub mis tahes saidile, näeb seda, mida näeb: nuppe, paneele, päiseid, linke jne. WordPressi asjatundlikum inimene näeb seda saiti struktuursemal viisil.

Võtame näiteks meie ajaveebi. Selle avaleht näeb välja selline:

Pildi komponeerisin teadlikult nii, et kõik põhialad oleksid näha.

Nagu näete, koosneb meie ajaveebi avaleht 4 osad: mütsid, kelder, põhiosa Ja külgriba. On aus öelda, et see struktuur on enamiku WordPressi teemade puhul kõige levinum.

Nüüd, kui teate WordPressi saidi esiotsa alade nimesid, võite öelda: " Pean jalusesse lisama veel ühe bänneri", või" Ma tahan külgribale manustada vidina", või" Päises tuleb muuta menüü järjekorda".

Lisateave failide ja koodi kohta

Ülaltoodud pildil näete, et saidi iga ala vastutab konkreetse eest faili teemakaustas. Sa näed 4 ala, mis vastavad 4 faili, kuid tegelikult on faile rohkem. Kirjeldan ainult kõige olulisemaid teemafaile.

header.php – päis

Kork- see on saidi ülemine ala, mis sisaldab logo, Saidi nimi, ülemine navigeerimine menüü, saab lisada täiendavat reklaami bännerid, kindlustatud lehekülgi. See on ülemine (esimene) ala, seega töödeldakse seda faili esimesena. See tähendab, et fail header.php kõik ühendatud JavaScript failid, CSS failid ja nii edasi.

Faili fragment:

jalus.php – jalus

Sarnaselt päisega on see saidi alumine ala, mis võib sisaldada autoriõigused, kontaktinfo, lisaks menüü, meetrilised loendurid ja nii edasi. Kui tuua analoogia Microsoft Word, siis on päis ja jalus ülemine ja alumine päised ja jalused. Need on saidi osad, mis kuvatakse alati üla- ja alaosas, olenemata sellest, kuhu saidil lähete.

Faili fragment:

index.php – põhiosa

Põhiosa(teise nimega sisu) vastutab teie voo kuvamise eest postitusi(plaadid, väljaanded, need kõik on sünonüümid). See fail sisaldab väljundkoodi postituse pealkiri, miniatuurid, autor, avaldamise kuupäevad, märgid, salvestamise teadaanne, nupud kirje lugemise jätkamiseks Edasi.

Faili fragment:

sidebar.php – külgriba

Kõrvalpaneel- see on kaasasoleva teabe plokk, kus vidinad, otsinguvorm, sotsiaalsed nupud, sildipilv, reklaam, bännerid ja muud teavet. Külgriba võib asuda põhiosast paremal või vasakul. Külgriba võib olla korraga kaks või üldse mitte.

Faili fragment:

Selles failis olev kood näitab, et selle teema külgriba on täielikult kohandatav konsool. Aga ainult otsinguriba jäigalt fikseeritud ülemisse asendisse. See tähendab, et külgribal mis tahes elemendi lisamiseks või muutmiseks peate minema menüüsse Välimus → Vidinad ja lohistage seejärel vajalikud elemendid külgriba alale:

Näiteks küsivad paljud meie lugejad, milline pistikprogramm meie rakendust rakendab sotsiaalsete nuppude blokeerimine avalehel. Vastus on ligikaudu järgmine: see pole pistikprogramm, vaid meie enda arendus. Lisatud külgribale Vidin "Tekst"., mis sisaldab iga nupu kirjelduskoodi. See näeb välja umbes selline:

Functions.php – teema konfiguratsioonifail

See on fail, mis pole saidil nähtav, kuid millel on teema õiges toimimises väga oluline roll. Tegelikult on siin kasutusjuhised teema administratiivne osa registreerimine, kõik on siin registreeritud lisafunktsioone, mida teema saab kasutada, on kõik siin allalaadimiseks kaasatud muud komponendid ja moodulid teemad, mille arendaja esitas eraldi failides, et hiljem saaks kogu faili asemel asendada ühe komponendi funktsioonid.php täielikult.

Teisisõnu, see fail vastutab peamise eest funktsionaalne komponent disaini teemad. Ja täpselt sees funktsioonid.php enamik meie õppetundide koodinäiteid on sisestatud.

Faili fragment:

See fail sisaldab enamasti kleebi kood meie tundide näidetest. Seda tehakse väga lihtsalt: kopeerige koodõppetunnist, klõpsates sellel nupul:

(see on pilt, mitte koodijupp)

Seejärel avage fail funktsioonid.php(või muud soovitud faili), kasutades sisseehitatud redaktor või kolmanda osapoole programm(nagu ülalpool kirjeldatud), minge faili lõppu ja kleepige kood enne sulgemist php silt ?>

See on peamine ja ainus reegel – ärge rikkuge olemasoleva koodi terviklikkust ja struktuuri.

Kui kleebitud kood algab php sildi avamine , siis peate selle vastavalt sisestama pärast eelmise sulgemine. Ei midagi keerulist.

style.css – kujundamise stiilileht

Veel üks väga oluline fail, ilma milleta ükski WordPressi teema ei tööta. See fail on kõige paremini nähtav mis tahes WordPressi saidi avalehel.

Kõik dekoor, taustal, fonte, värvid, taande intervallid, täitmine, varjud, gradiendid- selle kõige eest vastutab üks fail stiil.css, seega on selle tähtsust raske üle hinnata.

Faili fragment:

See fail erineb kõigist ülalkirjeldatutest, kuna see on kirjutatud täielikult veebistiili märgistuse abil CSS. Seetõttu lisatakse sellesse faili kogu meie õppetundide disainiseadeid puudutav kood. Lihtsalt avage see fail, kerige alla ja lisage oma css kood alustades uus tühi rida.

Milliseid muid faile me unustasime?

Loetlen vaid lühidalt koos kirjeldusega:

• 404.php- vastutav fail vealeht. Kui klõpsate lingil, mis viitab teie saidi postitusele või lehele, mida pole olemas, suunatakse teid lehele 404.php, kuhu see kirjutatakse Vabandust, aga sellist lehte pole olemas, Või midagi sellist.
• arhiiv.php- see fail vastutab kirjete kuvamise ja valimise eest valitud kriteeriumide alusel: kategooria järgi, autori järgi, päeva kohta, kuu, aastal või sildi järgi.
• kommentaarid.php- kõik on lihtne, fail vastutab

Html-koodi sisestamise meetod varieerub veidi sõltuvalt sellest, kuhu see täpselt sisestada tuleb. Sellest lähtuvalt kaalume erinevaid võimalusi.

HTML-koodi sisestamiseks saidile ja eriti mõne saidi lehe artikli tekstile minge halduspaneelile, valige ja avage redigeerimiseks soovitud artikkel. Järgmisena tuleb visuaalse redaktori režiim muuta redigeerimisrežiimiks. CMS-süsteemiga töötades klõpsake lihtsalt režiimi muutmiseks. Seejärel kopeerige ja kleepige html-kood kavandatud asukohta.

Tihti soovitakse pärast sisestamist koodi veidi vormindada, näiteks panna tekst ümber koodi teisele poole jääma. Seda saab teha lihtsal viisil, kasutades CSS-i atribuute.

Sildi kasutamine

…

, mähkige oma kood konteinerisse. Seda saab teha ka tabelivormi siltide abil. Ja selles konteineris kasutage kõigi soovitud atribuutide määramiseks atribuuti "style".

Tagamaks, et artikli salvestamisel ei lõika visuaalne redaktor välja muudatusi, mis tema arvates ei ole html-kood, on parem see koodi sisestamisel keelata. Toimetaja muudatuste lõikamine on mõeldud võimaliku pahatahtliku koodi ohu vältimiseks.

Kuidas visuaalset redaktorit keelata?

Klõpsake halduspaneelil "Sait" - "Üldised seaded" - "Sait" ja real "Visuaalne redaktor" valige "Redaktor puudub". Nüüd on võimalik html koodi režiimis redigeerida ja sisestada. Pärast koodi kleepimist ja muudatuste salvestamist saab visuaalse redaktori uuesti sisse lülitada.

Kui soovite artiklit uuesti redigeerida, tuleb uuesti sisestada ka html-kood. Mõnikord nõutakse HTML-koodi kuvamist saidi igal lehel. HTML-koodi sisestamine nii, et see ilmuks saidi igal lehel.

Selle probleemi lahendamiseks kasutage saidi põhifaili sisestamiseks Notepadi või mõnda muud redaktorit (vaikimisi on see index.php või index.html). Kui fail on avatud, valige koodi kleepimiseks eelistatud asukoht. Mugavuse huvides saate määrata otsingusse fraasi, mis asub kohas, kuhu peate koodi sisestama, nii leiate selle kiiremini. Seejärel kopeerige kood ja kleepige see soovitud asukohta. Vajadusel saab koodi vormindada samamoodi, nagu kirjeldati artiklis koodi vormindamisel.

Lisaks tahaksin kohe täpsustada, et sisestame koodi artiklisse endasse, et meie lugejad saaksid seda kopeerida, ilma et raiskaks aega teksti enda tippimisele. Seega suurendame oma ressursi mugavust () - seekord. Ja artiklid näevad välja professionaalsemad ja terviklikumad – see on kaks.

Samuti tahaksin märkida, et selles artiklis sisalduv teave on kasulik inimestele, kes, nagu meie, räägivad, kuidas saidile mitmesuguseid täiendusi teha, või kasutajatele, kellele meeldib lihtsalt kasulikku teavet jagada. Ja see pole oluline, et see teave on kood :) Muide, ma ütlen teile selles projektis, mida me kuvame Wp-Syntexi pistikprogrammi abil.

Võite küsida: "Miks me seda kasutame?" Vastus on lihtne – maitse ja värvi järgi pole kaaslasi. Nali. Tegelikult valisime selle pistikprogrammi, kuna seda on lihtne kasutada, see lisab suurepäraselt visuaalse stiili erinevat tüüpi programmeerimiskeeltele (css, html, java, javascript, perl, sql jne) ega koorma meie serverit üle .

Noh, kuna ma lasin Wp-Syntexi kohta libiseda, kasutame selle näidet, et näidata, kuidas WordPressi artiklitesse koodi sisestada.

Kõigepealt peate installima selle pistikprogrammi. Sellest, kuidas seda teha, rääkisime artiklis . Seetõttu ma seda tegevust siin ei kirjelda.

Selle tulemusena näete järgmist.

Kood, mida soovite väljastada

Samuti saate selles koodis php asemel sisestada mõne muu programmeerimiskeele, näiteks css või java. Samal ajal muutub välimuse stiil.

Wp-Syntexi lisafunktsioonid

Kui lisate atribuudi avatavale "pre" märgendile rida, see tähendab, et kood, mida peate kleepima, algab järgmiselt:

Kood, mida soovite väljastada

Loodetavasti märkate erinevust?

On veel üks väike atribuut, mida võite vajada - see põgenenud. See võimaldab teil teisendada tähemärkide html-koode otse tähemärkideks. Näiteks teisendab see ">" täheks ">. Selle funktsiooni toimimiseks sisestage avatavasse "pre" märgendisse järgmine atribuut:

põgenenud = "true"

Sellest lähtuvalt algab silt järgmiselt:

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

Internetist leidsin ka infot, et saab installida veel ühe plugina (WP-Syntax Button), mis töötab koos meie pluginaga ja lisab WP redaktorisse koodi sisestamise nupu. Ma ei olnud liiga laisk ja otsustasin seda katsetada.

Kohe seda installides tegi mulle ärevaks tõsiasi, et seda polnud päris pikka aega uuendatud ja meie WordPressi versiooniga testitud. No mis ma oskan öelda, mu kartused olid õigustatud.

Pärast WP-süntaksi nupu aktiveerimist otsustasin proovida ühte meie artiklitest Java-skripti sisestada. Tegin kõik nii, nagu juhiste ja soovituste mäel näidatud. Sisestasin skripti artiklisse, valisin selle ja vajutasin nuppu “kood”.

Seejärel näitas ta programmeerimiskeele ja rea ​​numbri, millest skripti väljund peaks algama.

Võib-olla küsite, miks ma sellest katsest selles artiklis kirjutasin? Sellega tahtsin öelda, et kui otsite Internetist teavet, pöörake tähelepanu avaldamise kuupäevale. On ju väga suur tõenäosus, et vanas artiklis olev info oli asjakohane juba mitu aastat tagasi, aga hetkel see lihtsalt ei tööta ning selle kasutamine või juurutamine võib viia Sinu projekti haavatavuseni.

Meie blogis püüan hoida kogu materjali ajakohasena, jälgida pidevalt uuendusi ja vajadusel juba kirjutatud artiklites kohendusi teha.

Kui soovite saada ajakohast teavet meili teel, siis soovitan seda.

Video "Kuidas lisada artiklisse HTML-koodi"

Sõbrad, kui keegi eelistab näha, kuidas seda tehakse, siis salvestasin teile video. Ja tuletan meelde, et meil on ka YouTube'i kanal, mida saab ka tellida.

Seotud artiklid:

Loodan, et artikkel polnud keeruline ja sain teile üksikasjalikult rääkida, kuidas saate HTML-koodi veebisaidile ilma tarbetute probleemideta sisestada.

Ärge jätke tähelepanuta oma ajaveebi esteetikat. Lõppude lõpuks, meie lugeja, nagu elus ikka, kohtab sind riiete järgi ja vaatab sind mõistuse järgi.

See on minu jaoks kõik!

Headaega!

Lugupidamisega Kalmõkov Anton