M é m o - l a b .

Modèle Vue/Contrôleur – Timber

Le principe est le même que celui abordé dans le chapitre précédent (Modèle Vue/Controller – Approche), en utilisant la librairie Timber.

Dans functions.php, appeler l’autoload de composer (vendor/autoload.php) :
get_tempate_part('vendor/autoload');

Installation de Timber : depuis une console, se placer au niveau du thème et lancer les commandes :
composer init
composer req timber/timber

Dans le fichier composer.json, rajouter la partie concernant l’autoload pour définir l’emplacement des fichiers correspondants à un espace de nom donné :
"autoload": { "psr-4": { "App\\Controller\\": "./" } }Pour le schéma de structure des fichiers, se rapprocher du chapitre précédent Modèle Vue/Controller – Approche. Timber étant basé sur le moteur de template twig, le fichier de configuration n’est plus nécessaire. Le dossier par défaut utilisé pour accueillir les vues est views.





Controller.php

<?php 

namespace App\Controller;

class Controller
{
    public function __construct() {
        $timber = new \Timber\Timber();
        $this->index();
    }
}



front-page.php

<?php 

namespace App\Controller;

class FrontpageCtrl extends Controller
{
    public function index() {
    	$context = \Timber::context();

    	$posts = \Timber::get_posts([
    		'post_type' => 'post',
    		'posts_per_page' => -1,
    	]);
    	$context['posts'] = $posts;

    	\Timber::render('frontpage.html.twig', $context);
    }
}

new FrontpageCtrl();



single.php

<?php 

namespace App\Controller;

class SingleCtrl extends Controller
{
    public function index() {
    	$context = \Timber::context();
    	
    	$context['post'] = \Timber::get_post(get_the_id());

    	\Timber::render('single.html.twig', $context);
    }
}

new SingleCtrl();

fichiers twig (vues) :





views/base.html.twig

<!DOCTYPE html>
<html {{ site.language_attributes }}> 
    
<head>
    <meta charset="{{ site.charset }}">
    <meta name="description" content="{{ site.description }}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>

    {{ wp_head() }}

</head>
    <body class="{{ body_class }}">
        <main role="main">
	    {% block body %}{% endblock %}
        </main>

        {{ wp_footer() }}
    </body>
</html>



views/frontpage.html.twig

{% extends 'base.html.twig' %}

{% block body %}
	{% for post in posts %}
		<a href="{{ post.link }}"><h1>{{ post.title }}</h1></a>
		<p>{{ post.content }}</p>
	{% endfor %}
{% endblock %}



views/single.html.twig

{% extends 'base.html.twig' %}

{% block body %}
	<h1>{{ post.title }}</h1>
	<p>{{ post.content }}</p>
{% endblock %}