Kuinka kirjoittaa mukautettu koodi WordPress-viesteihisi

On monia syitä, miksi haluat kirjoittaa tai sisällyttää lisäkoodia WordPress-viesteihisi. Saatat joutua näyttämään mainosta, käyttämään ainutlaatuista tyyliä verkkosivustosi tiettyihin osiin tai yksinkertaisesti merkitsemään tekstiä tai sisältöä kiinnittämään huomiota. Voit silti lisätä koodia saadaksesi erilaisia ​​visuaalisia tehosteita paremman käyttökokemuksen tarjoamiseksi.


Kaikki nämä ja muut ovat päteviä syitä, mutta riippumatta siitä, mitä aiot saavuttaa mukautetulla koodilla, koodin kirjoittamisprosessi voi olla hermostunut tai suoraan haastava! Tässä opetusohjelmassa käsittelemme seuraavia alueita:

  • Lisätään koodi, joka näyttää koodilta, mutta ei käyttäytyy kuin koodi (jos esimerkiksi haluat näyttää koodirivit tai parantaa verkkosivustosi ulkoasua)
  • Lisätään koodi, joka on tarkoitettu käyttäytymään kuten koodi esimerkiksi Komentosarjat, kuten Google Adsense -mainokset

Näissä kahdessa kategoriassa tutkimme vähän ohjelmointikoodia, kuten HTML, CSS, Javascript, ja koskemme ilmoituksia ja

astiaan. Nyt ilman ennakkoluuloja, siirrytään yrityksiin ja kirjoitetaan koodi.

Koodin lisääminen, joka näyttää koodilta, mutta ei käyttäydy kuin koodi

Jos haluat esitellä koodia (ehkä olet web-suunnittelija tai -kehittäjä), jonka käyttäjät voivat kopioida ja liittää, on tärkeää tehdä se oikein, koska jopa yksi rivinvaihto voi sekoittaa koodin, joten kaikki työsi. Tapa, jolla WordPress tulkitsee koodisi, riippuu siitä, käytätkö HTML- tai Visual Post -editoria. Koodisi syöttäminen suoraan visuaaliseen muokkausohjelmaan ei anna haluamaasi vaikutusta, koska visuaalinen muokkausohjelma pitää koodia normaalina tekstinä, mikä tarkoittaa, että selaimet eivät tulkitse koodiasi “koodiksi”, vaan tavalliseksi tekstiksi.

Toisaalta HTML-postieditori tunnistaa kaikki käyttämäsi HTML- tai CSS-merkinnät, mikä tarkoittaa, että selain tulkitsee ne. Se voi johtaa hämmentyneisiin asetteluihin ja funky-näköiseen sisältöön. Esimerkiksi, 

visuaalisessa editorissa tulkitaan tavalliseksi tekstiksi ja tulos on oikeudenmukainen
. kuitenkin,
 HTML-editorissa tulkitaan HTML-merkintöinä ja tuloksena on säilön luominen.

HTML-tehtävä

Se on todella turhaa harjoitusta, mutta voit kokeilla sitä saadaksesi selkeämmän kuvan siitä, mitä tarkoitan. Avaa vain HTML-editori, tyyppi

ja tallenna se luonnoksena. Kun luonnos on tallennettu, napsauta Esikatsele viestiä nähdäksesi hallittu verkkosivusto. Älä huolestu, se ei ole pysyvä ja voit vain roskata luonnoksen. Nyt takaisin liiketoimintaan.

Yleensä voit käyttää koodia kahdella tavalla. Ensinnäkin, voit käyttää koodia rivillä (tai kappaleessa) selventääksesi koodin pistettä. Toiseksi voit kirjoittaa, korostaa ja laittaa koodisi lohkoon seuraavasti:



Koodin kirjoittaminen WordPress-viesteihin


...

Edellä mainitun vaikutuksen saavuttamiseksi käytämme kooditunnistetta, joka on kirjoitettu kuten … Koodimme menee tänne . Korvaa nuolet (<  >) Hakasulkeilla ([]) WordPress-sivustosi ja käyttämäsi viestieditorin mukaan (visuaalinen tai HTML). Koodin, jonka haluat näyttää, on kuljettava avaustunnisteen välillä,   ja sulkeva tunniste, . Esimerkiksi koodin käyttäminen kappaleessa:

Koodi kappaleessa

Kooditunnisteen avulla ei-HTML-teksti näyttää koodilta, mutta se ei anna selaimen käsittää HTML-merkintää tulkita tai poistaa sitä viestistä. Tämä tarkoittaa, että selain voi silti koodata HTML-merkintöjä vaikeuttaen esittelyä HTML-tunnisteet koodissasi. Voit kuitenkin välttää tämän ongelman käyttämällä laajennettuja merkkejä tai merkkiyksiköitä < > merkkiä, mikä huijaa jokaisen selaimen. Esimerkiksi…

HTML-tunnisteita voidaan tulkita HTML-merkintöinä

