Formatering af blogindlæg og grundlæggende HTML

Formatering af blogindlæg kræver ikke, at du kender meget HTML, men det hjælper helt sikkert!

Hvis du vil have din blog til at blive taget alvorligt, skal du mestre din blogindlægsformatering.

Det betyder også, at du skal lære nogle grundlæggende HTML-tricks for at gøre dine artikler interessante og konsekvent stilede.

Nu skal du ikke være bekymret, jeg siger ikke, at du skal blive programmør eller noget for at skabe attraktive og uoplyste blogindlæg, men det vil hjælpe meget at lære nogle få vigtige færdigheder.

WordPress er et CMS (Content Management System), og som sådan kræver det ikke, at du selv skal kode alting.

Der er værktøjer til det.

Det meste af koden er gemt væk for at undgå, at noget går i stykker, og du har en WYSIWYG-editor (What You See is What You Get) til at skrive og formattere blogindlæg og sider.

Hvis du har brugt WordPress i et stykke tid, så ved du, at der både er en visuel og en tekstfane øverst til højre i indholdseditoren, som giver dig mulighed for at skifte mellem den stylede version af dit indlæg og den rå HTML.

For nybegyndere.

Visuel = WordPress Visual Editor

Tekst = WordPress HTML Editor / rå tekst

De fleste nybegyndere bliver overvældet og bange, når de ser den rå HTML på tekstfanen for første gang og vender hurtigt tilbage.

Men det behøver ikke at være tilfældet, og du vil blive en meget bedre blogger ved at tage dig tid til at blive fortrolig med at arbejde og redigere i denne tilstand.

Med lidt øvelse kan du nemt mestre nogle af de grundlæggende ting, syntaksen er faktisk ret logisk.

Syntaks (computerdefinition): Strukturen af udsagn i et computersprog.

Så hvad er HTML?

HTML står for Hypertext Markup Language og er det programmeringssprog, der bruges til at skabe websider og applikationer.

HTML giver dig mulighed for at skabe grundlæggende funktionalitet, som du derefter kan style med CSS (Cascading Style Sheets).

Det blev skabt i 1990 af Tim Berners-Lee, en af mine personlige helte, som også tilskrives at have opfundet internettet, men jeg har ikke tænkt mig at lære dig alt om HTML og historien, men hvis du er af den nysgerrige slags, kan du læse videre på Wikipedia.

Vi er her blot for at se på, hvordan HTML vedrører skrivning og redigering af WordPress-indlæg og -sider.

Når du ser ukendt kode i fanen Tekst i WordPress-editoren, ser du HTML, og i nogle tilfælde kan den indeholde nogle CSS-inline-stilarter.

HTML Eksempel

<h2>This is a title</h2>

De dele, der er markeret med rødt, er HTML, og i dette eksempel ser du et åbnende h2 title tag i begyndelsen og det lukkende h2 title tag i slutningen.

Mærker du den eneste forskel er, at det lukkende tag har en skråstreg før tagets navn? På den måde kan du hurtigt se, hvornår din HTML er åbnet og lukket.

Dette er et godt tip til at spotte fejl eller ødelagt HTML.

HTML med Inline CSS Eksempel

<h2 style="color:red;">This is a title</h2>

I ovenstående eksempel har vi brugt den samme h2, men denne gang har vi brugt HTML til at kalde et stykke CSS for at ændre farven til rød. Bemærk, at den eneste del, der faktisk er CSS, er fremhævet med rødt.

I virkeligheden vil du ikke se meget inline CSS, fordi den bedste måde er at style dine HTML-elementer med eksterne CSS-filer, dette er den typiske måde, WordPress-temaer anvender stilarter på din blogside automatisk.

Jeg anbefaler personligt ikke at style din HTML inline i WordPress-editoren, men det er vigtigt at være opmærksom på det, hvis du nogensinde har brug for at redigere eller rydde op i kode, der har fundet vej ind fra andre kilder som et plugin eller fra kopiering og indsættelse fra en anden kilde.

Uundgåeligt vil du drage fordel af at kunne rydde op i tingene, når gremlins (ikke et teknisk udtryk) finder vej ind i dit indhold.

Så lad os se på, hvordan du tilføjer HTML til WordPress-indlæg og indlæg og sider, og hvad du har brug for at vide.

WordPress Basic HTML Essentials

Når du tilføjer HTML til at style dit indhold, skal du huske at indpakke dit indhold med de relevante åbnings- og lukningstags.

Eksempel:

<p>Paragraphs should be wrapped with p tags</p>

