Alléger Contact Form 7

Contact Fom 7 est un plugin gratuit pour créer des formulaires de contact. C’est un des plus utilisés avec plus d’un million d’installations actives.

Il a cependant un défaut pour moi : Il ajoute son CSS et son JS sur toutes les pages du site. C’est inutile et ça fait 2 (à vérifier) fichiers supplémentaires à charger pour peu qu’on ne concatène pas les fichiers.

A l’époque j’utilisais l’astuce de Creative Juiz et j’ai décidé de me faire ma propre fonction (très similaire je vous l’accorde !). J’ai ensuite créé un mu-plugin pour externaliser ce petit détail de mon thème.

<?php
/**
 * Plugin Name: DevWP Filter Contact Form 7
 * Description: Dequeue JS and CSS when contact form 7 is not used
 * Author: Etienne Mommalier
 * Author URI: https://etienne-mommalier.fr
 * Version: 1.0
 */

defined( 'ABSPATH' ) or die();

// Only if contact form 7 is active
include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
if ( is_plugin_active( 'contact-form-7/wp-contact-form-7.php' ) ) {

	/**
	 * @see https://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/
	 */

	add_action( 'wp_enqueue_scripts', 'devwp_enqueue_contactform7' );
	function devwp_enqueue_contactform7() {

		add_filter( 'wpcf7_load_js', '__return_false' );
		add_filter( 'wpcf7_load_css', '__return_false' );

		global $post;
		// @author: https://www.creativejuiz.fr/blog/tutoriels/astuce-wordpress-charger-fichiers-js-css-contact-form-7
		if ( strpos( $post->post_content, '[contact-form-7' ) !== false ) {
			if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
				wpcf7_enqueue_scripts();
			}
			if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
				wpcf7_enqueue_styles();
			}
		}
	}

}

Pour activer ce mu-plugin, il suffit d’uploader sur votre FTP le fichier dans le dossier « mu-plugins » par défaut dans « wp-content ».

Supprimer le titre du formulaire WP

Le formulaire de commentaire par défaut de WordPress affiche un titre en H3. C’est le fameux « Laisser un commentaire » ainsi que « Annuler la réponse » qui est masqué.

Malheureusement ce H3 ne me convient pas car il n’a aucune importance par rapport à ma page. Il n’est pas là pour structurer mon contenu. Tout comme les titres des widgets, il y a un filtre pour modifier ces balises : comment_form_defaults.

Ce filtre fonctionne pour modifier les arguments par défauts lorsqu’on appelle la fonction « comment_form() ». Attention toutefois, modifier le titre avec le filtre « comment_form_defaults » aura moins de priorité que des arguments passés directement à cette fonction.

Exemple pour modifier le formulaire de contact

Voici quelques exemples concrets, dont le code que j’ai utilisé sur ce site.

/**
 * Filtre sur le H3 du commentaire
 *
 * @param array  $params
 *
 * @return array $params
 */
function devwp_update_comment_form_struct( $params ) {
	$params['title_reply_before'] = '<p id="reply-title" class="comment-reply-title">';
	$params['title_reply_after']  = '</p>';

	return $params;
}
add_filter( 'comment_form_defaults', 'devwp_update_comment_form_struct' );
Fonction utilisée sur ce site

Cette fonction fait son travail et peut être surchargée par des arguments passés directement à la fonction.

Par exemple si mon thème utiliser cette fonction avec des paramètres comme ceci :

comment_form( array(
		'title_reply_before' => '<h4 id="reply-title" class="comment-reply-title">',
		'title_reply_after'  => '</h4>'
	) );
Fonction comment_form avec arguments

Mon filtre du premier exemple ne fonctionne plus. Les arguments passés à cette fonction sont prioritaires. Dans ce cas il faudra surement modifier le fichier dans votre thème enfant.

 

Créer un mu-plugin WordPress

Les mu-plugins (mu pour Must Use) sont des plugins activés automatiquement par WordPress et qu’on ne peut pas désactiver. Pour supprimer le mu-plugin, il faut supprimer le fichier sur le ftp.

