So verwenden Sie AMP mit WordPress

AMP ist eine kommunale Anstrengung, die a verspricht bessere Seitenladeleistung für Websites in der mobilen Umgebung. Wie Sie jedoch in unserem vorherigen Lernprogramm finden können, müssen Sie auf Ihrer Website ausgefallenes Material opfern, sich strikt an die Regeln halten, Richtlinien einhalten und die Seiten validieren lassen. Es klingt nach viel zu tun, nicht wahr?

Wenn Sie Ihre Website mit WordPress erstellt haben, können Sie AMP mit einem Plugin namens AMP-WP im Handumdrehen auf Ihre Website anwenden. Es wird mit mehr Funktionen geliefert als das, was das Auge trifft. Mal sehen, wie es funktioniert.

Aktivierung

Melden Sie sich zunächst bei Ihrer Website an, gehen Sie zu Plugins> Neu hinzufügen Bildschirm. Suchen nach “AMPERE; Installieren und aktivieren Sie das von Automattic.

Nach der Aktivierung können Sie den AMP-konvertierten Beitrag anzeigen, indem Sie den /Ampere/ Pfad am Ende der Post-URL (z. http://wp.com/post/amp/), oder mit ?Amp = 1 (z.B. http://wp.com/post/?amp=1) wenn Sie die Pretty Permalinks-Funktion auf Ihrer Website nicht verwenden.

Und wie Sie oben sehen können, wurde der Beitrag mit grundlegenden Stylings versehen, die Sie weiter anpassen können.

Notieren

Es gibt ein paar Dinge, die Sie im Moment über den Status des Plugins wissen sollten:

• Archiv - Kategorie, Etikett und Benutzerdefinierte Taxonomie - werden derzeit nicht unterstützt. Sie werden nicht in ein AMP-kompatibles Format konvertiert. Benutzerdefinierte Beitragstypen können jedoch über einen Filter in AMP initiiert werden.
• Es wird kein neuer Einstellungsbildschirm im Dashboard hinzugefügt. Die Anpassung erfolgt auf Codeebene mit Aktionen, Filtern, Klasse.
• Das Plugin umfasst derzeit nicht alle benutzerdefinierten AMP-Elemente wie Amp-Analytics und Amp-Ad aus der Box Wenn Sie diese Elemente benötigen, müssen Sie sie in die Aktionen oder Filter des Plugins einbinden.

Anpassung

Das Plugin bietet zahlreiche Aktionen und Filter, die Flexibilität beim Anpassen der Stile, des Seiteninhalts und sogar des HTML-Markups der AMP-Seite insgesamt bieten.

Styles

Ich bin sicher, dies ist eine Sache, die Sie unmittelbar nach der Aktivierung des Plugins ändern möchten, z. B. die Hintergrundfarbe des Headers, die Schriftfamilie und die Schriftgröße, um die Marke und die Persönlichkeit Ihrer Website besser abzustimmen.

Dafür können wir das einsetzen amp_post_template_css Aktion in der Functions.php Datei unseres Themas.

Funktion theme_amp_custom_styles () ?> nav.amp-wp-title-bar Hintergrundfarbe: orange;   
Wenn wir die Chrome DevTools durchsehen, werden diese Stile in der