PHP-koodin lisääminen HTML:ään. Miten tämä tehdään oikein? Html-koodin lisääminen: kaikki mahdolliset vaihtoehdot Html-koodin lisääminen sivulle

Html-koodin lisäämismenetelmä vaihtelee hieman sen mukaan, mihin se tarkalleen on lisättävä. Tämän mukaisesti harkitsemme erilaisia ​​vaihtoehtoja.

Jos haluat lisätä html-koodin sivustoon ja erityisesti jollakin sivuston sivulla olevan artikkelin tekstiin, siirry hallintapaneeliin, valitse ja avaa haluamasi artikkeli muokattavaksi. Seuraavaksi visuaalinen muokkaustila on vaihdettava muokkaustilaan. Kun työskentelet CMS-järjestelmän kanssa, muuta tilaa napsauttamalla. Kopioi ja liitä sitten html-koodi suunniteltuun paikkaan.

Usein lisäämisen jälkeen haluat muotoilla koodia hieman, esimerkiksi asettaa tekstin kiertämään koodin toisella puolella. On olemassa yksinkertainen tapa tehdä tämä käyttämällä CSS-ominaisuuksia.

Tunnisteen käyttö

, kääri koodisi säiliöön. Tämä voidaan tehdä myös käyttämällä taulukkomuototunnisteita. Käytä tämän säilön sisällä "tyyli"-ominaisuutta asettaaksesi kaikki halutut attribuutit.

Varmistaaksesi, että visuaalinen editori ei leikkaa artikkelia tallennettaessa muutoksia, jotka sen mielestä eivät ole html-koodia, on parempi poistaa se käytöstä koodia lisättäessä. Editorin muutosten leikkaaminen on suunniteltu estämään mahdollisen haitallisen koodin uhka.

Kuinka visuaalinen editori poistetaan käytöstä?

Napsauta hallintapaneelissa "Sivusto" - " Yleiset asetukset" - "Sivusto" ja valitse "Visuaalinen editori" -riviltä "Ei editoria". Nyt on mahdollista muokata ja lisätä html-koodia html-kooditilassa. Kun olet liittänyt koodin ja tallentanut muutokset, visuaalinen editori voidaan ottaa uudelleen käyttöön.

Jos haluat muokata artikkelia uudelleen, myös html-koodi on syötettävä uudelleen. Joskus vaaditaan, että html-koodi näytetään jokaisella sivuston sivulla. HTML-koodin lisääminen niin, että se näkyy sivuston jokaisella sivulla.

Voit ratkaista tämän ongelman syöttämällä pääsivuston tiedoston Notepadilla tai muulla editorilla (oletusarvoisesti tämä on index.php tai index.html). SISÄÄN avaa tiedosto valitse haluamasi sijainti koodin liittämistä varten. Mukavuuden vuoksi voit asettaa hakuun lauseen, joka sijaitsee paikassa, johon sinun on lisättävä koodi, jotta löydät sen nopeammin. Kopioi sitten koodi ja liitä se haluamaasi paikkaan. Tarvittaessa koodi voidaan muotoilla samalla tavalla kuin artikkelissa on kuvattu koodin muotoilussa.

On monia työkaluja, jotka ovat valmiita auttamaan sinua parantamaan verkkosivustoasi ja lisäämään tehokkuutta online-liiketoimintaa ja luoda vuorovaikutusta asiakkaiden kanssa. Monet näistä työkaluista ovat ilmaisia. Mutta entä jos et ole verkkokehittäjä etkä tiedä kuinka asentaa niitä sivustollesi? Tämä on suuri este.

Niin ironiselta kuin se kuulostaakin, yritys, joka kehittyy hyödyllisiä työkaluja sivustollesi on myös este omalle hyvinvoinnillesi - tarve pakottaa käyttäjiä asentamaan koodisi.

Yritetään ratkaista kaksi ongelmaa kerralla puhumalla yleisimmistä tavoista lisätä JavaScript-koodia/katkelmia (fragmentteja) verkkosivustoille:

• WordPressillä.
• Itsekirjoitetut järjestelmänvalvojan tilit (vanhan koulun FTP:llä).
• Squarespacessa.
• Shopifyssa.

