Hoe AMP met WordPress te gebruiken

AMP is een gemeenschappelijke inspanning die een belofte inhoudt betere paginalaadprestaties voor websites in de mobiele omgeving. Maar, zoals je kunt vinden in onze vorige tutorial, zul je leuke dingen van je website moeten opofferen en je strikt houden aan de regels, de richtlijnen naleven en pagina's laten valideren. Het klinkt als veel om te doen, nietwaar?

Gelukkig, als je je website hebt gebouwd met WordPress, kun je AMP op je website toepassen in een handomdraai met behulp van een plug-in met de naam AMP-WP. Het wordt geleverd met meer functies dan wat opvalt. Laten we kijken hoe het werkt.

activering

Om te beginnen, log in op uw website, ga naar Plug-ins> Voeg nieuw toe scherm. Zoeken “AMP; installeer en activeer die van Automattic.

Eenmaal geactiveerd, kunt u de AMP-geconverteerde post bekijken door de / Amp / sleep aan het einde van de post-URL (bijv. http://wp.com/post/amp/), of met ?amp = 1 (bijv. http://wp.com/post/?amp=1) als u de Pretty Permalinks-functie op uw website niet gebruikt.

En zoals je hierboven kunt zien, heeft de post basisstyling gekregen, die je verder kunt aanpassen.

Noteren

Er zijn een paar dingen die u moet weten over de status van de plug-in op dit moment:

• archief - Categorie, Label en Aangepaste taxonomie - worden momenteel niet ondersteund. Ze zullen niet worden omgezet in AMP-compliant formaat. Aangepaste berichttypen kunnen echter via een filter in AMP worden geïnitieerd.
• Het voegt niets toe in een nieuw instellingsscherm in het Dashboard. Maatwerk wordt gedaan op het codeniveau met acties, filters, klasse.
• De plug-in omvat momenteel niet alle aangepaste AMP-elementen zoals amp-analytics en amp-ad uit de doos. Als je dit element nodig hebt, moet je het opnemen door in de Acties of Filters van de plug-in te haken.

Maatwerk

De plug-in biedt talloze acties en filters die flexibiliteit bieden bij het aanpassen van de stijlen, de pagina-inhoud en zelfs de HTML-markup van de AMP-pagina als geheel.

stijlen

Ik weet zeker dat dit een ding is dat je meteen wilt wijzigen na het activeren van de plug-in, zoals het wijzigen van de achtergrondkleur van de koptekst, de lettertypefamilie en de tekengrootte om beter bij het merk en de persoonlijkheid van je website te passen.

Om dit te doen, kunnen we de amp_post_template_css Actie in de functions.php bestand van ons thema.

function theme_amp_custom_styles () ?> nav.amp-wp-title-bar background-color: orange;   
Als we de Chrome DevTools bekijken, worden deze stijlen toegevoegd aan de