Hur man skriver anpassad kod i dina WordPress-inlägg

Det finns många skäl till varför du vill skriva eller ta med ytterligare kod i dina WordPress-inlägg. Du kanske måste visa reklam, tillämpa unik styling på vissa delar av din webbplats eller helt enkelt markera text eller innehåll för att uppmärksamma. Du kan fortfarande lägga till kod för att uppnå olika visuella effekter för att ge bättre användarupplevelse.


Alla dessa och andra är giltiga skäl, men oavsett vad du vill uppnå med anpassad kod kan processen att skriva kod vara nervomsläppande eller helt utmanande! I denna handledning täcker vi följande områden:

  • Lägga till kod som ser ut som kod men inte uppträder som kod (för det fall du vill visa upp koderader eller förbättra utseendet på din webbplats)
  • Lägga till kod som är avsedd att bete sig som kod t.ex. Skriptade annonser som Google Adsense-annonser

Under dessa två kategorier kommer vi att dela lite i programmeringskod som HTML, CSS, Javascript och touch på annonser och skönheten i

behållare. Låt oss nu gå utanför affärer och skriva lite kod, utan ytterligare fanfare.

Lägga till kod som ser ut som kod men inte uppför sig som kod

Om du vill visa upp koden (kanske du är en webbdesigner eller utvecklare) som dina användare kan kopiera och klistra in, är det viktigt att göra det rätt eftersom till och med en enda radbrytning kan krossa koden, alltså allt ditt arbete. Hur din kod tolkas av WordPress beror på om du använder HTML- eller Visual Post-redigeraren. Att ange din kod direkt i den visuella redigeraren kommer inte att ha den effekt du vill skapa, eftersom den visuella redaktören anser att koden är normal text, vilket innebär att webbläsare inte tolkar din kod som “kod”, utan som vanlig text.

Å andra sidan kommer HTML Post Editor att känna igen alla HTML- eller CSS-markeringar du använder, vilket innebär att de kommer att tolkas av webbläsaren, en sak som kan resultera i trassliga layouter och funky innehåll. Till exempel, 

i den visuella redigeraren tolkas som vanlig text och resultatet blir rättvist
. i alla fall,
 i HTML-redigeraren tolkas som HTML-markering och resultatet kommer att skapa en behållare.

En HTML-övning

Det är en övning i meningslöshet, men du kan prova det för en tydligare bild av vad jag menar. Öppna bara din HTML-redaktör, typ

och spara det som ett utkast. När ditt utkast har sparats klickar du på “Förhandsvisningsinlägg” för att se ditt förvirrad webbplats. Oroa dig inte, det är inte permanent och du kan bara skräpa utkastet. Nu tillbaka till affärer.

Generellt kan du använda koden på två sätt. För det första kan du använda koden inom en rad (eller stycke) för att klargöra en punkt om din kod. För det andra kan du skriva, markera och lägga din kod i ett block som detta:



Skrivningskod i WordPress-inlägg


...

För att uppnå ovanstående effekt använder vi kodtaggen skriven som ... vår kod går in här . Ersätt pilar (<  >) Med fyrkantiga parenteser ([]) beroende på din WordPress-webbplats och inläggsredigeraren du använder (visuellt eller HTML). Koden som du vill visa måste gå mellan öppningstaggen,   och den avslutande taggen, . Till exempel för att använda kod i ett stycke:

Kod i ett stycke

Kodtaggen gör att icke-HTML-text ser ut som kod, men den berättar inte webbläsaren att tolka HTML-markering eller ta bort den från inlägget. Detta innebär att en webbläsare fortfarande kan koda din HTML-markering vilket gör det svårt att visa upp HTML-taggar i din kod. Du kan dock lösa problemet genom att använda utökade tecken eller teckenenheter för att representera < > tecken, vilket kommer att lura varje webbläsare. Till exempel…

HTML-taggar kan tolkas som HTML-markering

