WordPress-författare har möjlighet att skapa sidor och inlägg i en visuell redigerare eller en textredigerare. Medan den visuella redigeraren gör ett ganska bra jobb med sina verktygsfältalternativ och enkel redigeringsmiljö, tillåter användningen av textredigeraren maximal flexibilitet för hur man organiserar innehåll.

Låt mig förklara inte bara varför du vill använda textredigeraren (i stället för den visuella redigeraren), men hur lätt det kan vara att använda.

varför kanske du föredrar Textredigeraren?

• ditt innehåll kommer att vara mer meningsfullt för dina läsare och sökmotorer.
• du behöver bara veta några HTML-taggar för att göra Textredigeraren mycket användbar.
• du kan använda CSS-stilegenskaper direkt i din HTML-kod.

Vad Händer När Du Använder Den Visuella Redigeraren?

när du lägger till kopia, media eller länkar till din visuella redigerare lägger du verkligen till HTML på din sida eller inlägg. Allt sker under huven.

inte säker på vad jag menar? Prova det här.

Lägg till en kopia i den visuella redigeraren. Välj sedan fliken Text. Vad du kommer att titta på är HTML. Precis som med den visuella redigeraren kan du redigera din HTML-kod direkt med textredigeraren.

faktum är att du kan göra mycket mer med textredigeraren än du kan med den visuella redigeraren. Detta gör arbetet i textläge inte bara mer produktivt utan också mer tillfredsställande. Du kommer att kunna mer exakt Markera ditt innehåll som kommer att gynna dina läsare och öka dina SEO-ansträngningar.

HTML är ungefär lika enkelt som det blir. Varje webbsida, inklusive de som genereras av WordPress, använder den.

att lära sig HTML kommer att ha fördelar långt utöver att använda det med WordPress!

vad är HTML?

känd som lingua franca på webben, HyperText Markup Language (HTML) är ett system som gör det möjligt för författare att tilldela innehåll mening. Med hjälp av HTML-element (bättre känd som taggar) kan du definiera innehåll som stycken, rubriker, listor, länkar och andra strukturer.

HTML är ungefär som grammatik.

det har ingenting att göra med hur en webbsida ser ut eller hur den är utformad. Frågan om webbdesign-layout, typografi och färg – tas upp med CSS (Cascading Style Sheets), språket för webbdesignstil.

HTML utvecklas av World Wide Web Consortium (W3C). Den senaste versionen är HTML5.

de taggar du mest sannolikt använder

HTML är ett containeriserat markeringssystem. För varje öppen tagg finns en matchande stängningstagg.

till exempel, för det viktigaste innehållet på en sida eller ett avsnitt på en sida skulle du använda en rubrik 1-tagg så här.

<h1>allt om HTML< / h1>
den öppna taggen är<h1> och behållaren är stängd med< / h1>

på samma sätt är det här hur ett stycke markeras:

<p> för flera år sedan föreslog en klient och god vän att jag skulle lära mig WordPress. Vid den tiden var jag emot alla typer av CMS. Lite visste jag att jag skulle älska det och lära det till många människor i New York City klassrum och via webinar.</p>

allt du behöver göra är att skriva ditt innehåll i textredigeraren, lägga till dina taggar antingen när du går eller efter att du har skrivit in kopian.

här är en förklaring av de vanligaste taggarna du kommer att använda när du skriver HTML. De är rubrik, lista, länk, gruppering och några Diverse taggar.

rubriktaggar

<h1></h1>

<h2></h2>

<h3></h3>

• det finns också H4 -, h5-och h6-rubriktaggar som i praktiken sällan används.
• Använd aldrig en rubriktagg för att ändra teckenstorlek.

LISTTAGGAR

du kan skapa 3 typer av listor med HTML. De 2 mest populära är beställda och oordnade listor.

en oordnad lista används när ordningen på objekten inte är viktig.

< ul>

<li> blommor< / li>

<li>grönsaker< / li>

<li > träd< / li>