Artikkelin lopussa käsittelemme Wixiä. Useimmissa tapauksissa tämä alusta ei salli JavaScript-koodien tai -katkelmien asentamista, mutta se tarjoaa vaihtoehdon integraatioiden muodossa eri palveluille.

Mistä saan asennuskoodin?

Katsotaanpa, mistä etsiä asennuskoodia käyttämällä esimerkkinä Crazy Egg -palvelua.

Prosessi on vakio: syötämme rekisteröintitiedot, lataamisen jälkeen pääsemme kojelautaan. Sieltä etsimme koodin sisältävää osaa.

Kuinka lisätä koodia WordPress-sivustolle

Voit käyttää erityistä laajennusta – Tracking Code Manageria.

Voit lisätä Tracking Code Managerin siirtymällä sivuston järjestelmänvalvojan alueelle ja etsimällä laajennuksia ohjauspaneelista.

Valitse "Lisää uusi" -toiminto.

Oikealle tulee näkyviin hakupalkki. Kirjoita "Tracking Code Manager" ja napsauta sitten "Asenna nyt".

Kun asennus on valmis, sinun on varmistettava, että laajennus on aktivoitu. Siirrytään asetuksiin.

Napsauta "Lisää uusi seurantakoodi".

Voit tehdä ilman Tracking Code Manager -laajennusta. Tässä tapauksessa vaihtoehtomme on liittää koodi WordPress-teeman header.php-tiedostoon (lisää tästä myöhemmin).

Kuinka asentaa koodi WordPress.com-sivustolle

Verkkosivusto osoitteessa WordPress pohjainen ja WordPress.com ovat kaksi eri asiaa.

WordPress-verkkosivusto on verkkosivusto, jota hallitaan omalle palvelimelleen asennetulla CMS:llä. Tämä tarkoittaa, että olet maksanut Verkkotunnus(myname.com) ja isännöintiin.

WordPress.com on ilmainen. Voit rekisteröidä sille verkkosivuston maksamatta hosting-palvelusta. Tässä tapauksessa sivuston URL-osoite on: omanimi.wordpress.com. Jos haluat vaihtaa verkkotunnuksesi, sinun on suoritettava muutama lisävaihe.

Kun käytät sivustoa WordPress.comissa, sinulla on rajoitettu määrä JavaScript-koodeja ja -katkelmia, joita voit asentaa. Syynä on suojausprotokolla - kehittäjät eivät salli käyttäjien liittää koodeja alustalle. Esimerkiksi MySpace-kehittäjät sallivat sen. Tästä syystä sivusto putosi 5. sijasta maailmassa vuoteen 1967 kuudessa vuodessa.

Samaan aikaan WordPress.com tarjoaa käyttäjille erilaisia ​​bonuksia liiketoiminnan harjoittamiseen. Esimerkiksi integraatio Google Analyticsiin tai mahdollisuus lisätä sosiaalisen median painikkeita. Mutta joissakin tapauksissa tämä ei ehkä riitä.

JavaScript-koodien ja katkelmien asentaminen itse kirjoitettuun hallintapaneeliin

FTP:n käyttö. Meidän on palattava perusasioihin.

Nykyään monet verkkosivustot ovat itse kirjoitettuja. Itse kirjoitettu verkkosivusto luotiin tyhjästä, eikä se käytä sisällönhallintajärjestelmää sisällönhallintaan.

Kuvitellaan, että meillä on juuri tällainen sivusto. Koodin asettaminen siihen on hieman vaikeampaa kuin WordPressiin, koska sinun on muistettava FTP.

FTP-hallintaohjelmien, kuten FileZillan, avulla voit vetää ja pudottaa tiedostoja ja kuvia verkkosivustolta palvelimelle. Ohjelman avulla voit lisätä tiedostoja palvelimelle tai ladata niitä, korvata vanhoja tiedostoja uusilla, poistaa tarpeettomia tietoja, muuttaa telakoiden nimiä.

Tiedonsiirtoprotokollassa ei ole mitään monimutkaista: jo 20 minuutin kuluttua voit tuntea olosi ammattilaiseksi. Useimmille ihmisille vaikein osa on yksinkertaisesti yhteyden ottaminen palvelimeen.

