Effectief valideren van een WordPress-website

Validatie is ongetwijfeld een van de belangrijkste aspecten van goed webdesign. En in een contentmanagementsysteem als WordPress moet je voorzichtig zijn met je HTML & CSS, zowel in je thema als in je inhoud. In deze zelfstudie gaan we het hebben over het valideren van een WordPress-website.

Waarom een ​​website valideren?

Of misschien is de betere vraag wat de betekenis van validatie is?

Simpel gezegd betekent validatie van een webpagina dat de code van de pagina voldoet aan de World Wide Web Consortium (W3C) -standaarden. Dit gebeurt meestal door de HTML & CSS-uitvoer van uw webpagina's te controleren met een validatietool. Net zoals er grammaticaregels zijn in verschillende talen, zijn er ook regels in computerprogrammering. Validatie controleert uw webpagina om te zien of de pagina die regels volgt.

Daarnaast moeten we ervoor zorgen dat de code van ons thema voldoet aan de coderingsstandaarden van WordPress. Dit kan handmatig worden gedaan (door gezond verstand te hebben bij het coderen van een WordPress-thema) of door tools te gebruiken zoals de beroemde Theme Check-plugin.

En waarom moeten we valideren, vraag je? Er is meer dan één antwoord. Laten we eens kijken:

Validatie Hiermee kunt u uw pagina's debuggen

Toen ik in 2005 voor het eerst begon met spelen met HTML, heb ik die vreselijke webpagina's gecodeerd, vol fouten zoals onjuiste nesten van elementen of vergeten de tags te sluiten die ik heb geopend. CSS was nog erger: slechts een simpele puntkomma fout of een niet-detecteerbare typo betekende dat ik meer en meer tijd nodig had voor mijn experimenten en projecten.

Maar zelfs na negen jaar hard werken, kan ik fouten maken ondanks het feit dat ik dat ben bijna een expert in HTML en CSS. Gelukkig kunnen tools zoals de HTML-validator van W3C ons helpen bij het foutopsporen van bijna elke fout die zich in uw HTML-code bevindt. Of het nu gaat door het direct plakken van de code, het uploaden van het HTML-bestand of het indienen van de URI van de webpagina, u kunt zien wat u fout heeft gedaan in uw code, waar het probleem zit en suggesties hoe u dit kunt oplossen. Door deze fouten te corrigeren, worden zelfs grotere problemen voorkomen.

Validatie resulteert in betere SEO

Vergeet dit feit nooit: spiders van zoekmachines liefde semantische webpagina's. Het helpt die crawlers pagina's beter te begrijpen en in SERP-listings wint u natuurlijk voordeel tegen de pagina's die niet valideren.

Bovendien laat het zien dat jij zorg over uw website. Validatie van uw webpagina betekent dat u zich inspant om een ​​structurele, semantische webpagina te hebben (of dat u al over de tools of de kennis beschikt om die pagina te maken). Dat is een enorm pluspunt voor zoekmachines en dat "enorme plus" kan uw ranglijst omhoog stoten.

Validatie maakt uw website toegankelijker en compatibel

Heb je ooit gedacht over hoe een browser leest een webpagina? Ze hebben "engines" om de code te ontleden en om te zetten in een visuele ervaring voor de mens. Helaas hebben verschillende webbrowsers verschillende engines en dit kan ertoe leiden dat uw pagina's anders worden behandeld.

In een geldige webpagina zijn de meeste verschillen echt klein en acceptabel voor bijna iedereen, maar een ongeldige webpagina kan zo anders worden gelezen dat mensen uw pagina's mogelijk niet eens goed kunnen zien op hun iPhones, Kindles of welke browser ze ook zijn gebruik makend van. Validatie herstelt bijna elk belangrijk verschil en maakt uw webpagina leesbaar voor bijna alle webbrowsers.

Validatietools voor uw WordPress-website

Nu weten we het waarom we moeten onze webpagina's valideren, laten we eens kijken hoe om het te doen. Om de double-talk over te slaan, ga ik niet zeggen dat je je berichtinhoud moet valideren; maar houd er rekening mee dat de meeste dingen die ik zal zeggen ook gelden voor de inhoud die u in WordPress-berichten en -pagina's schrijft.

Validatie van HTML-code

De HTML Markup Validation Service van W3C is waarschijnlijk de eenvoudigste en de meest populaire tool die beschikbaar is om uw webpagina te controleren en te valideren. Met deze tool kun je bijna elke validatiefout zien, variërend van ontbrekende ALT-attributen voor je IMG-tags tot het plaatsen van een block-level element in een inline element.

