miten muokata WordPress Code (HTML, CSS, JavaScript, ja PHP)

We love WordPress! Voit ottaa yksinkertainen WP asennus ja muuttaa sen verkkosivuilla unelmiesi-ja tämä on luultavasti miksi WordPress on edelleen maailman eniten käytetty CMS. Vaikka plugins ovat arvokkaita tehdä sivustosi näyttää ja toimia haluamallasi tavalla, on päiviä, jolloin sinun täytyy muokata WordPress koodit (HTML, CSS, JavaScript, PHP) ydin tiedosto, viestit, ja sivut.

tässä artikkelissa, annamme sinulle askel askeleelta menettely, miten lisätä / muokata WordPress koodit.

Content

1. Editing codes in WordPress
   • Edit your HTML code in WordPress (Classic editor)
   • Add or Edit HTML Code in Gutenberg Editor
   • How to Add or Edit HTML Code in WordPress Widget
2. lähdekoodin muokkaaminen WordPress teema
   • miten muokata WordPress sivuston CSS
     • miten muokata WordPress CSS Through teema Editor
     • muokkaa WordPress CSS käyttäen Plugin
     • muokkaamalla WordPress CSS CSS kautta WordPress Customizer
   • kuinka lisätä JavaScript WordPress-sivustolle
     • miten lisätä otsikko – ja Alatunnistesarjoja Liitännäisellä
     • lisää JavaScript WordPress-julkaisuihin ja-sivuihin
   • editointi PHP WordPress
3. päätelmä

Editointikoodit WordPress

HTML, CSS, PHP ja JavaScript ovat neljä WordPressin käyttämää ohjelmointikieltä – jokaisella on oma funktionsa.

HTML esimerkiksi määrittelee sivustosi sisällön rakenteen, kun taas CSS määrittelee sivustosi visuaalisen ilmeen. JavaScript puolestaan Muokkaa HTML: ää ja CSS: ää dynaamisen toiminnallisuuden aikaansaamiseksi.

nyt katsotaan, miten näitä koodeja lisätään ja muokataan WordPressissä.

HTML-koodin muokkaaminen WordPressissä (WP Classic editor)

WordPress-julkaisun tai-sivun HTML-koodin muokkaaminen on melko suoraviivaista. Sinun ei tarvitse mennä yli kojelauta saada se tehdä. Yksinkertaisesti, klikkaa ’Teksti’ välilehti post / sivun editori.

tekstieditorilla voit lisätä, muokata ja poistaa HTML-koodia. Voit tarkastella muutoksia, klikkaa ’visuaalinen’ välilehti. Älä unohda tallentaa muutoksia.

kuinka lisätä tai muokata HTML-koodia Gutenberg-Editorissa

Gutenberg (block) – Editorilla on vielä enemmän joustavuutta. Voit tehdä muutoksia joko koko sivulle/viestiin tai yksittäiseen lohkoon.

jos haluat tehdä muutoksia kokonaisen julkaisun tai sivun HTML-muotoon, napsauta näytön oikeassa yläkulmassa olevia kolmea pistettä. Valitse ’Koodieditori’.

Nyt voit muokata viestin HTML-koodia. Jos haluat poistua Editorista, paina ”exit code editor” editorin yläreunassa.

kuten luultavasti tiedätte, Gutenberg-editori koostuu yksittäisistä palikoista, joita voidaan muokata itsenäisesti. Muokata HTML yksittäisen lohkon, yksinkertaisesti, mene lohko. Sitten, osuma kolme pistettä lohkon yläpuolella ja valitse ’Muokkaa HTML’.

voit käyttää myös muokattua HTML-estoa. Paina ”Lisää” – symbolia muokkaimen vasemmassa yläkulmassa lisätäksesi lohkon. Seuraava, klikkaa ’Custom HTML’ lohko ja kirjoita koodi tuloksena ruutuun.

voit napsauttaa ”Preview” nähdäksesi miltä se näyttää etupäässä.

älä unohda tallentaa muutoksia.

kuinka lisätä tai muokata HTML-koodia WordPress Widget

on päiviä, jolloin saatat joutua lisäämään HTML-koodia sivupalkkiin tai alatunnisteeseen sivustosi. Voit tehdä tämän, siirry ulkonäkö >> widgetit.

