WordPress auteurs hebben de mogelijkheid om pagina ‘ s en berichten te maken in een visuele Editor of een teksteditor. Terwijl de visuele Editor doet een redelijk goed werk met zijn werkbalk opties en eenvoudige editing omgeving, het gebruik van de teksteditor maakt maximale flexibiliteit over hoe de inhoud te organiseren.

laat me niet alleen uitleggen waarom u de teksteditor wilt gebruiken (in plaats van de visuele Editor), maar hoe eenvoudig het kan zijn om te gebruiken.

waarom zou u de voorkeur geven aan de teksteditor?

• uw inhoud zal logischer zijn voor uw lezers en zoekmachines.
• u hoeft slechts enkele HTML-tags te kennen om de teksteditor zeer nuttig te maken.
• u kunt CSS-stijleigenschappen rechtstreeks toepassen op uw HTML-code.

Wat Gebeurt Er Als U De Visuele Editor Gebruikt?

wanneer u een kopie, media of links toevoegt aan uw visuele Editor, voegt u echt HTML toe aan uw pagina of post. Het gebeurt allemaal onder de motorkap.

niet zeker wat ik bedoel? Probeer dit eens.

voeg een kopie toe aan de visuele Editor. Selecteer vervolgens het tabblad Tekst. Waar je naar kijkt is HTML. Net als bij de Visual Editor, kunt u uw HTML-code direct bewerken met de tekst Editor.

in feite kunt u veel meer doen met de teksteditor dan met de visuele Editor. Dit maakt het werken in de tekstmodus niet alleen productiever, maar ook bevredigender. U zult in staat zijn om nauwkeuriger markup van uw inhoud die ten goede zal komen aan uw lezers en het stimuleren van uw SEO inspanningen.

HTML is ongeveer zo eenvoudig als het wordt. Elke webpagina, met inbegrip van die gegenereerd door WordPress, gebruiken.

het leren van HTML heeft veel meer voordelen dan het gebruik ervan met WordPress!

Wat is HTML?HyperText Markup Language (HTML), de lingua franca van het web, is een systeem waarmee auteurs betekenis kunnen toekennen aan inhoud. Met behulp van HTML-elementen (beter bekend als tags) kunt u inhoud definiëren als alinea ‘ s, koppen, lijsten, links en andere structuren.

HTML lijkt veel op grammatica.

het heeft niets te maken met hoe een webpagina eruit ziet of hoe het is vormgegeven. De kwestie van webpagina ontwerp – lay-out, typografie, en kleur-wordt genomen met CSS (Cascading Style Sheets), de taal van web design stijl.HTML wordt ontwikkeld door het World Wide Web Consortium (W3C). De meest recente versie is HTML5.

de Tags die u het meest gebruikt

HTML is een opmaaksysteem in containers. Voor elke open tag is er een bijpassende afsluitende tag.

bijvoorbeeld, voor de belangrijkste inhoud op een pagina of een sectie van een pagina zou je een kop 1 tag als deze gebruiken.

<h1> alles over HTML< / h1>
de open tag is<h1>en de container is afgesloten met< / h1>

:

<p>enkele jaren geleden stelde een klant en een goede vriend voor om WordPress te leren. Op dat moment was ik tegen elk type CMS. Weinig wist ik dat ik zou komen om het te houden en te leren aan veel mensen in New York City klaslokalen en via webinar.< / p>

het enige wat u hoeft te doen is uw inhoud in de teksteditor te schrijven en uw tags toe te voegen terwijl u bezig bent of nadat u de kopie hebt ingetypt.

hier is een uitleg van de meest voorkomende tags die u zult gebruiken bij het schrijven van HTML. Ze zijn de kop, lijst, link, groepering en een paar diverse tags.

HEADING TAGS

<h1></h1>

<h2></h2>

<h3></h3>

• er zijn ook heading tags h4, h5 en h6 die in de praktijk zelden worden gebruikt.
• gebruik nooit een heading tag om de lettergrootte te wijzigen.

LIJSTTAGS

u kunt 3 typen lijsten met HTML maken. De 2 meest populaire zijn geordende en ongeordende lijsten.

een ongeordende lijst wordt gebruikt wanneer de volgorde van de items niet belangrijk is.

<ul>

<li>bloemen</li>

<li>fruit</li>

<li>bomen</li>

</ul>