</ul>

• blommor
• grönsaker
• träd

en ordnad lista används när ordningen på artiklarna är relevant.

< ol>

<li>Kalifornien< / li>

<li>Texas< / li>

<li>Florida< / li>

</ol>

1. Kalifornien
2. Texas
3. Florida

(i det här exemplet är ordningen relevant och bestämd av de största populationerna i amerikanska stater.)

Obs: listor kan också kapslas för att skapa en hierarki av listobjekt. Detta är svårt att göra när du använder den visuella redigeraren.

LÄNKTAGG

du kan förvandla text eller en bild till en länk genom att linda in texten eller bilden inuti en ankartagg (länk). Medan syntaxen för att skapa en länk alltid är densamma (<a href=”url”>länktext</a>) finns det 2 mycket vanliga sätt att göra det.

för en länk till en WordPress-sida, använd:

<a href= ” http://domain.com/this-is-the-page-title”>link till en WordPress-sida< / a>

för en länk till en sida eller resurs, inte bara en WordPress-sida, använd:

<a href=”http://domain.com/about.html”>link till en HTML-sida</a>

OBS: Det finns faktiskt en tredje väg. Du kan använda det speciella sättet WordPress skapar länkar med följande syntax:

<a href=”index.php?page_id = 356 ” >länk till en sida på din webbplats</a

i det här fallet måste du känna till sidan eller post-id för sidan du länkar till på din webbplats. (Varje sida eller inlägg har ett unikt id-nummer).

gruppera taggar

tekniskt sett finns det inget sådant som ”gruppera taggar” men det är det bästa sättet att beskriva en uppsättning HTML-taggar som innehåller andra element. Syftet med dessa taggar är att mer exakt beskriva innebörden av ditt innehåll.

taggen<rubrik > kan till exempel användas för att definiera den del av din sida som innehåller inledande information så här:

<sidhuvud>

<h1> en ledande Rubriklinje< / h1>

<img src= ”url för bildfil”>

<p> ett stycke information som följer rubriken och bilden som logiskt håller ihop som en grupp av information.< / p>

</rubrik>

här är några mycket vanliga grupperingstaggar

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

andra taggar
förutom taggen hittar du dessa taggar mycket användbara när du arbetar med textredigeraren.

<img src="url of image file">

<br>

<!-- hidden code or info here -->

<blockquote> or <q>

medan dessa taggar kommer att få dig långt, här är några resurser som hjälper dig.

Portuguese du behöver bara 10 HTML-taggar (tutorial)
HTML-Element referens i alfa ordning
HTML-Element referens

reglerna

skönheten i HTML är att det finns bara några regler att följa och de är lätta att komma ihåg.

* HTML är skiftlägeskänslig

versaler, gemener eller blandade fall – skriv HTML som du vill. Den vanliga praxisen är små bokstäver.

* för varje öppen tagg måste det finnas en nära tagg

det finns undantag från detta, men för att göra det riktigt enkelt, vana att stänga alla öppna taggar.

* taggar stängs i omvänd ordning där de öppnas inom ett Block

detta kan vara lite svårt att förstå, så här är ett exempel.

<p >här är en<strong >stycke med<a href=”url här”>en länk</a></strong > inuti och en del av texten betonas.< / p>

Lägg märke till ordningen: <p><stark><a>….< / a>< / stark>< / p>

* vissa element har inte en Stängningstagg

taggar som <br> och <img> har ingen stängningstagg eftersom det inte finns någon anledning till en.

* använd HTML korrekt och inte utforma din sida

till exempel, använd inte <br> taggar när du har en lista. Eller använd inte< tabell > taggar för att skapa ett rutnät för layout.

Textredigeringsverktygsfältet

eftersom jag tycker att det är effektivt att skriva kod i textredigeraren använder jag vanligtvis inte verktygsfältet. Men om du kommer igång med HTML kan du hitta några av verktygen som är användbara som ett sätt att lära dig lite HTML. I slutändan kommer du att inse att det finns fler taggar som du kan använda för att korrekt markera ditt innehåll än vad verktygsfältet tillåter.

