Depuis que j’ai parlé de modèles WordPress, j’ai couvert différents moteurs disponibles :
Si vous regardez Moustache, alors vous pourriez être intéressé par les guidons, et si vous regardez Blade, alors je vous recommande fortement de consulter Sage de l’ équipe Roots.
Mais pour ce dernier article, je vais continuer avec Timber, ce que j’ai présenté hier. Je ne suis pas tellement sur ce qui est utilisé (car ils ont tous leurs compromis) tant que c’est cohérent.
Templates WordPress: Utilisation de Timber
Cela dit, voici comment vous pouvez commencer à utiliser Timber dans vos projets.
Pour commencer, vous devrez vous familiariser avec Composer et vous aurez besoin d’avoir une configuration d’environnement de développement local. Si vous n’avez ni l’un ni l’autre ou si vous avez besoin d’aide, alors je suis là pour vous :
Une fois que vous avez suivi les étapes de chacun de ces guides, vous devriez être prêt à partir. Voici donc ce que nous allons faire.
1 Configurer une installation locale pour le bois
Je vais utiliser Valet pour cela, ce qui signifie que je vais avoir un répertoire avec la dernière version de WordPress (qui est 4.8.3) installée dans son répertoire.
Cela signifie que j’aurai une base de données déjà prête à l’emploi :
Et je vais avoir émis les commandes suivantes pour configurer Laravel et une installation sécurisée (pour imiter un environnement de staging):
$ valet link
$ valet securePour que je puisse accéder au site dans un navigateur.
Pour ceux qui sont curieux, j’utilise :
- WordPress 4.8.3
- vingt-quinze
- Nettoyer les permaliens
Et pas d’autres plugins. C’est juste une installation vanille autre que ce que vous voyez ci-dessus.
À ce stade, je suis prêt à installer Timber.
2 Installation du bois
En supposant que vous ayez suivi les guides ci-dessus pour Valet et Composer, vous devriez être prêt à partir. Donc, à l’aide d’un terminal, accédez à votre répertoire d’installation WordPress.
Lancez ensuite la commande suivante :
$ composer require timber/timber
Cela installera Timber, mais vous devrez toujours mettre à jour le fichier functions.php de votre thème afin qu’il utilise correctement le chargeur automatique de Composer.
En supposant que tout s’est déroulé correctement, vous devriez pouvoir actualiser votre site, accéder à tous les messages, pages, etc. et rien ne devrait être hors service.
3 Initialisation du bois
Enfin, il est temps d’utiliser Timber pour remplacer une grande partie de ce que nous avons l’habitude de voir dans le contexte d’un modèle WordPress.
Je choisis de le faire dans content-page.php pour le rendre facile à suivre. Notez que le segment de code que je modifie ressemble à ceci à l’origine :
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
// Post thumbnail.
twentyfifteen_post_thumbnail();
?>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content(); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links"><span class="page-links-title">'. __( 'Pages:', 'twentyfifteen' ). '</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
'pagelink' => '<span class="screen-reader-text">'. __( 'Page', 'twentyfifteen' ). ' </span>%',
'separator' => '<span class="screen-reader-text">, </span>',) );
?>
</div><!-- .entry-content -->
<?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<footer class="entry-footer"><span class="edit-link">', '</span></footer><!-- .entry-footer -->' ); ?>
</article><!-- #post-## -->Dans cet article, je ne vais pas recréer complètement ce que vous voyez ci-dessus, mais je vais commencer par ce qui est nécessaire pour commencer à utiliser un moteur de template dans le contexte d’une fondation PHP.
Tout d’abord, vous devrez créer un modèle pouvant être appliqué à la page d’exemple dans une installation WordPress standard. J’ai appelé le mien template-timber-page.php et il ressemble à ceci :
<?php
/**
* Template Name: Timber Template
* Description: Replaces the standard page with a Timber template.
*/
$timber = new TimberTimber();
$context = Timber::get_context();
$post = new TimberPost();
$context['post'] = $post;
Timber::render(
array( 'content-'. $post->post_name. '.twig', 'page.twig' ),
$context
);
Dans le code ci-dessus, voici ce qui se passe :
- J’instancie l’objet Timber.
- Ensuite, je reçois un contexte Timber. Le contexte contient de nombreuses informations utiles dans le modèle (ou le site) selon l’endroit où vous utilisez votre modèle.
- Après cela, je saisis un TimberPost qui est essentiellement une extension d’un article WordPress. Il a les données de WP_Post mais les rend disponibles pour nos modèles.
- Ensuite, j’ai défini l’ index de publication du tableau $context avec une référence au Timber Post (que j’ai appelé $post ).
- Enfin, je dis à Timber de rendre une page appelée content-sample-page.twig en utilisant le contexte donné.
C’est là qu’il est important de créer le fichier twig réel (qui est l’extension du fichier de modèle Timber). J’ai donc créé content-sample-page.twig et il ressemble à ceci :
{% block content %}
<article id="post-{{post.ID}}" class="{{body_class}}">
<header class="entry-header">
<h1 class="article-h1">{{post.title}}</h1>
</header><!-- .entry-header -->
<div class="entry-content">
{{post.content}}
</div><!-- .entry-content -->
</article><!-- #post-## -->
{% endblock %}
Après avoir instancié l’objet Timber puis remplacé le code que vous voyez ci-dessus, vous remarquerez que le code se lit un peu différemment (mais pas tout à fait difficile à suivre).
4 Application du modèle
Pour appliquer le modèle, accédez à Pages dans WordPress. Localisez Sample Page puis, dans la liste déroulante des modèles, choisissez celui que nous venons de créer en utilisant le titre ci-dessus :
Une fois cela fait, vous pouvez voir le message. Vous remarquerez qu’il a l’air un peu nu par rapport à ce que nous avons l’habitude de voir :
Mais vous avez une idée générale de la façon dont nous pouvons utiliser le contexte pour accéder à bon nombre des mêmes propriétés que nous avons l’habitude de voir dans WordPress sans avoir à encombrer le code de balisage et de PHP et de tout ce que nous utilisons. à utiliser.
Davantage de ressources
Je sais qu’il s’agit principalement d’un cours accéléré sur les modèles et qu’il ne couvre pas autant qu’il le pourrait. Comme ce message approche les 1000 mots, j’ai besoin de tracer la ligne quelque part, donc je choisis de le faire ici.
Cela ne signifie pas pour autant que j’ai fini d’en discuter. Je prévois de revenir sur des sujets plus avancés autour des modèles dans de futurs pots.
Mais si vous êtes intéressé, je vous recommande fortement de suivre à la fois le guide de démarrage pour Timber et le projet sur GitHub.
Cela vous donnera au moins un point de départ à partir duquel vous pourrez faire encore plus de progrès dans vos efforts pour créer un code plus propre et plus logiquement séparé que ce que nous avons l’habitude de voir dans WordPress.