U kunt uw HTML-code beoordelen door het adres van uw webpagina op te geven, het HTML-bestand te uploaden of de HTML-code rechtstreeks te plakken.

CSS-stijlen valideren

Net zoals de HTML-validatietool, is de CSS Validation Service van W3C de meest populaire CSS-validatietool in het web. En net als de HTML-validator kunt u uw CSS valideren door de URI te plakken, een CSS-bestand te uploaden of uw code rechtstreeks te plakken.

Merk op dat deze tool "CSS-hacks" als fouten zal detecteren en om geldig te blijven, moet je een andere manier vinden om oudere browsers te ondersteunen.

Validatie van WordPress Feeds

Hoewel het niet erg populair is, is 'feedvalidatie' een van de andere belangrijke aspecten van de validatie van uw website. En u kunt uw WordPress-feed controleren op fouten met W3C's Feed Validation Service voor Atom en RSS. Gelukkig (en natuurlijk) valideren de standaard feeds van WordPress perfect, dus je feeds zijn waarschijnlijk al geldig als je geen plug-in gebruikt om te knoeien met feeds.

Bovendien is er een opmerkelijke tool genaamd Unicorn van W3C, die in feite een uniforme validator is. Hoewel het lijkt op een beëindigde open-source applicatie, geeft het nog steeds bevredigende resultaten over HTML, CSS, feed en i18n-validatie. De resultatenpagina is een beetje verwarrend, maar als u ooit resultaten van meerdere validatietests moet krijgen, zult u dol zijn op deze tool.

Validatie van uw WordPress-thema met themacontrole

Samen met de normen van W3C heeft WordPress ook zijn normen:

  • PHP coderingsstandaarden omvatten het gebruik van enkele en dubbele aanhalingstekens correct, met behulp van volledige PHP-tags te allen tijde, met behulp van witte ruimte op de juiste manier, met behulp van Yoda voorwaarden en ga zo maar door.
  • HTML-coderingsstandaarden verwijst naar het schrijven van geldige HTML-code; het gebruik van attribuutwaarden met kleine letters, het omwikkelen van de attribuutwaarden met aanhalingstekens, het gebruik van witruimte met logische inspringing, enz.
  • CSS-coderingsstandaarden omvatten het structureren van de stylesheet op de juiste manier, het gebruik van kleine letters (met koppeltekens voor het scheiden van woorden) in selectors, het mooi ordenen van de eigenschappen, commentaar en dergelijke.
  • JavaScript-coderingsstandaarden roept op dat we accolades correct gebruiken, namen functies en variabelen mee camelCase, het definiëren van een anonieme functie als jQuery gebruikt gaat worden, enzovoort.
  • Thema Review Normen omvatten schrijfkwaliteitscode (natuurlijk), scheiding van functionaliteit door gebruik te maken van plug-ins, gebruikmakend van sjabloontags en hooks, ondersteunen WordPress-gegenereerde CSS-klassen, beveiligen van het thema, juiste licentie, organiseren van de themabestanden, schrijven van voldoende documentatie ... Er is gewoon te veel!

De plug-in Themacontrole inspecteert uw thema over deze normen, met name de normen voor 'themaherziening'. Het resultaat kan zowel deprimerend als motiverend zijn, dus geef de hoop niet op en probeer de fouten te elimineren om een ​​fantastisch WordPress-thema te bouwen.

Net toen ik begon met het schrijven van dit artikel, kwam er een nieuwe website met de naam ThemeCheck.org die precies doet wat de plug-in Theme Check doet. U hoeft de Theme Check-plug-in niet te installeren; in plaats daarvan kunt u uw thema uploaden naar de website en uw score behalen, samen met aanbevelingen om uw thema te verbeteren (als het nodig is). Bovendien kunt u de validatiescore van uw thema delen door de badge te plaatsen die door hen wordt verstrekt. Nette, is het niet?

Afsluiten

Validatie van uw website is essentieel, daar bestaat geen twijfel over. Zolang u uw webpagina's valideert en onderhoudt zodat ze geldig blijven, profiteert u er alleen van.

Wat vindt u van het belang van validatie? Draag bij aan dit artikel met uw opmerkingen! En als je deze tutorial leuk vond, vergeet dan niet om het met je vrienden te delen!