… luo uuden säilön (kiitos

) ja otsikko (

), joka sekoittaa verkkosivusi. Mutta jos käytät merkkiyksiköitä korvataksesi < > nuolet, välttää tätä käyttäytymistä ja tulostaa koodisi haluamallasi tavalla. Yllä oleva koodi näyttää siis tältä:

Käytä sen sijaan merkkiyksiköitä

Luo korostettu koodilohko

Jos haluaisin korostaa koodilohkon (tai jopa tekstin) saadaksesi jotain;

Koodilohko

Aloitan asettamalla koodi (tai teksti) säiliöön kuten:

Tämä on tehtävä HTML-editorissa

Lisään sitten tyyliä CSS: n avulla joko suoraan (kuten yllä olevassa kuvassa) tai style.css tiedosto löytyy teeman pääkansiosta.

Muotoile kooditunnisteesi

Kooditunniste käyttää kirjasimen kokoa ja laita teksti oletusarvoisesti yksiosaiseen kirjasimeen. Voit kuitenkin muuttaa kaiken, jotta koodi näyttää juuri haluamallasi tavalla. Sinun tarvitsee vain lisätä …

 koodi {fontti-koko: 1.2em; color: # 000; fontti-paino: normaali;} 

… tai jotain vastaavaa sinun style.css. Tyylejä on rajoittamaton, ja kaikki riippuu henkilökohtaisista mieltymyksistäsi, joten älä pidä hidasta – tyyli poissa.

Lisätään koodi, joka toimii kuten koodi

Tämä osa on erityisen hyödyllinen, jos haluat näyttää mainoksia tai muita komentosarjoja, esimerkiksi Javascript-katkelmat viesteissäsi. Vaikka on olemassa laajennuksia, kuten Nopea Adsense, joka auttaa hallitsemaan viestien mainoksia, saatat olla kiinnostunut asentamaan itsenäisiä komentosarjoja, jotka ovat täysin hallitsetsi.

Jos mainoksesi on yksinkertainen kuva ja linkki, voit lisätä mainoksen viestiisi latausapuohjelman avulla. Lataa vain kuva ja kirjoita linkkisi (ja mahdollisesti kuvateksti) ja työsi on valmis. Tämä menetelmä on kuitenkin rajoitettu, koska voit kohdistaa mainoksesi vain vasemmalle, oikealle tai keskelle – aivan kuten tyypillinen kuva. Vaihtoehtoisesti voit luoda säilön viestiisi HTML-editorin avulla.

Esimerkki:


Luo tämä säilö tarkalleen mihin haluat mainostasi, mikä tarkoittaa, että viestin on oltava valmis ennen kuin lisäät mainoksen. Kun säilytysastia on valmis, voit muotoilla sen haluamallasi tavalla. Voit siirtää sitä style.css-ohjelmalla käyttämällä asento omaisuutta. Jos haluat suorittaa a Google Adsense -mainos viesteissäsi voit silti käyttää Nopea Adsense – plugin – tai luo säilö ja laita mainoskoodi seuraavasti:


Huomautus 1: Google-ilmoitukset perustuvat Javascriptiin, ja kaikki suuret selaimet voivat tulkita niitä, jos käyttäjä on ottanut Javascriptin käyttöön koneissaan.

Muistio 2: Sinun on valittava verkkosivustollesi oikeat mainosmitat välttääksesi viestien ja verkkosivuston sekoittamista.

Jos haluat lisätä pysyvän mainoksen, joka näkyy kaikissa viesteissäsi (nykyisissä ja tulevissa viesteissä) ilman ylimääräistä työtä, sinun on muokattava Yhden viestin malli (Single.php). Panin 468xx60px-ilmoituksen kaikkien viestien yläosaan lisäämällä seuraava koodi single.php heti jälkeen < – – END post-entry-meta – ->.


Tietysti sinun on käytettävä omia Google-mainoksiasi. Is Näin Google Adsense -mainos näkyy blogissani:

Koodin kirjoittaminen WordPressiin

Löytää single.php, mene omalle Hallintapaneeli – >> Ulkonäkö – >> Editor – >> single.php. Kun single.php on auki, käytä hakupalkkia (Ctrl + F) paikallistaa < – – END post-entry-meta – ->.

Voit jättää säilön sellaisenaan tai tyyliä sen käyttämällä style.css-sovellusta sopivaksi katsomallasi tavalla. Muista tallentaa kaikki muutokset.

säilö on todella hyödyllinen, ja kun liität sen CSS: n ja unssin luovuuden avulla, voit saavuttaa niin paljon WordPress-sivustossasi. Sen avulla voit sijoittaa minkä tahansa koodin (tai kaiken todella) mihin tahansa verkkosivustoosi.

Työkalupakki

Jos haluat lisätietoja mukautetun koodin kirjoittamisesta WordPress-viesteihisi, tutustu seuraaviin lähteisiin:

No, siitä on kyse. Olemme onnistuneet kattamaan alueet, jotka hahmottelimme alussa. Mutta jos et ymmärrä mitään viestin käsitettä tai haluat lisätä ehdotuksiasi tai näkemyksiäsi, kerro mielipiteesi alla olevassa kommenttiosassa!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map