WordPress on vankka sisällönhallintajärjestelmä, jolla on yli puolet Internetin verkkosivustoista. Sisäänrakennettu CRM helpottaa verkkosivuston luomista, vaikka et olisi koskaan aiemmin kirjoittanut tietokoneohjelmaa. Vaikka normaalin tekstilohkon näyttäminen WordPress-verkkosivustolla on niin helppoa, samaa ei voida sanoa tietokonekoodista. Koodinpala on näytettävä riittävästi, jotta katsojat voivat analysoida ja ymmärtää sitä. Ja siinä WordPress-koodilohkot tulevat käyttöön.
Jos haluat tietää kuinka käyttää koodilohkoja WordPressissä, olet tullut oikeaan paikkaan. Tässä artikkelissa opastamme sinut koko prosessin läpi, jotta voit aloittaa koodinpätkien jakamisen lukijoidesi kanssa. Jatka lukemista saadaksesi lisätietoja.
Koodilohkojen käyttäminen WordPressissä
Tietokoneohjelman näyttäminen tavallisena verkkosivun tekstinä voi olla tuhoisaa. Monien käyttäjien on vaikea visualisoida ja ymmärtää. Onneksi monissa WordPress-editoreissa on koodilohkoominaisuus, jonka avulla voit näyttää tietokoneohjelman koodimuodossa.
Onneksi koodilohkojen käyttäminen tietokonekoodin näyttämiseen on suhteellisen helppoa. Aloittaaksesi sinun on vaihdettava alkuperäiseen WordPress-editoriin, koska joissakin tekstilaajennuksissa ei ehkä ole tätä ominaisuutta. Kun olet tehnyt sen, noudata näitä ohjeita lisätäksesi koodilohkon verkkosivuston sivulle:
- Avaa verkkosivu, jolle haluat lisätä koodilohkon, napsauttamalla Uusi-painiketta.
- Kirjoita '/code' ja paina 'Enter'.
- Kirjoita tai liitä koodi, jonka haluat näkyvän, ja paina “Enter”-näppäintä.
- Voit edelleen käyttää koodilohkotyökalupalkkia mukauttaaksesi juuri kirjoittamasi koodin ulkoasua. Voit esimerkiksi lihavoida rivin B-painikkeella tai kursivoida sen i-painikkeella.
- Kun olet luonut verkkosivusi, napsauta Esikatselu-painiketta nähdäksesi, miltä koodilohko näyttää live-versiossa.
- Jos olet tyytyväinen lopputulokseen, paina 'Päivitä'-painiketta, jotta muutkin näkevät koodilohkon.
Kuinka muuttaa koodilohkosi typografiaa
Typografia puhuu paljon ja voi tehdä tai rikkoa paitsi koodilohkosi, myös koko verkkosivun estetiikan. Voit muuttaa koodilohkon typografiaa seuraavasti:
- Korosta koodilohko, jonka typografiaa haluat muuttaa.
- Napsauta 'Asetukset' -kuvaketta näytön oikeassa yläkulmassa.
- Valitse 'Typografia'-osiossa haluamasi typografia.
- Napsauta 'Päivitä' -painiketta tallentaaksesi muutokset.
Voit muokata lohkon estetiikkaa entisestään muuttamalla väriä, taustaa, kirjainväliä riviväliä.
Jos sinulla on esimerkiksi tumma-aiheinen verkkosivusto, saatat haluta koodilohkollasi olevan eri tausta.
Kuinka poistaa koodilohko WordPressissä
Koodilohkot eivät ole pysyviä, ja kuten kaikki muutkin WordPress-verkkosivun elementit, voit poistaa ne. Näin menet prosessiin:
- Avaa verkkosivu tai viesti, jossa on poistettava koodilohko.
- Napsauta poistettavaa koodilohkoa korostaaksesi sen.
- Napsauta koodilohkon yläreunaan avautuvassa widgetissä kolmea pistettä.
- Valitse vaihtoehdoista 'Poista koodi'.
Yllä olevan toiminnon pitäisi poistaa koko koodilohko verkkosivulta. Vaihtoehtoisesti voit valita lohkon ja painaa 'Poista'-näppäintä. Voit myös painaa 'Ctrl' + 'Shift' + 'Z' -näppäimiä samanaikaisesti ja sen pitäisi saavuttaa samat tulokset.
Kuinka muokata jo julkaistua koodilohkoa
Joskus teet varmasti virheitä. Saatat myös törmätä parempaan tapaan toteuttaa idea koodin avulla. WordPress antaa sinun muokata jo olemassa olevia koodilohkoja seuraamalla alla olevia ohjeita:
- Avaa sivu, jolla on muokattava koodilohko.
- Napsauta 'Muokkaa'.
- Ota koodin muokkaus käyttöön napsauttamalla koodilohkoa.
- Kun olet tehnyt muutokset, napsauta 'Päivitä' -painiketta.
Kuinka lisätä koodilohko WordPress-verkkosivustollesi laajennuksen avulla
Jos lisäät usein koodinpätkiä verkkosivustollesi, saattaa olla parasta hankkia tehokkaampi laajennus auttamaan sinua. Yksi suosittu tehokas ja erinomainen koodilohko on SyntaxHighlighter Evolved kytkeä.
Tällä laajennuksella on etu alkuperäiseen WordPress-editoriin verrattuna, koska:
- Se korostaa koodinpätkän rivien määrää
- Se tukee useita ohjelmointikieliä
- Sen avulla katsojat voivat kopioida ja liittää näytetyn koodin
Näin voit käyttää laajennusta verkkosivustosi koodinpätkien hallintaan paremmin:
- Asenna ja aktivoi SyntaxHighlighter Evolved kytkeä.
- Avaa sivu tai viesti, jos haluat lisätä koodilohkon.
- Ota muokkaus käyttöön ja napsauta pluspainiketta.
- Etsi 'SyntaxHighLighter Evolved' ja avaa ensimmäinen näkyviin tuleva tulos.
- Liitä tai kirjoita koodi käytettävissä olevaan koodilohkoon.
- Napsauta näytön oikeassa yläkulmassa olevaa asetuskuvaketta ja siirry 'Estä'-välilehteen.
- Määritä, kuinka haluat numerointisi näkyvän ja mitkä koodirivit haluat korostetun.
- Voit myös ottaa käyttöön 'Tee URL-osoitteet klikattavia' -asetuksen, jos haluat tehdä koodistasi napsautettavan.
Voit muuttaa koodilohkon väriä ja muotoilua seuraavasti:
- Siirry kohtaan 'Asetukset' ja siirry 'SyntaxHighlighter' -osioon.
- Muuta lohkosi teemaa.
- Paina 'Tallenna' 'Esikatselu' nähdäksesi, miltä muutokset näyttävät live-tilassa.
Muita usein kysyttyjä kysymyksiä
Miten koodilohkosta tehdään napsautettava linkki?
Jos haluat estää koodin linkin WordPress-editorilla, toimi seuraavasti:
1. Valitse koodirivi, jonka haluat toimia linkkinä.
2. Valitse ponnahduswidgetistä linkkikuvake. Vaihtoehtoisesti voit painaa näppäimistön 'Ctrl' + 'K' -näppäimiä.
3. Kirjoita URL-osoite, johon haluat koodin linkitettävän, ja paina Enter-näppäintä.
Voinko korostaa koodia käyttämällä WordPress-editorin tarjoamaa koodilohkoeditoria?
Ei, alkuperäisen WordPress-editorin tarjoama koodilohko ei salli käyttäjien kopioida ja liittää koodia. Tätä varten tarvitset edistyneen koodilohkon muokkauslaajennuksen, kuten 'SyntaxHighligher Evolved' -laajennuksen.
Onko Elementorissa koodilohkotoimintoa?
Elementor on suosittu vedä ja pudota -laajennus, jota käytetään WordPress-sivustojen rakentamiseen. Jos käytät laajennusta verkkosivustojen luomiseen, et valitettavasti löydä lohkoa, jonka avulla voit muotoilla tietokoneohjelmia verkkosivustollasi. Siksi sinun on vaihdettava perinteiseen WordPress-editoriin suorittaaksesi tehtävän loppuun.
Ota verkkosivustosi käyttöön
Pidätpä ohjelmointiblogia tai haluat vain jakaa koodinpätkiä verkkosivustollasi, koodilohkojen käyttö WordPressissä on erittäin tärkeää. Koodilohkot antavat lukijoillesi helppoa aikaa ja lisäävät yleisesti verkkosivustosi käyttökokemusta. Ja kuten näet, koodilohkojen lisääminen on suhteellisen helppoa, varsinkin alkuperäisellä WordPress-editorilla.
lisää laite google device manageriin
Oletko kokeillut käyttää WordPressin tarjoamia koodilohkoja? Entä SyntaxHighlighter Evolved -laajennus? Jaa kokemuksesi kanssamme alla olevassa kommenttiosiossa.