HTML-insticksprogram

förr eller senare kommer du att märka att om du skapar ett stycke i den visuella redigeraren kommer du inte att se en <p> tagg som omsluter din kopia när du ser den i textredigeraren. Låt inte det störa dig. WordPress genererar fortfarande en< p > tagg när kopian visas på din sida.

om du har detta eller andra problem med din kod, kanske du vill använda dessa plugins.

redigera alltid i HTML

detta garanterar att när du går till skapa eller redigera sida eller posta innehåll, din redaktör kommer alltid att öppna som en textredigerare och inte en visuell Editor. Detta kan vara mycket användbart eftersom WordPress kan ta bort dina taggar under vissa omständigheter där den visuella redigeraren används.

bevara HTML Editor Markup Plus

om du har problem med att ha taggar avskalade, kan detta vara din lösning.

HTML Editor Syntax Highlighter

Detta är en underbar plugin som förvandlar intetsägande textredigerare till en färgkodad ymnighetshorn. Det kan också ändras till en svart bakgrund och större teckensnitt. Det är bäst att använda detta plugin med alternativet helskärm.

OBS: Jag har inte testat två eller flera av dessa plugins samtidigt, så inkompatibiliteter kan existera.

hur kortkoder passar in i bilden

kortkoder är vad många plugins använder för att lägga till ett formulär, ställa in kolumner eller lägga till någon annan funktion på en sida eller ett inlägg. Det är ett enkelt sätt att lägga till kod som HTML, javascript, CSS och PHP utan att behöva veta något om dessa språk.

använd kortkoder i textredigeraren precis som i den visuella redigeraren.

till de oinitierade kan kortkoder se ut som HTML, men de är inte.

du kan antingen klistra in en kortkod på detta sätt om du lägger till ett kontaktformulär, till exempel med det populära kontaktformuläret 7-plugin,

eller så kan du använda det så här för ett plugin,

innehåll för vänster sida av kolumnen

innehåll för höger sida av kolumnen

vilket skapar två kolumner på en sida.

den kortkoden ser ut som HTML med en öppen och nära tagg, men det är inte

lägga till CSS-Styling med textredigeraren

du kan ge CSS-stilegenskaper till innehållet du lägger till i textredigeraren. Detta kan inte göras med standard visuell redigerare.

med textredigeraren kan det göras på 2 sätt.

ett sätt är att lägga till ett id eller ett klassattribut till ett HTML-element som i det här exemplet:

<p id=”lead” > Detta är ledparagrafen i mitt inlägg.< / p>

sedan, i din stil.css-fil du skulle lägga till stilegenskaperna för #lead. Kanske något så här:

#lead

{font-weight:bold;

text-align:center;

färg:#f00;}

det andra sättet är att lägga till inline styling. (Det bästa sättet är dock att hålla din HTML och CSS separat som i ovanstående scenario.) Du kan lägga till inline styling så här:

<p style=”font-family:arial,helvetica,sans-serif”>teckensnittet för detta stycke är Arial.</p>

OBS: Detta skulle åsidosätta någon typsnittsfamilj stil regel för detta stycke som kan finnas i en extern fil eller inom <head> behållaren på sidan.

slutsats

Textredigeraren ger dig total kontroll över hur du vill formatera din sida eller lägga upp innehåll. Du kan använda någon HTML-tagg, inte bara de i Textredigeringsverktygsfältet. Resultatet blir innehåll som är lättare att läsa och förstå av människor och sökmotorspindlar. Det kan ta lite tid att vänja sig vid att skriva HTML, men i slutändan kommer du att finna det mycket tillfredsställande.

författare Bio

Bud Kraus [email protected] är en veteran WordPress instruktör i New York City och undervisar WordPress för individer och grupper via webinar. Han arbetar också på webbplatser för småföretag. http://joyofwp.com