WordPress & Webwork

AMP: mobile Ausgabe von Beiträgen in WordPress

Mit dem Plugin "Accelerated Mobile Pages (AMP) Project" ist man in der Lage eine schlanke, mobile Ausgabe der Beiträge in WordPress automatisch zu generieren.

Mit dem Plugin, welches den schillernden Namen Accelerated Mobile Pages (AMP) Project trägt und welches ich im letzten WordPress-Newsletter erwähnt habe, ist man in der Lage automatisch eine schlanke, für mobile Geräte optimierte Ausgabe von WordPress-Beiträgen zu generieren. Nach der Installation des Plugins werden automatisch von allen Beiträgen extra mobile Ausgaben generiert:

Mobile Ausgabe eines WordPress-Artikels, generiert mit AMP

Mobile Ausgabe eines WordPress-Artikels, generiert mit AMP

Einfach an die URL des jeweiligen Beitrags /amp/ dranhängen. Hier zum Beispiel ein Originalartikel und hier die AMP-Ausgabe. Wenn die sprechenden Permalinks nicht aktiviert sind, dann hängt man die Beitrags-URL ein ?amp=1 dran.

Warum das Ganze?

An sich ist das eine sinnvolle Maßnahme, denn auch wenn mittlerweile die meisten WordPress-Themes responsive sind und sie sich somit der Ausgabe am Bildschirm anpassen, so sind sehr viele Websites dennoch nicht für die mobilen Geräte angepasst. Hier vor allem in Bezug auf die Dateigröße. Bei meinen WordPress-Inspektionen hatte ich einige Websites, die zwar auf Tablets und Smartphones schick aussahen, aber ohne Probleme 7+ MByte und 100+ http-Aufrufe auf die Waage brachten. Je nach dem welche mobile Verbindung man gerade hat ist das nicht wirklich optimal und man kann so schnell das Datenvolumen ausreizen.

Daher lohnt es sich, sich AMP mal genauer anzuschauen. Zumal Google die AMP-Ausgaben in den mobilen Suchergebnissen hervorhebt.

Anpassung der Ausgabe

Momentan werden lediglich die Beiträge unterstützt. Die mobile Ausgabe von Seiten, Archiven und Custom Post Types ist noch nicht implementiert. Zumindest bei den Custom Post Types kann man es nachrüsten in dem man folgenden Code in die functions.php hinzufügt:

add_action( 'amp_init', 'xyz_amp_add_review_cpt' );
function xyz_amp_add_review_cpt() {
    add_post_type_support( 'custom-post-type-name', AMP_QUERY_VAR );
}

Möchte man die CSS-Angaben anpassen so kann man unter anderem nach folgender Methode verfahren:

// Styles für AMP
add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );
function xyz_amp_my_additional_css_styles( $amp_template ) {
    // hier bitte nur die CSS-Angaben
    ?>
    /* deine CSS-Angaben */
    <?php
}

Den oberen Code ebenfalls in die functions.php einfügen. Man findet die Informationen zu dem Plugin sowohl im offiziellen Plugin-Verzeichnis, aber vor allem auf GitHub. Auf GitHub findet man auch Informationen darüber, wie zum Beispiel Analytics für die AMP-Ausgabe nachrüstet oder eigene Templates erstellt und einbindet.

9 Reaktion(en)

  1. Sascha Müller

    Danke für diesen informativen Artikel. Ihr seid mit Abstand die beste Informationsquelle zum Thema WordPress. Ich erwische mich alle paar Monate wie ich denke, guck an – seit Jahren immer wieder Perun. Macht weiter so.

    Liebe Grüẞe aus Magdeburg

  2. Björn

    Ich kann als Alternative das AMP Plugin "WP AMP it up!" empfehlen. Das Plugin benötigt keinerlei Anpassungen. Einfach installieren und fertig. Zusätzlich bietet es einige zusätzliche Features, wie z.B. die automatisierte Übernahme vom Google-Analytics-Tracking oder das automatisierte Hinzufügen von Social-Share-Buttons. Auch ein AMP Carousel wird automatisch erstellt:
    https://wordpress.org/plugins/wp-amp-it-up/

  3. Pingback: AMP-Plugin für WordPress mit Customizer und ist AMP eine Sackgasse? » perun.net

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.