So richten Sie die AMP-Unterstützung für WordPress ein

In diesem Lernprogramm werden Sie Schritt für Schritt durch das Generieren gültiger AMP-Versionen der Beiträge Ihrer WordPress-Site geführt. Wir machen dies mit dem von Automattic erstellten AMP-Plugin.

Es gibt alternative Plugins, die Sie stattdessen verwenden könnten, wenn Sie sich entscheiden. Da in diesem Tutorial jedoch nur Platz für ein einzelnes Plugin vorhanden ist, behalten wir den Fokus auf dem Plugin, das vom Team hinter WordPress selbst erstellt wurde.

Hinweis: In diesem Artikel wird vorausgesetzt, dass Sie bereits mit der Erstellung gültiger AMP-Seiten vertraut sind und sich daher auf die Details konzentrieren, die für die gemeinsame Verwendung von WordPress und AMP gelten. Wenn Sie neu bei AMP sind, überprüfen Sie Folgendes:

• AMP in 60 Sekunden
• Mit AMP einsatzbereit
• So erstellen Sie eine Basis-AMP-Seite von Grund auf
• AMP-Projekt: Werden Ihre Websites schneller
• Wie Sie amp-img und amp-video verwenden, um Ihre Website zu beschleunigen

Es wird auch vorausgesetzt, dass Sie mit der Ausführung einer selbst gehosteten WordPress-Site vertraut sind. Wenn nicht, könnten diese Ressourcen hilfreich sein:

• Erste Schritte mit WordPress
  
• Ein Anfängerleitfaden für WordPress

Automattics AMP Plugin

Dieses Plugin, einfach AMP genannt, automatisiert die Generierung von AMP-gültigen Einzelposts. Für jeden Beitrag, den Sie erstellen, ist auch eine zweite Version verfügbar /Ampere/ an den Permalink angehängt. Wenn Sie die Permalink-Umschreibefunktion von WordPress auf Ihrer Website nicht verwenden / Amp = 1 wird stattdessen an die URL angehängt.

Dies ist zum Beispiel ein normaler WordPress-Beitrag:

Beachten Sie, dass hier die AMP Validator-Erweiterung in Chrome installiert ist, die erkennt, dass eine AMP-Version dieser Seite verfügbar ist und ein kleines blaues Link-Symbol angezeigt wird:

AMP Validator-Erweiterung

Wenn ich auf das kleine blaue Link-Symbol der Erweiterung klicke, gelangen Sie zur AMP-Version des Posts:

Die Verwendung dieses Plugins im Standardzustand ist praktisch „Plug and Play“. Installieren, aktivieren und loslegen. Es gibt keine Konfigurationsoptionen, die Ihre Aufmerksamkeit während des Setups erfordern.

Derzeit kann dieses Plugin nur für einzelne Beiträge verwendet werden. Es hat keine Auswirkungen auf Seiten, benutzerdefinierte Beitragstypen oder Archive. Die Seite des Plugins im WordPress-Repository-Status unterstützt derzeit diese in der Entwicklung.

• AMP-Plugin
  
• AMP Plugin README
  

Verwenden Sie mit Yoast SEO über Kleber

Wenn Sie das SEO-Plugin von Yoast für Ihre regulären Beiträge verwenden möchten, gibt es ein zusätzliches Plugin mit dem Namen „Glue for Yoast SEO & AMP“, mit dem Sie Metadaten im Yoast-Stil in Ihre AMP-Beiträge ausgeben können. Zum Beispiel wurden diese Metatags zu dem zuvor abgebildeten Demo-Post hinzugefügt:

Um dieses Plugin verwenden zu können, müssen Sie zunächst das Yoast SEO-Plugin installiert haben. Das Glue-Plugin fügt dann einen zusätzlichen Abschnitt hinzu AMPERE zum Hauptbereich des Plugins SEO Admin-Menü.

• Kleber für Yoast Plugin
• Yoast über AMP und WordPress Teil I
  
• Yoast über AMP und WordPress Teil II

Medien und benutzerdefinierte AMP-Elemente

Eines der wichtigsten Elemente beim Erstellen von AMP-gültigen Seiten ist die Verwendung der erforderlichen benutzerdefinierten Elemente für die Medienplatzierung, wie z Amp-Img anstatt img zum Beispiel. Beim Erstellen von Posts in WordPress arbeiten Sie jedoch normalerweise im WYSIWYG TinyMCE-Editor und steuern nicht direkt das Markup für das Einfügen von Medien.

