Gdje ubaciti ovaj kod u WordPress? Opća struktura datoteka tema. Kako umetnuti HTML kod u Html stranicu

06.12.2021 Windows Phone

Štaviše, odmah želim da pojasnim da ćemo kod umetnuti u sam članak, kako bi ga naši čitaoci mogli kopirati bez gubljenja vremena na kucanje samog teksta. Tako ćemo povećati praktičnost () našeg resursa - ovaj put. A članci će izgledati profesionalnije i dovršenije - to su dva.

Također bih želio napomenuti da će informacije u ovom članku biti korisne ljudima koji ili, kako vam kažemo, kako da naprave razne vrste dodataka na stranici, ili korisnicima koji jednostavno žele podijeliti korisne informacije. I nema veze što je ova informacija šifra 🙂 Usput, otkriću jednu malu tajnu, na ovom projektu je prikazujemo pomoću dodatka Wp-Syntex.

Pitate: "Zašto koristimo ovo posebno?" Odgovor je jednostavan - nema drugova za ukus i boju. Šala. U stvari, 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.), a ne preopterećuje naše server.

Pa, pošto sam iznevjerio Wp-Syntex, hajde da iskoristimo njegov primjer i pokažemo kako umetnuti kod u članke na WordPress-u.

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

Kao rezultat, imat ćete sljedeći izlaz:

Kôd koji želite da bude prikazan

Također, umjesto php-a u ovaj kod, možete umetnuti drugi programski jezik, kao što je css ili java. Istovremeno će se promijeniti i stil izgleda.

Dodatne funkcije Wp-Syntexa

Ako dodate atribut linija, odnosno kod koji ćete morati da ubacite će početi ovako:

Kôd koji želite da bude prikazan

Nadam se da ste primijetili razliku?

Postoji još jedan mali atribut koji vam može zatrebati - ovo je pobjegao... Omogućava vam da pretvorite html kodove znakova direktno u same znakove. Na primjer, "& gt" se pretvara u ">". Da bi ova funkcija radila, umetnite sljedeći atribut u početnu oznaku "pre":

escaped = "tačno"

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

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

Takođe na Internetu sam našao informaciju da možete instalirati još jedan dodatak (WP-Syntax Button), koji radi u sprezi sa našim dodatkom i dodaje dugme za umetanje koda u WP editor. Nisam bio lijen i odlučio sam protestirati.

Odmah nakon instaliranja, uznemirila me činjenica da nije ažuriran dugo vremena i da nije testiran sa našom verzijom Wordpress-a. Pa šta da kažem, moji strahovi su bili opravdani.

Nakon što sam aktivirao WP-Syntax Button, odlučio sam da ubacim java skriptu u jedan od naših članaka. Uradio sam sve kako je naznačeno u planinskim uputama i preporukama. Ubacio sam skriptu u članak, odabrao je i kliknuo na dugme "šifra".

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

Možda ćete pitati zašto sam pisao o ovom eksperimentu u ovom članku? Ovim sam htio reći da kada tražite neku informaciju na internetu, obratite pažnju na datum objavljivanja. Uostalom, postoji vrlo velika vjerovatnoća da su informacije u starom članku bile relevantne prije nekoliko godina, ali trenutno jednostavno ne funkcioniraju, a njihova primjena ili implementacija može dovesti do ranjivosti vašeg projekta.

Na našem blogu trudim se da sav materijal bude ažuran, stalno pratim ažuriranja i, ako je potrebno, prilagođavam već napisane članke.

Ako želite da primate ažurne informacije za sebe putem e-pošte, onda to preporučujem.

Video "Kako umetnuti HTML kod u članak"

Prijatelji, ako neko više voli da vidi kako se to radi, onda sam snimio video za vas. I da vas podsjetim da imamo i youtube kanal na koji se također možete pretplatiti.

Povezani članci:

Pa, nadam se da članak nije bio kompliciran, a uspio sam vam detaljno ispričati kako možete ubaciti html kod u web stranicu bez nepotrebnih problema.

Ne zanemarite estetski izgled vašeg bloga. Na kraju krajeva, naš čitatelj, kao i u životu, sreće se na odjeći, a ispraća prema umu.

To je sve za mene!

Ćao ćao!

Srdačan pozdrav, Anton Kalmykov

