Tärkein Muut Kuinka käyttää koodilohkoja WordPressissä

Kuinka käyttää koodilohkoja WordPressissä



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.

  Kuinka käyttää koodilohkoja WordPressissä

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:

  1. Avaa verkkosivu, jolle haluat lisätä koodilohkon, napsauttamalla Uusi-painiketta.
  2. Kirjoita '/code' ja paina 'Enter'.
  3. Kirjoita tai liitä koodi, jonka haluat näkyvän, ja paina “Enter”-näppäintä.
  4. Voit edelleen käyttää koodilohkotyökalupalkkia mukauttaaksesi juuri kirjoittamasi koodin ulkoasua. Voit esimerkiksi lihavoida rivin B-painikkeella tai kursivoida sen i-painikkeella.
  5. Kun olet luonut verkkosivusi, napsauta Esikatselu-painiketta nähdäksesi, miltä koodilohko näyttää live-versiossa.
  6. 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:

  1. Korosta koodilohko, jonka typografiaa haluat muuttaa.
  2. Napsauta 'Asetukset' -kuvaketta näytön oikeassa yläkulmassa.
  3. Valitse 'Typografia'-osiossa haluamasi typografia.
  4. 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:

  1. Avaa verkkosivu tai viesti, jossa on poistettava koodilohko.
  2. Napsauta poistettavaa koodilohkoa korostaaksesi sen.
  3. Napsauta koodilohkon yläreunaan avautuvassa widgetissä kolmea pistettä.
  4. 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:

  1. Avaa sivu, jolla on muokattava koodilohko.
  2. Napsauta 'Muokkaa'.
  3. Ota koodin muokkaus käyttöön napsauttamalla koodilohkoa.
  4. 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:

  1. Asenna ja aktivoi SyntaxHighlighter Evolved kytkeä.
  2. Avaa sivu tai viesti, jos haluat lisätä koodilohkon.
  3. Ota muokkaus käyttöön ja napsauta pluspainiketta.
  4. Etsi 'SyntaxHighLighter Evolved' ja avaa ensimmäinen näkyviin tuleva tulos.
  5. Liitä tai kirjoita koodi käytettävissä olevaan koodilohkoon.
  6. Napsauta näytön oikeassa yläkulmassa olevaa asetuskuvaketta ja siirry 'Estä'-välilehteen.
  7. Määritä, kuinka haluat numerointisi näkyvän ja mitkä koodirivit haluat korostetun.
  8. 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:

  1. Siirry kohtaan 'Asetukset' ja siirry 'SyntaxHighlighter' -osioon.
  2. Muuta lohkosi teemaa.
  3. 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.

Mielenkiintoisia Artikkeleita

Toimituksen Valinta

Pienennä Narratorin kotisivu tehtäväpalkkiin tai järjestelmäalustalle Windows 10: ssä
Pienennä Narratorin kotisivu tehtäväpalkkiin tai järjestelmäalustalle Windows 10: ssä
Lukija on Windows 10: n sisäänrakennettu näytönlukuohjelma. Lukija antaa näköongelmista kärsiville käyttäjille mahdollisuuden käyttää tietokonetta ja suorittaa yleisiä tehtäviä. Käyttäjä voi muuttaa ääntään, säätää puhenopeutta, äänenvoimakkuutta ja äänenvoimakkuutta. Tässä artikkelissa näemme, kuinka Narrator Home voidaan pienentää tehtäväpalkkiin tehtäväpalkin sijaan
AMD lisää Windows 10 Creators Update -tuki uusimpaan video-ohjainpäivitykseen
AMD lisää Windows 10 Creators Update -tuki uusimpaan video-ohjainpäivitykseen
Windows 10 Creators -päivitys on alkanut ottaa käyttöön 11. huhtikuuta 2017, ja jotkut OEM-valmistajat ovat päivittäneet ohjaimia ja muita ohjelmistoja laitteistotuotteilleen sen tueksi. Chipmaker AMD julkaisi juuri uuden version Radeon Software Crimson ReLive Edition -paketista näytönohjaimille: versiota 17.4.2 suositellaan nyt kaikille Windows 10: lle
WhiteDior-visuaalinen tyyli Windows 8: lle
WhiteDior-visuaalinen tyyli Windows 8: lle
Vähäinen mustavalkoinen visuaalinen tyyli Windows 8: lle, jonka on luonut RidKurn. Pieni tehtäväpalkkiversio sisältyy. Tämä visuaalinen tyyli muuttaa ikkunakehysten ulkoasua Windows 8: ssa. Katso, kuinka kolmannen osapuolen teemat asennetaan Windows 8: een saadakseen sen toimimaan. Voit myös poistaa Ribbon Disabler -työkalun
Lisää skannaus Windows Defenderillä Resurssienhallintaan hiiren kakkospainikkeella Windows 10: n pikavalikosta
Lisää skannaus Windows Defenderillä Resurssienhallintaan hiiren kakkospainikkeella Windows 10: n pikavalikosta
Kun joudut skannaamaan siirrettävän aseman tai tietyn tiedoston tai kansion Windows Defenderillä, on hyödyllistä, että sinulla on pikavalikkokohta tehdä se nopeasti.
Korjaa se, kun tulostimesi on offline-tilassa
Korjaa se, kun tulostimesi on offline-tilassa
Kun tulostin näkyy offline-tilassa, syy voi olla yksinkertainen tai monimutkainen. Nämä vianetsintävinkit voivat saada tulostimesi jälleen verkkoon.
Riippuvan sisennyksen tekeminen Google Slidesissa
Riippuvan sisennyksen tekeminen Google Slidesissa
Riippuvat sisennykset on edistynyt muotoiluvaihtoehto, jota käytetään joissakin lainauksissa. Opi lisäämään tyyliä ja toimivuutta riippuvan sisennyksen avulla Google Slidesissa.
Chromebookin laitteiston tai järjestelmätietojen tarkistaminen
Chromebookin laitteiston tai järjestelmätietojen tarkistaminen
Haluatko tietää, kuinka paljon vapaata tallennustilaa tai muistia sinulla on Chromebookissasi? Tarkista laitteisto- ja ohjelmistoresurssit Chromebookisi tiedoista. Toimi näin.