Etsi ’Custom HTML’-widget ja valitse pudotusvalikosta, mihin haluat luoda widget. Seuraava, osuma ’Lisää Widget’.

Input your HTML code and click ’Save’.

ja se siitä!

lähdekoodin muokkaaminen WordPress-teemalla

WordPress-teemat koostuvat erilaisista tiedostoista. Näitä ovat CSS -, PHP-ja JavaScript-tiedostot verkkosivustollesi. Toisin kuin muokkaamalla sivuston HTML, erityistä varovaisuutta on otettava, kun muokkaat teeman lähdekoodia. Tämä johtuu siitä, että voit rikkoa koko sivuston läpi tehdyt muutokset teema.

tässä muutama asia, jotka kannattaa huomioida ennen teeman lähdekoodin muokkaamista.

muokkaa lapsesi teemaa eikä vanhempiesi teemaa: jos haluat muokata teemasi tiedostoissa olevaa koodia, on suositeltavaa tehdä tämä lapsiteemalla.

tämä johtuu siitä, että kaikki muutokset ovat poissa, kun seuraavan kerran päivität teemasi. Mutta, kun käytät lapsi teema, muutokset pysyvät, vaikka päivität vanhemman teema.

jos haluat oppia luomaan lapsiteeman itsellesi, tutustu täydelliseen opetusohjelmaamme WordPress-lapsiteemoista.

tee täydellinen sivustoturva: Ennen muokkausta WordPress lähde tiedostoja, älä unohda varmuuskopioida sivuston. Katso meidän viesti siitä, miten luoda varmuuskopio, tietää, miten tehdä tämä. Toisaalta, voit luopua stressiä luoda varmuuskopioita, kun saat huoltosuunnitelman Fixrunner. Meillä on yöllinen taustatuki.

on olemassa 3 ensisijaista tapaa muokata teeman lähdekoodia: Teemaeditori, liitännäinen ja FTP.

miten muokata WordPress sivuston CSS

kuten aiemmin todettiin, sivustosi CSS vastaa sen visuaalisesta ilmeestä. Jos haluat muuttaa kirjasinperhettä, kokoa, värimaailmaa jne., Muokkaa CSS: ää.

voit muokata CSS: ää:

1. Theme Editor
2. käyttämällä WordPress Customizer
3. kanssa plugin

mikä tahansa näistä toimii aivan hyvin.

miten muokata WordPress CSS kautta teema Editor

jos et tiedä, WordPress mukana sisäänrakennettu teema editor. Voit tehdä muutoksia mallitiedostoihisi suoraan täältä.

päästäksesi teemaeditoriin, siirry ulkoasuun >> Teemaeditori.

koodieditori ja sivupalkki oikealla aukeavat näytöllesi. Valitse sivupalkista jokin teematiedostoista ja tee muutoksia tiedostoon.

näkemäsi tiedostot vaihtelevat teemoittain. Kuitenkin kaikki WordPress teemoja sisältävät nämä 2 tiedostoa:

• tyyli.css: Tässä voit muuttaa teeman fontteja, värimaailma, ja yleinen visuaalinen ilme.
• funktiot.php: Tämä tiedosto sisältää PHP-koodin, joka muuttaa sivustosi oletusominaisuuksia.

kohtaan päättyviä tiedostoja .css laajennus ovat CSS-tiedostoja. Tee haluamasi muutokset ja tallenna napsauttamalla ’Päivitä tiedosto’.

miten muokata WordPress CSS-koodi käyttäen Plugin

jos sinulla ei ole tietoa CSS tai haluat vain pysyä poissa koodit, voit käyttää plugin. Näin, voit muokata sivuston ulkoasua ilman tarvetta muokata teema tiedostoja.

esimerkiksi Custom CSS ja JS on liitännäinen, jonka avulla voit muokata sivustosi ulkonäköä ilman, että sinun tarvitsee muokata teematiedostojasi. Liitännäisen mukana tulee helppokäyttöinen tekstieditori syntaksikorostuksella.

voit lisätä niin monta koodia kuin haluat, etkä menetä niitä, kun vaihdat teemaa.

voit käyttää liitännäistä yksinkertaisesti lataamalla, asentamalla ja aktivoimalla sen.

muita css: n muokkaamiseen käytettyjä WordPress-liitännäisiä ovat muun muassa CSS hero, Genesis Extender plugin, WordPress Custom CSS jne.

