[WordPress] Utiliser Twig et Timber à la place de PHP

J’ai changé récemment d’agence et sur WordPress on n’utilise plus la syntaxe PHP mais l’association de Twig et de Timber.

Avec cette nouvelle syntaxe, le PHP et le HTML sont désormais séparé (un modèle MVC sauf que l’on s’accède pas au Controleur).

Du coup, voici quelques astuces utilisable pour cette nouvelle syntaxe :

Pour faire un `var_dump`

Dans le .php :

var_dump($context);

Dans le .html ou le .twig

 {{dump(NOM_VAR)}}

Pour faire un permalink dans une boucle

{{post.get_permalink(ID_PAGE)}}

post == nom de la variable Timber

Pour tronquer le contenu

– Sans afficher les points de suspensions :

{{post.content | truncate(20, false, '')}}

– En affichant les points de suspensions :

{{post.content | truncate(20, true, '...')}}

– Syntaxe raccourcie (mais ne permet pas de rajouter des points de suspension) :

{{post.content[:25]}}

– Vérifier si le contenu est plus longs, si oui on le coupe, si non, on le laisse tel quel :

{{post.content|length > 25 ? (post.content[:25] ~ '…') : post.content}}

Source

Récupérer un post meta

– Dans le .php :

$context['NOM'] = get_post_meta($context['post']->ID, 'NOM_CUSTOM_FIELD', true);

– Dans le .html :

{% if ss_titre %}{{ss_titre}}{% endif %}

Récupération des champs créé avec ACF

Champ Wysiwyg ou text :

{{post.get_field('my_wysiwyg_or_text_field')}}

Champ image
– Manière rapide (pour la plupart des situations)

<img src="{{TimberImage(post.get_field('hero_image')).src}}" />

– Manière plus complète (pour des situations spéciales)
Dans la page PHP

$post = new TimberPost();
if(isset($post->hero_image) && strlen($post->hero_image)) $post->hero_image = new TimberImage($post->hero_image);
$data = Timber::get_context();
$data['post'] = $post;
Timber::render('single.twig', $data);

Dans la page HTML

<img src="{{post.hero_image.src|resize(500, 300)}}" />

Source

Afficher un post thumbnail

– Par défaut

<img src="{{post.thumbnail.src}}" />

– Avec une taille spécifique

<img src="{{post.thumbnail.src('NOM_DE_LA_TAILLE')}}" alt="" />

– Recadré automatiquement

<img src="{{post.thumbnail.src|resize(LARGEUR, HAUTEUR)}}" />

– Rétina

<img src="{{ post.thumbnail.src }}" srcset="{{ post.thumbnail.src | retina(1) }} 1x, 
	{{ post.thumbnail.src | retina(2) }}  2x, 
	{{ post.thumbnail.src | retina(3) }}  3x, 
	{{ post.thumbnail.src | retina(4) }}  4x" />

Récupération d’un Custom Post Type

– Dans le .php

$args = array(
	'posts_per_page' => -1,
	'post_type'		 => 'NOM_DU_CUSTOM_POST',
);
$context['NOM_VARIABLE'] = Timber::get_posts($args);

– Dans le .html

{% for NOM_VAR in NOM_VARIABLE %}
	{{NOM_VAR.post_title}}
{% endfor %}

Sources

Pour faire un var_dump