Der er eksempler på nyttige HTML-elementer, der ikke kræver et lukketag, fordi de lukker sig selv.

Et eksempel er linjeskiftet <br>, der fungerer uden et lukketag, hvilket skyldes, at linjeskift ikke har og ikke kan indeholde indhold indeni.

Overskrifter Tags & Underoverskrifter

Der er forskellige typer af overskrifter på et WordPress indlæg, først har du overskriften for indlægstitlen, dette er en <h1> og så har du mulighed for at tilføje overskriftstitler til dit indhold for at hjælpe dig med at gruppere dine tanker.

Disse spænder fra h1 (Heading 1) til h6 (Heading 6), og dit tema vil typisk style dem til at være af passende størrelse.

Da din side- eller indlægstitel automatisk er en h1, vil du gerne undgå at bruge denne i dit indhold, da alle andre forekomster vil konkurrere med hovedtitlen, som er navnet på dit indlæg.

I stedet skal du følge den semantisk korrekte rækkefølge, og første gang du skal bruge en afsnitsoverskrift, skal du flytte ned til h2-overskriftstitlen.

Selv om du nemt kan indstille disse ved hjælp af rullelisten øverst til venstre i indlægseditorens WYSIWYG, er det nyttigt at vide, hvordan de fungerer i HTML-format, så du kan rette eventuelle fejl.

Her er nogle eksempler

<h1>This is a heading 1, you won't need to use me in your content</h1>
<h2>This is a heading 2, I'm very useful, you can use me to organize your articles into sections.</h2>
<h3>This is a heading 3, Only use me if you already have h2 section headings and you need to divide those sections into sub-sections.</h3>
<h4>This is a heading 4, I'm similar to the above, only use me if you have already used h3's</h4>

Håber du er begyndt at se et mønster her med HTML-syntaksen.

Alle HTML-elementer begynder med et indledende <

De lukker også med et afsluttende >

Åbningselementer kan blot indeholde elementnavnet.

Sluttende tags indeholder en skråstreg fremad efter deres indledende < og før navnet på det HTML-element, de lukker.

Bare det at blive lidt mere fortrolig med ovenstående vil bringe dig et stort skridt foran de fleste bloggere, der bruger WordPress.

Fedt eller kursiv

Når du vil understrege et punkt og gøre opmærksom på bestemte ord, kan du bruge fed eller kursiv for at få dem til at skille sig ud.

Jeg foretrækker helt klart denne fremgangsmåde frem for ALL CAPS, som for mig virker som råben.

H HTML for fed er <strong> og for kursiv er det <em>.

Sjovt faktum: Stærk er let at huske til at gøre noget fed, men hvorfor bruger elementet kursiv em? Em er en forkortelse for emphasis. Det hjælper måske med at holde fast.

<em>This text is italicized, I am for gentle emphasis</em>

<strong>This text is bold, I am for strong emphasis</strong>

Derudover kan du selvfølgelig bruge WordPress WYSIWYG eller tastaturgenvejen CTRL + B for fed og CTRL + I for kursiv efter at have markeret den tekst, du vil ændre.

For en komplet liste over WordPress-tastaturgenveje og andre formateringsmetoder, gå til her.

Der er nogle regler for, hvordan du bør og ikke bør bruge disse, herunder at holde dem gensidigt udelukkende, reservere dem til korte sætninger og bruge dem sparsomt.

Practical Typography har en god artikel, der forklarer betydningen af disse regler.

Hvis du skriver tekster, der virkelig skal engagere folk, f.eks. salgstekster, så kan disse regler bøjes, men ikke brydes.

emphasis

Husk, hvis alt er understreget, så er intet understreget!

Lister – ordnede & uordnede

Der er to typer lister, du kan tilføje ved hjælp af HTML, som også understøttes af WordPress WYSIWYG.

Disse er:

Ordnede lister – <ol>

Ordnede lister vises som en række nummererede elementer. Dette er nyttigt, når du skriver en liste, hvor rækkefølgen er vigtig.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Den ovenstående kode bliver til:

1. Post 1
2. Post 2
3. Post 3

Uordnede lister – <ul>

Uordnede lister er i bund og grund punktlister.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Og denne bliver til nedenstående punktliste.

• Post 1
• Post 2
• Post 3

Vi ved alle, hvor nyttige lister er, og de er også med til at bryde dit indhold op og få det til at se mere interessant ud.

En vigtig forskel, som du vil bemærke her, er, at der er individuelle listeelementer <li>, og de er indpakket i deres helhed med en <ol> eller <ul> wrapper.