Hajde da razgovaramo o tome kako umetnuti kod na sajt, kako ubaciti html kod, kod brojača, kod skripte treće strane u Artisteer. U samom programu kod se može ubaciti na dva mjesta, prvo je prilikom kreiranja podnožja klikom na dugme "tekst", a drugo je na samom dnu stranice, prilikom postavljanja postavki izvoza, " Opis". U potonjem, još je zgodnije umetnuti nakon što je predložak kreiran.

Kako ubaciti kod brojača

Kod brojača može se ubaciti na dno stranice na mjesto naznačeno na slici, ovo je najlogičnije mjesto.
U šablonima Joomla brojač kod može se umetnuti otvaranjem stranice index.php u folderu šablona sa notepadom. Na dnu reda nalazimo:

i umjesto linije „Designed by Postoji još jedna mogućnost insert modul sa kodom u poziciji za otklanjanje grešaka da biste to uradili, kreirajte besplatni modul (kao što je opisano ispod) i ubacite kod u njega.

U šablonima WordPress brojač kod na ovom mjestu (na dnu stranice) možete insert otvaranjem footer.php fajla napravljenog šablona i pronalaženjem redova:

Zamena linije,

PHP kod:

Powered by< a href= "http://wordpress.org/" target= "_blank" >WordPressi< a href= "http://www.artisteer.com/?p=wordpress_themes" target = "_blank"> WordPress temakreiran sa Artisteerom

Kod vašeg brojila.

U šablonima Drupal brojač kod mogu insert otvaranjem stranice page.tpl.php šablona napravljenog zamjenom koda na samom dnu:

PHP kod:

" " ... t ("Drupal"). "". t ("i"). "Drupal Theme"... t ("kreirano sa"). "Artisteer"; ?>.

Na kodu brojača ili dugmeta.

Umetnite kod skripte, html kod možete i umetnuti u modul, a iako se radi o pitanjima korištenja određenog CMS-a, mi ćemo se zadržati na nekima od njih.

Ubacite HTML kod u Joomla modul

Da biste ubacili kod u Joomla 1.5 (u joomla 1.7 se ubacuje slično), potrebno je da kreirate novi HTML modul, u admin panelu otvorite Extensions -> Module Manager -> dugme kreirajte modul -> izaberite Custom HTML code -> dugme sledeće. Zatim dolazimo do kreiranog od strane nas mod_custom modul Postavljamo poziciju, popunjavamo podatke. Ispod vidimo urednika. U uređivaču kliknite na HTML dugme:

I ubacite skriptu ili kod banera koji nam je potreban. Napomena: imajte na umu da se koristi uređivač TinyMSE, ako ste instalirali drugi uređivač onda se morate prebaciti na TinyMSE ako nema HTML dugmeta u HTML dugmetu koje ste instalirali.

Zdravo momci!

Danas sam odlučio da se dotaknem teme koja nikada neće prestati biti aktuelna među mladim kreatorima web stranica.

Uvijek postoji potreba za prilagođavanjem web lokacija nakon što su kreirane. Neke od postavki se izvode uređivanjem datoteka instaliranog šablona kože. Na primjer, trebate umetnuti kod koji prikazuje slične zapise. Ali gdje ga ubaciti?

Vrlo često novajlije postavljaju takva pitanja. Brine ih i druga slična pitanja, čije je rješenje, u suštini, potpuno isto. Osim toga, u svojim budućim člancima često ću pribjeći umetanju kodova na razna mjesta u šablonu. Stoga je ovaj materijal korisniji nego ikad.

U ovom članku ću vam pokazati kako vam je vrlo lako definirati mjesto u WordPress predlošku gdje trebate umetnuti bilo koji kod. Takođe ću razmotriti druge važne tačke koje bi vas mogle zabrinjavati u početnoj fazi.

Počnimo od vrha i pogledajmo datoteke koje ćete možda morati urediti ako želite da ubacite kodove olovkama umjesto da koristite dodatke, jer postoji takva opcija. Ne pozdravljam ga, ali za najlijenje ljude opisat ću takve dodatke u sljedećim člancima.

Na samom početku dajem video lekciju, jer će bez nje biti teško razumjeti materijal predstavljen u tekstualnom formatu u nastavku.

Sada ću sve detaljno objasniti u tekstualnom formatu.

Fajlovi odgovorni za izlaz svake vrste stranice

