Kuidas kirjutada kohandatud koodi oma WordPressi postitustele

On palju põhjuseid, miks soovite kirjutada või oma WordPressi postitustesse lisakoodi lisada. Võimalik, et peate reklaami näitama, rakendama oma veebisaidi teatud jaotistele ainulaadset stiili või tähelepanu juhtimiseks lihtsalt märkima teksti või sisu. Siiski võite parema kasutajakogemuse pakkumiseks lisada koodi mitmesuguste visuaalefektide saavutamiseks.


Kõik need ja teised on mõjuvad põhjused, kuid ükskõik, mida te kohandatud koodiga saavutada soovite, võib koodi kirjutamise protsess olla närviline või lausa keeruline! Selles õpetuses käsitleme järgmisi valdkondi:

  • Koodi lisamine, mis näeb välja nagu kood, kuid ei käitu nagu kood (näiteks juhul, kui soovite näidata koodiridasid või parandada oma veebisaidi välimust)
  • Koodi lisamine, mis on mõeldud käituma nagu kood nt. Skriptitud reklaamid, näiteks Google Adsense’i reklaamid

Nende kahe kategooria all käsitleme natuke programmeerimiskoode, nagu HTML, CSS, Javascript, ning puudutame reklaame ja ilu

konteiner. Nüüd, ilma täiendava fanfaarita, asugem asja juurde ja kirjutage mõni kood.

Koodi lisamine, mis näeb välja nagu kood, kuid ei käitu nagu kood

Kui soovite näidata koodi (võib-olla olete veebidisainer või arendaja), mida teie kasutajad saavad kopeerida ja kleepida, on oluline seda teha õigesti, sest isegi ühe reavahetus võib koodi segi ajada, seega kogu teie töö. Teie koodi tõlgendamise viis WordPress sõltub sellest, kas kasutate HTML-i või Visual Post-redaktorit. Koodi otse visuaalsesse redigeerijasse sisestamine ei anna soovitud efekti, kuna visuaalne redaktor peab koodi tavaliseks tekstiks, st veebibrauserid ei tõlgenda teie koodi koodina, vaid tavalise tekstina.

Teisest küljest tunneb HTML-i postituse redigeerija ära kõik teie kasutatavad HTML- või CSS-märgistused, mis tähendab, et neid tõlgendab veebibrauser – asi, mis võib põhjustada segi paisatud paigutusi ja funky-ilmega sisu. Näiteks, 

tõlgendatakse visuaalses redaktoris tavalise tekstina ja tulemus on õiglane
. Kuid,
 tõlgendatakse HTML-redaktoris HTML-i märgistusena ja tulemuseks on konteineri loomine.

HTML-i harjutus

See on harjutus mõttetusest, kuid võite seda proovida, et saada selgem pilt sellest, mida ma mõtlen. Lihtsalt avage oma HTML-redaktor, tüüp

ja salvestage see mustandina. Kui mustand on salvestatud, klõpsake oma kuvamiseks nuppu Eelvaate postitus hallatav veebisait. Ärge muretsege, see pole püsiv ja võite mustandi lihtsalt prügikasti visata. Nüüd tagasi äri juurde.

Üldiselt saate koodi kasutada kahel viisil. Esiteks saate koodi kasutada rea ​​(või lõigu) piires, et selgitada oma koodi punkti. Teiseks saate oma koodi kirjutada, esiletõstmiseks ja selliseks plokiks panna järgmiselt:



Koodi kirjutamine õppetükis WordPress Postitused


...

Ülaltoodud efekti saavutamiseks kasutame koodisilti, mis on kirjutatud sarnaselt ... meie kood läheb siia . Asenda nooled (<  >), Nurksulgudega ([]), sõltuvalt teie WordPressi saidist ja kasutatavast postitoimetajast (visuaalne või HTML). Kood, mida soovite kuvada, peab minema avatava sildi vahele,   ja lõppsilt, . Näiteks koodi kasutamiseks lõigus:

Kood lõigus

Koodimärgend muudab HTML-ivälise teksti sarnaseks koodiks, kuid see ei ütle veebibrauseril HTML-i märgistuse tõlgendamiseks ega postitusest lahti võtmiseks. See tähendab, et brauser saab teie HTML-i märgistust ikkagi kodeerida, muutes selle esitamise keeruliseks HTML-sildid oma koodis. Kuid sellest probleemist saate üle saada, kasutades laiendatud märke või tähemärkide olemeid < > tähemärki, mis lollitavad kõiki brausereid. Näiteks…

HTML-silte saab tõlgendada HTML-märgistusena

