Aujourd’hui je vous emmène dans les coulisses d’un développeur WordPress en vous présentant 5 astuces de pro WordPress.
1. Debug en production sans impacter les utilisateurs
On ne peut pas toujours avoir un environnement de staging / préproduction à disposition !
Qui plus est certaines interventions doivent ce faire en prod et ne peuvent être testées que sur cet environnement.
Le problème numéro 1 dans ce cas de figure est qu’on ne veut pas que nos utilisateurs voient des erreurs PHP se balader ou encore des pages se briser en deux à cause d’une faute de frappe dans notre code.
Il se peut aussi que l’on souhaite exécuter des scripts en « one shot » pour mettre à jour des données ponctuellement.
Voici donc ma solution, je conditionne le code sur lequel je travaille uniquement sur mon IP de la façon suivante :
<?php
if( $_SERVER['REMOTE_ADDR'] == '123.456.789.0' ) { // REMPLACE 123.456.789.0 PAR TON+ IP
// ICI TU PEUX FAIRE TOUT CE QUE TU VEUX
}
Sur certains sites je me laisse une petite fonction pour la maintenance dans le function.php du thème de la manière suivante :
<?php
if( $_SERVER['REMOTE_ADDR'] == '123.456.789.0' ) { // REMPLACE 123.456.789.0 PAR TON IP
add_action( 'wp_head', 'debug_mode' ); // Pour désactiver ce mode de débug, il suffit de commenter cette ligne
function debug_mode() {
var_dump( "Ici j'exécute mon code" );
exit;
}
}
2. Ne plus avoir de soucis avec les caches des styles et des scripts pendant le développement
Je suppose que cela vous est déjà arrivé au moins une fois, vous êtes en plein chamboulement de votre CSS ou de votre Javascript sur votre site mais vos modifications ne sont pas bien prises en compte.
Généralement la solution est plutôt simple sur mac un simple ⌘ + ⇪ + R suffit à régler le problème ou l’appuie sur la touche F5 sur PC (sur chrome pour rafraîchir la page en supprimant le cache de cette page).
Mais parfois le cache est récalcitrant, pour cela j’ai élaboré une petite solution maison pour le temps du dev.
Il suffit d’ajouter ce petit morceau de code dans votre function.php par exemple :
<?php
function bypass_cache_on_scripts( $src ) {
// J'ajoute un timestamp dans le numéro de version pour forcer le rechargement du fichier
return str_replace( 'ver=', 'ver=' . time() , $src );
}
add_filter('script_loader_src', 'bypass_cache_on_scripts', 15, 1);
add_filter('style_loader_src', 'bypass_cache_on_scripts', 15, 1);
☝🏻 L’idée ici est d’ajouter au numéro de version un timestamp afin que chaque second ce numéro de version change dans l’URL des scripts et des styles ce qui laissera « penser » à votre navigateur que la version du fichier est nouvelle et donc de ne pas reprendre la version mise en cache.
3. La bonne manière d'utiliser les shortcodes
Voici un exemple basique de shortcode :
<?php
function my_new_shortcode() {
return 'Hello World';
}
add_shortcode( 'my_new_shortcode', 'my_new_shortcode' );
Et voici ce que l’on a tendance à faire quand on ne comprend pas trop encore comment s’exécutent les shortcodes :
<?php
// À NE PAS FAIRE !!
function my_new_shortcode() {
echo 'Hello World';
}
add_shortcode( 'my_new_shortcode', 'my_new_shortcode' );
☝🏻 Le problème ici c’est que le contenu est attendu dans le return de la fonction. Il est fort probable que votre shortcode ne s’exécute pas au bon endroit sur votre page !
Voici donc la bonne façon d’écrire dans un shortcode avec des echo ou encore de l’HTML directement, pour cela nous utilisons ob_start() et ob_get_clean():
<?php
add_shortcode( 'my_new_shortcode', function() {
ob_start(); // Permet d'utiliser des echo ou la syntaxe html dans le shortcode
?>
<h1>Hello World</h1>
<?php
echo '<p>I am a paragraph</p>';
return ob_get_clean();
});
4. Si vous en avez assez des e-mails de notification de mise à jour de thème et de plugin dans votre boîte mail
Un petit truc pour stopper les e-mails de notification de mise à jour :
<?php
// Désactiver les notifications par e-mail de mise à jour automatique pour les plugins.
add_filter( 'auto_plugin_update_send_email', '__return_false' );
// Désactiver les notifications par e-mail de mise à jour automatique pour les thèmes.
add_filter( 'auto_theme_update_send_email', '__return_false' );
5. Comment afficher tous les scripts et styles charger sur une page WordPress
Parfois il peut être utile d’afficher les scripts JS ou les styles CSS chargé dans une page pour le debug ou encore pour en vérifier qu’ils sont bien pris en compte.
Pour cela rien de plus simple, ajoutez l’extrait de code suivant :
<?php
add_action('wp_print_scripts', function() {
if (! is_admin() && is_user_logged_in() && current_user_can('manage_options')) {
// Liste des JavaScript
global $wp_scripts;
foreach($wp_scripts->queue as $handle) {
echo "Script : " . $handle . '<br />';
}
echo '<hr>';
// Liste des CSS
global $wp_styles;
foreach($wp_styles->queue as $handle) {
echo "Style : " . $handle . '<br />';
}
}
});
