Accentsconagua

Så här ställer du in AMP-support för WordPress

Webbdesign
Share

I denna handledning kommer vi att gå igenom insatserna för att generera giltiga AMP-versioner av dina WordPress-sidans inlägg. Vi gör det genom att använda AMP-plugin skapat av Automattic.

Det finns alternativa plugins som du kan använda istället om du väljer, men eftersom vi bara har utrymme att titta på ett enda plugin i denna handledning håller vi fokus på den som skapades av teamet bakom WordPress själv.

Notera: den här artikeln förutsätter att du redan är bekant med hur man skapar giltiga AMP-sidor, och som sådan kommer att fokuseras på detaljerna specifikt för att använda WordPress och AMP tillsammans. Om du är ny på AMP, kolla in:

  • AMP på 60 sekunder
  • Upp och Running med AMP
  • Hur man gör en grundläggande AMP-sida från början
  • AMP Project: Kommer det att göra dina webbplatser snabbare
  • Hur man använder amp-img och amp-video för att påskynda din webbplats

Det förutsätter också att du är bekant med att driva en självhäftad WordPress-webbplats. Om inte, kan du hitta dessa resurser till hjälp:

  • Så här börjar du med WordPress
  • En nybörjarguide till WordPress

Automattics AMP Plugin

Denna plugin, namngiven helt enkelt AMP, automatiserar generationen av AMP-giltiga enskilda inlägg. För varje post du skapar kommer en andra version också att finnas tillgänglig med / Amp / bifogad till permalinken. Om du inte använder WordPress "permalink rewriting" -funktionalitet på din webbplats /? Amp = 1 kommer att läggas till URL-adressen i stället.

Till exempel är detta ett vanligt WordPress-inlägg:

Observera att här har jag AMP Validator-förlängningen installerad i Chrome som upptäcker att det finns en AMP-version av den här sidan och visar en liten blå länkikon:

AMP Validator förlängning

Om jag klickar på förlängningens lilla blå länkikon tar det oss till AMP-versionen av posten:

Att använda det här pluginet i standardläget är ganska "plug and play". Installera, aktivera och du är igång. Det finns inga konfigurationsalternativ som kräver din uppmärksamhet som en del av installationen.

För närvarande fungerar det här pluginet endast på enskilda inlägg - det påverkar inte sidor, anpassade posttyper eller arkiv. Plugins sida i WordPress-förvaret anger att stöd för dessa är under utveckling.

  • AMP-plugin
  • AMP-plugin README

Använd med Yoast SEO via lim

Om du gillar att använda Yoasts SEO-plugin för dina vanliga inlägg finns det ett ytterligare plugin med namnet "Lim för Yoast SEO & AMP" tillgängligt för att mata Yoast-stil-metadata i dina AMP-inlägg också. Till exempel lade de dessa metataggar till demobilden som tidigare visades:

För att använda detta plugin måste du först ha det huvudsakliga Yoast SEO plugin installerat. Limpluggen lägger sedan till en extra sektion märkt AMP till pluginens huvud SEO admin-menyn.

  • Lim för Yoast Plugin
  • Yoast på AMP och WordPress Del I
  • Yoast på AMP och WordPress Del II

Media och anpassade AMP-element

En av de viktigaste delarna av att skapa AMP-giltiga sidor använder sina anpassade anpassade element för mediaplacering, till exempel amp-img istället för img till exempel. Men när du skapar inlägg i WordPress arbetar du vanligtvis i WYSIWYG TinyMCE-redigeraren och kontrollerar inte direkt markeringen som används för mediainsättning.

Med installationsprogrammet Automattic AMP behöver du inte oroa dig för det eftersom det automatiskt filtrerar ditt innehåll och gör följande konverteringar till anpassade AMP-element:

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

Notera: Om du använder Flash var som helst på din webbplats stöds det inte. Annan typ av media kan användas i AMP-inlägg så länge det läggs till med hjälp av ett av föremålen från listan ovan.

  • Om WordPress oEmbeds

Kortnummer och pluggar

En annan övervägning när du använder Automattics AMP-plugin på dina WordPress-inlägg är hur kortkoder och plugins ska fungera.

Header och Footer Output

Automattics plugin förhindrar AMP-inlägg från att använda det normala wp_header () och wp_footer () temafunktioner som ofta knackas in av plugins för att utföra anpassad JavaScript, CSS och HTML. Om ett plugin du använder beror på någon av dessa funktioner fungerar det inte.

För ett plugin för att generera anpassad kod i kombination med AMP-plugin måste den använda speciella åtgärder och filter som ersätter normal WP-temfunktionalitet. Du kan till exempel inte lägga till metataggar i avsnitt som du normalt skulle, genom att använda wp_head åtgärd för att mata ut kod via wp_header () funktion, men du kan använda amp_post_template_metadata filtrera istället.

Yoast's Lim plugin använder dessa speciella åtgärder och filter, vilket är hur det kan producera SEO data och anpassad CSS på AMP sidor utan att bryta validering.

