Hur man använder AMP med WordPress

AMP är en gemensam insats som lovar a bättre sidbelastning för webbplatser i mobilmiljön. Men som du kan hitta från vår tidigare handledning måste du offra fina saker från din webbplats och följ strikt följa reglerna, följa riktlinjerna och få sidor validerade. Det låter som mycket att göra, gör det inte?

Lyckligtvis, om du har byggt din webbplats med WordPress, kan du använda AMP till din webbplats i en snap med en plugin med namnet AMP-WP. Den levereras med fler funktioner än vad som möter ögat. Så, låt oss se hur det fungerar.

Aktivering

Till att börja med, logga in på din webbplats, gå till Plugins> Lägg till nytt skärm. Söka efter “AMP; installera och aktivera den från Automattic.

När du har aktiverat kan du se det AMP-konverterade inlägget genom att lägga till / Amp / spår i slutet av postadressen (t.ex.. http://wp.com/post/amp/), eller med ?amp = 1 (t.ex. http://wp.com/post/?amp=1) om du inte använder funktionen Pretty Permalinks på din webbplats.

Och som du kan se ovan har posten fått grundläggande stylings, som du kan anpassa ytterligare.

Att notera

Det finns några saker du borde veta om tillståndet för plugin för tillfället:

• Arkiv - Kategori, Märka och Anpassad taxonomi - stöds för närvarande inte. De kommer inte att konverteras till AMP-kompatibelt format. Emellertid kan anpassade inläggstyper initieras i AMP via ett filter.
• Den lägger inte till i en ny inställningsskärm i instrumentpanelen. Anpassning sker på kodnivå med åtgärder, filter, klass.
• Plugin omfattar för närvarande inte alla AMP-anpassade element som amp-analys och amp-ad utanför lådan. Om du behöver det här elementet måste du inkludera det genom att koppla in i Åtgärderna eller Filtrarna i plugin.

anpassning

Pluggen ger många åtgärden och filter som ger flexibilitet över anpassning av stilar, sidinnehåll och till och med HTML-märkning av AMP-sidan som helhet.

Styles

Jag är säker på att det här är en sak som du vill ändra omedelbart efter att ha aktiverat pluginet, till exempel att ändra bakgrundsfärgen, fontfamiljen och typsnittstorleken för att bättre matcha ditt webbplatsmärke och personlighet.

För att göra det kan vi anställa amp_post_template_css Åtgärd i functions.php fil av vårt tema.

funktion theme_amp_custom_styles () ?> nav.amp-wp-title-bar bakgrundsfärg: orange;   
Om vi ​​tittar igenom Chrome DevTools, adderas dessa stilar inom