Jos sinulla on ongelmia palvelimen kanssa, ota yhteyttä isännöintipalveluntarjoajaasi. Se voi kestää tunnin, mutta 60 minuutin kuluttua tiedät kaiken, mitä sinun tarvitsee tietää. Suosittelen yleensä näiden keskustelujen nauhoittamista ScreenRecorderilla. Tai ainakin tehdä muistiinpanoja käsin.

Kun olet kirjautunut FTP-palvelimelle, muista tehdä . Jos teet virheen, tärkeät tiedostosi eivät katoa minnekään. Voit tehdä varmuuskopion yksinkertaisesti vetämällä ja pudottamalla kaikki tiedostot palvelimelta tietokoneellesi.

Yleensä FTP-hallintaohjelmiston käyttöliittymä koostuu kahdesta sarakkeesta. Esimerkiksi alla olevassa kuvassa vasemmassa sarakkeessa näet tiedostot, jotka on tallennettu tietokoneelle. Oikealla ovat tiedostot palvelimelta.

Voit muuttaa tai lisätä tiedostoja vetämällä ne sarakkeesta toiseen.

Varoitus

Tiedostojen vaihtaminen on vaarallista. Voidaan helposti vaihtaa uusi versio vanha tiedosto ja menettää nykyistä enemmän tietoja, poistaa vahingossa jotain tärkeää tai tehdä toisen virheen. Varmuuskopio voit vakuuttaa itsesi tällaisten virheiden varalta ja suojautua tarpeettomilta ongelmilta. Muista tallentaa kaikki tiedostot erilliseen kansioon tietokoneellasi ennen muutosten tekemistä.

Kuinka liittää koodi käyttämällä header.php:tä

Oletetaan, että meillä on verkkosivusto, jonka hallintaan käytämme WordPressiä. Jotta voimme lisätä koodin, meidän on löydettävä header.php-tiedosto tai muu tiedosto nimeltä otsikko tai pää.
Otsikko tarvitaan JavaScript-koodin tai fragmentin aktivoimiseen sivuston kaikilla sivuilla. Voit avata tiedoston, jota voit käyttää ilmainen ohjelma kuten Sublime Text. Sen avulla sinun on avattava tiedosto, joka on tallennettu tietokoneellesi, ei vastaavaa tiedostoa palvelimelle.

Kun avaamme tiedoston Sublime Textissä, näemme sateenkaaren värikoodia. Älä pelkää, siellä kaikki on yksinkertaista.

Kaikki sivut on jaettu kahteen osaan – pää (otsikot) ja runko (runko). Otsikot on merkitty HTML-koodilla Ja. Runko - Ja.

Suurin osa asioista, jotka saavat sivuston toimimaan ja näyttämään tekstiä, sijaitsevat näiden kahden osion välissä. Voit etsiä nämä tunnisteet sivuhaun avulla.
Useimmissa tapauksissa voit lisätä koodin juuri ennen sulkevaa tagia.

Kun olet lisännyt koodin tai katkelman, tallenna tiedosto ja lähetä se palvelimelle. Valmis.

Nyt itse kirjoitetuista hallintapaneeleista. Jos sivustosi on luotu käsin, etkä löydä otsikko- tai otsikkotiedostoa, joudut todennäköisesti lisäämään koodin manuaalisesti jokaiselle sivulle. Useimmiten tämä ei aiheuta suuria vaikeuksia.

Yllä oleva kuva on hypoteettinen HTML-sivusto, joka koostuu neljästä HTML-tiedostoja. Jos halusimme liittää siihen koodia, meidän on avattava kaikki nämä tiedostot yksitellen ja liitettävä koodi tai katkelma niiden kunkin tunnisteisiin. Tämän jälkeen prosessi on vakio: tallenna tiedostot ja lataa ne palvelimelle vanhojen sijaan.

Kuinka upottaa koodi Squarespace-verkkosivustolle

Squarespace on tehnyt siitä helppoa käyttäjilleen. Voit lisätä JavaScript-koodin tai katkelman käyttämällä "koodin lisäystä". Valitse valikosta Asetukset > Lisäasetukset > Koodinsyöttö -välilehdet. Voit lisätä koodin tai verkkosivuston alatunniste.

Asetusten etsiminen.

Vieritä alas ja napsauta "Lisäasetukset".

Valitse "Koodiinjektio".

Liitä koodi ja tallenna muutokset.

Kuinka upottaa koodi Shopifyyn

