AMP plugin voor WordPress

Steeds meer websites maken gebruik van AMP. Vooral blogs en nieuwssites maken steeds vaker gebruik van deze techniek. AMP staat voor Accelerated Mobile Pages en is in feite een vereenvoudigde mobiele versie van je website. Het doel van deze technologie is om websites sneller te maken. Wil je meer over AMP weten, lees dan vooral ook even de blog: AMP en WordPress. Deze blog is meer praktisch van aard waarin ik handvaten geef voor de integratie van AMP in je WordPress website.

Met AMP maak je twee versies van je pagina beschikbaar voor Google. Een normale versie en de uitgeklede AMP versie. Deze AMP versie hoef je niet zelf te maken. Daar is een plugin voor. De AMP plugin van Automattic. De waarderingen op de plugin zijn niet allemaal even positief maar dat heeft vooral te maken met het gebrek aan support. De plugin is in de basis een prima oplossing om met AMP te beginnen.

Hooks en filters

Bij het activeren van de plugin werkt AMP direct. De AMP versie van de berichten is bereikbaar door het toevoegen van /amp/ aan het einde van de URL. Via de plugin instellingen is er qua layout en design helaas weinig aanpasbaar. Je kunt de kleuren en het icoon aanpassen, maar daar is het ook mee gezegd. Gelukkig biedt de plugin een aantal hooks en filters om de AMP pagina’s toch naar eigen smaak in te richten. De belangrijkste filter is de amp_post_template_css action hook. Hiermee kan je custom CSS toevoegen aan de AMP pagina’s.

<?php

add_action( 'amp_post_template_css', 'yourtheme_amp_css' );

function yourtheme_amp_css() {
	?>

	.amp-wp-header {
		background: orange;

		text-align: center;
	}

	.amp-wp-title {
		font-size: 2em;

		line-height: 1.2;
	}

	.amp-wp-footer {
		text-align: center;
	}

	<?php
}

?>

AMP werkt nog niet voor pagina’s en archieven. Post types worden wel ondersteund. Gebruik hiervoor het volgende filter:

add_action( 'amp_init', 'yourtheme_amp_cpt_support' );

function yourtheme_amp_cpt_support() {
	add_post_type_support( 'yourcpt', AMP_QUERY_VAR );
}

AMP templates

Naast deze handige filters is het ook mogelijk om AMP templates te overschrijven. Hierdoor kan je de AMP pagina’s uitbreiden met nieuwe functionaliteiten of onderdelen aanpassen. De header kan je bijvoorbeeld aanpassen door het header-bar.php bestand vanuit de plugin te kopiëren naar je thema.

<header id="#top" class="amp-wp-header">
	<div>
		<a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
			<amp-img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/logo.svg" width="100" height="20"></amp-img>
		</a>
	</div>
</header>

Is AMP ook interessant voor mij?

Hoogstwaarschijnlijk wel! Google geeft websites met AMP een voorkeurspositie. Dat betekent concreet dat je hoger in de zoekmachines gerankt zal worden. Wil je meer weten over AMP? Neem contact met ons op.