Formatering av blogginlägg och grundläggande HTML

Formatering av blogginlägg kräver inte att du kan så mycket HTML, men det är definitivt till stor hjälp!

Om du vill att din blogg ska bli tagen på allvar måste du behärska formatering av blogginlägg.

Detta innebär också att du måste lära dig några grundläggande HTML-trick för att göra dina artiklar intressanta och konsekventa.

Oroa dig inte, jag säger inte att du måste bli programmerare eller något för att skapa attraktiva och oinformerade blogginlägg, men att lära dig några grundläggande färdigheter kommer att vara till stor hjälp.

WordPress är ett CMS (Content Management System) och som sådant kräver det inte att du kodar allting själv.

Det finns verktyg för det.

Det mesta av koden är gömd för att undvika att något går sönder och du har en WYSIWYG-redigerare (What You See is What You Get) för att skriva och formatera blogginlägg och sidor.

Om du har använt WordPress ett tag vet du att det finns både en visuell och en textflik högst upp till höger i innehållsredigeraren, vilket gör det möjligt för dig att växla mellan den stylade versionen av ditt inlägg och den råa HTML:n.

För nybörjare.

Visual = WordPress Visual Editor

Text = WordPress HTML Editor / Raw Text

De flesta nybörjare blir överväldigade och rädda när de ser den obearbetade HTML:en på textfliken för första gången och återvänder snabbt tillbaka.

Men detta behöver inte vara fallet och du kommer att bli en mycket bättre bloggare genom att ta dig tid att bli bekväm med att arbeta och redigera i det här läget.

Med lite övning kan du enkelt behärska några av grunderna, syntaxen är faktiskt ganska logisk.

Syntax (datordefinition):

Vad är HTML?

HTML står för Hypertext Markup Language och är det programmeringsspråk som används för att skapa webbsidor och program.

HTML gör det möjligt för dig att skapa grundläggande funktionalitet som du sedan kan styla med CSS (Cascading Style Sheets).

Det skapades 1990 av Tim Berners-Lee, en av mina personliga hjältar som också tillskrivs uppfinningen av internet, men jag tänker inte lära dig allt om HTML och dess historia, men om du är av den nyfikna sorten kan du fortsätta läsa på Wikipedia.

Vi är bara här för att titta på hur HTML gäller för att skriva och redigera inlägg och sidor i WordPress.

När du ser okänd kod i fliken Text i WordPress-redigeraren tittar du på HTML och i vissa fall kan den innehålla en del CSS-inline-stilar.

HTML Exempel

<h2>This is a title</h2>

De delar som är rödmarkerade är HTML och i det här exemplet ser du en öppnande h2-titeltagg i början och den avslutande h2-titeltagg i slutet.

Märker du den enda skillnaden är att den avslutande taggen har ett backslash före taggens namn? På så sätt kan du snabbt se när din HTML har öppnats och stängts.

Detta är ett bra tips för att upptäcka misstag eller trasig HTML.

HTML med inline CSS Exempel

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

I exemplet ovan har vi använt samma h2, men den här gången har vi dock använt HTML för att anropa ett stycke CSS för att ändra färgen till röd. Lägg märke till att den enda delen som faktiskt är CSS är markerad i rött.

I själva verket kommer du inte att se mycket inline CSS eftersom det bästa sättet är att styla dina HTML-element med externa CSS-filer, detta är det typiska sättet som WordPress-teman tillämpar stilar på din bloggsida automatiskt.

Personligen rekommenderar jag inte att du stylar din HTML inline i WordPress-redigeraren, men det är viktigt att vara medveten om det ifall du någonsin behöver redigera eller rensa upp kod som har letat sig in från andra källor, t.ex. ett plugin eller genom att kopiera och klistra in från en annan källa.

Oundvikligen kommer du att dra nytta av att kunna städa upp när gremlins (ingen teknisk term) hittar in i ditt innehåll.

Så låt oss titta på hur man lägger till HTML till WordPress-inlägg och inlägg och sidor och vad du behöver veta.

WordPress Basic HTML Essentials

När du lägger till HTML för att styla ditt innehåll måste du komma ihåg att omsluta ditt innehåll med relevanta öppnings- och sluttaggar.

Exempel:

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