Etsi ohjauspaneelista Verkkokauppa-osio ja valitse Teemat.

Pääset haluttuun välilehteen napsauttamalla "Toiminnot" ja valitsemalla "Muokkaa HTML/CSS".

Tarvitsemme palasia.

Napsauttamalla vaihtoehtoa avautuu valintaikkuna, jossa on mahdollisuus lisätä uusi fragmentti.

Anna katkelmalle nimi ja napsauta Luo katkelma -painiketta.

Kirjoita koodinpätkälle "tracking snippet.liquid" -alueelle. Napsauta "tallenna".

Kuinka lisätä koodi, jos sivusto on Wixissä

Wixistä on nopeasti tullut suosittu verkkosivustojen rakentaja. Kuten WordPress.com, se asettaa rajoituksia käyttäjiensä kyvylle liittää koodeja.

Mutta Wix tarjoaa ratkaisun Wix App Marketin muodossa. Sieltä löydät erilaisia ​​widgetejä markkinointiin, sosiaaliseen mediaan ja analytiikkaan. Siellä voit muuten äänestää myös eniten tarvittavaa widgetiä.

Haluatko lähettää koodin jonkinlaisen ratkaisun tai ohjeen kera verkkosivustollesi, mutta onko sinulla ongelmia sen kanssa? Opi tekemään kaikki oikein ja näytä koodi sellaisena kuin se näkyy koodieditorissa.

Koodin lisääminen ei vaikuta vaikealta tehtävältä, mutta vaikeuksia voi ilmetä, jos et tiedä joistakin säännöistä, joista keskustellaan.

Liitä koodi koodina

Jotta koodi voidaan lisätä verkkosivustoon, se kääritään tunnisteisiin

JA .  Tuloksena on seuraava rakenne:

 
Tässä on koodi
Selittääkseni lyhyesti ja ytimekkäästi, tässä mallissa kooditunniste kertoo selaimelle, mitä sen sisällä on ohjelmakoodi, ja esitunniste säilyttää rivinvaihdot, rivin sarkaimet (sisennykset) ja välilyönnit.
Näyttää siltä, ​​​​että kaikki on selvää eikä mitään monimutkaista, mutta ongelmana on, että jos haluat lisätä html-koodin tai merkkejä sisältävän koodin< , >, & , " , ` , silloin saattaa ilmetä ongelmia - selain käsittelee koodisi HTML-muodossa. Jos esimerkiksi haluat näyttää koodissa lomakkeen koodin painikkeella, syöttökenttiä jne., selain näyttää lomakkeen, ei sen koodia.
Pakokoodi
Tämän estämiseksi he tekevät niin sanottua koodinpoistoa – silloin yllä mainitut merkit korvataan niiden UTF-koodeilla.
Malli merkkien korvaamiseksi UTF-koodeilla
Alla on symbolit ja koodit, jotka korvaavat ne:
Kukaan ei tietenkään vaihda symboleja manuaalisesti - tämä tehdään ohjelmallisesti.  Helpoin työkalu tähän on online-koodin pakottaminen, jossa kaikki merkit korvataan hetkessä ja koodi säilyttää kaikki välilyönnit ja yhdysmerkit ja on täysin valmis lisättäväksi tagin rakentamiseen. 

