Si vous regardez Moustache, alors vous pourriez \u00eatre int\u00e9ress\u00e9 par les guidons, et si vous regardez Blade, alors je vous recommande fortement de consulter Sage<\/a> de l’ \u00e9quipe Roots<\/a>.<\/p>\n Mais pour ce dernier article, je vais continuer avec Timber, ce que j’ai pr\u00e9sent\u00e9 hier. Je ne suis pas tellement sur ce qui est utilis\u00e9 (car ils ont tous leurs compromis) tant que c’est coh\u00e9rent.<\/p>\n Cela dit, voici comment vous pouvez commencer \u00e0 utiliser Timber<\/a> dans vos projets.<\/p>\n Pour commencer, vous devrez vous familiariser avec Composer et vous aurez besoin d’avoir une configuration d’environnement de d\u00e9veloppement local. Si vous n’avez ni l’un ni l’autre ou si vous avez besoin d’aide, alors je suis l\u00e0 pour vous\u00a0:<\/p>\n Une fois que vous avez suivi les \u00e9tapes de chacun de ces guides, vous devriez \u00eatre pr\u00eat \u00e0 partir. Voici donc ce que nous allons faire.<\/p>\n Je vais utiliser Valet pour cela, ce qui signifie que je vais avoir un r\u00e9pertoire avec la derni\u00e8re version de WordPress<\/a> (qui est 4.8.3) install\u00e9e dans son r\u00e9pertoire.<\/p>\n Cela signifie que j’aurai une base de donn\u00e9es d\u00e9j\u00e0 pr\u00eate \u00e0 l’emploi\u00a0:<\/p>\n Et je vais avoir \u00e9mis les commandes suivantes pour configurer Laravel et une installation s\u00e9curis\u00e9e (pour imiter un environnement de staging):<\/p>\n Pour que je puisse acc\u00e9der au site dans un navigateur.<\/p>\n Pour ceux qui sont curieux, j’utilise :<\/p>\n Et pas d’autres plugins. C’est juste une installation vanille autre que ce que vous voyez ci-dessus.<\/p>\n \u00c0 ce stade, je suis pr\u00eat \u00e0 installer Timber.<\/p>\n En supposant que vous ayez suivi les guides ci-dessus pour Valet et Composer, vous devriez \u00eatre pr\u00eat \u00e0 partir. Donc, \u00e0 l’aide d’un terminal, acc\u00e9dez \u00e0 votre r\u00e9pertoire d’installation WordPress.<\/p>\n Lancez ensuite la commande suivante\u00a0:<\/p>\n Cela installera Timber, mais vous devrez toujours mettre \u00e0 jour le fichier functions.php de votre th\u00e8me afin qu’il utilise correctement le chargeur automatique de Composer.<\/p>\n En supposant que tout s’est d\u00e9roul\u00e9 correctement, vous devriez pouvoir actualiser votre site, acc\u00e9der \u00e0 tous les messages, pages, etc. et rien ne devrait \u00eatre hors service.<\/p>\n 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\u00e8le WordPress.<\/p>\n Je choisis de le faire dans content-page.php<\/strong> pour le rendre facile \u00e0 suivre. Notez que le segment de code que je modifie ressemble \u00e0 ceci \u00e0 l’origine\u00a0:<\/a><\/p>\n Dans cet article, je ne vais pas recr\u00e9er compl\u00e8tement ce que vous voyez ci-dessus, mais je vais commencer par ce qui est n\u00e9cessaire pour commencer \u00e0 utiliser un moteur de template dans le contexte d’une fondation PHP.<\/p>\n Tout d’abord, vous devrez cr\u00e9er un mod\u00e8le pouvant \u00eatre appliqu\u00e9 \u00e0 la page d’exemple dans une installation WordPress standard. J’ai appel\u00e9 le mien template-timber-page.php<\/a> et il ressemble \u00e0 ceci :<\/p>\n Dans le code ci-dessus, voici ce qui se passe\u00a0:<\/p>\n C’est l\u00e0 qu’il est important de cr\u00e9er le fichier twig r\u00e9el (qui est l’extension du fichier de mod\u00e8le Timber). J’ai donc cr\u00e9\u00e9 content-sample-page.twig<\/strong> et il ressemble \u00e0 ceci\u00a0:<\/a><\/p>\n Apr\u00e8s avoir instanci\u00e9 l’objet Timber puis remplac\u00e9 le code que vous voyez ci-dessus, vous remarquerez que le code se lit un peu diff\u00e9remment (mais pas tout \u00e0 fait difficile \u00e0 suivre).<\/p>\n Pour appliquer le mod\u00e8le, acc\u00e9dez \u00e0 Pages<\/strong> dans WordPress. Localisez Sample Page<\/strong> puis, dans la liste d\u00e9roulante des mod\u00e8les, choisissez celui que nous venons de cr\u00e9er en utilisant le titre ci-dessus\u00a0:<\/p>\n Une fois cela fait, vous pouvez voir le message. Vous remarquerez qu’il a l’air un peu nu par rapport \u00e0 ce que nous avons l’habitude de voir :<\/p>\n Mais vous avez une id\u00e9e g\u00e9n\u00e9rale de la fa\u00e7on dont nous pouvons utiliser le contexte pour acc\u00e9der \u00e0 bon nombre des m\u00eames propri\u00e9t\u00e9s que nous avons l’habitude de voir dans WordPress sans avoir \u00e0 encombrer le code de balisage et de PHP et de tout ce que nous utilisons. \u00e0 utiliser.<\/p>\n Je sais qu’il s’agit principalement d’un cours acc\u00e9l\u00e9r\u00e9 sur les mod\u00e8les 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.<\/p>\n Cela ne signifie pas pour autant que j’ai fini d’en discuter. Je pr\u00e9vois de revenir sur des sujets plus avanc\u00e9s autour des mod\u00e8les dans de futurs pots.<\/p>\n Mais si vous \u00eates int\u00e9ress\u00e9, je vous recommande fortement de suivre \u00e0 la fois le guide de d\u00e9marrage<\/a> pour Timber et le projet sur GitHub<\/a>.<\/p>\n Cela vous donnera au moins un point de d\u00e9part \u00e0 partir duquel vous pourrez faire encore plus de progr\u00e8s dans vos efforts pour cr\u00e9er un code plus propre et plus logiquement s\u00e9par\u00e9 que ce que nous avons l’habitude de voir dans WordPress.<\/p>\nTemplates WordPress: Utilisation de Timber<\/h2>\n
![\"Mod\u00e8les](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ec006741.png\")
<\/a><\/p>\n\n
1 Configurer une installation locale pour le bois<\/h3>\n
![\"Mod\u00e8les](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ec4380aa.png\")
<\/a><\/p>\n$ valet link\n$ valet secure<\/code><\/pre>\n![\"Mod\u00e8les](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ec7806b6.png\")
<\/a><\/p>\n\n
2 Installation du bois<\/h3>\n
![\"Mod\u00e8les](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ecb7040b.png\")
<\/a><\/p>\n$ composer require timber\/timber<\/code><\/pre>\n![\"Mod\u00e8les](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ece8223b.png\")
<\/a><\/p>\n![\"Mod\u00e8les](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ed28264d.png\")
<\/a><\/p>\n3 Initialisation du bois<\/h3>\n
<article id=\"post-<?php the_ID(); ?>\" <?php post_class(); ?>>\n <?php\n \/\/ Post thumbnail.\n twentyfifteen_post_thumbnail();\n ?>\n\n <header class=\"entry-header\">\n <?php the_title( '<h1 class=\"entry-title\">', '<\/h1>' ); ?>\n <\/header><!-- .entry-header -->\n\n <div class=\"entry-content\">\n <?php the_content(); ?>\n <?php\n wp_link_pages( array(\n 'before' => '<div class=\"page-links\"><span class=\"page-links-title\">'. __( 'Pages:', 'twentyfifteen' ). '<\/span>',\n 'after' => '<\/div>',\n 'link_before' => '<span>',\n 'link_after' => '<\/span>',\n 'pagelink' => '<span class=\"screen-reader-text\">'. __( 'Page', 'twentyfifteen' ). ' <\/span>%',\n 'separator' => '<span class=\"screen-reader-text\">, <\/span>',) );\n ?>\n <\/div><!-- .entry-content -->\n\n <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<footer class=\"entry-footer\"><span class=\"edit-link\">', '<\/span><\/footer><!-- .entry-footer -->' ); ?>\n\n<\/article><!-- #post-## --><\/code><\/pre>\n<?php\n\n\/**\n * Template Name: Timber Template\n * Description: Replaces the standard page with a Timber template.\n *\/\n\n$timber = new TimberTimber();\n$context = Timber::get_context();\n$post = new TimberPost();\n\n$context['post'] = $post;\nTimber::render(\n array( 'content-'. $post->post_name. '.twig', 'page.twig' ),\n $context\n);\n<\/code><\/pre>\n\n
{% block content %}\n <article id=\"post-{{post.ID}}\" class=\"{{body_class}}\">\n\n <header class=\"entry-header\">\n <h1 class=\"article-h1\">{{post.title}}<\/h1>\n <\/header><!-- .entry-header -->\n\n <div class=\"entry-content\">\n {{post.content}}\n <\/div><!-- .entry-content -->\n\n <\/article><!-- #post-## -->\n{% endblock %}\n<\/code><\/pre>\n4 Application du mod\u00e8le<\/h3>\n
![\"Mod\u00e8les](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77ed87f4dc.png\")
<\/a><\/p>\n![\"Mod\u00e8les](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-165381-61e77eddccec8.png\")
<\/a><\/p>\nDavantage de ressources<\/h2>\n