Ako ste pročitali mnogo članaka na drugim blogovima o implementaciji nekih funkcija pomoću kodova (skripti), onda ste 100% sigurni da ste vidjeli fraze poput:

Zalijepite ovaj kod u datoteku odgovornu za prikaz glavne stranice;
Zalijepite ovaj kod u datoteku odgovornu za prikaz zapisa i drugih.

Postoji mnogo datoteka u koje ćete možda morati umetnuti kodove. Ali šta su ovi fajlovi? Sve je vrlo jednostavno.

Izlaz glavne stranice - index.php;
Izlaz zapisa - single.php fajl;
Prikaz stranica - datoteka page.php;
Prikaz arhiva i kategorija - archive.php;
Izlaz podnožja - footer.php;
Izlaz stranice pretrage - search.php;
Izlaz bočne trake - sidebar.php;
Fajl stilova - style.css;
Izlazni fajl od 404 stranice je 404.php.

Sada, kada vam kažu da treba da ubacite kod u taj i takav fajl, znaćete gde da tražite.

Ostaje samo odgovoriti na pitanje, kako odrediti pravo mjesto u svakoj od datoteka?

Odredite mjesto za umetanje koda

Prvo, prođimo kroz mjesta koja ne treba identifikovati. Svi će biti isti bez obzira na šablon.

Prvo mjesto, koje je identično za sve šablone, je područje u datoteci Header.php. Ovo su oznake za otvaranje i zatvaranje. .

Neke skripte se uvijek postavljaju između ovih tagova, koje bi trebale raditi za sve stranice stranice. Odnosno, između ovih oznaka smo postavili skriptu, na primjer, dugmad društvenih mreža i oni rade na svim stranicama stranice, gdje ćemo ih prikazati.

Ove oznake se nalaze na samom vrhu datoteke Header.php.

Sadržaj između njih će biti različit za svakoga, jer sve zavisi od šablona.

Ako vam je rečeno da zalijepite ovaj kod između početne i završne oznake glave, zatim kopirajte kod, potražite slično područje u datoteci predloška i jednostavno ga zalijepite između tih oznaka.

Drugo mjesto, koje je također identično za sve šablone, nalazi se u datoteci footer.php odgovornom za prikaz podnožja.

Skripte se mogu povezati ne samo umetanjem između oznaka u datoteci Header.php. Možete ih učitati i putem footer.php datoteke, čime se ubrzava učitavanje stranice web stranice.

Činjenica je da kada se stranica počne učitavati, ona se učitava od vrha do dna. Ako su sve skripte na vrhu stranice, tada će se prikaz njenog sadržaja usporiti, jer je potrebno vrijeme da se skripte učitaju.

Naš zadatak je da što brže prikažemo sadržaj stranice i posjetiteljima i pretraživačima. U ovom slučaju, preporučljivo je učitati skripte na samom kraju stranice kako bi se prvo prikazao sadržaj, a zatim učitali sve ostalo.

Da biste to uradili, potrebno je da otvorite datoteku footer.php i umetnete skriptu ispred završne oznake tela. Nalazi se na kraju sadržaja datoteke, jer je odgovoran za kraj područja stranice.

Kao što vidite, donio sam sve skripte u ovoj oblasti, prije završne oznake(naglašeno plavim okvirom). Inače, izveo sam ih učitavanjem iz fajlova, a ne postavljanjem samih skripti u ovo područje. Nakon toga, mnogo sam ubrzao svoj blog. Bit će poseban članak o tome kako to učiniti. Čekaj!

Nadajmo se, kada vam se kaže da umetnete kod u ova područja, to ćete obaviti bez ikakvih problema.

Pređimo na složenije pitanje i pokušajmo naučiti kako odrediti mjesta u drugim datotekama šablona u koje su umetnuti razni drugi kodovi. Obično ovi kodovi uključuju:

Prikaz sličnih postova;
Prikaz obrasca za pretplatu;
Prikaz društvenih dugmadi i tako dalje.

Sve te stvari se ubacuju iza glavnog dijela sadržaja, odnosno nakon kraja članka. Svaki od njih ima drugačiji šablonski kod i, stoga, univerzalni odgovor na pitanje "Gdje završava moj izlazni kod članka?" jednostavno ne.