kortkoder

Om du använder plugins som är beroende av kortnummer måste du se till att koden de producerar är:

  1. AMP gäller, t.ex. ingen inline JS eller CSS
    och / eller
  2. Markera från listan i föregående avsnitt som AMP-plugin automatiskt omvandlar till de nödvändiga anpassade elementen.

För att kolla på det här, gå till ett inlägg som du vet använder de aktuella kortkod (erna) och använd AMP Validator plugin i Chrome / Chromium för att se om posten godkänns.

Anpassad JavaScript

Något annat att komma ihåg när du använder plugins på en AMP-webbplats är att ingen anpassad JavaScript är tillåten, så plugins som är beroende av JavaScript kommer inte att fungera alls. Om du till exempel använder ett plugin för att driva en JavaScript-driven bildreglage fungerar den inte.

Analytics

Om du använder analyser som är beroende av ett JavaScript-kod, innebär AMP: s uteslutning av anpassade JS att du behöver byta ut snippet med amp-analys element på dina AMP-sidor.

Det innebär att du är begränsad till Analytics-tjänster som Google har valt att stödja i AMP, men den goda nyheten är att det finns flera leverantörer på listan.

Du kan antingen använda ett plugin för att skapa AMP-vänlig analyskod, eller du kan lägga till spårningskod själv manuellt.

För att inkludera via ett plugin har Yoast's Lim plugin en sektion där du kan lägga till Google Analytics-kod, och det kommer att konvertera koden till AMP-vänligt format för dig. För att hitta den gå till AMP avsnitt i SEO meny för Yoasts plugin, sedan till Analytics flik:

Om du inte kan hitta ett plugin för att integrera den analytiska tjänst du vill använda, måste du ange det i dig själv. Automattic AMP-plugin erbjuder ett filter som du kan använda för att göra detta.

Anpassad kod för att integrera din egen analys ska läggas till i filen "functions.php" av ett anpassat tema eller barntema, eller till ett anpassat plugin du skapar dig själv.

Anpassa utseendet

Det finns några olika sätt att ge dina AMP-sidor en del av din egen stil och branding.

Inbyggd anpassare

Automattic AMP-plugin har en inbyggd sida i anpassningsanordningen med tre utseende inställningar som du kan ändra. För att komma åt det gå till Utseende> AMP i adminmenyn:

En gång i anpassningsområdet ser du inte AMP-designalternativen tills du klickar Design i den vänstra kolumnen. Härifrån kan du välja en rubrikfärg, rubrikbakgrund och länkfärg, och du kan välja mellan ett ljus eller mörkt färgschema.

Lim Customizer

Den inbyggda anpassningsfunktionens alternativ är begränsade, så om du vill leka med några extra inställningar har Yoasts limplugg den extra bonusen för vissa designkontroller, som du hittar genom att gå till SEO> AMP och sedan till Design flik.

Yoasts limplugg och dess designkontroller

Kod Ändringar

Om de tillgängliga GUI-baserade anpassningsverktyg inte är tillräckliga kanske du vill börja gräva i någon kod så att du kan använda din egen CSS eller mallmarkering. För att göra detta kan du antingen:

  • Skapa ett anpassat tema, (eller barntema) och lägg till kod till dess "functions.php" -fil
  • Skapa en anpassad plugin

Om du inte redan är bekant med hur man gör något av ovanstående är din bästa satsning troligtvis att hålla fast vid de tillgängliga GUI-anpassningsalternativen.

Åsidosätt AMP Plugins "style.php" -fil

Alla CSS som styr presentationen av AMP-sidor i Automattic-plugin finns i dess "mallar" -mapp i filen "style.php". Du ska inte redigera koden direkt i den här filen eftersom du förlorar alla dina ändringar när plugin uppdateras. Men du kan åsidosätta den här filen med en egen.

Om du skapar ett eget anpassat tema eller barntema skapar du en mapp inuti den som heter "amp" och därtill lägger du till din CSS i en fil med namnet "style.php". AMP-plugin hittar automatiskt den här filen och använder den.

Om du skapar ett eget plugin kan du använda någon PHP-fil som du gillar att hålla din anpassade CSS, och ange sedan filen genom att använda amp_post_template_file filter kombinerat med en villkorlig kontroll för 'style' === $ typ.

För detaljer om hur du gör det, kolla in Automattics dokumentation på GitHub.

Lägg till CSS

Om du bara behöver lägga till en liten anpassad kod till pluginens befintliga CSS kan du använda amp_post_template_css verkan. För mer information om hur detta görs, plus några exempel, se relevant avsnitt i Automattics dokumentation.

När det gäller att lägga till CSS har du också möjlighet att lägga till någon anpassad kod via Yoast's Lim plugin, i textområdet "Extra CSS" nära botten av dess Design flik.

Notera: Oavsett om du lägger till eller överväger CSS för pluginprogrammet för AMP, se till att du inte innehåller någon