Slik setter du opp AMP-støtte for WordPress

I denne opplæringen skal vi gå gjennom inn og ut med å generere gyldige AMP-versjoner av WordPress-nettstedets innlegg. Vi gjør dette ved å bruke AMP-plugin laget av Automattic.

Det finnes alternative plugins du kan bruke i stedet hvis du velger, men da vi bare har plass til å se på en enkelt plugin i denne opplæringen, holder vi fokuset på det laget laget av WordPress selv.

Merk: Denne artikkelen forutsetter at du allerede er kjent med hvordan du lager gyldige AMP-sider, og som sådan vil du fokusere på detaljene som er spesifikke for å bruke WordPress og AMP sammen. Hvis du er ny til AMP, sjekk ut:

• AMP på 60 sekunder
• Opp og kjører med AMP
• Hvordan lage en grunnleggende AMP-side fra grunnen av
• AMP Project: Vil det gjøre webområdene raskere
• Slik bruker du amp-img og amp-video for å øke hastigheten på nettstedet ditt

Det forutsetter også at du er kjent med å kjøre et selvbetjent WordPress-nettsted. Hvis ikke, kan du finne disse ressursene nyttige:

• Hvordan komme i gang med WordPress
  
• En nybegynners guide til WordPress

Automattics AMP Plugin

Denne plugin, som bare heter AMP, automatiserer genereringen av AMP-gyldige enkelt innlegg. For hvert innlegg du oppretter, vil en andre versjon også være tilgjengelig med / Amp / lagt til permalinken. Hvis du ikke bruker WordPress 'permalink-omskrivningsfunksjonalitet på nettstedet ditt /? Amp = 1 vil bli lagt til URL-adressen i stedet.

For eksempel er dette et vanlig WordPress-innlegg:

Merk at her har jeg AMP Validator-utvidelsen installert i Chrome som oppdager at det finnes en AMP-versjon av denne siden og viser et lite blått linkikon:

AMP Validator forlengelse

Hvis jeg klikker på utvidelsens lille blå linkikon, tar det oss til AMP-versjonen av innlegget:

Å bruke dette pluginet i standardstatus er ganske mye "plug and play". Installer, aktiver, og du er oppe og går. Det er ingen konfigurasjonsalternativer som krever oppmerksomhet som en del av oppsettet.

For øyeblikket fungerer dette pluginet bare på enkelte innlegg - det påvirker ikke sider, egendefinerte innleggstyper eller arkiver. Pluggens side i WordPress-depotet støtter støtte for at disse er under utvikling.

• AMP-plugin
  
• AMP plugin README
  

Bruk med Yoast SEO via lim

Hvis du liker å bruke Yoasts SEO-plugin for dine vanlige innlegg, er det et tilleggsplugg med navnet "Lim for Yoast SEO & AMP" som er tilgjengelig for å levere Yoast-stil-metadata i dine AMP-innlegg også. For eksempel lagde den disse metataggerene til demo-innlegget som ble vist tidligere:

For å bruke dette pluginet må du først ha det viktigste Yoast SEO plugin installert. Limpluggen vil da legge til en ekstra seksjon merket AMP til pluginens hoved SEO admin-menyen.

• Lim for Yoast Plugin
• Yoast på AMP og WordPress del I
  
• Yoast på AMP og WordPress Del II

Media og egendefinerte AMP-elementer

En av de viktigste delene av å opprette AMP-gyldige sider, er å bruke sine tilpassede egendefinerte elementer for mediaplassering, for eksempel amp-img i stedet for img for eksempel. Men når du lager innlegg i WordPress, jobber du vanligvis i WYSIWYG TinyMCE-editoren, og kontrollerer ikke direkte merkingen som brukes til mediainnsetting.

Med installasjonsprogrammet Automattic AMP er det ikke nødvendig å bekymre deg for dette, da det automatisk filtrerer innholdet ditt og gjør følgende konverteringer til egendefinerte AMP-elementer:

• img → amp-img eller amp-anim
• video → amp-video
• lyd = → amp-lyd
• iframe → amp-iframe
• YouTube oEmbed → amp-youtube
• Instagram eEmbed → amp-instagram
• Twitter oEmbed → amp-twitter
• Vine oEmbed → amp-vine
  

Merk: Hvis du bruker Flash hvor som helst på nettstedet ditt, støttes det ikke. Alle andre typer medier kan brukes i AMP-innlegg så lenge det er lagt til ved hjelp av ett av elementene fra listen ovenfor.

• Om WordPress oEmbeds
  

Kortkoder og plugger

En annen vurdering når du bruker Automattics AMP-plugin på WordPress-innlegg, er hvordan kortkoder og plugins vil oppføre seg.

Header og Footer Output

Automattics plugin forhindrer AMP-innlegg fra å bruke det vanlige wp_header () og wp_footer () tema funksjoner som ofte tappes inn av plugins for å utføre tilpasset JavaScript, CSS og HTML. Hvis et plugin du bruker, avhenger av en av disse funksjonene, virker det ikke.

For et plugin for å generere egendefinert kode i kombinasjon med AMP-pluginet, må det benytte spesielle handlinger og filtre som erstatter normal WP-temafunksjonalitet. For eksempel kan du ikke legge til metakoder til delen som du vanligvis ville, ved å bruke wp_head handling for å utdata kode gjennom wp_header () funksjon, men du kan bruke amp_post_template_metadata filter i stedet.