… kommer att skapa en ny behållare (tack till

) och en rubrik (

), vilket kommer att krossa din webbsida. Men om du använder teckenenheter för att ersätta < > pilar, kommer du att undvika detta beteende och mata ut din kod efter önskemål. Ovanstående kod kommer därför att se ut så här:

Använd teckenenheter i stället

Skapa ett markerat block med kod

Om jag vill markera ett block med kod (eller till och med text) för att få något liknande;

Kodblock

Jag börjar med att sätta koden (eller texten) i en behållare så:

Du måste göra detta i HTML-redigeraren

Sedan lägger jag till stil med CSS antingen direkt (som på bilden ovan) eller genom style.css fil som finns i ditt temas huvudmapp.

Style dina kodtaggar

Kodtaggen kommer att använda teckenstorleken från och lägger texten som standard i ett monografiskt teckensnitt. Du kan ändra allt så att din kod ser ut precis som du vill. Allt du behöver är att lägga till …

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

… eller något liknande ditt style.css. Det finns obegränsade stilar och allt beror på dina personliga preferenser, så håll inte tillbaka – stil bort.

Lägga till kod som uppträder som kod

Det här avsnittet är särskilt användbart om du vill visa annonser eller andra skript, t.ex. Javascript-utdrag inom dina inlägg. Medan det finns plugins, som Snabb Adsense, som hjälper dig att hantera annonser i dina inlägg, kanske du är intresserad av att installera fristående skript som du har fullständig kontroll över.

Om din annons är en enkel bild och en länk kan du lägga till annonsen i ditt inlägg via uppladdningsverktyget. Ladda bara upp bilden och ange din länk (och kanske en bildtext) så är ditt arbete gjort. Denna metod är dock begränsad eftersom du bara kan justera din annons till vänster, till höger eller i mitten – precis som en vanlig bild. Alternativt kan du skapa en behållare i ditt inlägg med HTML-redigeraren.

Exempel:


Skapa den behållaren exakt där du vill ha din annons, vilket innebär att du måste ha inlägget klart innan du lägger till annonsen. När behållaren är klar kan du utforma den du vill. Du kan flytta den runt med din style.css genom att använda placera fast egendom. Om du vill köra en Google Adsense-annons inom dina inlägg kan du fortfarande använda Snabb Adsense – plugin – eller skapa en behållare och placera din annonskod så här:


Anteckning 1: Google-annonser är Javascript-baserade och kan tolkas av alla stora webbläsare förutsatt att användaren har aktiverat Javascript på sina maskiner.

Anteckning 2: Du måste välja rätt annonsdimension för din webbplats för att undvika att skicka dina inlägg och webbplats.

Om du vill lägga till en permanent annons som kommer att visas i alla dina inlägg (nuvarande och framtida inlägg) utan extra arbete, måste du redigera Enstaka postmall (Single.php). Jag placerade en annons på 468 x 60 gånger 60 högst upp på alla mina inlägg genom att lägga till följande kod i single.php direkt efter < – – END post-entry-meta – ->.


Naturligtvis måste du använda dina egna Google-annonser. Så här visas Google Adsense-annonsen på min blogg:

Skrivkod i WordPress

Att hitta single.php, gå till din Administrationspanel – >> Utseende – >> Redaktör – >> single.php. När single.php är öppet använder du sökfältet (Ctrl + F) att lokalisera < – – END post-entry-meta – ->.

Du kan lämna behållaren som den är eller utforma den med hjälp av style.css som du anser vara lämplig. Och kom ihåg att spara alla ändringar. De

container är verkligen användbart, och när du kopplar ihop det med CSS och en ounce av kreativitet, kan du uppnå så mycket med din WordPress-webbplats. Det kan hjälpa dig att placera valfri kod (eller vad som helst) var som helst på din webbplats.

Verktygslådan

Om du vill veta mer om hur du skriver anpassad kod i dina WordPress-inlägg, känn dig gärna igenom följande resurser:

Det handlar om det. Vi har lyckats täcka områden som vi beskrev i början. Men om du inte förstår något koncept i det här inlägget, eller vill lägga till dina förslag eller åsikter, dela dina tankar i kommentaravsnittet nedan!

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