Miten muokata HTML WordPress Code Editor (Aloittelijan opas)

Etsitkö helppo tapa muokata HTML WordPress verkkosivuilla?

HyperText Markup Language tai HTML on koodi, joka kertoo verkkoselaimelle, miten verkkosivujen sisältö näytetään. HTML: n muokkaaminen on kätevä pitkälle räätälöintiin ja vianmääritykseen liittyvissä kysymyksissä.

tässä artikkelissa näytämme, miten HTML: ää muokataan WordPress-koodieditorissa eri menetelmillä.

HTML: n muokkaaminen WordPress - koodieditorissa

miten muokata HTML WordPress code editor

miksi sinun pitäisi muokata HTML WordPress?

WordPress tarjoaa tuhansia teemoja ja laajennuksia, joilla voit muuttaa verkkosivustosi ulkonäköä ja muokata eri elementtejä koskematta yhteenkään koodiriviin.

liitännäisillä ja teemoilla on kuitenkin rajoituksensa, eivätkä ne välttämättä tarjoa juuri niitä ominaisuuksia, joita etsit. Tämän seurauksena, et ehkä pysty tyyli sivuston miten haluat sen näyttää.

tässä HTML: n muokkaaminen on todella hyödyllistä. Voit helposti suorittaa kehittynyttä räätälöintiä HTML-koodin avulla. Se tarjoaa paljon joustavuutta ja valvoa, miten sivustosi näyttää ja toimii.

lisäksi HTML: n muokkaamisen opettelu voi myös auttaa sinua tunnistamaan ja korjaamaan virheet WordPress-verkkosivustollasi, kun sinulla ei ole pääsyä kojelautaan.

Huomautus: Jos et halua muokata HTML: ää, mutta haluat silti täydet muokkausvaihtoehdot, suosittelemme käyttämään vedä ja pudota WordPress-page Builderia, kuten SeedProd.

tästä huolimatta, katsotaanpa eri tapoja muokata HTML WordPress verkkosivuilla.

käsittelemme HTML: n muokkausta lohkoeditorin ja klassikkoeditorin avulla, ja näytämme myös helpon tavan lisätä koodia sivustoosi. Voit klikata alla olevia linkkejä ja siirtyä haluamaasi osioon.

  • miten muokata HTML WordPress Block Editor
  • miten muokata HTML WordPress Classic Editor
  • miten muokata HTML WordPress widgetit
  • miten muokata HTML WordPress teema Editor
  • miten muokata HTML WordPress teema Editor
  • miten muokata HTML WordPress FTP
  • miten muokata HTML WordPress FTP
  • helppo tapa lisätä koodi WordPress

miten muokata HTML WordPress Block Editor

WordPress Block Editor, on olemassa useita tapoja muokata HTML postitse tai sivulla.

ensin voit lisätä HTML-koodia omalla HTML-lohkollasi.

aloita siirtymällä WordPress-kojelautaasi ja lisäämällä sitten uusi viesti / Sivu tai muokkaamalla olemassa olevaa artikkelia. Sen jälkeen, klikkaa plus ( + ) merkki vasemmassa yläkulmassa ja lisätä ’Custom HTML’ lohko.

mukautetun HTML-lohkon lisääminen WordPressissä

lisäämällä mukautetun HTML-lohkon WordPress

seuraava, mennä eteenpäin ja kirjoita mukautetun HTML-koodin lohko. Voit myös klikata ’esikatselu’ vaihtoehto tarkistaa, jos HTML-koodi toimii oikein ja miten sisältö näyttää live verkkosivuilla.

mukautettu HTML-koodi WordPress-muokkaimessa

mukautetun HTML-koodin WordPress Editor

toinen tapa lisätä tai muuttaa HTML-koodia WordPress block editor on muokkaamalla HTML tietyn lohkon.

voit tehdä sen valitsemalla sisällöstäsi olemassa olevan lohkon ja valitsemalla sitten kolmen pisteen valikon. Seuraava, mennä eteenpäin ja klikkaa ’Muokkaa HTML’ vaihtoehto.

Napsauta kolmea pistettä ja valitse Muokkaa HTML: ksi

Napsauta kolmea pistettä ja valitse Muokkaa HTML

näet nyt yksittäisen lohkon HTML: n. Mene eteenpäin ja muokata HTML sisältöä. Voit esimerkiksi lisätä nofollow-linkin, muuttaa tekstin tyyliä tai lisätä muuta koodia.

muokkaa yksittäisen lohkon HTML-koodia

muokata HTML yksittäisen lohkon