Det finns exempel på användbara HTML-element som inte kräver någon avslutande tagg eftersom de är självstängande.

Ett exempel är linjebrytningen <br> som fungerar utan avslutande tagg, detta beror på att linjebrytningar inte har och inte kan innehålla innehåll inuti.

Headings Tags & Sub Headings

Det finns olika typer av rubriker på ett WordPress-inlägg, för det första har du rubriken för inläggstiteln, detta är en <h1> och sedan har du möjlighet att lägga till rubrikstitlar till ditt innehåll för att hjälpa dig gruppera dina tankar.

Dessa sträcker sig från h1 (Heading 1) till h6 (Heading 6) och ditt tema kommer vanligtvis att styla dem så att de har lämplig storlek.

Då titeln på din sida eller ditt inlägg automatiskt är en h1 vill du undvika att använda detta i ditt innehåll eftersom alla andra fall kommer att konkurrera med huvudtiteln som är namnet på ditt inlägg.

Istället ska du följa den semantiskt korrekta ordningsprocessen och första gången du behöver använda en avsnittsrubrik flytta ner till rubriktiteln h2.

Samtidigt som du enkelt kan ställa in dessa med hjälp av rullgardinsmenyn uppe till vänster i inläggsredigeraren WYSIWYG är det bra att veta hur de fungerar i HTML-format så att du kan rätta till eventuella misstag.

Här är några exempel

<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>

Förhoppningsvis börjar du se ett mönster här med HTML-syntaxen.

Alla HTML-element börjar med ett inledande <

De avslutas också med ett avslutande >

Öppnande element kan helt enkelt innehålla elementets namn.

Slutande taggar innehåller ett snedstreck efter det inledande < och före namnet på det HTML-element som de avslutar.

Att bara bekanta sig lite mer med det ovanstående kommer att göra att du kommer att vara ett stort steg före de flesta bloggare som använder WordPress.

Fet eller kursiv

När du vill betona en punkt och uppmärksamma vissa ord kanske du vill använda fet eller kursiv för att få dem att sticka ut.

Jag föredrar definitivt detta tillvägagångssätt framför ALL CAPS, som för mig framstår som skrikande.

HTML för fet stil är <strong> och för kursiv stil <em>.

Skojfråga: Strong är lätt att komma ihåg för att göra något fett, men varför använder elementet kursiv stil em? Em är en förkortning för betoning. Det kanske hjälper det att fastna.

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

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

Och du kan använda WordPress WYSIWYG förstås eller tangentbordsgenvägen CTRL + B för fet och CTRL + I för kursiv efter att du har markerat den text du vill ändra.

För en fullständig lista över WordPress-tangentbordsgenvägar och andra formateringsmetoder, gå hit.

Det finns vissa regler för hur du bör och inte bör använda dessa, bland annat att hålla dem ömsesidigt uteslutande, reservera dem för korta meningar och använda dem sparsamt.

Practical Typography har en bra artikel som förklarar vikten av dessa regler.

Om du skriver texter som verkligen ska engagera människor, till exempel försäljningstexter så kan dessa regler böjas, men inte brytas.

emphasis

Håll dig till att om allt betonas så betonas ingenting!

Listor – ordnade & oordnade

Det finns två typer av listor som du kan lägga till med hjälp av HTML och som också stöds av WordPress WYSIWYG.

Dessa är:

Orderade listor – <ol>

Orderade listor visas som en serie numrerade objekt. Detta är användbart när du skriver en lista där ordningen har betydelse.

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

Ovanstående kod blir till:

1. Item 1
2. Item 2
3. Item 3

Underordnade listor – <ul>

Underordnade listor är i huvudsak punktlistor.

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

Och denna blir till nedanstående punktlista.

• Post 1
• Post 2
• Post 3

Vi vet alla hur användbara listor är och de hjälper också till att bryta upp ditt innehåll och göra det mer intressant.

En viktig skillnad som du kommer att märka här är att det finns enskilda listobjekt <li> och att de är omslagna i sin helhet med en <ol> eller <ul> omslagsdel.

Detta är viktigt att vara medveten om, för om omslagsdelen <ol> eller <ul> saknas kommer listobjekten inte att renderas.

Bilder