Tämän seurauksena voit lisätä minkä tahansa koodin poistumisen jälkeen.  Näet esimerkin tällaisesta lisäyksestä alla olevan koodin poiston jälkeen:

 


 
 
 
 




 
Aiheeseen liittyvät julkaisut
Hei rakkaat lukijat!
Puhutaanpa sivuston ohjelmakoodista.  Verkkovastaavan on usein lisättävä koodi yhdelle tai useammalle verkkosivuston sivulle.  WordPress mahdollistaa php:n, javan, html:n, css:n jne.  koodi kahdella tavalla: as suoritettavat komennot, sivuston moottorin tulkitsemana ja tekstin muodossa, jota voidaan lukea ja kopioida.  Tässä artikkelissa tarkastellaan esimerkkejä koodin lisäämisestä WordPress-sivu jotta se näkyy oikein ja kauniisti vierailijoille. 
Koodi tekstinä: miksi sitä tarvitaan?
Tarve näyttää ohjelmakoodi WordPressissä ei ole yleistä.  On turvallista sanoa, että lääketieteen, rakennusalan tai kulinaaristen blogien omistajilla ei todennäköisesti ole tällaista kysymystä.  Samaa ei voida sanoa sellaisten projektien tekijöistä, jotka on omistettu sellaisille aiheille kuin luominen ja kehittäminen, web-suunnittelu ja ohjelmointi, sovelluskehitys jne.
Julkaisun tarve erilliset rivit koodi ei joskus rajoitu yksinkertaisesti lisäämiseen haluttu fragmentti verkkosivustolle.  Siihen liittyvä halu "tehdä se kauniisti" perustuu koodisyntaksin korostukseen ja tiettyihin toteutusmenetelmiin.  Koodin korostaminen verkkosivustolla voi merkittävästi helpottaa tietojen havaitsemista vierailijoille, jotka ovat tottuneet käyttämään edistyneitä muokkausohjelmia, kuten .
Jos vain liität koodin artikkeliin, WordPress tulkitsee sen ja vääristää sitä julkaistaessa.  Siksi tämäntyyppiset tiedot on aina käsiteltävä.  Tämä ongelma voidaan ratkaista monin eri tavoin: kirjoittamalla sivulle tarvittavat tagit manuaalisesti, käyttämällä WordPress-editoriin sisäänrakennettua painiketta ja käyttämällä erilaisia ​​​​liitännäisiä.
Kuinka lisätä koodia artikkeliin ilman laajennusta
WordPress tarjoaa sivuston ylläpitäjälle oman työkalun, joka on osa sisällönhallintajärjestelmää tämän ongelman ratkaisemiseksi.
Lohko, joka koostuu yhdestä tai useammasta visuaaliseen sisällön editoriin lisätystä koodirivistä; WordPress korvaa kaikki tunnisteiden merkit siirtyessään tekstitilaan< и >symboleja <
 Ja >

Se näyttää sisällönhallintajärjestelmälle, että tietyn koodinpalan pitäisi näkyä sivulla "sellaisenaan". tekstieditori WordPress on korostettava ja "käärittävä" tunnisteella työkalupalkin painikkeella:

Sivulla se näyttää suunnilleen tältä:











Nimi 1
Nimi 2


Arvo 1
Arvo 2


Jos haluat lisätä koodin WordPress-sivulle määritetyillä sisennyksillä, kun vaihdat visuaalisen sisällön muokkausohjelmasta tekstieditoriin, voit käyttää html-tunniste 
Säilytetään kaikki lisävälit, joita käytetään sisennysten muodostamiseen.  Elementin sisältö 
JA Oletuksena selaimet näyttävät sen monospace-fontilla.

Esimerkki HTML-koodin lisäämisestä sivulle ilman laajennuksia käyttämällä WordPressin tagia 

 

 

 
Nimi 1
 
Nimi 2
 
 

 
Arvo 1
 
Arvo 2
 

Siirry tagiin 
Yleisiä määritteitä voidaan soveltaa, erityisesti attribuuttia tyyli, jota käytetään elementin määrittämiseen CSS:n avulla.  Alla oleva esimerkki näyttää, kuinka attribuutit arvot tyyli näytettävän tekstin väri, lohkon taustaväri, lohkon reunan paksuus, väri ja kaarevuussäde asetetaan:


Mahdollisuudet muotoilla sivulla näkyviä lohkoja attribuuttien avulla ovat melko laajat, mutta eivät rajattomat.  Tarkastettujen tunnisteiden käyttö on perusteltua, kun sivulle on lisätty esimerkkeinä yksittäisiä rivejä tai pieniä koodinpätkiä.  NOIN kaunis muotoilu tässä tapauksessa ei tarvitse sanoa, lisäyksen tulos on erittäin minimalistinen, mutta monille tämä riittää.
Monimutkainen muotoilu, jonka avulla voit toteuttaa syntaksin korostuksen, on seurausta lisäosien työstä, jota käsitellään alla.
WordPressin koodin lisäyslaajennukset
Tarjoamme valikoiman useista laajennuksista virallisesta WordPress-arkistosta, joiden avulla voit näyttää minkä tahansa koodin (php, java, html, css) kauniisti: rivi riviltä ja elementtien asianmukaisella korostuksella.
SyntaxHighlighter Evolved

