Slik bruker du AMP med WordPress

AMP er en felles innsats som lover a bedre sidebelastning for nettsteder i mobilmiljøet. Men som du kan finne fra vår tidligere opplæring, må du ofre fancy ting fra nettstedet ditt, og følg strengt følger reglene, følg retningslinjene, og få sider godkjent. Det høres ut som mye å gjøre, gjør det ikke?

Heldigvis, hvis du har bygget ditt nettsted med WordPress, kan du bruke AMP til nettstedet ditt på et øyeblikk ved hjelp av et plugin som heter AMP-WP. Den leveres med flere funksjoner enn det som møter øyet. Så, la oss se hvordan det fungerer.

aktivisering

Til å begynne med, logg inn på nettstedet ditt, gå til Plugins> Legg til nytt skjerm. Søk etter “AMP; installer og aktiver den fra Automattic.

Når du er aktivert, kan du se det AMP-konverterte innlegget ved å legge til / Amp / sti på slutten av postadressen (f.eks. http://wp.com/post/amp/), eller med ?amp = 1 (f.eks. http://wp.com/post/?amp=1) hvis du ikke bruker funksjonen Pretty Permalinks på nettstedet ditt.

Og som du kan se over, har innlegget blitt gitt grunnleggende stylings, som du kan tilpasse ytterligere.

Å notere

Det er noen ting du bør vite om tilstanden til plugin for øyeblikket:

• Arkiv - Kategori, stikkord og Tilpasset taksonomi - er for øyeblikket ikke støttet. De blir ikke konvertert til AMP-kompatibelt format. Egendefinerte innleggstyper kan imidlertid initieres i AMP via et filter.
• Den legger ikke til i en ny innstillingsskjerm i Dashboard. Tilpasning er gjort på kodenivå med handlinger, filtre, klasse.
• Pluggen omfatter for øyeblikket ikke alle AMP-egendefinerte elementer, for eksempel amp-analytics og amp-annonse ut av boksen. Hvis du trenger dette elementet, må du inkludere det ved å koble til Handlingene eller filtene i plugin-modulen.

tilpasning

Pluggen inneholder mange handlinger og filtre som gir fleksibilitet over å tilpasse stilene, sidens innhold og til og med HTML-oppslaget på AMP-siden som en helhet.

Styles

Jeg er sikker på at dette er en ting du vil endre umiddelbart etter at du har aktivert pluginet, for eksempel å endre topptekstfarge, skrifttypefamilien og skriftstørrelsen for å bedre passe ditt nettstedets merkevare og personlighet.

For å gjøre det kan vi ansette amp_post_template_css Handling i functions.php fil av vårt tema.

funksjon theme_amp_custom_styles () ?> nav.amp-wp-title-bar bakgrunnsfarge: oransje;   
Hvis vi ser gjennom Chrome DevTools, legges disse stilene i