Yoast's Lim plugin bruker disse spesielle handlinger og filtre, som er hvordan den kan utdata SEO data og tilpasset CSS på AMP sider uten å bryte validering.

kortkoder

Hvis du bruker programtillegg som er avhengige av snarveier, må du forsikre deg om at koden de sender ut er:

1. AMP gyldig, f.eks. ingen inline JS eller CSS
   og / eller
   
2. Marker fra listen i forrige del som AMP-pluginet automatisk konverterer til de nødvendige egendefinerte elementene.
   

For å sjekke dette, gå til et innlegg som du vet bruker kortnummer (er) i spørsmålet, og bruk AMP Validator plugin i Chrome / Chromium for å se om innlegget godkjennes.

Tilpasset JavaScript

Noe annet å huske på når du bruker plugins på et AMP-nettsted, er at ingen tilpasset JavaScript er tillatt, så plugins som er avhengige av JavaScript, kommer ikke til å fungere i det hele tatt. Hvis du for eksempel bruker et plugin for å kjøre en JavaScript-drevet bildeskyter, virker det ikke.

Analytics

Hvis du bruker analyser som er avhengig av en JavaScript-kode, betyr AMPs utelukkelse av egendefinert JS at du må erstatte utdraget med amp-analytics element på AMP-sidene dine.

Dette betyr at du er begrenset til analysetjenester som Google har valgt å støtte i AMP, men den gode nyheten er at det finnes flere leverandører på listen.

Du kan enten bruke et plugin for å generere AMP vennlig analysekode, eller du kan legge til sporingskode selv manuelt.

For å inkludere via et plugin har Yoasts Lim plugin en seksjon der du kan legge til Google Analytics-kode, og den vil konvertere koden til AMP-vennlig format for deg. For å finne det, gå til AMP delen i SEO meny for Yoasts plugin, deretter til Analytics tab:

Hvis du ikke finner et plugin for å integrere analysetjenesten du ønsker, bruker du det hardt å kodes det i deg selv. Automattic AMP plugin tilbyr et filter du kan bruke til å gjøre dette.

Tilpasset kode for å integrere din egen analyse bør legges til filen "functions.php" i et tilpasset tema eller barn tema, eller til et tilpasset programtillegg du lager selv.

Tilpasse utseendet

Det er noen forskjellige måter du kan gi dine AMP-sider litt av din egen stil og merkevarebygging.

In-Built Customizer

Automattic AMP-plugin har en innebygd side i tilpassingsprogrammet med tre utseendeinnstillinger du kan endre. Å få tilgang til det går til Utseende> AMP i admin-menyen:

En gang i tilpasningsområdet ser du ikke AMP-designalternativene før du klikker Design i venstre kolonne. Herfra kan du velge en toppfarge, topptekst og koblingsfarge, og du kan velge mellom et lys eller mørkt fargeskjema.

Lim Tilpasser

Den innebygde tilpasningsmaskinens alternativer er begrenset, så hvis du ønsker å leke med noen ekstra innstillinger, har Yoasts Lim plugin den ekstra bonusen til noen designkontroller, funnet ved å gå til SEO> AMP og deretter til Design tab.

Yoast's Lim plugin og dens design kontroller

Kode Modifikasjoner

Hvis de tilgjengelige GUI-baserte tilpasningsverktøyene ikke er tilstrekkelige, vil du kanskje begynne å grave inn noen kode, slik at du kan bruke ditt eget CSS eller malloppslag. For å gjøre dette kan du enten:

• Opprett et tilpasset tema, (eller barn tema), og legg til kode i sin "functions.php" -fil
  
• Lag en tilpasset plugin

Hvis du ikke allerede er kjent med hvordan du gjør en av de ovennevnte, er det best å satse på de tilgjengelige GUI-tilpasningsalternativene.

Overstyr AMP Plugins "style.php" -fil

Alle CSS som styrer presentasjonen av AMP-sider i Automattic-pluginet, finner du i undermappen "maler" i filen "style.php". Du bør ikke redigere koden direkte i denne filen, da du vil miste alle endringene dine når plugin oppdateres. Men du kan overstyre denne filen med en av dine egne.

Hvis du oppretter ditt eget tilpassede tema eller tema for barn, lager du en mappe inni den som heter "amp", og legg inn CSS i en fil med navnet "style.php". AMP-pluginet finner automatisk denne filen og bruker den.

Hvis du lager din egen plugin, kan du bruke en hvilken som helst PHP-fil du liker å holde din egendefinerte CSS, og deretter angi filen ved å bruke amp_post_template_file filter kombinert med en betinget sjekk for 'style' === $ type.

For detaljer om hvordan du gjør dette, sjekk ut Automattics dokumentasjon på GitHub.

Legg til CSS

Hvis du bare trenger å legge til en liten egendefinert kode til pluginens eksisterende CSS, kan du bruke amp_post_template_css handling. For mer informasjon om hvordan dette gjøres, pluss noen eksempler, se den aktuelle delen i Automattics dokumentasjon.

I tilfelle du legger til CSS, har du også mulighet til å legge til noen egendefinert kode via Yoast's Lim plugin, i tekstområdet merket "Extra CSS" nær bunnen av dens Design tab.

Merk: Enten du legger til eller overstyrer CSS for AMP-plugin, må du sørge for at du ikke inkluderer noen