WordPress pagina opbouwen met Posts 2 Posts

Waarbij websites vroeger nog vrij statisch en eenvoudig waren, zien we nu een trend waarbij pagina’s steeds meer opgebouwd worden uit verschillende blokken. Landingspagina’s worden zoveel mogelijk ingericht om de conversies te verhogen. Deze pagina’s bestaan daardoor vaak uit verschillende secties. Bijvoorbeeld een header, de hoofdtekst, een aantal uitgelichte elementen en een onderdeel waarbij de mogelijkheid wordt gegeven om contact op te nemen.

Standaard biedt WordPress geen functionaliteit om pagina’s op deze manier in te delen. WordPress ontwikkelaars zullen hier zelf invulling aan moeten geven. Dat kan bijvoorbeeld met custom theme builders of de Advanced Custom Fields plugin. In deze blog wil ik een hele andere methode laten zien. Een opbouw met de Posts 2 Posts plugin.

Posts 2 Posts plugin

Als je onze blog volgt, ben je deze plugin vast en zeker al eens tegengekomen. Posts 2 Posts is een erg krachtige plugin die we voor menig project gebruiken. Posts 2 Posts geeft de mogelijkheid om posts aan elkaar te koppelen. Zo kan je bijvoorbeeld eenvoudig berichten aan een pagina koppelen. Daarnaast biedt het de mogelijkheid om gebruikers en media aan andere posts te koppelen. De mogelijkheden zijn eindeloos.

De plugin leent zich daarom ook uitstekend voor het koppelen van secties. Op basis van deze secties kunnen we een pagina geheel dynamisch opbouwen. Het geeft de gebruiker de mogelijkheid om een pagina geheel naar eigen wens in te richten, zonder de complexiteit van een ingewikkelde theme builder of de functies van de Advanced Custom Field plugin.

Hoe werkt het?

Het is de bedoeling om secties te kunnen koppelen aan pagina’s. Daarvoor moeten we eerst de mogelijkheid bieden om secties toe te voegen. Dat doen we door middel van een post type. Met de register_post_type functie maken we de custom post type “section” aan. Met Posts 2 Posts kunnen we vervolgens deze sectie koppelen aan een pagina. Het aanmaken van deze koppeling werkt als volgt:

function prefix_connection_types() {
	p2p_register_connection_type( array(
		'name' => 'sections_to_pages',
		'from' => 'section',
		'to'   => 'page',
    ) );
}

add_action( 'p2p_init', 'prefix_connection_types' );

Vervolgens is het een kwestie van het tonen van deze secties. In de meeste gevallen wil je de gekoppelde secties direct onderaan de hoofd content tonen. Ons starter thema bevat een handige template hook genaamd “prefix_after_main_content” waarmee we deze secties eenvoudig kunnen tonen onder de hoofd content. Dat gaat als volgt:

function prefix_after_content_wrapper() {
	if ( function_exists( 'p2p_register_connection_type' ) ) {
		$connected = new WP_Query( array(
			'connected_type'  => 'sections_to_pages',
			'connected_items' => get_queried_object(),
			'nopaging'        => true,
		) );

		if ( $connected->have_posts() ) {
			while ( $connected->have_posts() ) { $connected->the_post();
				get_template_part( 'templates/section' );
			}

			wp_reset_postdata();
		}
	}
}

add_action( 'prefix_after_main_content', 'prefix_after_content_wrapper' );

In de map templates plaatsen we vervolgens het section.php template bestand. De code in dit bestand bepaalt de weergave van deze sectie. Voor het enkel en alleen tonen van de titel en content plaats je het volgende in dit bestand:

<h2 class="section-title">
	<?php the_title(); ?>
<h2>

<?php the_content(); ?>

Verschillende templates

Bovenstaande uitwerking is nog vrij summier. De kracht van deze functionaliteit ligt in het gebruik van verschillende templates. Bijvoorbeeld een weergave voor drie uitgelichte blokken, een grid weergave met twee blokken of een achtergrond met een parallax effect. De integratie hiervan is vrij eenvoudig. Hiervoor maken we voor het sectie onderdeel een dropdown waarmee je kunt kiezen uit de verschillende templates. Deze dropdown kan je eenvoudig aanmaken d.m.v. de add_meta_box functie. Vervolgens maak je voor elke template een eigen weergave en laad je die als volgt in:

get_template_part( 'templates/section', 'featured' );

Dit is slechts een voorbeeld van hoe je een pagina dynamisch kunt opbouwen. Elke oplossing heeft zo z’n voor- en nadelen. In de praktijk krijgen we echter veel positieve reacties op deze integratie. Deze positieve reacties zijn met name gericht op de schaalbaarheid en gebruiksvriendelijkheid van deze oplossing.