Articles

MarkoSaric

Denne artikkelen er en one stop shop For WordPress HTML-koder. Her er Listen Over WordPress HTML-koder og koder som oftest brukes til å lage innhold. Lagre listen og bruk den som referanse når du komponerer WordPress blogginnlegg og sider.

WordPress HTML I Gutenberg editor

WordPress Er en av de beste blogging plattformer. Millioner av mennesker og merker bruker den til å lage flotte nettsteder.

denne veiledningen er gyldig både for den selvbetjente og den vertsbaserte versjonen Av WordPress. Se forskjellen mellom WordPress.com eller WordPress.org.

WordPress 5.0 med Den nye Gutenberg editor utgitt i desember 2018 har dramatisk forbedret og lettet måten du arbeider MED HTML-koder i blogginnlegg og sider.

hvordan viser DU HTML-kode i Gutenberg redigerte innlegg? Du legger bare til” Kode ” – blokken og skriver inn koden din. Det vil vise koden til dine besøkende.

hvordan redigerer Du Gutenberg-innleggene DINE VED HJELP AV HTML? Du klikker bare på “Rediger SOM HTML” i alternativmenyen til den aktuelle blokken du vil redigere.

Du kan også legge Til” Classic “blokk eller” Classic Editor ” plugin for å ha den tidligere wysiwyg editor som jeg beskriver lenger ned i dette innlegget.

Klassisk Redaktør: hva er forskjellen Mellom Visuell Og Tekst?

du har to redigeringsalternativer når du skriver et blogginnlegg eller en side i den klassiske WordPress-editoren. Du kan bruke standard “Visuell” visning eller” Tekst ” – modus.

i visuell modus kan du se innholdet ditt som det er. Den visuelle modusen kalles WYSIWYG som står for nøyaktig hva den visuelle modusen gjør: Det Du Ser Er Hva Du Får.

du ser innholdet slik de besøkende vil se det i nettleserne, og du har enkle knapper som hjelper deg med å redigere. De fleste bruker denne “Visuelle” posteditoren I WordPress når de lager innholdet.

i tekstmodus ser du koden og HTML-kodene. Denne tekstmodusen lar deg legge TIL HTML-kode på noen av blogginnleggene eller sidene dine. HTML-basert tekst editor ser skremmende og er ikke så populær blant nybegynnere.

men hva om du vet hvordan du skal kode eller vil ha litt mer kontroll over layout og struktur når du lager innlegg eller sider? Du bør bruke” Tekst ” – editoren.

hvordan redigere HTML I WordPress Classic Editor?

så hvordan får DU TIL HTML tekst editor? I WordPress admin-innlegget eller sideskrivingsdelen klikker du på” Tekst ” – fanen. Det er i tekstredigeringsprogrammet du legger til OG redigerer ALLE HTML-kodene dine.

hvordan legge TIL HTML-kode Til Et WordPress-innlegg eller-side?

du kan bare skrive ELLER lime INN HTML-kode direkte i WordPress” Tekst ” editor. Prøv det med noen av de mest brukte kodene fra listen min nedenfor.

Kopier det her på nettstedet, lim det inn i tekstredigeringsprogrammet og “forhåndsvis” innlegget eller siden din for å se hvordan de besøkende vil se det.

noen ganger skjer det at koden blir fjernet når du bytter fra tekst til visuell modus.

Vær forsiktig og kontroller at dette ikke har skjedd med deg. Eller prøv å holde deg til tekstredigereren bare hvis du planlegger å skrive kode for ikke å støte på dette problemet.

for de som er komfortable med koding, kan du til og med deaktivere den” visuelle ” editoren. Gå inn I “Brukere” I WordPress navigasjonsmenyen, klikk “Din Profil” og velg “Deaktiver visuell editor når du skriver”.

Kopier Og lim inn Mellom Google Docs, Microsoft Word Og WordPress

WordPress 5.0-utgivelsen har gjort det enkelt og enkelt å kopiere innhold Fra Google Docs eller Microsoft Word og lime det inn I WordPress-innlegg og sider.

Dette var ikke alltid lett. Når du arbeider MED HTML I Den Klassiske Editor kan du merke noen vrøvl tegn noen ganger.