Ali možete lako definirati kraj koda, nakon čega trebate implementirati funkciju koja vam je potrebna. Već sam djelomično prikazao ovu metodu u članku o odabiru WordPress šablona (). Zatim sam koristio standardnu funkcionalnost internet pretraživača.

Kako biste bolje razumjeli cijelu suštinu ove metode, toplo preporučujem da pogledate video na početku ovog posta. U njemu sam pokazao kako se sve dešava u realnom vremenu. E, sad ću pokušati da to što jasnije opišem.

Pokazat ću ga koristeći Google Chrome pretraživač kao primjer. U drugim pretraživačima ova funkcija je također dostupna, može se nazvati malo drugačije.

Google Chrome - pogledajte kod elementa;
Firefox - istražiti element;
Opera - pregledajte element.

Princip u 3 pretraživača je sličan. Sada ću vam pokazati kako odrediti gdje da prikažete bilo koje područje u bilo kojem predlošku.

Idite na prikaz koda elementa (Google Chrome). Desnom tipkom miša kliknite na prazno područje stranice.

Nakon toga se na dnu stranice pojavljuje panel koji prikazuje cijeli izvorni kod stranice, koji možemo uređivati i gledati kako će se struktura i izgled šablona mijenjati u realnom vremenu. Ali promjene podataka se ne pohranjuju. Da biste to učinili, morate urediti same datoteke šablona.

Ovako izgleda ovaj panel.

Strelicom sam pokazao na lupu (lupa), klikom na koju možemo pregledati strukturu šablona i odrediti od kojih blokova se sastoji naš šablon. Ovu funkciju nazivam inspektorom.

Nakon što kliknemo na inspektor, možemo pomaknuti miša preko naše stranice i vidjet ćemo da svi elementi nad kojima pređemo mišem počinju biti označeni pozadinom u boji. Kao primjer, prikazat ću screenshot iz članka o odabiru predloška. Tamo sam prešao preko naslova posta.

Ako trebamo umetnuti kod nakon izlaza našeg članka, onda neće biti teško pogoditi da trebamo pregledati područje našeg predloška i pronaći blok koji sadrži sav sadržaj članka. Možete tražiti i kraj i početak bloka. Odnosno, predložak možete pregledati odozdo i odozgo.

Ali evo jedne primjedbe ... Moramo pronaći ne samo redove članka, već i blokove u kojima se nalazi sam sadržaj, budući da u datotekama šablona nema članaka. Postoji samo kod koji prikazuje sadržaj, a zatvoren je u blokove. Nalazi se nakon oznake za zatvaranje bloka

i morat ćete zalijepiti kod.

Pa šta mi radimo? Kliknite na ikonu povećala i počnite pregledavati područje u kojem se nalazi naš članak. Morate pronaći takav dio stranice kada je područje cijelog članka istaknuto. Ovo će biti blok koji prikazuje sadržaj.

Na primjer, napravio sam novi članak s malim sadržajem da pokažem kako će ovaj blok biti istaknut.

Također biste trebali proviriti kako biste pronašli blok koji sadrži vaš sadržaj. Kada lebdite, vidite mali opis koji prikazuje ime ovog bloka.

Kada pronađete takav dio šablona, pritisnete tipku miša i ovaj dio postaje aktivan. Red koda sa ovim blokom će automatski biti istaknut na panelu za prikaz koda elementa.

Kao što vidite, ovaj blok ima potpuno isto ime kao u opisu alata za lebdenje.

Kada znamo naziv bloka u kojem se prikazuje glavni dio članka, možemo otići do tražene datoteke i iza ovog bloka umetnuti kod koji nam je potreban. Uzmimo post izlaznu datoteku (single.php) kao primjer.

Otvaram ga u Notepadu i tražim red u kodu koji počinje potpuno isto kao u panelu za prikaz koda elementa.

Vrlo je zgodno raditi u uređivaču Notepad, jer kada kliknete na početnu oznaku bloka, također je istaknuta i završna oznaka (prikazano na slici iznad). Krajnja oznaka označava da je ovo kraj izlaznog sadržaja. Nakon njega možemo umetnuti naše društvene gumbe, povezane postove i druge funkcije.

Upravo sam tamo ubacio dugmad društvenih mreža zajedno sa formom da se prijavim za ažuriranja.

Ovako su prikazani na stranicama.

