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

06.12.2021 Windows Phone

Štoviše, odmah želim pojasniti da ćemo kod umetnuti u sam članak, kako bi ga naši čitatelji mogli kopirati bez gubljenja vremena na tipkanje 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 napraviti razne vrste dodataka na stranici, ili korisnicima koji jednostavno žele podijeliti korisne informacije. I nema veze što je ova informacija šifra 🙂 Usput, otkrit ću malu tajnu, na ovom projektu to prikazujemo pomoću dodatka Wp-Syntex.

Pitate: "Zašto ga koristimo?" Odgovor je jednostavan - nema drugova za ukus i boju. 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.), a ne preopterećuje naše poslužitelju.

Pa, pošto sam o Wp-Syntexu promašio, upotrijebimo njegov primjer i pokažimo kako umetnuti kod u članke na WordPressu.

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. U ovom slučaju promijenit će se stil izgleda.

Dodatne funkcije Wp-Syntexa

Ako dodate atribut crta, odnosno kod koji ćete morati umetnuti će početi ovako:

Kôd koji želite da bude prikazan

Nadam se da ste primijetili razliku?

Postoji još jedan mali atribut koji bi vam mogao zatrebati - ovo je pobjegao... Omogućuje vam pretvaranje html kodova znakova izravno u same znakove. Na primjer, "& gt" se pretvara u ">". Kako bi ova funkcija radila, umetnite sljedeći atribut u početnu oznaku "pre":

escaped = "istina"

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

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

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

Odmah nakon što sam ga instalirao, uznemirila me činjenica da se dugo nije ažurirao i da nije testiran s našom verzijom Wordpressa. Pa što da kažem, moji strahovi su bili opravdani.

Nakon što sam aktivirao WP-Syntax Button, odlučio sam umetnuti java skriptu u jedan od naših članaka. Učinio sam sve kako je naznačeno u planinskim uputama i preporukama. Umetnuo sam skriptu u članak, odabrao je i kliknuo gumb "šifra".

Zatim je naznačio programski jezik i broj retka 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 objave. Uostalom, postoji vrlo velika vjerojatnost da su informacije u starom članku bile relevantne prije nekoliko godina, ali trenutno jednostavno ne funkcioniraju, a njegova 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, po potrebi, prilagođavam već napisane članke.

Ako želite primati ažurne informacije sebi na e-mail, onda to preporučam.

Video "Kako umetnuti HTML kod u članak"

Prijatelji, ako netko više voli vidjeti 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 bez nepotrebnih problema ubaciti html kod u web stranicu.

Nemojte zanemariti estetski izgled vašeg bloga. Uostalom, naš čitatelj, kao i u životu, susreće se na odjeći i ispraća prema umu.

To je sve za mene!

Doviđenja!

Srdačan pozdrav, Anton Kalmykov

Razgovarajmo o tome kako umetnuti kod na web stranicu, kako u Artisteer umetnuti html kod, brojač kod, skriptni kod treće strane. U samom programu kod se može umetnuti na dva mjesta, prvo je prilikom kreiranja podnožja klikom na gumb "tekst", a drugo je na samom dnu stranice, prilikom postavljanja postavki izvoza, " Kartica Opis". U potonjem je još prikladnije umetnuti nakon što je predložak stvoren.

Kako umetnuti kod brojača

Kod brojača može se umetnuti pri dnu stranice na mjesto naznačeno na slici, ovo je najlogičnije mjesto.
U predlošcima Joomla kod brojača može se umetnuti otvaranjem stranice index.php u mapi predloška s notesom. Na dnu reda nalazimo:

a umjesto retka „Designed by Postoji još jedna mogućnost umetnuti modul s kodom u poziciji za otklanjanje pogrešaka da biste to učinili, stvorite besplatni modul (kao što je opisano u nastavku) i umetnite kod u njega.

U predlošcima WordPress brojač kod na ovom mjestu (na dnu stranice) možete umetnuti otvaranjem footer.php datoteke napravljenog predloška i pronalaženjem redaka:

Zamjena 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 temastvoreno s Artisteerom

Na kod vašeg brojila.

U predlošcima Drupal kod brojača limenka umetnuti otvaranjem stranice page.tpl.php predloška napravljenog zamjenom koda na samom dnu:

PHP kod:

" " ... t ("Drupal"). "". t ("i"). "Drupalna tema"... t ("stvoreno sa"). "Umjetnik"; ?>.

Na kodu brojača ili gumba.

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

Umetnite HTML kod u Joomla modul

Da biste umetnuli kod u Joomla 1.5 (u joomli 1.7 se umeće slično), potrebno je kreirati novi HTML modul, u admin panelu otvoriti Extensions -> Module Manager -> gumb kreirajte modul -> odaberite Custom HTML code -> gumb dalje. Zatim dolazimo do onoga što smo stvorili mod_custom modul Postavljamo poziciju, popunjavamo podatke. U nastavku vidimo urednika. U uređivaču kliknite gumb HTML:

I umetnite skriptu ili kod bannera 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 u HTML gumbu koji ste instalirali nema HTML gumba.

Bok dečki!

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

Uvijek postoji potreba za prilagodbom stranica nakon što su stvorene. Neke od postavki izvode se uređivanjem datoteka instaliranog predloška kože. Na primjer, trebate umetnuti kod koji prikazuje slične zapise. Ali gdje ga umetnuti?

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

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

Počnimo od vrha i pogledajmo datoteke koje biste možda trebali urediti ako želite umetnuti kodove olovkama umjesto upotrebom dodataka, jer postoji takva opcija. Ne pozdravljam ga, ali za najlijenije 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.

Datoteke odgovorne 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 izraze 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 koje su to datoteke? Sve je vrlo jednostavno.

Izlaz glavne stranice - index.php;
Izlaz zapisa - single.php datoteka;
Prikaz stranica - datoteka page.php;
Prikaz arhiva i kategorija - archive.php;
Izlaz podnožja - footer.php;
Izlaz stranice za pretraživanje - search.php;
Izlaz bočne trake - sidebar.php;
Datoteka stilova - style.css;
Izlazna datoteka 404 stranice je 404.php.

E sad, kad vam kažu da trebate umetnuti kod u tu i takvu datoteku, znat ćete gdje tražiti.

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 identificirati. Svi će biti isti bez obzira na predložak.

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

Neke skripte se uvijek postavljaju između ovih oznaka, koje bi trebale funkcionirati za sve stranice web-mjesta. Odnosno, između ovih oznaka stavili smo skriptu, na primjer, gumbe 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 bit će različit za svakoga, budući da sve ovisi o predlošku.

Ako vam se kaže 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 predloške, nalazi se u datoteci footer.php odgovornoj za prikaz podnožja.

Skripte se mogu povezati ne samo umetanjem između oznaka u datoteci Header.php. Također ih možete učitati kroz datoteku footer.php, čime se ubrzava učitavanje stranice 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š je zadatak što brže prikazati sadržaj stranice i posjetiteljima i tražilicama. U tom slučaju preporučljivo je učitati skripte na samom kraju stranice kako bi se prvo prikazao sadržaj, a zatim učitalo sve ostalo.

Da biste to učinili, morate otvoriti datoteku footer.php i umetnuti skriptu prije završne oznake tijela. Nalazi se na kraju sadržaja datoteke, jer je odgovoran za kraj područja stranice.

Kao što vidite, donio sam sve skripte u ovom području, prije završne oznake(istaknuto plavim okvirom). Inače, iznio sam ih učitavanjem iz datoteka, a ne postavljanjem samih skripti u ovo područje. Nakon toga sam dosta ubrzao svoj blog. Bit će poseban članak o tome kako to učiniti. Čekati!

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

Prijeđimo na složenije pitanje i pokušajmo naučiti kako odrediti mjesta u drugim datotekama predložaka u koje su umetnuti razni drugi kodovi. Ti kodovi obično uključuju:

Prikaz sličnih postova;
Prikaz obrasca za pretplatu;
Prikaz gumba društvenih mreža i tako dalje.

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

Ali možete jednostavno definirati kraj koda, nakon čega trebate implementirati funkciju koja vam je potrebna. Ovu metodu sam već djelomično prikazao u članku o odabiru WordPress predloška (). Zatim sam koristio standardnu funkcionalnost internetskog preglednika.