muokata WordPress CSS-koodi kautta WordPress Customizer

sen sijaan, että käytät WordPress teema Editor, voit käyttää sisäänrakennettu WordPress Customizer.

jos haluat vierailla WordPress customizerilla, siirry kojelaudassa kohtaan ”Appearance >> Customize”:

next, click on Additional CSS.

koodieditori avautuu. Lisää mukautettu css ja paina Julkaise-painiketta.

JavaScriptin lisääminen WordPress-sivustoon

kun haluat lisätä dynaamista sisältöä, kuten animaatioita, laskimia, liukusäätimiä, videosoittimia tai niihin liittyviä interaktiivisia elementtejä, JavaScript on kätevä.

Voit myös joutua lisäämään JavaScriptin WordPress-verkkosivustollesi, kun tarvitset:

• Paranna liitännäisen toiminnallisuutta.
• Liitä sivustoosi ulkoinen elementti, kuten Google Analytics.
• piilota eli Näytä HTML-elementit.
• suorita monimutkaisia operaatioita CSS-muuttujilla.

nyt JavaScriptin lisääminen tai muokkaaminen ei ole yhtä helppoa kuin HTML: n tai CSS: n muokkaaminen. Kannattaa olla tarkkana, miten koodin kirjoittaa ja mihin sen lisää.

ensisijaisesti on kaksi paikkaa, joihin voi lisätä JavaScriptin:

1. aihepiirisi otsikko tai alatunniste: JavaScript lisätty näihin paikkoihin työmaan laajuisesti
2. sivun tai postauksen sisällä

miten lisätä otsikko-ja Alatunnistesarjoja Plugin avulla

helpoin tapa lisätä otsikko-ja alatunnistesarjoja WordPress on avulla plugin. Tämä menetelmä on arvokkaampi, jos haluat lisätä teema-riippumattomia skriptejä, jotka pysyvät, vaikka muutat teemaa.

WordPress korvaa oletusarvoisesti otsikkosi.php-tiedosto päivityksen aikana. Mutta kun käytät plugin, sinun ei tarvitse huolehtia lisäämällä koodin uudelleen, vaikka teet päivityksen tai muuttaa teemaa.

esimerkki tästä liitännäisestä on Insert Headers and Footers-lisäosa:

sen avulla voit helposti lisätä insert-koodin WP-sivuston otsikkoon ja alatunnisteeseen. Kun haluat lisätä Google Analytics skriptejä, tai Facebook pixel koodi, Tämä plugin on kätevä.

voit käyttää liitännäistä, asentaa ja aktivoida sen. Käytä JavaScript-muokkainta avaamalla Asetukset > lisää otsikoita ja alatunnisteita:

sivu sisältää 3 tekstiruutua, joissa voit lisätä skriptejä sivustosi otsikkoon, vartaloon ja alatunnisteeseen.

kun olet lisännyt skriptisi haluttuun osioon, paina sivun alareunassa olevaa Tallenna-painiketta.

Sivuhuomautus: jotkut teemat (kuten Genesis Framework) tulevat tällaista toiminnallisuutta (ne voit lisätä koodit missä tahansa sivustossasi), joten et tarvitse plugin.

miten JavaScript lisätään WordPress-julkaisuihin ja sivuille

sen lisäksi, että JS-koodit lisätään sivustosi otsikkoon ja alatunnisteeseen (joka toimii koko sivuston laajuisesti), voit lisätä ne erikseen viesteihin ja sivuille.

ensimmäisenä tulee asentaa Code upota-liitännäinen. Aktivoi se sitten.

Seuraavaksi sinun tulee ottaa käyttöön muokatut kentät viestiäsi tai sivuasi varten.

jos käytät klassista editoria, Avaa sivu tai viesti, johon sinun on lisättävä JS-koodi WP-editorissa. Sitten, klikkaa ’ näytön asetukset ’oikeassa yläkulmassa kojelaudan ja tarkista’ Custom kentät ’ vaihtoehto.

jos käytät Gutenberg-muokkainta, pääset WP custom fields-ominaisuuteen seuraavasti:

Napsauta 3 pystysuoraa pistettä näytön oikeassa yläkulmassa ja valitse Asetukset:

valitse seuraavaksi ”Custom fields” – ruutu, joka sijaitsee Advanced Panels-osion alla.