Slično se ubacuje u druge šablonske fajlove (stranice, kategorije, arhive...).

Bez prakse, malo je vjerovatno da će se ova metoda umetanja savladati iz teksta i slika. Stoga, uzmite i probajte. Siguran sam da će sve uspjeti. Također kao pomoć video na početku članka.

O određivanju mjesta u datoteci šablona za naknadno umetanje željenog u njega, kada smo to shvatili.

Postoji još jedan poslednji trenutak, koji u ovom trenutku vrijedi posvetiti.

Postoje mnoge postavke koje zahtijevaju intervenciju u datoteci functions.php predloška. Ali, morate razumjeti i kako u njega umetnuti kodove.

Po pravilu, na svim blogovima pišu da se umetanje mora izvršiti na samom kraju datoteke prije završne oznake?>.

Ali šta ako ova oznaka nije u datoteci? Na primjer, jednostavno ga nemam. Kako biti u takvoj situaciji? Odsustvo završne oznake ne znači da je datoteka nevažeća. Blog radi. Dakle, sve je u redu.

U ovom slučaju predlažem da učinite suprotno - ubacite ga u kod na samom početku datoteke, prije oznake za otvaranje. Pogledajte sliku ispod.

Početni tag je označen crvenom bojom, a kod koji je umetnut je istaknut plavom bojom.

Ovo je jedna opcija. Također možete zalijepiti kod na kraj datoteke, ali prije posljednjeg koda. U ovom slučaju morate barem malo razumjeti gdje počinje posljednji kod, kako ga ne biste prekinuli.

To je sve. Ako iznenada imate istu situaciju sa odsustvom završne oznake u funsctions.php datoteci, znaćete kako da postupite.

Definiranje vizuelnih stilova u šablonu

Također, sami možemo vidjeti stilove dizajna za elemente stranice i mijenjati ih, kao i dodati svoje. Isti inspektor elemenata pomaže u tome.

Kada pronađemo traženi element i kliknemo na njega, stilovi za odabrani blok (element) se prikazuju u desnom dijelu panela za prikaz koda. Pokazat ću vam stilove za isti blok članaka o kojem smo gore govorili.

Ako želimo da uredimo ove stilove u realnom vremenu i vidimo kako će izgledati ovaj ili onaj element, možemo ih promeniti direktno u ovom panelu. Samo kliknite na vrijednosti željenih stilova i promijenite ih.

Ali promjene će važiti samo do osvježavanja 1. stranice. Da biste primijenili ove stilove, morate ih dodati u listu stilova predloška. Na jednoj od gornjih slika, pokazao sam plavim okvirom oblast koja pokazuje naziv datoteke u kojoj su ovi stilovi upisani, kao i tačnu liniju od koje počinju.

Stoga, otvorite stylesheet style.css i potražite liniju 890 u mom slučaju.

Ovdje ih možete urediti. Sačuvajte fajl i postavite ga na hosting.

Imajte na umu da uređujem sve datoteke na svom računaru. U ovom slučaju koristim eksterne programe, koji omogućavaju poništavanje bilo kakvih promjena ako se pojave problemi. Isto vrijedi i za razne eksperimente s kodovima i skriptama - sve je uključeno.

Toplo preporučujem da izvršite slično uređivanje svih datoteka na vašem računaru. Da biste to uradili, prvo morate da preuzmete datoteke na svoj računar sa svog hostinga koristeći ftp klijent. O ovome sam pisao u. A onda samo otvorite datoteke pomoću bilo kojeg uređivača koji vam odgovara koji ih može otvoriti. U tu svrhu koristim Notepad.

Ovim je članak završen. Evo tako lukavog procesa određivanja gdje da umetnete neki kod ili skriptu. Na prvi pogled, ovaj postupak može izgledati komplikovano. Ali sve je vrlo jednostavno. Pokušat ćete par puta i nećete postavljati takva pitanja.

Naravno, možete umetnuti kodove i skripte u svoj blog pomoću posebnih dodataka, što ću svakako razmotriti u sljedećim člancima. Ali, kako biste izbjegli njihovu upotrebu, takve radnje možete raditi i bez njih, što preporučujem. Na taj način ćete se riješiti nepotrebnog opterećenja stranice, ubrzati je i učiniti je pogodnijom za korištenje vašim posjetiteljima.