Kako biste bolje razumjeli cijelu bit ove metode, toplo preporučam da pogledate video na početku ovog posta. U njemu sam pokazao kako se sve događa u realnom vremenu. E, sad ću to pokušati što jasnije opisati.

Prikazat ću ga pomoću preglednika Google Chrome kao primjer. U drugim preglednicima ova je funkcija 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 preglednika je sličan. Sada ću vam pokazati kako odrediti gdje prikazati 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 predloška mijenjati u realnom vremenu. Ali promjene podataka se ne spremaju. Da biste to učinili, morate urediti same datoteke predloška.

Ovako izgleda ovaj panel.

Strelicom sam pokazao na povećalo (povećalo), klikom na koje možemo pregledati strukturu predloška i odrediti od kojih se blokova sastoji naš predložak. Ovu funkciju nazivam inspektorom.

Nakon što kliknemo na inspektor, možemo prijeći mišem 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 snimku zaslona iz članka o odabiru predloška. Tamo sam lebdio iznad 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 retke članka, već i blokove u kojima se nalazi sam sadržaj, budući da u datotekama predložaka 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.

Što onda radimo? Kliknite na ikonu povećala i počnite pregledavati područje u kojem se nalazi naš članak. Takav dio stranice morate pronaći kada je istaknuto područje cijelog članka. 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 zadržite pokazivač, vidjet ćete mali opis koji prikazuje naziv ovog bloka.

Kada pronađete takav dio predloška, pritisnete tipku miša i ovaj dio postaje aktivan. Redak koda s ovim blokom automatski će se istaknuti na panelu prikaza koda elementa.

Kao što možete vidjeti, 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 za primjer izlaznu datoteku posta (single.php).

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

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

Upravo sam tamo umetnuo gumbe društvenih mreža zajedno s obrascem za prijavu na ažuriranja.

Ovako se prikazuju na stranicama.

Slično se umeće u druge predloške datoteke (stranice, kategorije, arhive...).

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

O određivanju mjesta u datoteci predloška za naknadno umetanje željenog u nju, kada smo to shvatili.

Postoji još jedan posljednji trenutak, što je vrijedno posvetiti u ovom trenutku.

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

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

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

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

Početna oznaka označena je crvenom bojom, a kod koji je umetnut je označen plavom bojom.

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

To je sve. Ako se iznenada dogodi ista situacija s izostankom završne oznake u datoteci funsctions.php, znat ćete kako postupiti.

Definiranje vizualnih stilova u predlošku

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 je gore raspravljano.

Ako želimo uređivati ove stilove u stvarnom vremenu i vidjeti kako će izgledati ovaj ili onaj element, možemo ih promijeniti izravno u ovoj ploči. Samo kliknite na vrijednosti željenih stilova i promijenite ih.

No promjene će vrijediti samo do osvježavanja 1. stranice. Da biste primijenili ove stilove, morate ih dodati u tablicu stilova predloška. Na jednoj od gornjih slika pokazao sam s plavim okvirom područje koje pokazuje naziv datoteke u kojoj su ti stilovi napisani, kao i točan red od kojeg počinju.

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

Ovdje ih možete urediti. Spremite datoteku i prenesite je na hosting.

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

Toplo preporučujem da također izvršite slično uređivanje svih datoteka na vašem računalu. Da biste to učinili, prvo morate preuzeti datoteke na svoje računalo sa svog hostinga pomoću ftp klijenta. O ovome sam pisao u. A zatim jednostavno otvorite datoteke bilo kojim uređivačem koji vam odgovara koji ih može otvoriti. U tu svrhu koristim Notepad.

Ovim je članak završen. Ovdje je tako lukav proces određivanja gdje treba umetnuti neki kod ili skriptu. Na prvi pogled ovaj postupak može izgledati komplicirano. Ali sve je vrlo jednostavno. Pokušat ćeš par puta i nećeš 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. Time ćete se riješiti nepotrebnog opterećenja stranice, ubrzati je i učiniti je praktičnijom za korištenje vašim posjetiteljima.

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

Srdačan pozdrav, Konstantin Khmelev.

Izdali smo novu knjigu “Content Marketing na društvenim mrežama: Kako doći do glava pretplatnika i zaljubiti se u svoju marku”.

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