• bloemen
• fruit
• bomen

Een geordende lijst wordt gebruikt wanneer de volgorde van de items relevant is.

<ol>

<li>California</li>

<li>Texas</li>

<li>Florida</li>

</ol>

1. California
2. Texas
3. Florida

(In dit voorbeeld is de volgorde van belang is en wordt bepaald door de grootste populaties in de verenigde staten van amerika.)

opmerking: lijsten kunnen ook worden genest om een hiërarchie van lijstitems aan te maken. Dit is moeilijk te doen bij het gebruik van de visuele Editor.

LINK TAG

u kunt tekst of een afbeelding omzetten in een link door de tekst of afbeelding binnen een anker (link) tag te wikkelen. Hoewel de syntaxis voor het maken van een link altijd hetzelfde is (<a href=”url”>link text</a>), zijn er 2 veel voorkomende manieren om dit te doen.

Voor een link naar een WordPress-pagina, gebruik:

<a href=”http://domain.com/this-is-the-page-title”>link naar een WordPress-pagina</a>

Voor een link naar een pagina of bron, niet alleen van een WordPress-pagina, gebruik:

<a href=”http://domain.com/about.html”>link een HTML-pagina</a>

OPMERKING: Er is eigenlijk nog een derde manier. U kunt gebruik maken van de speciale manier WordPress maakt links met de volgende syntaxis:

<a href=”index.php?page_id = 356 ” >link naar een pagina in uw site</a

In dit geval moet u de pagina of post-id kennen van de pagina waarnaar u linkt op uw site. (Elke pagina of post heeft een uniek id-nummer).

tags groeperen

technisch gezien bestaat er niet zoiets als “tags groeperen”, maar het is de beste manier om een set HTML-tags te beschrijven die andere elementen bevatten. Het doel van deze tags is om de Betekenis van uw inhoud nauwkeuriger te beschrijven.

bijvoorbeeld, de <header> – tag kan worden gebruikt om het gedeelte van uw pagina met toonaangevende informatie zoals deze:

<header>

<h1>Een Toonaangevende koerslijn</h1>

<img src=”url van de afbeelding bestand”>

<p>Een lid van de informatie na de omschrijving en afbeelding die logisch bij elkaar houdt als een groep van de informatie.< / p>

</header>

hier zijn enkele veel voorkomende groepeertags

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

andere TAGS
naast de tag, zult u deze tags zeer nuttig vinden bij het werken met de teksteditor.

<img src="url of image file">

<br>

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

<blockquote> or <q>

terwijl die tags je een lange weg zal krijgen, hier zijn een paar middelen om u te helpen.

● u hebt slechts 10 HTML-Tags nodig (tutorial)
● HTML-Elementreferentie in Alpha-volgorde
● HTML-Elementreferentie

de regels

het mooie van HTML is dat er slechts een paar regels zijn die u kunt volgen en die gemakkelijk te onthouden zijn.

* HTML is hoofdlettergevoelig

hoofdletters, kleine letters of gemengde letters – schrijf HTML zoals u wilt. De algemene praktijk is kleine letters.

* voor elke open Tag moet er een gesloten Tag

zijn er uitzonderingen op deze, maar om het echt gemakkelijk te maken, krijgen in de gewoonte van het sluiten van alle open tags.

* Tags worden gesloten in de omgekeerde volgorde waarin ze worden geopend binnen een blok

dit kan een beetje moeilijk te begrijpen zijn, dus hier is een voorbeeld.

<p>hier is een <strong>alinea met <a href= “url here” >een link</a></strong> binnen en een deel van de tekst wordt benadrukt.< / p>

let op de volgorde: <p><strong><a>….< / a>< / strong>< / p>

* sommige elementen hebben geen afsluitende Tag

Tags zoals < br > en <img> hebben geen afsluitende tag omdat er geen reden voor is.

* gebruik HTML correct en niet om uw pagina op te stylen

gebruik bijvoorbeeld geen <br> tags wanneer u een lijst hebt. Of gebruik geen <table> tags om een raster voor de opmaak te maken.

de Teksteditorwerkbalk

omdat ik het efficiënt vind om code in de teksteditor te schrijven, gebruik ik meestal de werkbalk niet. Echter, als je aan de slag met HTML, kunt u een aantal van de tools nuttig vinden als een manier om jezelf wat HTML te leren. Uiteindelijk zult u zich realiseren dat er meer tags zijn die u kunt gebruiken om uw inhoud goed te markeren dan wat de werkbalk toestaat.

