Kako ugraditi izvorni kod. Umetanje PHP koda u HTML

Kada razvijate svoj modul, ponekad pribjegavate izgledu (HTML i CSS) i dodatnim skriptama.

Sve se to može zasebno povezati - nešto u tijelu stranice, nešto u zasebnim datotekama. Ali neke je dodatke bolje umetnuti izravno u samu PHP datoteku.

Danas ću pokazati dvije opcije kako možete umetnuti HTML, CSS ili JavaScript u PHP kod.

Mislim da ako ste i malo upoznati s PHP-om, znate što je "echo" (oznaka s kojom možete prikazati poruku na ekranu).

Pomoću njega možete prikazati jedan od prethodno navedenih kodova. Primjer:

Na što ovdje treba obratiti pozornost? Citati. Ako koristite vanjske navodnike oblika " ", tada unutarnji navodnici elemenata moraju biti " " i obrnuto, inače ćete dobiti pogrešku. Ako u osnovi želite koristiti iste vanjske i unutarnje navodnike, stavite znak za bijeg u unutarnje:

U ovom slučaju, sve će raditi ispravno.

Ova opcija mi se više sviđa od prve. Ovdje ćemo također koristiti "echo", kao u prethodnoj verziji, ali ćemo dodati još jedan element "HTML":

Ovdje možete umetnuti bilo koji element, bio to HTML kod ili JavaScript. Navodnici ovdje ne igraju ulogu (možete umetnuti bilo koje), a ako želite, možete implementirati varijable za izlaz:

Vrlo prikladan način da realizirate svoje ideje.

Štoviše, želio bih odmah pojasniti da ćemo kod umetnuti u sam članak, kako bi ga naši čitatelji mogli kopirati bez gubljenja vremena na upisivanje samog teksta. Tako ćemo povećati praktičnost () našeg resursa - ovaj put. I članci će izgledati profesionalnije i cjelovitije – to je dvoje.

Također bih želio napomenuti da će informacije u ovom članku biti korisne ljudima koji ili, kao što vam kažemo, kako napraviti razne vrste dodataka na web mjestu, ili korisnicima koji jednostavno vole dijeliti korisne informacije. I nije važno što su ove informacije kod :) Usput, reći ću vam malu tajnu; u ovom projektu to prikazujemo pomoću dodatka Wp-Syntex.

Možete pitati: "Zašto ga koristimo?" Odgovor je jednostavan - nema drugova po ukusu i boji. Vic. Zapravo, odabrali smo ovaj dodatak jer je jednostavan za korištenje, savršeno dodaje vizualni stil raznim vrstama programskih jezika (css, html, java, javascript, perl, sql, itd.) i ne opterećuje naš poslužitelj .

Pa, budući da sam se izjalovio o Wp-Syntexu, upotrijebimo njegov primjer da pokažemo kako umetnuti kod u članke na WordPressu.

Prvo morate instalirati ovaj dodatak. Razgovarali smo o tome kako to učiniti u članku o. Stoga tu akciju neću opisivati ​​ovdje.

Kao rezultat, vidjet ćete sljedeće:

Kod koji želite da se prikaže

Također, umjesto php-a u ovaj kod možete ubaciti neki drugi programski jezik, npr. css ili java. U isto vrijeme, stil dizajna izgled promijenit će se.

Ako dodate atribut retka početnoj oznaci "pre", kôd koji trebate umetnuti počet će ovako:

Kod koji želite da se prikaže

Nadam se da primjećujete razliku?

Postoji još jedan mali atribut koji vam može trebati - escaped. Omogućuje vam pretvaranje html kodova znakova izravno u same znakove. Na primjer, pretvara ">" u ">". Kako bi zaradio novac ovu funkciju, u početnu oznaku "pre" umetnite sljedeći atribut:

U skladu s tim, oznaka će započeti ovako:

Također sam pronašao informaciju na internetu da možete instalirati još jedan dodatak (WP-Syntax Button), koji radi zajedno s našim dodatkom i dodaje gumb za umetanje koda u WP editor. Nisam bio previše lijen i odlučio sam ga testirati.

Odmah kada sam ga instalirao, zabrinulo me to što nije bio ažuriran dosta dugo i nije testiran s našom verzijom WordPressa. Pa, što reći, moji su strahovi bili opravdani.