Svi prijatelji. Ovim se zaključuje. Čekam vaša pitanja u komentarima. Hajde da to shvatimo. Vidimo se u novim materijalima.

Srdačan pozdrav, Konstantin Khmelev.

Izdali smo novu knjigu „Marketing sadržaja na društvenim mrežama: Kako doći do glava pretplatnika i zaljubiti se u svoj brend“.

Postoji mnogo alata koji će vam pomoći da poboljšate svoju web stranicu, unaprijedite svoje poslovanje na mreži i poboljšate angažman kupaca. Mnogi od ovih alata su besplatni. Ali što ako niste web programer i ne znate kako ih instalirati na svoju web lokaciju? Ovo je velika prepreka.

Koliko god to ironično zvučalo, preduzeće koje razvija korisne alate za vašu web stranicu također ima prepreku vlastitom prosperitetu – potrebu da korisnicima nametne instalaciju svog koda.

Pokušajmo riješiti dva problema odjednom govoreći o najčešćim načinima umetanja JavaScript koda / isječaka (fragmenata) za web stranice:

Na WordPress-u.
Samostalni administrativni paneli (koristeći FTP stare škole).
U Squarespaceu.
Na Shopify.

Dotaknut ćemo se Wixa na kraju članka. U većini slučajeva, ova platforma ne dozvoljava instaliranje JavaScript kodova ili isječaka, ali nudi alternativu u obliku integracija za različite usluge.

Gdje dobiti kod za instalaciju

Pogledajmo gdje pronaći instalacioni kod koristeći uslugu Crazy Egg kao primjer.

Proces je standardan: unosimo podatke za registraciju, nakon učitavanja ulazimo u kontrolnu tablu. Tamo tražimo dio sa kodom.

Kako ugraditi kod u WordPress stranicu

Možete koristiti poseban dodatak - Tracking Code Manager.

Da biste umetnuli Menadžer kodova za praćenje, idite na administrativnu ploču stranice i potražite odjeljak dodataka na kontrolnoj tabli.

Odaberite funkciju "Dodaj novo".

Traka za pretragu će se pojaviti na desnoj strani. Unesite "Upravitelj kodova za praćenje", a zatim kliknite "Instaliraj sada".

Nakon završetka instalacije potrebno je provjeriti je li dodatak aktiviran. Idemo na podešavanja.

Kliknite na "Dodaj novi kod za praćenje".

Možete i bez dodatka za upravljanje kodovima za praćenje. U ovom slučaju, naša opcija je da zalijepimo kod u datoteku header.php WordPress teme (više o tome kasnije).

Kako instalirati kod na WordPress.com

WordPress stranica i WordPress.com stranica su dvije različite stvari.

WordPress stranica je stranica kojom upravlja CMS instaliran na vlastitom serveru. To znači da ste platili naziv domene (mojeime.com) i hosting.

Stranica WordPress.com je besplatna. Možete registrirati web stranicu na njoj bez plaćanja hostinga. U ovom slučaju, URL stranice će biti: myname.wordpress.com. Postoji nekoliko dodatnih koraka koje morate poduzeti da biste promijenili naziv svoje domene.

Kada pokrenete svoju web lokaciju na WordPress.com, ograničeni ste u izboru JavaScript kodova i isječaka koje možete instalirati. Razlog je u sigurnosnom protokolu - programeri ne dozvoljavaju korisnicima da ubace kodove u platformu. Na primjer, MySpace programeri su dozvolili. Očigledno, zbog toga je stranica pala sa 5. mjesta u svijetu na 1967. godinu za šest godina.

Istovremeno, WordPress.com nudi korisnicima razne bonuse za vođenje posla. Na primjer, integracija sa Google Analytics ili mogućnost dodavanja dugmadi društvenih medija. Ali u nekim slučajevima to možda neće biti dovoljno.

Kako instalirati JavaScript kodove i isječke na prilagođenom administrativnom panelu

Korištenje FTP-a. Morat ćemo se vratiti osnovama.

U današnje vrijeme mnoge web stranice su samostalno pisane. Samopisna stranica je kreirana od nule, ne koristi CMS za upravljanje sadržajem.

Zamislimo da imamo upravo takav sajt. Biće malo teže staviti kod na njega nego na WordPress, jer ćete morati da zapamtite FTP.

