Hoe AMP-ondersteuning voor WordPress in te stellen

In deze tutorial doorlopen we de ins en outs van het genereren van geldige AMP-versies van de posts van je WordPress-site. We doen dit met behulp van de AMP-plug-in gemaakt door Automattic.

Er zijn alternatieve plug-ins beschikbaar die u zou kunnen gebruiken als u dat wilt, maar omdat we in deze tutorial slechts echt ruimte hebben om naar een enkele plug-in te kijken, houden we de focus op die gemaakt door het team achter WordPress zelf.

Notitie: in dit artikel wordt ervan uitgegaan dat u al bekend bent met het maken van geldige AMP-pagina's, en als zodanig gericht bent op de details die specifiek zijn voor het samen gebruiken van WordPress en AMP. Als u nog geen ervaring heeft met AMP, bekijkt u het volgende:

• AMP in 60 seconden
• Up-to-date met AMP
• Een basis AMP-pagina maken met Scratch
• AMP-project: zal het uw sites sneller maken
• Hoe u amp-img en amp-video kunt gebruiken om uw website sneller te maken

Er wordt ook van uitgegaan dat u bekend bent met het uitvoeren van een door uzelf gehoste WordPress-site. Zo niet, dan vindt u deze bronnen wellicht nuttig:

• Aan de slag met WordPress
  
• Een beginnersgids voor WordPress

Automattic's AMP-plug-in

Deze plug-in, eenvoudigweg AMP genaamd, automatiseert het genereren van AMP-geldige afzonderlijke berichten. Voor elk bericht dat u maakt, is ook een tweede versie beschikbaar met / Amp / toegevoegd aan de permalink. Als u de permalink herschrijffunctionaliteit van WordPress niet gebruikt op uw site /? Amp = 1 wordt in plaats daarvan aan de URL toegevoegd.

Dit is bijvoorbeeld een gewone WordPress-post:

Houd er rekening mee dat hier de AMP Validator-extensie is geïnstalleerd in Chrome, die detecteert dat er een AMP-versie van deze pagina beschikbaar is en een klein blauw koppelingspictogram weergeeft:

AMP Validator-extensie

Als ik op het kleine blauwe koppelingspictogram van de extensie klik, worden we naar de AMP-versie van het bericht geleid:

Het gebruik van deze plug-in in de standaard staat is vrijwel "plug and play". Installeren, activeren en je bent klaar voor gebruik. Er zijn geen configuratie-opties die uw aandacht vereisen als onderdeel van de installatie.

Momenteel werkt deze plug-in alleen op afzonderlijke berichten, deze heeft geen invloed op pagina's, aangepaste berichttypen of archieven. De pagina van de plug-in in de WordPress-repository-toestanden ondersteunt omdat deze momenteel in ontwikkeling is.

• AMP-plug-in
  
• AMP-plugin README
  

Gebruik met Yoast SEO via Glue

Als u de SEO-plug-in van Yoast gebruikt voor uw normale berichten, is er ook een extra plug-in genaamd "Lijm voor Yoast SEO & AMP" beschikbaar om Yoast-achtige metadata uit te voeren naar uw AMP-berichten. Het voegde deze meta-tags bijvoorbeeld toe aan de eerder gepubliceerde demopost:

Als u deze plug-in wilt gebruiken, moet u eerst de hoofd-Yoast SEO-plug-in hebben geïnstalleerd. De Glue-plug-in voegt vervolgens een extra gedeelte toe met het label AMP naar de plugin's main SEO admin menu.

• Lijm voor Yoast Plugin
• Yoast op AMP en WordPress deel I
  
• Yoast op AMP en WordPress deel II

Media en aangepaste AMP-elementen

Een van de belangrijkste onderdelen van het maken van AMP-geldige pagina's is het gebruik van de vereiste aangepaste elementen voor mediaplaatsing, zoals amp-img in plaats van img bijvoorbeeld. Bij het maken van berichten in WordPress werkt u echter meestal in de WYSIWYG TinyMCE-editor en hebt u geen directe invloed op de markeringen die worden gebruikt voor het invoegen van media.