Nakon što sam aktivirao gumb WP-Syntax, odlučio sam pokušati umetnuti java skriptu u jedan od naših članaka. Napravio sam sve kako je navedeno u brdu uputa i preporuka. Umetnuo sam skriptu u članak, odabrao je i pritisnuo tipku "kod".

Zatim je naznačio programski jezik i broj retka od kojeg bi trebao započeti izlaz skripte.

Možda se pitate zašto sam pisao o ovom eksperimentu u ovom članku? Ovim sam želio reći da kada tražite neku informaciju na internetu, obratite pažnju na datum objave. Uostalom, postoji vrlo velika vjerojatnost da su informacije u starom članku bile relevantne prije nekoliko godina, i u trenutku jednostavno ne radi, a njegova upotreba ili implementacija može učiniti vaš projekt ranjivim.

Na našem blogu nastojim održavati sav materijal ažurnim, stalno pratim ažuriranja i, ako je potrebno, unosim izmjene u već napisane članke.

Ako želite primati ažurirane informacije na svoj elektronička pošta, onda ga preporučujem.

Prijatelji, ako netko više voli vidjeti kako se to radi, onda sam snimio video za vas. I podsjećam vas da imamo i YouTube kanal na koji se također možete pretplatiti.

Povezani članci:

Pa, nadam se da članak nije bio kompliciran i da sam vam mogao detaljno reći kako možete umetnuti html kod na stranicu bez nepotrebnih problema.

Nemojte zanemariti estetiku svog bloga. Uostalom, naš vas čitatelj, kao i u životu, dočekuje po odjeći, a ispraća po pameti.

To je sve za mene!

cao cao!

S poštovanjem, Kalmykov Anton

Prije umetanja koda na web stranicu, morate znati strukturu stranice. Ni kod ne biste trebali nigdje lijepiti. Za pojedine elemente stranice postoje određena mjesta. Na primjer, reklamne bannere pokušavaju postaviti na vrh stranice, a brojače prometa na dno.

• Na primjer, želimo umetnuti (povezati) neki javascript, kao i obično, skripte se stavljaju u zasebnu datoteku ili na vrh stranice.
• Ako želite ubaciti banner s reklamom, tada je poželjno odabrati gornji dio stranice (zaglavlje stranice, navigacijski izbornik, prostor iznad objave), ali u nekim slučajevima reklamni banneri se ubacuju unutar teksta ili na kraju .
• Kod za društvene oznake (ikone) nalazi se prije objave (na početku stranice) i na kraju.
• Brojači posjećenosti, ako su uopće postavljeni, nalaze se na dnu ekrana.

Ovo je samo mali dio primjera.

U svakom konkretnom slučaju, jedan ili drugi dio stranice odabire se na temelju njegovih specifičnosti.

U pravilu, nekoliko datoteka je odgovorno za prikaz stranice. Evo najpopularnijih u WordPressu: index.php; single.php; stranica.php; zaglavlje.php; podnožje.php; bočna traka.php; stil.css.

Vrh stranice

Zaglavlje datoteke.php (zaglavlje stranice) obično je odgovorno za prikaz gornjeg dijela. Početak ove datoteke obično izgleda ovako:

Između oznaka nalaze se skripte koje rade na svim stranicama stranice.

Sadržaj ovih oznaka može varirati za svaku temu.

Početna stranica stranice

Po prikazu početna stranica Stranica odgovara datotekom index.php, najčešće koristeći PHP jezik, ova datoteka kombinira kod iz drugih datoteka, na primjer (header.php, footer.php), čime se stranica prikazana u pregledniku sastavlja iz nekoliko datoteka.

Bočni izbornik stranice

Datoteka sidebar.php obično je odgovorna za prikaz stranice (bočnog bloka) na web stranici, ovdje možete umetnuti blok s oglašavanjem.

Izlaz zapisa

Ako želite promijeniti prikaz postova na blogu, koristite datoteku single.php.

Stranice web mjesta

Za promjenu stranica stranice koristite datoteku page.php.

Podnožje stranice

Još jedna datoteka koja se nalazi u gotovo svakom predlošku je footer.php; ona se često koristi za umetanje brojača prometa.

Izgled stranice

Ako želite izmijeniti prikaz stranice, trebat će vam style.css datoteka.