En annan viktig aspekt av att formatera ett blogginlägg eller någon sida med WordPress är användningen av bilder och du borde inte ha några problem med att hitta några intressanta bilder som du kan få från Yahoo images och andra webbplatser med upphovsrättsfria bilder. En del av dessa alternativ är betalda men många av dem är gratis förutsatt att du ger kredit med en källhänvisning och länk.

Ett litet pris att betala för att ha professionella bilder på din webbplats eller blogg.

En bild är värd tusen ord, som de säger, de ger också dina läsare visuell stimulans samt pauser för att hjälpa till att bryta upp det ditt innehåll i smältbara bitar.

Detta hjälper till att hålla dina läsare engagerade och även om du inte behöver koda bilder själv är det användbart att förstå syntaxen.

Här är ett exempel på bildkod och hur den kommer att se ut när du tittar på fliken Text i din editor.

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

En bild behöver ingen avslutande tagg eftersom all information som den behöver finns inom HTML-elementets öppnings- och stängningsklammer. I src kallas helt enkelt platsen för URL:en.

WordPress gör det möjligt för dig att låta dina bilder flyta till vänster, höger eller så kan du centrera dem. Om du gör det och kontrollerar koden i fliken Text kommer du att se att klasser har lagts till som används för att styla bilderna i enlighet med detta.

Detta är ett exempel på att extern CSS används för att tillämpa olika stilar på olika bilder. Viktigt att veta!

Viktigt: Innan du lägger till bilder i dina inlägg och på dina sidor ska du se till att de är optimerade för snabbhet och sökmotorer.

Embeds

Oundvikligen kommer du att vilja använda inbäddningskoder från externa webbplatser.

Ett exempel är när du vill lägga till en video från YouTube eller Vimeo, du går till dela och får en lång kod som du kan kopiera.

Det viktigaste att komma ihåg är att du inte kan klistra in HTML eller annan kod på den visuella fliken i innehållsredigeraren. Om du gör det förvrängs koden och blir oanvändbar när du trycker på spara.

Se till att du går till textfliken och sedan klistrar in koden där du vill att den ska visas.

Nedan följer ett exempel på en inbäddningskod från YouTube.

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

Med hjälp av WordPress kan du helt enkelt klistra in en YouTube-URL i ditt inlägg för att visa den som en video, men detta ger dig kanske inte full kontroll över videodimensionerna och de andra inbäddningsinställningarna.

För denna anledning, och för att jag är av den gamla skolan, använder jag fortfarande iframe-embed-koden.

De flesta webbplatser som erbjuder embed-koder har inte nativt stöd av WordPress och därför måste du fortfarande känna till embed-koder, iframes och hur de fungerar för att kunna lägga till multimedier i dina inlägg.

Shortcodes

Shortcodes är inte HTML. Faktum är att de inte ens är ett programmeringsspråk, de är en inbyggd funktion i WordPress som gör det möjligt för utvecklare av insticksprogram och teman att skapa enkla sätt för dig och mig att lägga till element på våra webbsidor och inlägg.

Det enklaste exemplet som finns på i stort sett alla bloggar är en kortkod för kontaktformulär, men det finns hundratals, om inte tusentals potentiella användningsområden för kortkoder som inkluderar möjligheten att lägga till:

• Tabeller
• Gallerier
• Prispaket
• Video
• Lead Magnets / Email Opt-in formulär
• Podcast Episoder

Här är en genvägskod för ett kontaktformulär som genereras av Contact Form 7 plugin, ett av våra rekommenderade insticksprogram som vi installerar på 90 % av våra webbplatser och bloggar.

Notera: Jag var tvungen att lägga till mellanslag efter den inledande och före den avslutande parentesen för att förhindra att det faktiskt visade kontaktformuläret, så föreställ dig det utan mellanslag.

Notera att syntaxen för en kortkod är annorlunda. De börjar med en inledande parentes istället för < och >.

De formateras sedan av shortcode-utvecklaren för att göra det enkelt för dig att justera och ändra viktiga inställningar.

När webbsidan laddas laddar det här kontaktformuläret faktiskt cirka 20 rader av rörig HTML, så det är mycket enklare för dig när du kan få tillgång till en shortcode.

Den enda invändningen är att du inte vill överutnyttja shortcodes eftersom de kommer att göra dina webbsidor långsammare.