jos haluat muokata HTML koko postitse, voit käyttää ”Code Editor” WordPress block editor.

pääset koodieditoriin klikkaamalla kolmen pisteen valintaa oikeassa yläkulmassa. Valitse sitten’ Code Editor ’ avattavasta vaihtoehdoista.

käytä Koodieditoria

käytä Koodieditoria

kuinka muokata HTML: ää WordPress Classic Editorissa

jos käytät WordPress classic editoria, voit helposti muokata HTML: ää tekstinäkymässä.

tekstinäkymään pääsee muokkaamalla blogikirjoitusta tai lisäämällä uuden. Kun olet classic editor, klikkaa ’Teksti’ välilehti nähdä HTML artikkeli.

napsauta tekstiä klassisessa Editorissa muokataksesi HTML: ää

napsauta tekstiä klassisessa Editorissa muokataksesi HTML

sen jälkeen voit muokata sisältösi HTML: ää. Voit esimerkiksi lihavoida eri sanoja, jotta ne olisivat näkyvästi esillä, käyttää kursivoitua tyyliä tekstissä, luoda luetteloita, lisätä sisällysluettelon ja paljon muuta.

kuinka muokata HTML: ää WordPress-widgeteissä

tiesitkö, että voit lisätä ja muokata HTML-koodia sivustosi widget-alueella?

WordPressissä muokatun HTML-widgetin avulla voit muokata sivupalkkia, alatunnistetta ja muita widget-alueita. Voit esimerkiksi upottaa yhteydenottolomakkeita, Google Mapsia, call to action (CTA) – painikkeita ja muuta sisältöä.

voit aloittaa siirtymällä WordPressin admin-paneeliin ja siirtyä sitten Appearance ” widgetteihin. Sen jälkeen, mennä eteenpäin ja lisätä mukautetun HTML widget klikkaamalla ’Lisää’ nappi.

 Lisää mukautettu HTML-sovelma

Lisää mukautettu HTML Widget

Seuraavaksi, sinun täytyy valita, mihin haluat lisätä mukautetun HTML widget ja valitse sijainti. Widget alue riippuu WordPress teema käytät. Voit esimerkiksi lisätä sen alatunnisteeseen, otsikkoon tai muihin alueisiin.

 valitse muokatun HTML-sovelman alue ja sijainti

Valitse alue ja sijainti muokatulle HTML widget

kun olet valinnut widget alue ja sijainti, mennä eteenpäin ja klikkaa ’Tallenna Widget’ painiketta.

sen jälkeen, voit klikata mukautetun HTML widget, Kirjoita HTML-koodi, ja sitten ’Tallenna’ painiketta.

 anna oma HTML

syötä mukautettu HTML

voit nyt vierailla verkkosivuillasi nähdäksesi muokatun HTML-widget toiminnassa.

mukautettu HTML-esikatselu

Custom HTML Preview

miten muokata HTML WordPress teema Editor

toinen tapa muokata HTML sivustosi kautta WordPress teema Editor (Code Editor).

emme kuitenkaan suosittele koodin muokkaamista suoraan Teemaeditorissa. Pienintäkään virhettä, kun syötät koodia voi rikkoa sivuston ja estää sinua pääsemästä WordPress kojelauta.

myös, jos päivität teemasi, niin kaikki muutoksesi katoaisivat.

tämä sanoi, Jos harkitset HTML: n muokkaamista Teemaeditorilla, niin se on hyvä idea varmuuskopioida sivustosi ennen kuin teet mitään muutoksia.

seuraavaksi pää yli Appearance ” Teemaeditori WordPress-kojelaudasta. Näet nyt varoitusviestin suoraan teematiedostojen muokkaamisesta.

Teemaeditorin varoitus WordPress

Teemaeditorin varoitus WordPress

kun klikkaat ’ymmärrän’ – painiketta, näet teematiedostot ja koodin. Täältä voit valita, mitä tiedostoa haluat muokata ja tehdä muutokset.

 WordPress Theme Editor

WordPress Theme Editor

miten muokata HTML WordPress käyttämällä FTP

toinen vaihtoehtoinen tapa muokata HTML WordPress teema tiedostoja on käyttämällä FTP tunnetaan myös file transfer protocol service.

tämä on vakio-ominaisuus, joka tulee kaikkiin WordPress-hostaustileihin.

FTP: n käytön etuna koodieditorin sijaan on se, että ongelmat voi helposti korjata FTP-asiakasohjelmalla. Näin, et lukita ulos WordPress kojelauta jos jotain rikkoutuu muokattaessa HTML.