Dette er vigtigt at være opmærksom på, for hvis de indpakkende <ol> eller <ul> mangler, vil listeelementerne ikke blive gengivet.

Billeder

Et andet vigtigt aspekt ved formatering af et blogindlæg eller en hvilken som helst side med WordPress er brugen af billeder, og du bør ikke have problemer med at finde nogle interessante billeder, som du kan få fra Yahoo images og andre ophavsretsfrie billedwebsteder. Nogle af disse muligheder er betalte, men mange af dem er gratis, forudsat at du giver kredit med en kildeangivelse og et link.

En lille pris at betale for at have professionelle visuelle billeder på dit websted eller din blog.

Et billede siger mere end tusind ord, som man siger, de giver også dine læsere visuelle stimuli samt pauser for at hjælpe med at bryde det dit indhold i fordøjelige bidder.

Dette er med til at holde dine læsere engagerede, og selvom du ikke selv behøver at kode billeder, er det nyttigt at forstå syntaksen.

Her er et eksempel på billedkode, og hvordan det vil se ud, når du kigger på fanen Tekst i din editor.

<img src="https://mazepress.com/image.png">

Et billede kræver ikke et lukket tag, fordi alle de oplysninger, det har brug for, er indeholdt i HTML-elementets åbnings- og lukkeklammere. src kalder blot URL’ens placering.

WordPress giver dig mulighed for at lade dine billeder flyde til venstre, højre eller du kan centrere dem. Hvis du gør det og kontrollerer koden i fanen Tekst, vil du se, at der er blevet tilføjet klasser, som bruges til at style billederne i overensstemmelse hermed.

Dette er et eksempel på, at ekstern CSS bruges til at anvende forskellige stilarter på forskellige billeder. Nyttigt at vide!

Vigtigt: Før du tilføjer billeder til dine indlæg og sider, skal du sørge for, at de er optimeret til hastighed og søgemaskiner.

Embeds

Det er uundgåeligt, at du ønsker at bruge embed-koder fra eksterne websteder.

Et eksempel er, når du vil tilføje en video fra YouTube eller Vimeo, du går til dele, og den giver dig en lang kode, som du kan kopiere.

Den vigtigste ting at huske er, at du ikke kan indsætte HTML eller anden kode på den visuelle fane i indholdseditoren. Hvis du gør det, vil koden blive forvrænget og gøre den ubrugelig, når du trykker på gem.

Sørg for, at du går til tekstfanen og derefter indsætter den, hvor du vil have den vist.

Nedenfor er et eksempel på indlejringskode fra YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ssxCQuv3KzE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Mens WordPress giver dig mulighed for blot at indsætte en YouTube-URL i dit indlæg for at vise den som en video, giver det dig muligvis ikke fuld kontrol over videodimensionerne og de andre indlejringsindstillinger.

Af denne grund, og fordi jeg er af den gamle skole, bruger jeg stadig iframe-indlejringskoden.

De fleste websteder, der tilbyder indlejringskoder, understøttes ikke nativt af WordPress, og derfor skal du stadig være opmærksom på indlejringskoder, iframes og hvordan de fungerer for at kunne tilføje multimedier til dine indlæg.

Shortcodes

Shortcodes er ikke HTML. Faktisk er de ikke engang et programmeringssprog, de er en indfødt WordPress-funktion, der giver plugin- og temaudviklere mulighed for at skabe enkle måder for dig og mig til at tilføje elementer til vores websider og indlæg.

Det enkleste eksempel, der findes på stort set alle blogs, er en kontaktformular shortcode, men der er hundredvis, hvis ikke tusindvis af potentielle anvendelser for shortcodes, der omfatter muligheden for at tilføje:

• Tabeller
• Gallerier
• Prispakker
• Videoer
• Lead Magneter / Email Opt-in formularer
• Podcast Episoder

Her er en genvejskode til en kontaktformular, der genereres af Contact Form 7 plugin’et, et af vores anbefalede plugins, som vi installerer på 90% af vores websteder og blogs.

Bemærk: Jeg var nødt til at tilføje mellemrum efter de indledende og før de afsluttende parenteser for at forhindre, at den faktisk viste kontaktformularen, så forestil dig den uden mellemrummene.

Bemærk, at syntaksen for en shortcode er anderledes. De begynder med en indledende parentes i stedet for < og >.

De er derefter formateret af shortcode-udvikleren for at gøre det nemt for dig at justere og ændre vigtige indstillinger.

Når websiden indlæses, indlæser denne kontaktformular faktisk omkring 20 linjer rodet HTML, så det er meget nemmere for dig, når du kan få adgang til en shortcode.