Dette kan skje hvis du kopierer / limer inn Fra Microsoft Word Til WordPress. En nyttig kilde når du limer INN HTML-kode Fra Word til WordPress editor Er Postable.

Kopier / lim INN HTML FRA Word (eller en annen kilde) i verktøyet for Å få En WordPress-vennlig og ren versjon av koden som du deretter kan sette inn i innholdet ditt.

hvordan viser JEG HTML-koder på blogginnleggene mine som vanlig tekst?

hva om hvis du ønsket å sette INN OG vise HTML-koder og andre koder i innlegget ditt for besøkende å vise dem som vanlig tekst?

Slags som jeg gjør her i artikkelen min? Du bruker fortsatt tekstredigereren, men du pakker inn koden din slik:

<code><div class="header"></code> 

WordPress HTML syntaks plugins for en bedre visning av kode

Det er Noen WordPress plugins som kan hjelpe deg med denne prosessen, og også tillate deg å redigere oppsettet og måten koden presenteres på bloggen din for de besøkende.

jeg anbefaler følgende to. SyntaxHighlighter Evolved Er det mer populære alternativet, Mens Pastacode er det som fungerer best for De Som bruker Sidebyggere når de designer en blogg.

Mest brukte WordPress HTML koder og koder

Sett inn et bilde

<img src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" alt="Description of the image">

Gjør bildet klikkbart til et nytt mål

<a href="Destination-URL"><img alt="Description of the image" src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" /></a>

Sett inn en lenke

merk at ankerteksten er den synlige delen av lenken din. Det er ordet eller uttrykket som besøkende vil klikke på for å komme til siden du kobler til.

<a href="Destination-URL">Anchor text</a>

Gjør linken nofollow

FOR SEO formål må du kanskje gjøre noen av din link nofollow. Her er hvordan:

<a href="Destination-URL" rel="nofollow">Anchor text</a>

Gjør lenken åpen i et nytt nettleservindu

<a href="Destination-URL" target="_blank">Anchor text</a>

Lenke til en bestemt seksjon på en lang side

disse kalles sidehopp. Besøkende kan klikke på en link og få flyttet et sted lenger ned eller opp artikkelen.

Dette er spesielt nyttig for de lengre guider som du vil dele inn i forskjellige kapitler ved hjelp av innholdsfortegnelsen.

den første delen av å opprette et sidehopp er å tilordne en seksjon (eller et mål) som du vil koble til.

Plasser denne koden til den delen av siden du vil koble til. Den andre delen er å faktisk koble til den tildelte delen fra introen eller innholdsfortegnelsen.

<a></a><a href="#Specific-section">Anchor text</a>

dette fungerer også hvis du vil koble til en bestemt del av siden din fra en annen artikkel på bloggen din. Du kan sette inn en lenke til dette målet: https://yourblog.com/yourpost/#Specific-section.

dette er også hvordan de “tilbake til toppen” linkene fungerer. Tilordne et inndelingsnavn øverst i innlegget ditt og ta med en” gå til toppen ” – knapp nederst i innlegget ditt, og koble til den øverste delen.

Opprett fremtredende titler og underoverskrifter

<h1>This is a heading H1</h1> <h2>This is a heading H2</h2> <h3>This is a heading H3</h3>

Sett inn et linjeskift

<p>This is<br>a paragraph</br> with a line break</p>

Opprett et nytt avsnitt

<p>This is the first paragraph</p> <p>This is the second paragraph</p>

Lag en punktliste

<ul> <li>list item with a bullet point</li><li>another item with a bullet point</li></ul>

Lag en nummerert liste

<ol><li>list item with number 1</li><li>list item with number 2</li></ol>

uthev tekst i et innlegg med gul (eller annen farge) bakgrunn

<span style="background-color:yellow;">Your text</span>

tilordne nummeret for et element i nummerert liste

<ol start="7"><li>List item number 7</li></ol>

lag en bokstavliste

<ol type="A"><li>Item A</li><li>Item B</li><li>Item C</li><li>Item D</li></ol>

lag en liste over romerske tall

midtstill teksten

<center>to be centered</center>

gjør teksten fet

<strong>to be bold</strong>

gjør teksten kursiv

<em>to be italic</em>

Endre fargen på teksten

<span style="color: #000000;">Your text</span>

Sett inn en blockquote

<blockquote>Your quote</blockquote>

Opprett en tabell

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.