Modèles WordPress pour débutants : HTML appelant PHP
Hier, j’ai esquissé comment conceptualiser combien d’entre nous sont probablement habitués à travailler avec des modèles WordPress.
Bien que la séparation des problèmes avec CSS et JavaScript soit solide, les modèles sont problématiques chaque fois qu’il y a beaucoup de PHP mélangé à notre balisage.
Pour être clair, nous ne pouvons pas nous empêcher d’inclure des balises de modèle car c’est la nature du fonctionnement de WordPress et des systèmes généraux de gestion de contenu basés sur PHP.
Le problème survient chaque fois que nous travaillons avec des modèles contenant du code effectuant des appels plus complexes à diverses API. Bien que je l’aie démontré en utilisant WP_Query (et que je continuerai à le faire), ce n’est pas seulement cette requête.
Quoi qu’il en soit, qu’est-ce qu’on est censé faire avec ça ?
Templates WordPress: quand HTML appelle PHP
Tout d’abord, il est important de réfléchir à la raison pour laquelle mélanger autant de PHP et de balisage est une mauvaise idée.
Il est facile de dire qu’il est plus difficile de garder le code DRY (et il y a du vrai là-dedans), mais que se passe-t-il si nous n’utilisons qu’une seule requête ou un seul bloc de code une fois ? Est-ce vraiment si important d’être SEC ?
Pour être clair, oui, je pense que c’est important pour garder le code DRY, mais si nous n’utilisons un appel qu’une seule fois, je pense toujours que c’est important si pour aucune autre raison que de garder le code du modèle aussi propre que possible.
Pensez-y de cette façon : chaque fois que nous voulons afficher le titre, le contenu et l’auteur du message, il nous suffit d’appeler trois fonctions :
Imaginez donc adapter le code suivant (c’est ce que nous avons vu dans le post précédent):
<div id="content-container">
<p>
Oh! The garbage chute was a really wonderful idea. What an incredible smell you've discovered! Let's get out of here!
Get away from there... No! wait! Will you forget it? I already tried it. It's magnetically sealed! Put that
thing away! You're going to get us all killed.
</p>
<h2>List of Post Titles For Acme Post Type</h2>
<?php
$args = array(
'post_status' => 'publish',
'post_type' => 'acme',
'posts_per_page' => '10'
);
$custom_query = new WP_Query( $args );
if ($custom_query->have_posts()) {
echo '<ul>';
while ($custom_query->have_posts()) {
$custom_query->the_post();
echo '<li>'. get_the_title(). '</li>';
}
echo '</ul>';
wp_reset_postdata();
}
?>
<p>
Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not
going to take them long to figure out what happened to us. It could be worst... It's worst.
There's something alive in here! That's your imagination. Something just moves past my leg!
Look! Did you see that? What? Help!
</p>
</div><!-- #content-container -->Pour ressembler à quelque chose comme ça :
<div id="content-container">
<p>
Oh! The garbage chute was a really wonderful idea. What an incredible smell you've discovered! Let's get out of here!
Get away from there... No! wait! Will you forget it? I already tried it. It's magnetically sealed! Put that
thing away! You're going to get us all killed.
</p>
<h2>List of Post Titles For Acme Post Type</h2>
<?php acme_get_titles(); ?>
<p>
Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not
going to take them long to figure out what happened to us. It could be worst... It's worst.
There's something alive in here! That's your imagination. Something just moves past my leg!
Look! Did you see that? What? Help!
</p>
</div><!-- #content-container -->Beaucoup plus propre, non? Mais il y a plus à ce que vous voyez que cela. Plus précisément, si nous allons travailler avec HTML en coulisses, nous devons nous assurer que nous le désinfectons correctement en utilisant quelque chose comme wp_kses :
<?php
/**
* Runs a custom query to get the most recent ten published articles of the
* acme post type and then prints a sanitized list of the the titles.
*/
function acme_get_titles()
{
$args = array(
'post_status' => 'publish',
'post_type' => 'acme',
'posts_per_page' => '10'
);
$custom_query = new WP_Query( $args );
if ($custom_query->have_posts()) {
$html = '<ul>';
while ($custom_query->have_posts()) {
$custom_query->the_post();
$html .= '<li>'. get_the_title(). '</li>';
}
$html .= '</ul>';
wp_reset_postdata();
}
echo _acme_sanitize_titles($html);
}
/**
* Uses the WordPress wp_kses() API to sanitize and echo the incoming markup.
*
* @param string $html The HTML to sanitize.
*/
function _acme_sanitize_titles($html) {
if(empty($html)) {
echo $html;
}
echo wp_kses(
$html,
array(
'ul' => array(),
'li' => array(),
);
);
}Maintenant, l’idée de faire écho du HTML de PHP dans un modèle WordPress est considérée comme un anti-modèle par certains développeurs. Et ce n’est pas sans mérite.
Il y a cependant un équilibre à jouer au cours de cette série: il s’agit d’introduire la façon dont les gens présentent souvent l’information, puis de la nettoyer un peu.
Pour aller un peu plus loin, il est possible – et pas du tout une mauvaise idée – de séparer encore plus la fonction WP_Query pour utiliser get_template_part. Cela comporte un peu de code plus propre, mais nécessite également que nous examinions cette fonction en profondeur.
Et c’est quelque chose que je ne suis pas intéressé à faire dans cette série particulière.
Comment devrions-nous visualiser cela ?
En ce qui concerne les modèles, nous pouvons conceptualiser cela de différentes manières.
- Dans certains langages de modèles, il est utile de penser que PHP injecte les informations dans le modèle,
- Dans l’exemple ci-dessus, il est utile de penser au fichier modèle demandant les informations du script PHP.
Ainsi, dans l’exemple ci-dessus, nous avons une fonction située dans, disons, functions.php et le fichier de modèle qui l’appelle :
Avoir du sens ? Mais comment cela est accompli – en termes de code derrière cet appel de fonction unique – se contente d’un article à part entière.
Et c’est ce que je vais voir dans le post suivant.