Den eneste advarsel er, at du ikke ønsker at overanvende shortcodes, da de vil gøre dine websider langsommere.

De er nyttige at kende til og kan gøre processen med at redigere dit indlæg meget mindre besværlig, når du ikke behøver at bruge store mængder HTML, som du ikke forstår og skal arbejde forsigtigt omkring.

Der er flere andre råd om formatering

Der er flere andre råd, som jeg råder nye WordPress-studerende til at huske på, og som jeg vil dække kort.

Disse omfatter:

• Tilføj ikke unødvendige linjeskift. Det betyder, at du skal forsøge at undgå at bruge <br> HTML-tag og undgå at trykke to gange på enter mellem afsnit og sektioner, medmindre du absolut er nødt til det. Det får dine artikler til at se rodet ud, og du vil uvægerligt skabe uoverensstemmelser.
• Tilføj ikke sidespecifikke skriftfamilier, størrelser og farver – Igen får det dine indlæg til at se forfærdelige ud, og som om de blev oprettet i 1995. Du tror måske, at den grønne titel i brugerdefineret størrelse med en unik skrifttype tiltrækker opmærksomhed, når det i virkeligheden stikker ud som inkonsekvent og uprofessionelt. Dit tema bør diktere disse stilarter.
• Tilføj aldrig HTML- eller indlejringskode til fanen Visual Tab – Dette kan føre til uventede resultater, involvere masser af oprydning eller ødelægge din side helt.
• Upload aldrig videoer til WordPress – Dit websteds hosting er ikke bygget til at levere videoindhold. Heldigvis tilbyder YouTube og Vimeo alligevel superhurtig og 100 % gratis videohosting. Derfor er det bedst at indlejre videoer fra YouTube, selv når de er dine egne.

Ingen alt for kompliceret, men jeg ser ofte folk lave disse fejl og gøre deres liv sværere.

Men snart kan tingene være anderledes, meget anderledes faktisk!

Gutenberg, The Future of Blogging?

Gutenberg er en ny indholdseditor, som WordPress er ved at bygge helt fra bunden af, og som meget snart vil komme til en installation i nærheden af dig.

Er det fremtiden for blogging? Hvem ved det? Men det er helt sikkert fremtiden for WordPress, så det er på tide at komme med det.

Gutenberg er et anderledes bæst.

Hvis du nogensinde har brugt Medium.com til blogging, så vil det føles uhyggeligt ens, når du først prøver Gutenberg.

I min mening er det en god ting, Mediums distraktionsfrie indholdseditor er smukt nem at bruge, og at se WP tage dette til efterretning er positivt for alle, der er involveret i at drive blogs og websteder, der kører på WP.

Gutenberg-editoren er også modulær og giver dig mulighed for at trække og slippe blokke ind i dit indhold, som hver især har et andet formål.

Dette svarer til, hvordan side builder-plugins og visse temaer i øjeblikket giver denne form for træk og slip-løsning, men nu kommer disse funktioner til WordPress som standard.

Hvis der er et aspekt af WordPress, der ikke har udviklet sig meget i årenes løb, har det været TinyMCE-editoren, så jeg hilser denne innovation velkommen med åbne arme.

Hvis du kæmper med at formattere blogindlæg med den nuværende editor, kan du allerede nu prøve Gutenberg ved at downloade og installere det ved at gå til plugins i dit instrumentbræt og søge efter “Gutenberg”.

Blogindlægsformatering & Grundlæggende HTML Final Word

Hvis du bruger lidt tid på at øve dig på ovenstående, vil du få meget større kontrol over dit indhold, og hvordan det præsenteres.

Håbentlig føler du dig nu lidt mere fortrolig med blogindlægsformatering og grundlæggende HTML-brug.

Disse færdigheder kan spare dig for en masse tid, penge og hovedrysten, når formateringen af dit indhold går galt eller ikke bliver gengivet korrekt.

Mens ovenstående grundlæggende er nok for de fleste bloggere og WordPress-webstedsejere, hvis du er nysgerrig efter at lære mere, er der nogle gode gratis websteder, hvor du kan lære HTML, herunder CodeAcademy og w3Schools.

Nu kan du gå ud og gøre dit indhold smukt! 🙂

Hvis du fandt denne artikel nyttig, kan du overveje at tjekke nogle af vores andre nyttige bloggingguides som f.eks. vores tjekliste til blogindlæg: Essentials Guide eller How to Repurpose Content, og hvis du er fan af denne slags guides, så tilmeld dig mit nyhedsbrev, og jeg vil dele mit bedste indhold og opdagelser med dig via e-mail.