Koliko god ironično zvučalo, tvrtka koja razvija korisne alate za vašu 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 WordPressu.
Samostalne administratorske ploče (pomoću starog FTP-a).
Na Squarespaceu.
Na Shopifyju.

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

Gdje dobiti instalacijski kod

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

Proces je standardan: unosimo podatke za registraciju, nakon učitavanja ulazimo u nadzornu ploču. Tamo tražimo odjeljak s kodom.

Kako ugraditi kod u WordPress stranicu

Možete koristiti poseban dodatak - Tracking Code Manager.

Da biste umetnuli Upravitelj kodova za praćenje, idite na administrativnu ploču web-mjesta i potražite odjeljak dodataka na upravljačkoj ploči.

Odaberite funkciju "Dodaj novo".

Traka za pretraživanje će se pojaviti s desne strane. Unesite "Upravitelj kodova za praćenje", a zatim kliknite "Instaliraj sada".

Nakon završetka instalacije, morate biti sigurni da je dodatak aktiviran. Idemo na postavke.

Kliknite "Dodaj novi kôd za praćenje".

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

Kako instalirati kod na WordPress.com

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

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

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

Kada pokrenete svoju web stranicu na WordPress.com, ograničeni ste u izboru JavaScript kodova i isječaka koje možete instalirati. Razlog je u sigurnosnom protokolu – programeri ne dopuštaju korisnicima umetanje kodova u platformu. Na primjer, MySpace programeri su dopustili. Očito je to razlog zašto je stranica pala s 5. mjesta u svijetu na 1967. u šest godina.

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

Kako instalirati JavaScript kodove i isječke na prilagođenu administratorsku ploču

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

Danas su mnoge stranice samopisne. Samopisna stranica je napravljena od nule, ne koristi CMS za upravljanje sadržajem.

Zamislimo da imamo upravo takvo mjesto. Bit će malo teže staviti kod na njega nego na WordPress, jer ćete se morati sjetiti FTP-a.

FTP menadžeri poput FileZilla omogućuju vam da povučete i ispustite datoteke i slike s web stranice na poslužitelj. Pomoću programa možete dodati datoteke na poslužitelj ili ih preuzeti, zamijeniti stare datoteke novima, izbrisati nepotrebne podatke, promijeniti nazive dokova.

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

Ako imate bilo kakvih problema s poslužiteljem, obratite se svojoj hosting tvrtki. Može potrajati sat vremena, ali nakon 60 minuta znat ćete sve što trebate znati. Obično preporučam snimanje takvih razgovora putem ScreenRecordera. Ili barem ručno pravite bilješke.

Kada se prijavite na FTP poslužitelj, svakako to učinite. Ako pogriješite, važne datoteke neće otići nikamo. Možete napraviti sigurnosnu kopiju jednostavnim povlačenjem i ispuštanjem svih datoteka s poslužitelja na svoje računalo.

API FTP upravitelja obično ima dva stupca. Na primjer, na slici ispod, u lijevom stupcu, vidite datoteke koje su pohranjene na vašem računalu. S desne strane - datoteke s poslužitelja.

Da biste promijenili ili dodali datoteke, jednostavno ih povucite i ispustite iz jednog stupca u drugi.

Upozorenje

Zamjena datoteka je opasna. Možete jednostavno zamijeniti novu verziju datoteke starom i izgubiti više aktualnih podataka, slučajno izbrisati nešto važno ili napraviti još jednu pogrešku. Sigurnosna kopija omogućuje vam da se zaštitite od takvih pogrešaka i zaštitite se od nepotrebnih problema. Ne zaboravite spremiti sve datoteke u zasebnu mapu na računalu prije bilo kakvih promjena.

Kako umetnuti kod pomoću header.php

Recimo da imamo web stranicu kojom upravljamo WordPressom. Da bismo umetnuli kod, moramo pronaći datoteku header.php ili drugu datoteku pod nazivom Zaglavlje ili glava.
Zaglavlje potrebno za aktiviranje koda ili JavaScript isječka na svim stranicama web-mjesta. Za otvaranje datoteke možete koristiti besplatni program kao što je Sublime Text. Uz njegovu pomoć morate otvoriti datoteku koja je pohranjena na vašem računalu, a ne sličnu datoteku na poslužitelju.