Yleinen laajennus koodin lisäämiseen WordPressiin, edistyksellinen ja tehokas, jonka asetussivulla voit ottaa käyttöön yhden seitsemästä käytettävissä olevasta teemasta ja tarvittaessa valita rivinumeroiden ja työkalurivien näyttämisen, tehdä URL-osoitteista klikattavia, tiivistää koodikentän, ja aseta automaattinen kääriminen pitkät linjat jne.  Siellä on myös visuaalinen esikatselu tulosteesta ja kuvaus käytetyistä attribuuteista.
Pluginissa SyntaxHighlighter Evolved kaikki mitä saatat tarvita.  Koodin lisääminen WordPress-artikkeliin sitä käyttämällä on erittäin helppoa; tehdäksesi tämän, sinun on sallittava laajennuksen käsitellä tagi asetuksissa. 
Tai käytä vastaavia lyhytkoodeja:
Esimerkki esimerkki esimerkki esimerkki
WP-syntaksi

Toinen laajennus, joka on ansainnut tunnustusta verkkovastaavien keskuudessa jo pitkään.  Tällä hetkellä virallisen arkiston tilastot osoittavat yli 10 tuhatta aktiivista asennusta.  Valitettavasti laajennusta ei ole päivitetty vuoteen, mutta se suorittaa edelleen asianmukaisesti ilmoitettuja toimintojaan.
WP-syntaksi ei ole omaa asetussivua.  Tämä WordPress-laajennus koodin muokkaamiseen, tarkemmin sen lisäämiseen ja syntaksin korostuksen tyypin muuttamiseen, käyttää tunnistetta 
Kielenvalintaattribuutilla:

 
esimerkki
esimerkki
esimerkki
Luettelo tuetuista kielistä löytyy laajennussivulta.
Attribuutti linja-tunnisteessa käytetään rivinumeroiden näyttämiseen; sen arvo vastaa rivinumeroa, josta lähtölaskenta alkaa.  Jos koodi sisältää HTML-objekteja, on suositeltavaa käyttää attribuuttia pakeni merkityksen kanssa totta vaihtoehtona:
esimerkki

Esimerkki CSS-koodin tulostamisesta ja korostamisesta laajennuksen avulla:
 1
2
3
4
5
6
7
8
.block ( reunus : 2px #8E0505 ; väri : #2D0000 ; /*tekstin väri*/ täyte : 2px ; /*pehmuste*/
 tekstin tasaus: vasen; /*tekstin tasaus*/ kirjasinperhe: arial;  fonttikoko: 14px;  )