De är användbara att känna till och kan göra processen att redigera ditt inlägg mycket mindre besvärlig när du inte behöver använda stora mängder HTML som du inte förstår och måste arbeta försiktigt runt.

Det finns flera andra tips som jag råder nya WordPress-studerande att tänka på och som jag kommer att ta upp kortfattat.

Dessa inkluderar:

• Lägg inte till onödiga radbrytningar. Det innebär att du ska försöka att inte använda <br> HTML-taggen och undvika att trycka enter två gånger mellan stycken och avsnitt om du inte absolut måste. Det får dina artiklar att se röriga ut och du kommer garanterat att skapa inkonsekvenser.
• Lägg inte till sidspecifika typsnittsfamiljer, -storlekar och -färger – Återigen får detta dina inlägg att se förskräckliga ut och se ut som om de skapades 1995. Du kanske tror att den gröna titeln i anpassad storlek med ett unikt typsnitt väcker uppmärksamhet, men i själva verket framstår den som inkonsekvent och oprofessionell. Ditt tema bör diktera dessa stilar.
• Lägg aldrig till HTML- eller inbäddningskod i fliken Visuell – Detta kan leda till oväntade resultat, kräva mycket städning eller förstöra din sida helt och hållet.
• Ladda aldrig upp videor till WordPress – Ditt webbhotell är inte byggt för att leverera videoinnehåll. Lyckligtvis erbjuder YouTube och Vimeo supersnabbt och 100 % gratis videohosting ändå. Därför är det bäst att bädda in videor från YouTube även om de är dina egna.

Inget alltför komplicerat, men jag ser ofta att folk gör dessa misstag och gör sina liv svårare.

Men snart kan saker och ting vara annorlunda, mycket annorlunda faktiskt!

Gutenberg, framtiden för bloggandet?

Gutenberg är en ny innehållsredigerare som byggs upp från grunden av WordPress och som snart kommer att installeras nära dig.

Är det framtiden för bloggandet? Vem vet? Men det är definitivt framtiden för WordPress, så det är dags att sätta sig in i den.

Gutenberg är ett annorlunda djur.

Om du någonsin har använt Medium.com för att blogga så kommer det att kännas kusligt likt när du först provar Gutenberg.

I min mening är detta en bra sak, Mediums distraktionsfria innehållsredigerare är vackert enkel att använda och att WP tar fasta på detta är positivt för alla som är involverade i att driva bloggar och webbplatser som körs på WP.

Gutenberg-redigeraren är också modulär och gör det möjligt för dig att dra och släppa block i ditt innehåll, som vart och ett har ett annat syfte.

Detta liknar hur page builder-plugins och vissa teman för närvarande tillhandahåller denna typ av drag and drop-lösning, men nu kommer dessa funktioner till WordPress som standard.

Om det finns en aspekt av WordPress som inte har utvecklats särskilt mycket under årens lopp är det TinyMCE-redigeraren, så jag välkomnar denna innovation med öppna armar.

Om du kämpar med att formatera blogginlägg med den nuvarande editorn kan du redan nu prova Gutenberg genom att ladda ner och installera den genom att gå till plugins i din instrumentpanel och söka efter ”Gutenberg”.

Formatering av blogginlägg & Grundläggande HTML Final Word

Om du ägnar lite tid åt att öva på ovanstående kommer du att få mycket större kontroll över ditt innehåll och hur det presenteras.

Förhoppningsvis känner du dig lite mer bekväm nu med formatering av blogginlägg och grundläggande HTML-användning.

Denna färdigheter kan spara dig en hel del tid, pengar och huvudbry när formateringen av ditt innehåll går fel eller inte återges korrekt.

Om ovanstående grunder räcker för de flesta bloggare och ägare av WordPress-webbplatser, men om du är nyfiken på att lära dig mer finns det några bra kostnadsfria webbplatser där du kan lära dig HTML, bland annat CodeAcademy och w3Schools.

Nu kan du gå ut och göra ditt innehåll vackert! 🙂

Om du tyckte att den här artikeln var användbar, kan du överväga att kolla in några av våra andra användbara bloggarguider, till exempel vår checklista för blogginlägg: Om du gillar den här typen av guider kan du prenumerera på mitt nyhetsbrev så delar jag mitt bästa innehåll och mina upptäckter med dig via e-post.