FTP menadžeri poput FileZilla vam omogućavaju da prevučete i ispustite datoteke i slike sa web stranice na server. Pomoću programa možete dodati datoteke na server ili ih preuzeti, zamijeniti stare datoteke novima, izbrisati nepotrebne podatke, promijeniti nazive dockova.

U protokolu prijenosa podataka nema ništa komplikovano: nakon 20 minuta možete se osjećati kao profesionalac. Za većinu ljudi, najteži dio je jednostavno kontaktirati server.

Ako imate bilo kakvih problema sa serverom, obratite se vašoj hosting kompaniji. Može potrajati sat vremena, ali nakon 60 minuta znat ćete sve što trebate znati. Obično preporučujem snimanje takvih razgovora putem ScreenRecorder-a. Ili barem pravite bilješke ručno.

Kada se prijavite na FTP server, obavezno to učinite. Ako pogriješite, važni fajlovi neće otići nikuda. Možete napraviti rezervnu kopiju jednostavnim prevlačenjem i ispuštanjem svih datoteka sa servera na računar.

Tipično, API FTP menadžera ima dvije kolone. Na primjer, na slici ispod, u lijevoj koloni, vidite datoteke koje su pohranjene na vašem računaru. Desno - fajlovi sa servera.

Da biste promijenili ili dodali datoteke, jednostavno ih prevucite i ispustite iz jedne kolone u drugu.

Upozorenje

Zamjena datoteka je opasna. Lako možete zamijeniti novu verziju datoteke starom i izgubiti više tekućih podataka, slučajno izbrisati nešto važno ili napraviti još jednu grešku. Rezervna kopija vam omogućava da se zaštitite od takvih grešaka i zaštitite se od nepotrebnih problema. Ne zaboravite da sačuvate sve datoteke u posebnoj fascikli na računaru pre nego što izvršite bilo kakve promene.

Kako umetnuti kod koristeći header.php

Recimo da imamo web stranicu kojom koristimo WordPress za upravljanje. Da bismo umetnuli kod, moramo pronaći datoteku header.php ili drugu datoteku koja se zove header ili glava.
Zaglavlje potrebno za aktiviranje koda ili JavaScript isječka na svim stranicama web stranice. Možete koristiti besplatni program kao što je Sublime Text da otvorite datoteku. Uz njegovu pomoć morate otvoriti datoteku koja je pohranjena na vašem računalu, a ne sličnu datoteku na serveru.

Kada otvorimo datoteku u Sublime Text-u, možemo vidjeti dugu iz koda boje. Ne bojte se, tamo je sve jednostavno.

Sve stranice su podijeljene u dva dijela - Glava i tijelo. Naslovi su označeni HTML kodom i... tijelo - i.

Većina stvari zbog kojih web stranica radi i prikazuje tekst nalazi se između ova dva odjeljka. Možete koristiti pretragu stranica da pronađete ove oznake.
U većini slučajeva možete umetnuti svoj kod neposredno prije završne oznake.

Nakon što ste umetnuli kod ili isječak, sačuvajte datoteku i otpremite je na server. Spreman.

Sada o samopisnim admin panelima. Ako je vaša stranica napravljena ručno i ne možete pronaći datoteku zaglavlja ili zaglavlja, najvjerovatnije ćete morati ručno umetnuti kod u svaku stranicu. Najčešće to ne uzrokuje velike poteškoće.

Slika iznad je hipotetička HTML stranica koja se sastoji od četiri HTML datoteke. Ako želimo u njega umetnuti bilo koji kod, morali bismo otvoriti sve ove datoteke jedan po jedan i umetnuti kod ili isječak u oznake svakog od njih. Nakon toga, proces je standardan: datoteke spremamo i postavljamo na server umjesto starih.

Kako ugraditi kod na Squarespace web stranicu

Squarespace je olakšao svojim korisnicima. Možete koristiti "ubrizgavanje koda" za umetanje JavaScript koda ili isječka. U meniju idite na kartice Postavke> Napredno> Ubacivanje koda. Možete dodati kod na ili podnožje stranice.

Pronalazimo postavke.

Pomaknite se prema dolje i kliknite na "Napredno".

Odabiremo "Ubacivanje koda".

Zalijepite kod i sačuvajte promjene.

Kako ugraditi kod na Shopify