Wenn das Automattic AMP-Plugin installiert ist, müssen Sie sich nicht darum kümmern, da es Ihre Inhalte automatisch filtert und die folgenden Konvertierungen in benutzerdefinierte AMP-Elemente vornimmt:

• img → Amp-Img oder 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
  

Hinweis: Wenn Sie Flash überall auf Ihrer Website verwenden, wird dies nicht unterstützt. Alle anderen Medientypen können in AMP-Posts verwendet werden, sofern sie mit einem der Elemente aus der obigen Liste hinzugefügt werden.

• Über WordPress oEmbeds
  

Shortcodes und Plugins

Wenn Sie das AMP-Plugin von Automattic in Ihren WordPress-Posts verwenden, ist auch das Verhalten von Shortcodes und Plugins wichtig.

Ausgabe der Kopf- und Fußzeile

Das Plugin von Automattic verhindert, dass AMP-Beiträge normal verwendet werden wp_header () und wp_footer () Theme-Funktionen, die häufig von Plugins verwendet werden, um benutzerdefiniertes JavaScript, CSS und HTML auszugeben. Wenn ein Plugin, das Sie verwenden, von einer dieser Funktionen abhängt, funktioniert es nicht.

Damit ein Plugin benutzerdefinierten Code in Kombination mit dem AMP-Plugin generieren kann, muss es spezielle Aktionen und Filter verwenden, die die normalen WP-Theme-Funktionen ersetzen. Beispielsweise können Sie keine Metatags hinzufügen Abschnitt wie üblich mit der wp_head Aktion zur Ausgabe von Code über die wp_header () Funktion, aber Sie können die amp_post_template_metadata filtern stattdessen.

Das Glue-Plugin von Yoast verwendet diese speziellen Aktionen und Filter. Auf diese Weise kann es SEO-Daten und benutzerdefiniertes CSS auf AMP-Seiten ausgeben, ohne die Validierung zu beeinträchtigen.

Kurzwahlnummern

Wenn Sie Plugins verwenden, die Shortcodes verwenden, müssen Sie sicherstellen, dass der von ihnen ausgegebene Code Folgendes ist:

1. AMP gültig, z. kein Inline-JS oder CSS
   und / oder
   
2. Markup aus der Liste im vorherigen Abschnitt, die das AMP-Plugin automatisch in die erforderlichen benutzerdefinierten Elemente konvertiert.
   

Um dies zu überprüfen, gehen Sie zu einem Beitrag, von dem Sie wissen, dass er die fraglichen Kurzcodes verwendet, und verwenden Sie das AMP Validator-Plugin in Chrome / Chromium, um zu überprüfen, ob der Beitrag die Validierung besteht.

Benutzerdefiniertes JavaScript

Beachten Sie bei der Verwendung von Plugins auf einer AMP-Site auch, dass kein benutzerdefiniertes JavaScript zulässig ist. Plugins, die von JavaScript abhängen, funktionieren daher überhaupt nicht. Wenn Sie beispielsweise ein Plugin verwenden, um einen JavaScript-gesteuerten Image-Schieberegler zu steuern, funktioniert es nicht.

Analytics

Wenn Sie Analysen verwenden, die von einem JavaScript-Snippet abhängen, bedeutet der Ausschluss von benutzerdefiniertem JS durch AMP, dass Sie das Snippet durch das ersetzen müssen Amp-Analytics Element auf Ihren AMP-Seiten.

Dies bedeutet, dass Sie auf Analysedienste beschränkt sind, die Google für die Unterstützung von AMP ausgewählt hat. Die gute Nachricht ist jedoch, dass mehrere Anbieter auf der Liste stehen.

Sie können entweder ein Plugin verwenden, um AMP-freundlichen Analysecode zu generieren, oder Sie können den Tracking-Code manuell hinzufügen.

Für die Einbindung über ein Plugin enthält das Glue-Plugin von Yoast einen Abschnitt, in dem Sie Google Analytics-Code hinzufügen können. Der Code wird für Sie in ein AMP-freundliches Format konvertiert. Um es zu finden, gehe zum AMPERE Abschnitt in der SEO Menü für Yoast's Plugin, dann zum Analytics Tab:

Wenn Sie kein Plug-in finden, um den Analysedienst zu integrieren, den Sie verwenden möchten, müssen Sie ihn in sich selbst kodieren. Das Automattic AMP Plugin bietet einen Filter, den Sie dazu verwenden können.

Benutzerdefinierter Code zur Integration Ihrer eigenen Analyse sollte der Datei „functions.php“ eines benutzerdefinierten Designs oder eines untergeordneten Designs oder einem von Ihnen selbst erstellten benutzerdefinierten Plug-In hinzugefügt werden.

Den Look anpassen

Es gibt verschiedene Möglichkeiten, wie Sie Ihren AMP-Seiten ein wenig Ihren eigenen Stil und Ihr Branding verleihen können.

Integrierter Customizer

Das Automattic AMP-Plugin verfügt im Customizer über eine integrierte Seite mit drei Aussehenseinstellungen, die Sie ändern können. Um darauf zuzugreifen, gehen Sie zu Aussehen> AMP im Admin-Menü:

Wenn Sie sich im Anpassungsbereich befinden, werden die AMP-Designoptionen erst angezeigt, wenn Sie auf klicken Design in der linken Spalte. Hier können Sie eine Headerfarbe, einen Headerhintergrund und eine Linkfarbe auswählen und zwischen einem hellen und einem dunklen Farbschema wählen.

Kleber-Customizer

Die eingebauten Optionen des Customizers sind begrenzt. Wenn Sie also mit zusätzlichen Einstellungen herumspielen möchten, bietet das Glue-Plugin von Yoast den zusätzlichen Bonus einiger Design-Steuerelemente, die Sie unter finden SEO> AMP und dann zum Design Tab.

Yoast's Glue-Plugin und seine Design-Steuerelemente

Code-Änderungen

Wenn die verfügbaren GUI-basierten Anpassungen nicht ausreichen, möchten Sie vielleicht etwas Code suchen, um Ihr eigenes CSS- oder Vorlagen-Markup zu verwenden. Dazu können Sie entweder:

• Erstellen Sie ein benutzerdefiniertes Design (oder ein untergeordnetes Design) und fügen Sie der Datei „functions.php“ Code hinzu
  
• Erstellen Sie ein benutzerdefiniertes Plugin

Wenn Sie nicht bereits mit der oben genannten Vorgehensweise vertraut sind, bleiben Sie am besten bei den verfügbaren GUI-Anpassungsoptionen.

Überschreiben Sie die Datei "style.php" des AMP-Plugins

Alle CSS, die die Darstellung von AMP-Seiten im Automattic-Plugin steuern, befinden sich im Unterordner "templates" in der Datei "style.php". Sie sollten den Code in dieser Datei nicht direkt bearbeiten, da Sie alle Änderungen verlieren, wenn das Plugin aktualisiert wird. Sie können diese Datei jedoch mit einer eigenen überschreiben.

Wenn Sie ein eigenes benutzerdefiniertes Design oder ein untergeordnetes Design erstellen, erstellen Sie einen Ordner mit dem Namen „amp“ und fügen Sie Ihr CSS einer Datei mit dem Namen „style.php“ hinzu. Das AMP-Plugin findet diese Datei automatisch und verwendet sie.

Wenn Sie ein eigenes Plugin erstellen, können Sie jede PHP-Datei verwenden, in der Sie Ihr benutzerdefiniertes CSS speichern möchten amp_post_template_file Filter kombiniert mit einer bedingten Prüfung auf 'style' === $ type.

Einzelheiten dazu finden Sie in der Automattic-Dokumentation zu GitHub.

CSS anhängen

Wenn Sie nur ein wenig benutzerdefinierten Code an das vorhandene CSS des Plugins anhängen müssen, können Sie das verwenden amp_post_template_css Aktion. Weitere Informationen zu diesem Vorgang sowie einige Beispiele finden Sie im entsprechenden Abschnitt der Automattic-Dokumentation.

Wenn Sie CSS anfügen, haben Sie auch die Möglichkeit, benutzerdefinierten Code über das Glue-Plugin von Yoast im Textbereich "Extra CSS" am unteren Rand des CSS hinzuzufügen Design Tab.

Hinweis: Unabhängig davon, ob Sie an das CSS des AMP-Plugins anhängen oder dieses überschreiben, stellen Sie sicher, dass Sie keines hinzufügen