Sådan skriver du brugerdefineret kode i dine WordPress-indlæg

Der er mange grunde til, at du ønsker at skrive eller inkludere yderligere kode i dine WordPress-indlæg. Det kan være nødvendigt at du viser reklamer, anvender unik styling på visse dele af dit websted eller blot markerer tekst eller indhold for at henlede opmærksomheden. Stadig kan du tilføje kode for at opnå forskellige visuelle effekter for at give bedre brugeroplevelse.


Alle disse og andre er gyldige grunde, men uanset hvad du søger at opnå med brugerdefineret kode, kan processen med at skrive kode være nerveindpakning eller direkte udfordrende! I denne tutorial vil vi dække følgende områder:

  • Tilføjelse af kode, der ligner kode, men ikke opfører sig som kode (hvis du ser ud til at fremvise kodelinjer eller forbedre udseendet på dit websted)
  • Tilføjelse af kode, der er beregnet til at opføre sig som kode, f.eks. Skriptede annoncer såsom Google Adsense-annoncer

Under disse to kategorier vil vi dykke lidt i programmeringskode som HTML, CSS, Javascript og røre ved annoncer og skønheden i

beholder. Lad os nu gå videre til virksomheden og skrive noget kode uden yderligere fanfare.

Tilføjelse af kode, der ligner kode, men ikke opfører sig som kode

Hvis du gerne vil fremvise kode (måske er du en web-designer eller -udvikler), som dine brugere kan kopiere og indsætte, er det vigtigt at gøre det rigtigt, fordi selv en enkelt linjeskift kan ødelægge koden, og dermed alt dit arbejde. Den måde, din kode vil blive fortolket af WordPress, afhænger af, om du bruger HTML- eller Visual Post-editoren. Indtastning af din kode direkte i den visuelle editor vil ikke have den virkning, du ønsker at oprette, da den visuelle redaktør betragter koden som normal tekst, hvilket betyder, at webbrowsere ikke vil fortolke din kode som “kode”, men som almindelig tekst.

På den anden side genkender HTML Post Editor alle HTML- eller CSS-markeringer, du bruger, hvilket betyder, at de vil blive fortolket af webbrowseren, en ting, der kan resultere i rodede layouts og funky indhold. For eksempel, 

i den visuelle redaktør fortolkes som almindelig tekst, og resultatet vil være retfærdigt
. Imidlertid,
 i HTML-editoren fortolkes som HTML-markup, og resultatet vil være oprettelsen af ​​en container.

En HTML-øvelse

Det er en øvelse i nytteløs virkelig, men du kan prøve det for at få et klarere billede af, hvad jeg mener. Bare åbn din HTML editor, type

og gem det som et udkast. Når dit udkast er gemt, skal du klikke på “Vis eksempel på indlæg” for at se dit manglet hjemmeside. Bare rolig, det er ikke permanent, og du kan bare skride udkastet. Nu tilbage til virksomheden.

Generelt kan du bruge kode på to måder. For det første kan du bruge kode inden for en linje (eller afsnit) til at afklare et punkt om din kode. For det andet kan du skrive, fremhæve og placere din kode i en blok som denne:



Skrivning af kode i WordPress Posts tutorial


...

For at opnå ovenstående virkning bruger vi kodekoden skrevet som ... vores kode går ind her . Udskiftningspile (<  >) Med firkantede parenteser ([]) afhængigt af dit WordPress-websted og den posteditor, du bruger (visuel eller HTML). Den kode, du ønsker at vise, skal gå mellem åbningskoden,   og lukningskoden, . For eksempel at bruge kode inden for et afsnit:

Kode i et afsnit

Kodekoden får ikke-HTML-tekst til at se ud som kode, men den fortæller ikke webbrowseren at fortolke HTML-markering eller fjerne den fra posten. Dette betyder, at en browser stadig kan kode din HTML-markering, hvilket gør det vanskeligt at fremvise HTML-tags i din kode. Du kan imidlertid overvinde dette problem ved at bruge udvidede tegn eller karakterenheder til at repræsentere < > tegn, der narrer enhver browser. For eksempel…

HTML-tags kan fortolkes som HTML-markering

… opretter en ny container (takket være

) og en overskrift (

), som vil rydde din webside. Men hvis du bruger karakterenheder til at erstatte < > pile, vil du undgå denne opførsel og udsende din kode efter ønske. Ovenstående kode vil derfor se sådan ud:

Brug karakterenheder i stedet

Opret en markeret blok af kode

Hvis jeg gerne vil fremhæve en blok af kode (eller endda tekst) for at få noget lignende;

Kode blokering

Jeg starter med at lægge koden (eller teksten) i en container på en sådan måde:

Du skal gøre dette i HTML-editoren

Derefter tilføjer jeg stil ved hjælp af CSS enten direkte (som på billedet ovenfor) eller gennem style.css fil findes i dit temas hovedmappe.

Stil dine kodetags

Kodekoden bruger skrifttypestørrelsen fra og læg teksten som standard i en enkelt skrifttype. Du kan dog ændre alt dette for at få din kode til at se lige ud som du ønsker. Alt hvad du skal gøre er at tilføje …

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

… eller noget, der ligner dit style.css. Der er ubegrænsede stilarter, og alt afhænger af dine personlige præferencer, så hold ikke tilbage – stil væk.

Tilføjelse af kode, der opfører sig som kode

Dette afsnit er især nyttigt, hvis du gerne vil vise annoncer eller andre scripts, f.eks. Javascript-kodestykker i dine indlæg. Mens der er plugins, f.eks Hurtig Adsense, som hjælper dig med at administrere annoncer i dine indlæg, er du måske interesseret i at installere fristående scripts, som du har fuld kontrol over.

Hvis din annonce er et simpelt billede og et link, kan du tilføje annoncen til dit indlæg via upload-værktøjet. Upload blot billedet og indtast dit link (og måske en billedtekst), og dit arbejde er færdig. Denne metode er dog begrænset, da du kun kan justere din annonce til venstre, til højre eller i midten – ligesom et typisk billede. Alternativt kan du oprette en container i dit indlæg ved hjælp af HTML-redigereren.

Eksempel:


Opret denne beholder nøjagtigt, hvor du vil have din annonce, hvilket betyder, at du skal have posten klar, før du tilføjer annoncen. Når beholderen er klar, kan du style den, som du vil. Du kan flytte det rundt ved hjælp af din style.css ved hjælp af position ejendom. Hvis du ønsker at køre en Google Adsense-annonce inden for dine indlæg, kan du stadig bruge Hurtig Adsense – plugin – eller opret en container og placer din annoncekode sådan:


Note 1: Google-annoncer er Javascript-baserede og kan fortolkes af alle større webbrowsere, forudsat at brugeren har aktiveret Javascript på deres maskiner.

Note 2: Du er nødt til at vælge de rigtige annoncedimensioner til dit websted for at undgå at messe dine indlæg såvel som dit websted.

Hvis du gerne vil tilføje en permanent annonce, der vises på tværs af alle dine indlæg (nuværende og fremtidige indlæg) uden noget ekstra arbejde, skal du redigere Enkelt indlægsskabelon (Single.php). Jeg placerede en 468px med 60px annonce øverst på alle mine indlæg ved at tilføje følgende kode til single.php straks efter < – – END post-entry-meta – ->.


Selvfølgelig skal du bruge dine egne Google-annoncer �� Sådan vises Google Adsense-annoncen på min blog:

Skrivning af kode i WordPress

At finde single.php, gå til din Administration Panel – >> Udseende – >> Editor – >> single.php. Når single.php er åbent, skal du bruge søgefeltet (Ctrl + F) at lokalisere < – – END post-entry-meta – ->.

Du kan forlade beholderen som den er eller style den ved hjælp af style.css, som du finder passende. Og husk at gemme alle ændringer. Det

container er virkelig nyttigt, og når du parrer det med CSS og en ounce kreativitet, kan du opnå så meget med dit WordPress-sted. Det kan hjælpe dig med at placere enhver kode (eller noget virkelig) overalt på dit websted.

Værktøjskassen

Hvis du gerne vil lære mere om at skrive brugerdefineret kode i dine WordPress-indlæg, er du velkommen til at tjekke følgende ressourcer:

Det handler om det. Vi har formået at dække de områder, vi skitserede i begyndelsen. Men hvis du ikke forstår noget koncept i dette indlæg, eller du gerne vil tilføje dine forslag eller synspunkter, skal du dele dine tanker i kommentarafsnittet 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