nyt, ’Custom kentät’ vaihtoehto toimii täysin sivustosi.

näin tehdään seuraavaksi. Vieritä viestisi alareunaan (joko classic tai Gutenberg editor), näet osion, johon mukautettuja kenttiä voidaan lisätä.

valitse Kirjoita uusi ja syötä nimi uudelle mukautetulle kentällesi ’Nimi’ – ruutuun (alkakoon nimi sanalla koodi, esim.CODEjsforpage). Sitten,’ arvo ’ – ruutuun, kirjoita JS koodi pätkä. Lopuksi, Tallenna muutokset lyömällä ’Lisää mukautettu kenttä’ nappi.

tässä vaiheessa voit lisätä JS-koodisi mihin tahansa viestiin tai sivulle. Yksinkertaisesti, lisätä upottaa koodi: {{CODEjsforpage}} missä haluat koodin olevan.

editointi PHP WordPress

on olemassa 2 ensisijaista tapaa muokata PHP WordPress – WP-koodieditorissa ja FTP-asiakasohjelmassa.

1. WordPress Code Editor

tämä on helpoin tapa muokata PHP sikäli kuin voit kirjautua WordPress dashboard.

päästä alkuun, luo lapsiteema ja aktivoi se. Seuraavaksi Siirry ulkoasuun >> Teemaeditori.

Valitse muokattava lapsiteema. Napsauta avataksesi muokattavan tiedoston (PHP-tiedostot päättyvät.php-laajennus). Jos esimerkiksi haluat muokata sivustosi alatunnistetta, Napsauta alatunnistetta.php-tiedosto näytön oikealla puolella. Nyt, muokata tiedostoa WordPress editor.

älä unohda painaa päivitystiedosto-painiketta. Tämä tallentaa muutoksesi.

2. PHP-koodin muokkaaminen FTP

käyttämällä FTP-asiakasohjelmaa on toinen tapa muokata php-tiedostoja. Se on hyödyllisintä, kun sinulla ei ole pääsyä WordPress kojelauta, luultavasti seurauksena WordPress virhe tai haittaohjelmien hyökkäys.

jos sinulla on pääsy WordPress-koodieditoriin, käytä sitä kaikin keinoin. Se on nopeampaa.

tämä sanoi, ensimmäinen asia mitä sinun tarvitsee tehdä täällä on ladata FTP-asiakas (FileZilla mieluiten). Avaa se ja napsauta ”file >> site manager”.

Kirjoita seuraavaksi FTP-tunnistetietosi (verkkotunnuksesi, käyttäjätunnuksesi ja salasanasi). Nämä tiedot ovat yleensä samat kuin cPanel-kirjautumistiedot. Jos et tiedä sitä, ota yhteyttä WordPress hosting yritys.

nyt klikkaa ”Yhdistä”.

yhteyden jälkeen pääset käsiksi WordPress-ydintiedostoihisi. Muokata tiettyä tiedostoa, sanoa wpconfig.php, napsauta tiedostoa hiiren kakkospainikkeella ja valitse Näytä/Muokkaa vaihtoehtojen luettelosta. Kun olet muokannut koodia, Tallenna muutokset ja lataa muokattu tiedosto takaisin palvelimelle, kun Filezilla pyytää tekemään niin.

Conclusion

WordPress on monien rakastama sen joustavuuden ja vankkojen muokkausmahdollisuuksien vuoksi. Jos jokin ominaisuus ei miellytä, siitä ei tarvitse pitää kiinni. Voit joko muuttaa sitä käyttämällä plugin tai muokkaamalla WordPress koodi suoraan.

toivottavasti voit nyt muokata WordPress HTML, CSS, JavaScript, ja PHP WordPress. Voit vapaasti tutkia kaikki kauneus WordPress on tarjottavanaan. Muista kuitenkin edetä varovasti varsinkin, kun lisäät tai muokkaat lähdekoodeja.

jotta sinusta tulisi WordPress-ammattilainen, meillä on video tutorials sekä WordPress-koulutusblogi. Tutustu niihin oppia WordPress. Ja, jos tarvitset vielä apua WordPress sivuston, tavoittaa meidän WordPress kehittäjille ja tukea asiantuntijoita saada asioita menossa.

Bannerivektori luoma GraphiqaStock – www.freepik.com