Na kontrolnoj tabli pronađite odjeljak sa Online prodavnicama i odaberite Teme.

Za pristup željenoj kartici kliknite na "Radnje" i odaberite "Uredi HTML/CSS".

Trebaju nam fragmenti.

Klikom na opciju otvara se dijaloški okvir sa mogućnošću dodavanja novog fragmenta.

Dajte isječku ime i kliknite na dugme Kreiraj isječak.

Unesite kod isječka u područje "tracking snippet.liquid". Kliknite na sačuvaj.

Kako ugraditi kod ako je vaša stranica na Wix-u

Wix je brzo postao popularan graditelj web stranica. Kao i WordPress.com, nameće ograničenja svojim korisnicima u mogućnosti umetanja kodova.

Ali Wix nudi rješenje u obliku Wix App Marketa. Tamo možete pronaći razne widgete za marketing, društvene mreže i analitiku. Inače, tamo možete glasati i za najpotrebniji widget.

Zdravo dragi prijatelji. Danas, u nastavku teme, ubrzavajući brzinu učitavanja bloga, razgovarajmo o mogućnosti zamjene dodataka "lakim" skriptama. Skripte, za razliku od dodataka, imaju mnogo manje opterećenje na serveru, pa će stoga i brzina učitavanja stranice biti veća. Danas postoji mnogo dodataka i oni su u stanju da reše mnoge probleme blogera. Ali često se ovi dodaci mogu zamijeniti bržim skriptama. A ponekad možete potpuno onemogućiti nepotrebne dodatke. I što je manje dodataka trećih strana, veća je brzina učitavanja stranice ili bloga.

Ako analizirate brzinu učitavanja stranice, možete vidjeti koji dodaci usporavaju brzinu učitavanja vaše stranice. Koje usluge koristiti za verifikaciju sam napisao. U mom slučaju, najveća kočnica je dodatak koji vam omogućava da prikažete primjere izvornog koda u člancima, uz isticanje sintakse za ovaj kod. Ovaj dodatak se zove SyntaxHighlighter.

Rezultat testa nije stao ni na stranicu. Naravno, isticanje koda je jako lijepo, ali ako shvatite, ne radi se o isticanja. Uglavnom, efikasnost koda je važna. A ako je kod upravo umetnut, onda postoji velika vjerovatnoća njegove neoperabilnosti.

A danas ću vam reći kako zamijeniti dodatak SyntaxHighlighter običnim kodom, pa čak i umetnuti dugme u panel za uređivanje vašeg bloga.

Kako unijeti kod u članak bez dodatka

Poznato je da je u WordPress-u, da bi se prikazao primjer izvornog koda u članku, kada kucate članak iz vizualnog uređivača, dovoljno je otići na probni i priložiti traženi kod u tagove

Vaš kod

Ali takav kod teško da će se isticati u većini teksta vašeg članka. I tako možete dodati više stilova, recimo, boju pozadine, boju fonta, ivicu i tako dalje. Na taj način će vaš kod biti najjasnije predstavljen u obliku primjera.

Kako promijeniti prikaz prikazanog koda

Ovo je prilično jednostavno za napraviti.

Opcija 1

Možete dodijeliti oznaku

Class, na primjer, class = "cod" i postavite potrebne stilove u style.css datoteci.
.cod (širina: auto; boja pozadine: bijeli dim; ivica: 1px čvrsta # C7C3C3; radijus granice: 5px; boja: # 167dec;) Opcija 2
Stilove možete postaviti direktno prilikom umetanja koda.  To će izgledati otprilike ovako:
 
Vaš kod
 
I u prvom i drugom primjeru, ako umetnuti kod izađe izvan granica članka, trebali biste dodati svojstvo overflow: auto;  što će vam omogućiti da manipulišete blok elementom.
Ove metode su dobre za sve, ali ja bih volio nešto jednostavnije.  Općenito, opet, lijenost - motor napretka tjera vas da smislite nešto što će olakšati ovaj proces.
Kako dodati dugme "Insert Code" na vaš WordPress panel za uređivanje
Jednostavno dugme u WordPress panelu za uređivanje će olakšati ovaj proces.  I izgleda ovako.
Ako želite da stavite takvo dugme na sebe, onda će vam trebati nekoliko minuta vremena i nekoliko fajlova od mene.  Pa počnimo.