Kada otvorimo datoteku u Sublime Textu, 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 pretraživanje stranica da biste pronašli 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, spremite datoteku i prenesite je na poslužitelj. Spreman.

Sada o samopisnim administratorskim pločama. Ako je vaša stranica izrađena ručno i ne možete pronaći datoteku zaglavlja ili zaglavlja, najvjerojatnije ćete morati ručno umetnuti kod u svaku stranicu. Najčešće to ne uzrokuje velike poteškoće.

Slika iznad je hipotetska HTML stranica koja se sastoji od četiri HTML datoteke. Ako bismo htjeli u njega umetnuti bilo koji kod, morali bismo otvoriti sve te datoteke jednu po jednu i umetnuti kod ili isječak u oznake svake od njih. Nakon toga, postupak je standardan: spremamo datoteke i učitavamo ih na poslužitelj umjesto starih.

Kako ugraditi kod na Squarespace web stranicu

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

Pronalazimo postavke.

Pomaknite se prema dolje i kliknite na "Napredno".

Odabiremo "Ubacivanje koda".

Zalijepite kod i spremite promjene.

Kako ugraditi kod na Shopify

Na upravljačkoj ploči pronađite odjeljak s internetskim trgovinama i odaberite Teme.

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

Trebaju nam fragmenti.

Klikom na opciju otvorit će se dijaloški okvir s mogućnošću dodavanja novog fragmenta.

Dajte naziv isječku i kliknite na gumb Stvori isječak.

Unesite kôd isječka u područje "pracking snippet.liquid". Kliknite na Spremi.

Kako ugraditi kod ako je vaša stranica na Wixu

Wix je brzo postao popularan graditelj web stranica. Poput WordPress.com, svojim korisnicima nameće ograničenja 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. Usput, tamo također možete glasati za najpotrebniji widget.

Pozdrav 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 puno manje opterećenje na poslužitelju, pa će stoga i brzina učitavanja web-mjesta biti veća. Danas postoji puno dodataka i oni su u stanju riješiti mnoge probleme blogera. Ali često se ovi dodaci mogu zamijeniti bržim skriptama. A ponekad čak i potpuno onemogućite nepotrebne dodatke. Što je manje dodataka trećih strana, to je veća brzina učitavanja web-mjesta ili bloga.

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

Rezultat testa nije stao ni na stranicu. Naravno, isticanje koda je jako lijepo, ali ako ga skužite, ne radi se o isticanju. Uglavnom, učinkovitost koda je važna. A ako je kod upravo umetnut, postoji velika vjerojatnost njegove neoperabilnosti.

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

Kako unijeti kod u članak bez dodatka

Poznato je da je u WordPressu, za prikaz primjera izvornog koda u članku, prilikom upisivanja članka iz vizualnog uređivača dovoljno otići na testni i priložiti traženi kod u oznake

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, obrub i tako dalje. Tako će vaš kod biti najjasnije predstavljen u obliku primjera.

Kako promijeniti prikaz prikazanog koda

Ovo je vrlo jednostavno za napraviti.

opcija 1

Možete dodijeliti oznaku

Klasa, na primjer, class = "cod" i postavite potrebne stilove u datoteci style.css.
.cod (width: auto; background-color: whitesmoke; border: 1px solid # C7C3C3; border-radius: 5px; color: # 167dec;) Opcija 2
Stilove možete postaviti izravno prilikom umetanja koda.  Izgledat će otprilike ovako:
 
Vaš kod
 
A 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 manipulirate blok elementom.
Ove metode su dobre za sve, ali ja bih želio nešto jednostavnije.  Općenito, opet, lijenost - motor napretka tjera vas da smislite nešto što će olakšati ovaj proces.
Kako dodati gumb "Insert Code" na vašu ploču za uređivanje WordPressa
Jednostavan gumb na ploči za uređivanje WordPressa olakšat će ovaj proces.  A izgleda ovako.
Ako želite staviti takav gumb na sebe, onda će vam trebati nekoliko minuta vremena i nekoliko datoteka od mene.  Pa počnimo.