Sada otprilike znate koje su datoteke odgovorne za ispis određenih dijelova stranice.

Da biste razumjeli gdje umetnuti kod, možete koristiti standardni alat Google Chrome Da biste to učinili, desnom tipkom miša kliknite slobodni dio stranice i odaberite karticu Pregled koda.

Uz njegovu pomoć možemo odrediti naziv bloka iznad, ispod ili u koji treba umetnuti vaš kod.

Da biste odabrali željeni blok, kliknite gumb označen crvenom bojom i usmjerite ga na željeno područje web mjesta.

Slika na vrhu prikazuje panel u kojem možete vidjeti kod stranice ili odabranog bloka.

Morate obratiti pozornost na naziv klase bloka iznad ili ispod u koji možete umetnuti kod.

Sada umetnite kod koji vam je potreban i provjerite promjene.

Internet je čvrsto ušao u naše živote i više ne možemo zamisliti svoje postojanje bez njega. Kad se probudimo, prvo što radimo je otvoriti svoju voljenu društvena mrežačitati najnovije vijesti. A tijekom dana objavljujemo nove fotografije i priče iz naših života na našim blogovima. Svakodnevno se rađaju tisuće web stranica, a isti ih broj umire. Ali malo ljudi razmišlja o tome što je s druge strane monitora. Malo ljudi zna od čega se stranica sastoji i po kojim principima radi. Danas vam želimo reći kako umetnuti PHP kod u HTML i zašto je to potrebno.

Kako biste izravno došli do teme, morate saznati od čega se stranica sastoji i kako je strukturirana. Ako otvorite bilo koju stranicu u pregledniku, možete vidjeti da sadrži tekst, slike, a ponekad i videozapise. A tamo nema šifre. Ali on je tamo! Ono što vidimo ispred sebe je prikaz koda. Samo pritisnite kombinaciju tipki CTRL+U i u sljedećem prozoru ćemo ga pronaći. Ovo je HTML.

Ali HTML nije programski jezik, to je samo označavanje hiperteksta. Ne može izvoditi nikakve logičke operacije kao što to rade programski jezici. Drugim riječima, HTML je odgovoran za raspored sadržaja na stranici: tekst, slike, mediji, video, tablice. Nekada davno, još u zoru Interneta, sve su se stranice sastojale od čvrstog HTML-a, ali pokazalo se da to nije sasvim zgodno. Takve stranice se nazivaju statične, a za promjenu sadržaja na stranici bilo je potrebno urediti sav kod. Tako su izmišljeni serverski programski jezici, a jedan od takvih jezika je PHP. Nakon toga pojavila se potreba za umetanjem PHP koda u HTML. U nastavku ćemo opisati kako to učiniti.

Kod PHP jezika nije prikazan u pregledniku. Ovo je programski jezik na strani poslužitelja. Kako ovo razumjeti? Poslužitelj je udaljeno računalo. Kada korisnik izvrši neku radnju na stranici: ispuni obrazac za registraciju, pritisne gumbe, napiše poruku - svi rezultati njegovih radnji šalju se na poslužitelj. Tamo se obrađuju i vraćaju na zaslon. Tako korisnik vidi rezultat svojih radnji.

Kada su se počeli koristiti programski jezici na strani poslužitelja, postalo je potrebno umetnuti PHP kod u HTML stranicu. Kako to učiniti ispravno bit će opisano u nastavku. Jezik PHP može komunicirati ne samo s HTML-om, već također djeluje kao posrednik pri radu s bazama podataka. Jesti posebne funkcije, koji postavljaju upite bazama podataka: biraju podatke iz njih, mijenjaju, brišu, ažuriraju i tako dalje.

Kao što je gore spomenuto, stranice koje se temelje samo na HTML-u su statične stranice. Ne možete promijeniti sadržaj na njima bez uređivanja samog koda. PHP jezik pruža velike mogućnosti za upravljanje web stranicama. Konkretno, upravljajte sadržajem s administrativne ploče izravno u pregledniku, bez odlaska na poslužitelj radi promjene koda. Ovo se pokazalo vrlo praktičnim rješenjem: administrator stranice može samostalno uređivati ​​ili dodavati sadržaj, bez traženja pomoći programera.

