Hoe AMP met WordPress te gebruiken

AMP is een gemeenschappelijke inspanning die een betere paginalaadprestatie voor websites in de mobiele omgeving belooft. 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 u uw website heeft gebouwd met WordPress, kunt u AMP op uw 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 logt u in op uw website, ga naar Plug-ins> Nieuw scherm toevoegen. Zoeken naar "AMP; installeer en activeer die van Automattic.

Eenmaal geactiveerd, kunt u de AMP-geconverteerde post bekijken door de /amp/ trail toe te voegen aan het einde van de URL van het bericht (bijvoorbeeld 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 basisstylingen 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:

• Archieven - Categorie, Tag en aangepaste taxonomie - worden momenteel niet ondersteund. Ze worden niet geconverteerd naar AMP-compatibele indeling. Aangepaste berichttypen kunnen echter via een filter in AMP worden geïnitieerd.
• Het voegt niet toe in een nieuw instellingsscherm in het Dashboard. Maatwerk wordt gedaan op het niveau van de code met acties, filters, klasse.
• De plug-in omvat momenteel niet alle AMP-aangepaste elementen zoals amp-analytics en amp-ad out of the box. 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 tal van 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 ben er zeker van dat u dit onmiddellijk wilt wijzigen nadat u de plug-in hebt geactiveerd, zoals het wijzigen van de achtergrondkleur van de koptekst, de lettertypefamilie en de lettertypegrootte om beter bij het merk en de persoonlijkheid van uw website te passen.

Om dit te doen, kunnen we de amp_post_template_css Actie gebruiken in het 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