Met de Automattic AMP-plug-in geïnstalleerd hoeft u zich hier geen zorgen over te maken, omdat uw content automatisch wordt gefilterd en de volgende conversies worden gemaakt naar aangepaste AMP-elementen:

• img → amp-img of amp-Anim
• video- → amp-video
• audio = → amp-audio
• iframe → amp-iframe
• YouTube oommelden → amp-youtube
• Instagram eEmbed → amp-instagram
• Twitter oMbed → amp-twitter
• Vine oEmbed → amp-vine
  

Notitie: als u Flash overal op uw site gebruikt, wordt dit niet ondersteund. Elk ander type medium kan worden gebruikt in AMP-berichten zolang het wordt toegevoegd met een van de items uit de bovenstaande lijst.

• Over WordPress oEmbeds
  

Shortcodes en plugins

Een andere overweging bij het gebruik van de AMP-plug-in van Automattic op uw WordPress-berichten is hoe shortcodes en plug-ins zich zullen gedragen.

Header en voettekst uitvoer

De plug-in van Automattic voorkomt dat AMP-berichten de normale gebruiken wp_header () en wp_footer () themafuncties die vaak worden gebruikt door plug-ins om aangepaste JavaScript, CSS en HTML uit te voeren. Als een plug-in die u gebruikt afhankelijk is van een van deze functies, werkt deze niet.

Voor een plug-in om aangepaste code te genereren in combinatie met de AMP-plug-in, moet deze gebruikmaken van speciale acties en filters die de normale WP-themafunctionaliteit vervangen. U kunt bijvoorbeeld geen metatags toevoegen aan de sectie zoals u dat gewoonlijk zou doen, door de wp_head actie om code uit te voeren via de wp_header () functie, maar u kunt de amp_post_template_metadata filter in plaats daarvan.

Yoast's Glue-plug-in gebruikt deze speciale acties en filters, wat inhoudt dat het SEO-gegevens en aangepaste CSS op AMP-pagina's kan uitvoeren zonder de validatie te onderbreken.

shortcodes

Als u plug-ins gebruikt die op shortcodes zijn gebaseerd, moet u ervoor zorgen dat de code die ze uitvoeren, is:

1. AMP geldig, b.v. geen inline JS of CSS
   en / of
   
2. Markering uit de lijst in het vorige gedeelte dat de AMP-plug-in automatisch converteert naar de vereiste aangepaste elementen.
   

Als u dit wilt controleren, gaat u naar een bericht waarvan u weet dat het de betreffende korte code (s) gebruikt en gebruikt u de AMP Validator-plug-in in Chrome / Chromium om te controleren of het bericht de validatie doorstaat.

Aangepaste JavaScript

Iets anders om in gedachten te houden bij het gebruik van plug-ins op een AMP-site is dat er geen aangepast JavaScript is toegestaan, dus plug-ins die afhankelijk zijn van JavaScript werken helemaal niet. Als u bijvoorbeeld een plug-in gebruikt om een ​​door JavaScript aangedreven afbeeldingsschuifregelaar te gebruiken, werkt deze niet.

Analytics

Als u analyses gebruikt die afhankelijk zijn van een JavaScript-fragment, betekent AMP uitsluiting van aangepaste JS dat u het fragment moet vervangen door de amp-analytics element op uw AMP-pagina's.

Dit betekent dat u bent beperkt tot analysediensten die Google heeft gekozen voor ondersteuning in AMP, maar het goede nieuws is dat er verschillende leveranciers op de lijst staan.

U kunt een plug-in gebruiken om AMP-vriendelijke analysecode te genereren, of u kunt zelf een trackingcode toevoegen.

Voor opname via een plug-in heeft Yoast's Glue-plug-in een sectie waarin u Google Analytics-code kunt toevoegen en deze code zal naar AMP-vriendelijke indeling voor u worden geconverteerd. Om het te vinden ga naar de AMP sectie in de SEO menu voor Yoast's plug-in, en vervolgens naar de Analytics tab:

Als u geen plug-in kunt vinden om de analyseservice te integreren die u wilt gebruiken, moet u deze zelf coderen. De Automattic AMP-plug-in biedt een filter dat u kunt gebruiken om dit te doen.

Aangepaste code om uw eigen analyses te integreren, moet worden toegevoegd aan het bestand "functions.php" van een aangepast thema of kindthema, of aan een aangepaste plug-in die u zelf maakt.

De look aanpassen

Er zijn een paar verschillende manieren waarop u uw AMP-pagina's een beetje uw eigen stijl en merk kunt geven.

Ingebouwde Customizer

De Automattic AMP-plug-in heeft een ingebouwde pagina in de customizer met drie uiterlijkinstellingen die u kunt wijzigen. Ga naar om toegang te krijgen Uiterlijk> AMP in het admin-menu:

Eenmaal in het aanpassingsgebied ziet u de AMP-ontwerpopties pas wanneer u klikt Ontwerp in de linkerkolom. Vanaf hier kunt u een koptekst, koptekstachtergrond en koppelingskleur selecteren en kunt u kiezen tussen een licht of donker kleurenschema.

Lijmaanpassing

De ingebouwde opties van de aanpasser zijn beperkt, dus als je wat extra instellingen wilt spelen, heeft Yoast's Glue-plug-in de toegevoegde bonus van sommige ontwerpbesturingselementen, gevonden door naar SEO> AMP en dan naar de Ontwerp tab.

Yoast's Glue plugin en zijn ontwerpbedieningen

Codemodificaties

Als de beschikbare op GUI gebaseerde aanpassers niet voldoende zijn, wilt u mogelijk in een bepaalde code gaan graven, zodat u uw eigen CSS- of sjabloonmarkering kunt gebruiken. Om dit te doen kun je:

• Maak een aangepast thema, (of een kindthema) en voeg code toe aan het bestand "functions.php"
  
• Maak een aangepaste plug-in

Als je nog niet bekend bent met een van bovenstaande, is je beste gok waarschijnlijk om vast te houden aan de beschikbare GUI-aanpassingsopties.

Overschrijf het "style.php" -bestand van de AMP-invoegtoepassing

Alle CSS die de presentatie van AMP-pagina's in de Automattic-plug-in bestuurt, is te vinden in de submap "templates" in het bestand "style.php". U moet de code in dit bestand niet rechtstreeks bewerken, omdat u al uw wijzigingen verliest wanneer de plug-in wordt bijgewerkt. U kunt dit bestand echter overschrijven met een van uw eigen bestanden.

Als u uw eigen thema of thema op maat maakt, maakt u daar een map met de naam "amp" en voegt u daar uw CSS toe aan een bestand met de naam "style.php". De AMP-plug-in zal dit bestand automatisch vinden en gebruiken.

Als u uw eigen plug-in maakt, kunt u elk PHP-bestand dat u leuk vindt gebruiken om uw aangepaste CSS vast te houden en vervolgens het genoemde bestand opgeven met behulp van de amp_post_template_file filter gecombineerd met een voorwaardelijke controle voor 'stijl' === $ type.

Raadpleeg de documentatie van Automattic op GitHub voor meer informatie over dit te doen.

CSS toevoegen

Als u alleen een kleine aangepaste code moet toevoegen aan de bestaande CSS van de plug-in, kunt u de amp_post_template_css actie. Zie de relevante sectie in de documentatie van Automattic voor meer informatie over hoe dit wordt gedaan, plus enkele voorbeelden.

In het geval van het toevoegen van CSS, kunt u ook een aangepaste code toevoegen via Yoast's Glue-plug-in, in het tekstgebied met het label "Extra CSS" aan de onderkant van de Ontwerp tab.

Notitie: Of u nu toevoegt aan of overschrijft de CSS van de AMP-invoegtoepassing, zorg ervoor dat u er geen invoegt