käynnistääksesi sinun on ensin valittava FTP-ohjelmisto. Käytämme Filezillaa tässä opetusohjelmassa, koska se on ilmainen ja käyttäjäystävällinen FTP-asiakasohjelma Windowsille, Macille ja Linuxille.

kun olet valinnut FTP-asiakasohjelman, sinun on nyt kirjauduttava sivustosi FTP-palvelimelle. Löydät kirjautumistiedot hosting-palveluntarjoajan ohjauspaneelin kojelaudasta.

kun olet kirjautunut sisään, näet verkkosivustosi eri kansiot ja tiedostot ”Etäsivusto” – sarakkeen alla. Mene eteenpäin ja siirry Teema tiedostoja menemällä wp-content ” teema.

näet nyt erilaisia teemoja verkkosivuillasi. Mene eteenpäin ja valitse teema, jota haluat muokata.

 Siirry teematiedostoihin FTP-asiakasohjelmassa

Siirry teematiedostoihin FTP-asiakasohjelmassa

Seuraavaksi voit muokata HTML: ää napsauttamalla teematiedostoa hiiren kakkospainikkeella. Jos haluat esimerkiksi tehdä muutoksia alatunnisteeseen, Napsauta alatunnistetta hiiren kakkospainikkeella.php-tiedosto.

monet FTP-asiakasohjelmat antavat sinun katsoa ja muokata tiedostoa ja ladata ne automaattisesti, kun olet tehnyt muutokset. Vuonna FileZilla, voit tehdä tämän klikkaamalla ’Näytä / Muokkaa’ vaihtoehto.

Lataa ja muokkaa teematiedostoa

Lataa ja muokkaa teematiedostoasi

suosittelemme kuitenkin, että lataat muokattavan tiedoston työpöydällesi ennen muutosten tekemistä.

HTML: n muokkaamisen jälkeen voit korvata alkuperäisen tiedoston. Lisätietoja, suosittelemme seuraavat opas siitä, miten käyttää FTP ladata tiedostoja WordPress.

helppo tapa lisätä koodia WordPress

helpoin tapa lisätä koodia WordPress on käyttämällä Insert otsikot ja alatunnisteet WordPress plugin.

wpbeginnerin tiimi suunnitteli tämän liitännäisen, joten voit helposti lisätä koodin sivustoosi minuuteissa, ja olemme tehneet siitä 100% vapaasti käytettävän.

se auttaa myös koodin järjestämisessä, sillä se on tallennettu yhteen paikkaan. Plus, se estää virheitä, jotka voivat johtua, kun manuaalisesti muokata koodia.

toinen etu on, että sinun ei tarvitse huolehtia koodin poistamisesta, jos päätät päivittää tai muuttaa teemaasi.

sinun on ensimmäiseksi asennettava ja aktivoitava lisää otsikkotiedot ja alatunnisteet-lisäosa verkkosivustollesi. Lisätietoja, voit seurata yksityiskohtaisia opetusohjelma Miten asentaa WordPress plugin.

kun liitännäinen on aktiivinen, voit siirtyä asetukseen ” lisää otsikoita ja alatunnisteita admin-paneelista.

seuraavaksi voit lisätä HTML-koodin verkkosivustollesi otsikko -, runko-ja alatunnisteruutuihin.

esimerkiksi, sanotaan, että haluat näyttää hälytyspalkin verkkosivustollasi. Voit syöttää HTML-koodin ’skriptit kehossa’ – ruutuun ja napsauta Tallenna-painiketta.

 HTML-koodin lisääminen lisäämällä otsikko-ja Alatunnisteliitännäistä

HTML-koodin lisääminen käyttämällä Insert Headers-ja Footers-lisäosaa

sen lisäksi voit lisätä Google Analytics-seurantakoodin ja Facebook-pikselin otsikkoon tai lisätä Pinterest-painikkeen verkkosivustosi alatunnisteeseen lisäosan avulla.

lisätietoja on oppaassamme, miten voit lisätä otsikko-ja alatunnistekoodin WordPressiin.

toivomme, että tämä artikkeli auttoi sinua oppimaan HTML: n muokkaamisen WordPress-koodieditorissa. Voit myös katsoa oppaamme siitä, kuinka paljon se todella maksaa rakentaa WordPress verkkosivuilla, tai nähdä tärkeimmät syyt sinun pitäisi käyttää WordPress sivuston.

jos pidit tästä artikkelista, niin tilaa YouTube-kanavamme WordPress video tutorialsille. Löydät meidät myös Twitteristä ja Facebookista.

Leave a Reply

Vastaa

Sähköpostiosoitettasi ei julkaista.