Slik skriver du tilpasset kode i WordPress-innleggene dine

Det er mange grunner til at du ønsker å skrive eller inkludere tilleggskode i WordPress-innleggene dine. Det kan hende du må vise reklame, bruke unik styling på bestemte deler av nettstedet ditt, eller bare merke tekst eller innhold for å trekke oppmerksomhet. Likevel kan du legge til kode for å oppnå forskjellige visuelle effekter for å gi bedre brukeropplevelse.


Alle disse og andre er gyldige grunner, men uansett hva du ønsker å oppnå med tilpasset kode, kan prosessen med å skrive kode være nervepirrende eller helt utfordrende! I denne opplæringen vil vi dekke følgende områder:

  • Legge til kode som ser ut som kode, men som ikke oppfører seg som kode (hvis du vil vise frem kodelinjer eller forbedre utseendet på nettstedet ditt)
  • Å legge til kode som er ment å oppføre seg som kode, f.eks. Skriptede annonser som Google Adsense-annonser

Under disse to kategoriene vil vi fordype litt i programmeringskode som HTML, CSS, Javascript og berøre reklame og skjønnheten i

container. La oss komme videre til virksomheten og skrive noen kode uten ytterligere fanfare.

Legge til kode som ser ut som kode, men som ikke oppfører seg som kode

Hvis du ønsker å vise frem kode (kanskje du er en webdesigner eller utvikler) som brukerne dine kan kopiere og lime inn, er det viktig å gjøre det riktig fordi til og med et enkelt linjeskift kan rote koden, derav alt arbeidet ditt. Hvordan koden din vil bli tolket av WordPress, avhenger av om du bruker HTML- eller Visual Post-redigereren. Å legge inn koden din direkte i den visuelle redigereren vil ikke ha den effekten du ønsker å opprette, ettersom den visuelle redaktøren vurderer koden som normal tekst, noe som betyr at nettlesere ikke vil tolke koden din som “kode”, men som vanlig tekst.

På den annen side vil HTML Post Editor gjenkjenne all HTML- eller CSS-markering du bruker, noe som betyr at de vil bli tolket av nettleseren, noe som kan føre til rotete oppsett og funky innhold. For eksempel, 

i den visuelle redaktøren vil bli tolket som vanlig tekst, og resultatet blir rettferdig
. derimot,
 i HTML-redaktøren vil bli tolket som HTML-merking, og resultatet vil være opprettelsen av en container.

En HTML-øvelse

Det er en øvelse i nytteløs egentlig, men du kan prøve det for et tydeligere bilde av hva jeg mener. Bare åpne din HTML editor, type

og lagre det som et utkast. Når utkastet er lagret, klikker du på “Forhåndsvisning av innlegg” for å se ditt manglet nettsted. Ikke bekymre deg, det er ikke permanent, og du kan bare søppel utkastet. Nå tilbake til virksomheten.

Generelt kan du bruke kode på to måter. For det første kan du bruke kode på en linje (eller avsnitt) for å avklare et punkt om koden din. Dernest kan du skrive, fremheve og sette koden i en blokk som denne:



Skrive kode i WordPress Posts Tutorial


...

For å oppnå ovennevnte effekt, bruker vi kodelappen skrevet som ... koden vår går inn her . Innbytterpiler (<  >) Med firkantede parenteser ([]) avhengig av WordPress-nettstedet ditt og postredigereren du bruker (visuell eller HTML). Koden du vil vise, må gå mellom åpningskoden,   og avslutningskoden, . For eksempel å bruke kode i et avsnitt:

Kode i et avsnitt

Kodekoden får ikke-HTML-tekst til å se ut som kode, men den forteller ikke nettleseren om å tolke HTML-merking eller strippe den fra innlegget. Dette betyr at en nettleser fremdeles kan kode HTML-markeringen din, noe som gjør det vanskelig å vise frem HTML-tagger i koden din. Du kan imidlertid overvinne dette problemet ved å bruke utvidede tegn eller karakterenheter til å representere < > tegn, som vil lure hver nettleser. For eksempel…

HTML-tagger kan tolkes som HTML Markup

… vil lage en ny beholder (takk til

) og en overskrift (

), som vil rote websiden din. Men hvis du bruker karakterenheter til å erstatte < > piler, vil du unngå denne oppførselen og sende ut koden din som ønsket. Koden ovenfor vil derfor se slik ut:

Bruk karakterenheter i stedet

Lag en markert blokk av kode

Hvis jeg ønsker å fremheve en blokk med kode (eller til og med tekst) for å få noe sånt;

Kodeblokk

Jeg begynner med å legge koden (eller teksten) i en container slik:

Du må gjøre dette i HTML-redigereren

Så legger jeg til stil ved å bruke CSS enten direkte (som på bildet over) eller gjennom style.css filen som finnes i hovedmappen til temaet ditt.

Style kodelappene dine

Kodekoden bruker skriftstørrelsen fra og legg teksten som standard i en ensidig font. Du kan imidlertid endre alt slik at koden ser akkurat slik du vil. Alt du trenger å gjøre er å legge til …

 kode {font-size: 1.2em; color: # 000; font-vekt: normal;} 

… eller noe som ligner på ditt style.css. Det er ubegrensede stiler, og alt avhenger av dine personlige preferanser, så ikke hold tilbake – stilen unna.

Legge til kode som oppfører seg som kode

Denne delen er spesielt nyttig hvis du ønsker å vise annonser eller andre skript, f.eks. Javascript-utdrag i innleggene dine. Mens det er plugins, som Rask Adsense, som hjelper deg med å administrere annonser i innleggene dine, kan du være interessert i å installere frittstående skript som du har full kontroll over.

Hvis annonsen din er et enkelt bilde og en lenke, kan du legge annonsen inn i innlegget ditt via opplastingsverktøyet. Bare last opp bildet og skriv inn lenken din (og kanskje en bildetekst), og arbeidet ditt er gjort. Denne metoden er imidlertid begrenset, ettersom du bare kan justere annonsen til venstre, til høyre eller i midten – akkurat som et typisk bilde. Alternativt kan du opprette en container i innlegget ditt ved hjelp av HTML-redigereren.

Eksempel:


Lag denne beholderen akkurat der du vil ha annonsen din, noe som betyr at du må ha innlegget klart før du legger til annonsen. Når beholderen er klar, kan du style den du vil. Du kan flytte den rundt med stilen din.css ved å bruke posisjon eiendom. Hvis du ønsker å kjøre en Google Adsense-annonse innen innleggene dine, kan du fremdeles bruke Rask Adsense – pluginen – eller lag en container og plasser annonsekoden slik:


Merknad 1: Google-annonser er Javascript-basert, og kan tolkes av alle større nettlesere forutsatt at brukeren har aktivert Javascript på sine maskiner.

Notat 2: Du må velge de riktige annonsedimensjonene for nettstedet ditt for å unngå å rutte med innlegg og nettsted.

Hvis du ønsker å legge til en permanent annonse som vil vises på alle innleggene dine (nåværende og fremtidige innlegg) uten noe ekstra arbeid, må du redigere Enkelt innlegg mal (Single.php). Jeg la en annonse på 468 x 60 bilder på toppen av alle innleggene mine ved å legge til følgende kode i single.php rett etter < – – END post-entry-meta – ->.


Selvfølgelig må du bruke dine egne Google-annonser. Slik ser Google Adsense-annonsen ut på bloggen min:

Skrive kode i WordPress

Å finne single.php, gå til din Administrasjonspanel – >> Utseende – >> Redaktør – >> single.php. Når single.php er åpen, bruker du søkefeltet (Ctrl + F) å lokalisere < – – END post-entry-meta – ->.

Du kan la beholderen være som den er, eller style den ved å bruke style.css slik du finner passende. Og husk å lagre alle endringene. De

container er veldig nyttig, og når du kobler den til CSS og en unse kreativitet, kan du oppnå så mye med WordPress-nettstedet ditt. Det kan hjelpe deg å plassere hvilken som helst kode (eller noe som helst) hvor som helst på nettstedet ditt.

Verktøykassen

Hvis du vil lære mer om hvordan du skriver tilpasset kode i WordPress-innleggene dine, kan du gjerne sjekke ut følgende ressurser:

Det handler om det. Vi har klart å dekke områdene vi skisserte i begynnelsen. Men hvis du ikke forstår noe konsept i dette innlegget, eller ønsker å legge til forslag eller synspunkter, kan du dele tankene dine i kommentarfeltet nedenfor!

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