Slik bruker du AMP med WordPress

AMP er en felles innsats som lover en 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 reglene, følg retningslinjene, og få sider bekreftet. Det høres ut som mye å gjøre, ikke sant?

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> Add New Screen. 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/ stien 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, Tag og Egendefinert Taxonomy - støttes for tiden ikke. 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. Tilpassing gjøres på kodenivå med handlinger, filtre, klasse.
• Pluggen omfatter for øyeblikket ikke alle AMP-tilpassede elementer som amp-analytics og amp-ad ut av boksen. Hvis du trenger dette elementet, må du inkludere det ved å hekte inn i Handlingene eller Filtrene 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 helhet.

Styles

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

For å gjøre det kan vi bruke amp_post_template_css handlingen i functions.php til 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