Dossier mu-plugins dans l'arborescence du site
Arborescence du dossier mu-plugins

Ils sont dans un dossier différent, qui n’existe peut être pas sur votre site, il faut le créer. Par défaut le dossiers doit s’appeler « mu-plugins » et doit se trouver au même niveau que le dossier « plugins » et « themes » dans l’arborescence des fichiers de votre site.

Maintenant, il ne vous reste plus qu’à déposer vos mu-plugins dans ce dossier pour les activer sur votre site.

Personnellement je me sers de ces mu-plugins pour externaliser les fonctionnalités indispensables du site qui doivent rester lorsque je change de thème.

Attention, contrairement aux plugins, les mu-plugins ne doivent pas être dans des dossiers ! Le fichier « principal » du plugin doit être à la racine du dossier « mu-plugins ».

Les mu-plugins, comme les plugins WordPress doivent respecter un standard pour être reconnu par le CMS comme tel.

<?php
/*
Plugin Name: WordPress.org Plugin
Plugin URI:  https://developer.wordpress.org/plugins/the-basics/
Description: Basic WordPress Plugin Header Comment
Version:     20160911
Author:      WordPress.org
Author URI:  https://developer.wordpress.org/
License:     GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wporg
*/
Déclaration d'un mu-plugin

Voici comment se déclare un plugin WordPress (source). La seule ligne obligatoire est la ligne 3, soulignée. Attention il est quand même recommandé de mettre le plus d’informations possibles.

Exemple de mu-plugin

Un exemple est surement plus facile à comprendre, voici un mu-plugin hébergé par ffooodd pour supprimer les accents et caractères spéciaux des fichiers médias (images, pdf, etc).

Personnellement je préfère un code un peu plus complexe qui va remplacer les accents par la lettre équivalente sans accent  mais c’est une très bonne base déjà.

Pour utiliser ce mu-plugin, il faut juste télécharger le fichier, et l’uploader sur votre FTP dans le dossier « mu-plugins ». Automatiquement il sera activé.

Modifier la sémantique des titres des widgets WordPress

Pour ce premier article de blog je vais vous parler des titres des widgets. C’est pour moi un point important car dans la plupart des cas on ne respecte pas du tout l’architecture des titres.

Par exemple sur ce site, par défaut les widgets ont des titres de niveau 2. Ce code html est défini lorsqu’on créé une sidebar, et par défaut, les sidebar sont créées par les thèmes.

Les zones de widgets sont créées par la fonction register_sidebar() ou bien register_sidebars() lorsqu’on veut en créer plusieurs à la fois.

Exemple pour modifier les titres des widgets

Voici un bout de code pas bien compliqué qui va permettre de modifier tous les titres de widgets de TOUTES les sidebars : C’est le code mis en place sur ce site.

/**
 * Filtrer la structure des widgets des sidebar
 *
 * @see https://developer.wordpress.org/reference/hooks/dynamic_sidebar_params/
 *
 * @param array $params
 *
 * @return array $params
 */
function devwp_update_widget_struct($params)
{
    $params[0]['before_title'] = "<p class=\"widget-title\">";
    $params[0]['after_title'] = "</p>";

    return $params;
}
add_filter('dynamic_sidebar_params', 'devwp_update_widget_struct');

Il faudra bien entendu modifier la classe css pour qu’elle corresponde à la classe utilisée par votre thème. Suivant les thèmes, il y aura des ajustements à faire en css. Ici il a fallu que je redéfinisse la taille de police pour qu’elle corresponde à la taille des titres de niveau 2.

Ce code est à mettre dans le fichier functions.php de votre thème enfant (utilisez un thème enfant par pitié !) ou bien vous pouvez créer un mu-plugin.

On peut envisager un code un peu plus précis pour avoir des titres H4 sur la zone de widgets de droite, des H5 pour les widgets du footer, etc. Je ne dis pas que les titres H2 des widgets sont interdis ! Je dis simplement qu’ils ne doivent pas être imposés par un thème, et doivent être un choix justifié de votre part.