HTML-plug-ins

vroeg of laat zult u merken dat als u een alinea in de visuele Editor maakt, u geen <p> tag rond uw kopie ziet wikkelen wanneer u deze in de teksteditor ziet. Laat dat je niet storen. WordPress zal nog steeds een <p> tag genereren wanneer de kopie op uw pagina verschijnt.

als u deze of andere problemen met uw code heeft, kunt u deze plugins gebruiken.

Bewerk altijd in HTML

dit garandeert dat wanneer u pagina ‘ s maakt of bewerkt of inhoud plaatst, uw editor altijd als teksteditor zal openen en niet als visuele Editor. Dit kan erg handig zijn omdat WordPress kan strippen van uw tags in sommige omstandigheden waar de visuele Editor wordt gebruikt.

HTML-Editor-opmaak behouden Plus

Als u problemen heeft met het verwijderen van tags, kan dit uw oplossing zijn.

HTML Editor syntaxis Highlighter

dit is een prachtige plugin die de saaie teksteditor verandert in een kleur gecodeerde hoorn des overvloeds. Het kan ook veranderen naar een zwarte achtergrond en grotere lettertypen. Het is het beste om deze plugin te gebruiken met de optie Volledig scherm.

opmerking: Ik heb twee of meer van deze plug-ins niet tegelijkertijd getest, zodat onverenigbaarheden kunnen bestaan.

hoe Shortcodes in de afbeelding passen

Shortcodes zijn wat veel plugins gebruiken om een formulier toe te voegen, kolommen in te stellen of een andere functie toe te voegen aan een pagina of post. Het is een eenvoudige manier om code zoals HTML, javascript, CSS en PHP toe te voegen zonder iets te weten over die talen.

gebruik shortcodes in de teksteditor net als in de visuele Editor.

voor de niet-ingewijden kunnen shortcodes op HTML lijken, maar dat zijn ze niet.

u kunt een shortcode op deze manier plakken als u een contactformulier toevoegt, bijvoorbeeld met de populaire Contactformulier 7-plugin,

of u kunt het als volgt gebruiken voor een plugin,

inhoud voor de linkerkant van kolom

inhoud voor de rechterkant van kolom

die twee kolommen op een pagina maakt.

die shortcode lijkt op HTML met een open en sluit tag, maar het is niet

het toevoegen van CSS-Styling met behulp van de teksteditor

u kunt CSS-stijleigenschappen leveren aan de inhoud die u toevoegt in de teksteditor. Dit kan niet worden gedaan met de standaard visuele Editor.

met de teksteditor kan het op 2 manieren.

een manier is om een id of een class attribuut toe te voegen aan een HTML-element zoals in dit voorbeeld:

<p id= “lead” >dit is de lead paragraaf in mijn bericht.< / p>

dan, in uw stijl.css bestand je zou de stijl eigenschappen voor #lead toevoegen. Misschien iets als dit:

# lead

{font-weight:bold;

text-align: center;

color:#f00;}

de tweede manier is om inline styling toe te voegen. (Echter, de beste aanpak is om uw HTML en CSS gescheiden te houden zoals in het bovenstaande scenario.) U kunt inline styling als volgt toevoegen:

<p style= “font-family: arial,helvetica, sans-serif”>het lettertype voor deze alinea is Arial.</p>

Opmerking: Dit zou elke lettertype-familie stijl regel voor deze paragraaf die aanwezig kan zijn in een extern bestand of binnen de <head> container van de pagina overschrijven.

conclusie

de teksteditor geeft u volledige controle over hoe u uw pagina wilt opmaken of inhoud wilt plaatsen. U kunt elke HTML-tag gebruiken, niet alleen die in de teksteditor werkbalk. Het resultaat zal Inhoud zijn die gemakkelijker te lezen en te begrijpen is door mensen en zoekmachine spinnen. Het kan even duren om te wennen aan het schrijven van HTML, maar uiteindelijk zul je het zeer bevredigend vinden.

auteur Bio

Bud Kraus [email protected] is een ervaren WordPress instructeur in New York City en leert WordPress voor individuen en groepen via webinar. Hij werkt ook op sites voor kleine bedrijven. http://joyofwp.com