Estä ( reunus: 2px #8E0505; väri: #2D0000; /*tekstin väri*/ täyte: 2px; /*täyte*/ tekstin tasaus: vasen; /*tekstin tasaus*/ font-family: arial; font-size : 14px ;)
Kun vaihdat html-editorista visuaaliseen tilaan, WordPress tulkitsee tagin 
Ja koodi ei näy oikein.  Siksi, kun muokkaat artikkeleita, joissa on lisätyt koodilohkot, sinun on käytettävä sisältöeditoria html-tilassa.

Koodi Prettify

Kevyt laajennus ilman asetuksia, jonka avulla voit lisätä koodia WordPress-sivustolle automaattisen korostuksen avulla ilman, että sinun tarvitsee määrittää kieltä.  Toteuttaa tagien taustavalon 
JA Sivulla.  Yksinkertainen moduulipohjainen ratkaisu Google Code Prettify -kirjasto niille, jotka eivät halua syventyä sivustolla näytettävän ohjelmakoodin lohkojen syntaksin muotoilun yksityiskohtiin.

Johtopäätös
Tässä artikkelissa käsitellyt laajennuspohjaiset ratkaisut ovat vain pieni osa arkiston tarjoamista WordPress-laajennukset.  Seuraamalla konsolin valikon linkkejä "Lisäosat - Lisää uusia" hakusivulle, tekijä avainsanoja Kohokohta Ja Syntaksi löydät useita kymmeniä muita samankaltaisia ​​laajennuksia, joiden avulla voit suunnitella ohjelmakoodisi kauniisti.  On tärkeää ymmärtää, kuinka relevantti ja tarpeellinen tällainen laajennus on sivustolla.  Ehkä sinun tapauksessasi on helpompi lisätä koodi WordPress-sivulle manuaalisesti tekstieditorissa tagien avulla 
JA .

Ennen lisää koodi sivustolle sinun on tiedettävä sivuston rakenne.  Koodia ei myöskään kannata liittää mihinkään.  varten tiettyjä elementtejä niille on varattu paikkoja.  He yrittävät esimerkiksi sijoittaa mainosbannereita sivuston yläosaan ja liikennelaskurit alaosaan.
Minkä koodin haluamme lisätä?
Haluamme esimerkiksi lisätä (liittää) jonkin javascriptin, kuten tavallista, komentosarjat joko sijoitetaan erilliseen tiedostoon tai sivuston yläosaan.
Jos haluat lisätä bannerin mainoksilla, on suositeltavaa valita sivuston yläosa (sivuston otsikko, navigointivalikko, tila viestin yläpuolella), mutta joissain tapauksissa mainosbannerit lisätään tekstin sisään tai loppuun. .
Sosiaalisten kirjanmerkkien (kuvakkeiden) koodi sijoitetaan ennen viestiä (sivun alkuun) ja loppuun.
Läsnäolomittarit, jos niitä on ollenkaan, sijaitsevat näytön alareunassa.
Tämä on vain pieni osa esimerkeistä.
Kussakin tapauksessa yksi tai toinen sivuston osa valitaan sen erityispiirteiden perusteella.
Etsimme (määrittelemme) tiedostoa koodin sijoittamiseksi
Useat tiedostot vastaavat yleensä sivuston näyttämisestä.  Tässä ovat suosituimmat WordPressissä: index.php;  single.php;  sivu.php;  header.php;  alatunniste.php;  sidebar.php;  tyyli.css.
Sivuston yläosa
Tiedosto vastaa yleensä yläosan tulostamisesta header.php (sivuston otsikko).  Tämän tiedoston alku näyttää yleensä tältä:

 
>
Voit liittää skriptin tähän

Tunnisteiden välissä sijoittaa skriptejä, jotka toimivat sivuston kaikilla sivuilla.
Näiden tunnisteiden sisältö voi vaihdella aiheittain.
Sivuston kotisivu
Näyttöä kohti kotisivu sivusto vastaa useimmiten käyttävällä index.php-tiedostolla php kieli Tämä tiedosto yhdistää koodia muista tiedostoista, esimerkiksi (header.php, footer.php), jolloin selaimessa näkyvä sivu kootaan useista tiedostoista.
Sivuston sivuvalikko
Tiedosto sidebar.php vastaa yleensä sivustopalkin (sivulohkon) näyttämisestä verkkosivustolla; tähän voit lisätä mainoksia sisältävän lohkon.
Tietueiden tulostaminen
Jos haluat muuttaa blogitekstien näyttöä, käytä single.php-tiedostoa.
Sivuston sivut
Voit vaihtaa sivuston sivuja käyttämällä page.php-tiedostoa.
Sivuston alatunniste
Toinen tiedosto, joka löytyy melkein jokaisesta mallista, on footer.php; voit myös sijoittaa siihen komentosarjoja; sitä käytetään usein liikennelaskurien lisäämiseen.
Sivun ulkonäkö
Jos haluat muokata sivuston näyttöä, tarvitset style.css-tiedoston.
Nyt tiedät suunnilleen mitkä tiedostot ovat vastuussa tiettyjen sivuston osien tuotosta.
Määritetään, mihin koodi lisätään
Ymmärtääksesi, mihin koodi lisätään, voit käyttää tavallista työkalua Google Chrome tehdäksesi tämän napsauttamalla oikealla painikkeella vie hiiren osoitin sivun vapaan osan päälle ja valitse Näytä koodi -välilehti.
Sen avulla voimme määrittää lohkon nimen yläpuolella, alla tai missä tarvitsemme liitä koodisi.
Valitse haluamasi lohko napsauttamalla punaisella korostettua painiketta ja osoita se haluamaasi kohtaan sivustolla.
Yläkuvassa näkyy paneeli, jossa näet sivuston tai valitun lohkon koodin.
Ota yhteyttä luokan nimi ylhäällä, alapuolella oleva lohko, johon voit lisätä koodin.
Syötä nyt tarvitsemasi koodi ja tarkista muutokset.