… loob uue konteineri (tänu

) ja pealkiri (

), mis ajab teie veebilehe segadusse. Kuid kui kasutate märkide olemeid < > nooled, väldite seda käitumist ja väljastate oma koodi vastavalt soovile. Ülaltoodud kood näeb välja järgmine:

Kasutage selle asemel märkide olemeid

Looge esiletõstetud koodiplokk

Kui tahaksin esile tuua koodiploki (või isegi teksti), et saada midagi sellist;

Koodiplokk

Esiteks panen koodi (või teksti) konteinerisse nii:

Seda peate tegema HTML-redaktoris

Seejärel lisan CSS-i abil stiili kas otse (nagu ülaltoodud pildil) või läbi stiil.css fail, mis on leitud teie teema peakataloogist.

Stiilige oma koodisildid

Koodimärgend kasutab fondi suurust ja pange tekst vaikimisi ühe paigutusega fontiks. Saate seda kõike muuta, kui soovite, et teie kood näeks välja just nii, nagu soovite. Peate vaid lisama …

 kood {font-size: 1.2em; värv: # 000; kirjasuurus: tavaline;} 

… või midagi sarnast sinu omaga stiil.css. Stiile on piiramatult ja kõik sõltub teie isiklikest eelistustest, nii et ärge hoidke end tagasi – stiil eemalduge.

Koodi lisamine, mis käitub nagu kood

See jaotis on eriti kasulik, kui soovite kuvada reklaame või muid skripte, nt Javascripti lõigud teie postitustes. Kuigi seal on pluginaid, näiteks Kiire Adsense, mis aitab teil oma postitustes kuulutusi hallata, võiksite olla huvitatud iseseisvate skriptide installimisest, mille üle te täielikult kontrollite.

Kui teie reklaam on lihtne pilt ja link, saate reklaami oma postitusse üleslaadimisutiliidi kaudu lisada. Laadige lihtsalt pilt üles ja sisestage oma link (ja võib-olla pealkiri) ja teie töö on tehtud. See meetod on piiratud, kuna saate oma kuulutust joondada ainult vasakule, paremale või keskele – täpselt nagu tüüpiline pilt. Teise võimalusena saate oma postituses konteineri luua HTML-redaktori abil.

Näide:


Looge see konteiner täpselt sinna, kuhu soovite oma reklaami, see tähendab, et enne kuulutuse lisamist peab postitus olema valmis. Kui konteiner on valmis, saate selle stiilida vastavalt oma soovile. Saate seda oma style.css abil liigutada, kasutades nuppu positsioon vara. Kui soovite joosta a Google Adsense’i reklaam oma postituste piires saate siiski kasutada Kiire Adsense – pistikprogrammi – või looge konteiner ja pange oma reklaamikood järgmiselt:


Märkus 1: Google’i reklaamid põhinevad Javascriptil ja neid saavad kõik suuremad veebibrauserid tõlgendada tingimusel, et kasutaja on JavaScripti oma masinates lubanud.

Märkus 2: Peate valima oma veebisaidi jaoks sobivad reklaamimõõtmed, et vältida nii postituste kui ka veebisaidi segamini ajamist.

Kui soovite lisada püsiva reklaami, mis kuvatakse kõigis teie postitustes (praegused ja tulevased postitused) ilma lisatööta, peate redigeerima Üksiku postituse mall (single.php). Panin kõigi postituste ülaossa 468xx60px kuulutuse, lisades järgmise koodi single.php kohe pärast < – – END post-entry-meta – ->.


Muidugi peate kasutama oma Google’i reklaame �� Google Adsense’i reklaam ilmub minu ajaveebis nii:

Koodi kirjutamine WordPressis

Leidma single.php, mine oma Administreerimispaneel – >> Välimus – >> Toimetaja – >> single.php. Kui single.php on avatud, kasutage otsinguriba (Ctrl + F) leida < – – END post-entry-meta – ->.

Võite konteineri jätta selliseks, nagu see on, või selle stiili kasutada, kasutades style.css, nagu teile sobib. Ja pidage meeles, et salvestate kõik muudatused.

Konteiner on tõesti kasulik ja kui ühendate selle CSS-iga ja unistuse loovusega, saate oma WordPress-saidiga nii palju saavutada. See aitab teil paigutada mis tahes koodi (või midagi päriselt) oma veebisaidile.

Tööriistakast

Kui soovite lisateavet oma WordPressi postitustesse kohandatud koodi kirjutamise kohta, tutvuge järgmiste ressurssidega:

Noh, nii see on. Oleme suutnud katta valdkonnad, mida alguses kirjeldasime. Kuid kui te ei mõista selles postituses ühtegi mõistet või soovite oma ettepanekuid või seisukohti lisada, palun jagage oma mõtteid allpool olevas kommentaaride jaotises!

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