Zahvaljujući jeziku PHP pojavili su se sustavi za upravljanje web stranicama. Najpoznatiji od njih su Wordpress, Joomla, DLE. Takvih CMC ima jako puno, a svakim danom ih se sve više pojavljuje. Ali svaki webmaster koji poštuje sebe trebao bi moći uređivati ​​kôd ako se ukaže potreba. Trebao bi znati umetnuti PHP kod u HTML, a da ne mora svaki put kontaktirati programera za tako sitnicu.

Prilikom dizajniranja predložaka u HTML-u gotovo se uvijek koristi dinamičko umetanje. Za što? Moderne web stranice su portali s više stranica, a broj stranica koje sadrže može varirati ovisno o zadatku. Zato sve moderne web stranice koriste predloške. Isti predložak se prikazuje na svim stranicama. To pojednostavljuje rad programera i olakšava promjenu prikaza stranice u pregledniku.

Kako bi se to osiguralo, u HTML predloška uvodi se poseban PHP kod koji osigurava dinamičku zamjenu cijelog sučelja. Bez takvog uključivanja nemoguće je izraditi modernu web stranicu. Dalje ćemo pogledati kako umetnuti html kod u php datoteku.

Ovisno o tome kako je predložak stranice napisan, opcije umetanja mogu biti različite. Ako je predložak napisan u HTML-u, tada je PHP kod ugrađen u njega, a ako je napisan u PHP-u, naprotiv, HTML je uključen u PHP. Ovdje će se raspravljati o obje metode, a ujedno možete naučiti kako umetnuti html kod u php u skriptu.

U prvoj opciji sve je vrlo jednostavno. Potrebna PHP funkcija umetnuta je u HTML prijelom. Na pravom mjestu otvorite oznaku s kojom počinje PHP, nakon nje se ispisuje potrebna funkcija, zatim se oznaka zatvara. Ovo je najčešća opcija umetanja, iako nije jedina.

Drugi način je uključiti datoteku na željeno mjesto. Sav potreban sadržaj smješten je u zasebnu datoteku i povezan s predloškom pomoću direktive include. Sada, ako promijenite datoteku koju tražite, sadržaj predloška će se promijeniti. Postoji još jedna nekonvencionalna metoda, ali možete saznati više o tome kako umetnuti html kod u php u eof u sljedećem članku.

U drugoj opciji razmislite o predlošku napisanom u PHP-u. U ovom primjeru, umetanje će biti malo kompliciranije. U takvim slučajevima koristi se funkcija ECHO koja sadrži HTML kod. Ovaj dizajn je također čest, iako nije jedini. HTML konstrukt može se umetnuti izravno u PHP prijelom: tada se funkcija mora zatvoriti i nakon umetanja HTML-a ponovno napisati PHP kod, počevši s početnom zagradom.

Iz ovog smo članka naučili kako umetnuti php kod u html. Nije uopće teško. Postoji mnogo opcija, a svatko bira ono što misli da je jednostavnije i prihvatljivije u njegovoj situaciji. Važno je znati da je programiranje složena znanost i ne možete postati pravi programer čitajući samo jedan članak. Dug je put do njega. Pogreške su neizbježne u svim fazama i to se mora tolerirati. Samo stečeno iskustvo može dati rezultat kojem težite.

Mogućnost postavljanja vlastitog HTML koda prisutna je samo na . Ova je funkcionalnost namijenjena onima koji se profesionalno razumiju u web, trebaju napredne značajke i točno znaju što će s njima.

Rad s ovim widgetom zahtijeva poznavanje HTML-a, CSS-a i JavaScripta. Pisanje koda s pogreškama može dovesti do neispravnog rada i prikaza stranice.

Možete postaviti svoj HTML kod:

Stranica mora biti objavljena kako bi promjene stupile na snagu.

Ako želite koristiti jQuery skripte na svojoj stranici, to morate učiniti na poseban način, jer je jQuery biblioteka uključena u uKit na nestandardan način. Sve jQuery skripte trebaju biti smještene na kontrolnoj ploči vaše stranice u odjeljku "Prilagođeni kod". U tom slučaju kod mora biti postavljen "Na kraju". Sve vaše skripte trebale bi biti omotane bibliotekom require.js ovako:

zahtijevaju (["jquery"], funkcija ($) (
Vaš kod napisan u jQueryju
})