Un site WordPress sans plugins… Est-ce encore possible ?

Qui n’aime pas les plugins proposés sur le répertoire officiel de WordPress ou même via une plateforme externe ? Personne bien sûr !

Les plugins sont omniprésents voire indispensables pour ceux qui ne sont pas développeurs dans l’âme, ils sont généralement fiables et maintenus par des développeurs bienveillants, mais ils peuvent aussi ralentir considérablement votre site ou votre blog si vous les collectionnez de manière frénétique… Si vous bloguez activement, jetez un oeil à cette sélection de plugins spécial blogging pour WordPress.

Un WordPress sans plugin o_O

Un WordPress sans aucun plugin ? NON ! Mais savez-vous que l’on peut facilement remplacer la présence de certains plugins par quelques lignes de code ? Nous allons voir ensemble comment se passer de certains plugins devenus un peu trop envahissants…

 

Quels intérêts à supprimer des plugins pour laisser place à du code en interne ? 
C’est certainement la question que vous devez vous poser ! Pourquoi s’embêter ? Voici les principales raisons :

• ne pas être dépendant d’une tierce personne/plateforme/développeur
• sortir des sentiers battus et obtenir un module totalement customisé
• automatiser et ainsi gagner du temps si vous créez régulièrement des sites sous WordPress (via un thème enfant customisé ou même votre propre template)
• réduire le temps de chargement dû aux nombreuses requêtes effectuées pour loader certains plugins (CSS, Javascript etc…)
• corriger facilement les éventuelles incompatibilités puisque c’est vous qui l’avez codé, de ce fait, vous trouverez rapidement la solution !
• ne plus perdre de temps à installer et à configurer certains plugins

 

De quels plugins peut-on facilement se passer ?

La liste pourrait être très longue, mais je vous propose de découvrir une sélection de fonctionnalités qui sont généralement utilisées par un grand nombre de sites WordPress, à commencer par :

• les boutons de partage
• la section "Related Post"
• la notice d’acceptation des cookies
• la duplication de post
• la page de maintenance

 

1. Des boutons de partage sans plugin

Il existe de nombreux plugins de "social sharing", certains sont simples, d’autres sont de vrais usines à gaz et certains sont vraiment intéressants… Le souci est qu’ils utilisent généralement du Javascript et génèrent de nombreuses requêtes pour chaque réseau social. Résultat des courses, ils peuvent réduire la performance de votre site !

La solution ? Ajouter du code dans le fichier functions.php de votre thème enfant, styliser l’apparence de vos boutons avec un peu de CSS (à placer dans le fichier style.css de votre thème enfant) et le tour est joué ! Adieu Share This, Shareaholic, Digg Digg etc… Si vous voulez essayer par vous-même, utilisez le code disponible ci-dessous et n’hésitez pas à apporter des modifications pour qu’il s’adapte à votre projet.

/*** BOUTONS DE PARTAGE SANS PLUGINS ***/

function my_sharing_buttons($content) {
    global $post;
    if(is_singular() || is_home()){
 
        // Récuperer URL de la page en cours 
        $myCurrentURL = urlencode(get_permalink());
 
        // Récuperer TITRE de la page en cours
        $myCurrentTitle = urlencode(get_the_title()); // correction du 9 février 2017
 
        // Récuperer MINIATURE si l'image à la une existe
        $myCurrentThumbnail = array( '' );
        if(has_post_thumbnail($post->ID)) {
            $myCurrentThumbnail = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'full') ?: array( '' ); // correction du 9 février 2017
        }
        
        // Construction des URL de partage - correction du 9 février 2017 (url échapées)
        $twitterURL = esc_url( 'https://twitter.com/intent/tweet?text='.$myCurrentTitle.'&url='.$myCurrentURL.'&via=Votre-Pseudo' ); // indiquez ici votre pseudo sans le @
        $facebookURL = esc_url( 'https://www.facebook.com/sharer/sharer.php?u='.$myCurrentURL );
        $linkedInURL = esc_url( 'https://www.linkedin.com/shareArticle?mini=true&url='.$myCurrentURL.'&title='.$myCurrentTitle );
        $pinterestURL = esc_url( 'https://pinterest.com/pin/create/button/?url='.$myCurrentURL.'&media='.$myCurrentThumbnail[0].'&description='.$myCurrentTitle );
        $email_share = esc_url( 'mailto:?subject=Regarde cet article !&BODY=Hey ! Je voulais partager avec toi cet article interressant : '.$myCurrentURL.'&title='.$myCurrentTitle );
 
        // Ajout des bouton en bas des articles et des pages
        $content .= '<div class="partage-reseaux-sociaux">';
        $content .= __('<h5>Partagez Maintenant !</h5>'); // correction du 9 février 2017 : texte traduisible
        $content .= '<a class="msb-link msb-twitter" href="'.$twitterURL.'" target="_blank">Twitter</a>';
        $content .= '<a class="msb-link msb-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
        $content .= '<a class="msb-link msb-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a>';
        $content .= '<a class="msb-link msb-pinterest" href="'.$pinterestURL.'" target="_blank">Pin It</a>';
        $content .= '<a class="msb-link msb-email" href="'.$email_share.'" target="_blank">eMail</a>'; // correction du 9 février 2017
        $content .= '</div>';
        }
        
        // si ce n'est pas un article ou une page, ne pas inclure les boutons de partages
        return $content; // correction du 9 février 2017
};

add_filter( 'the_content', 'my_sharing_buttons');

/*** CUSTOMISER LES BOUTONS DE PARTAGES ***/

.msb-link {
 padding: 5px 15px 5px 15px !important;
 color: white;
 font-size: 12px;
 border-radius: 2px;
 margin-right: 2px;
 cursor: pointer;
 box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
 -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
 -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
 margin-top: 2px;
 display: inline-block;
 text-decoration: none;
 text-transform: uppercase
}
 
.msb-link:hover,.msb-link:active {
 background: #ff942a;
 transition: all 0.3s ease-in;
}
 
.msb-twitter {
 background: #00aced;
}
 
.msb-facebook {
 background: #3B5997;
}
 
.msb-pinterest {
 background: #bd081c;
}
 
.msb-linkedin {
 background: #0074A1;
}

.msb-email {
 background: #878787;
}
 
.partage-reseaux-sociaux {
 margin: 20px 0px 25px 0px;
 font-size: 12px;
}

/*** CUSTOMISER LES BOUTONS DE PARTAGES POUR RESPONSIVE ***/

@media only screen and (max-width: 680px) {
 
/* placer ici votre CSS Responsive */

}

Voici le résultat :

 

2. Créez une section "Related Post" sans plugin

Vous connaissez certainement la section "Related Post" ou "Articles en rapport" qui affiche, à la fin d’un post, un certain nombre d’articles à lire… C’est une fonctionnalité très importante dans un blog en terme de SEO et aussi car elle permet au lecteur de trouver facilement d’autres articles qui se rapportent à une catégorie ou à un mot clé, enfin elle permet de maintenir ce visiteur encore quelques minutes de plus sur votre site ! Il n’y a donc que des avantages à la mettre en place !

Selon le thème WordPress que vous utilisez, la section "related post" peut vous être proposée en option, sinon vous devrez faire appel à un plugin… ou pas ! Et si vous décidez d’insérer vous-même cette fonctionnalité à la fin de vos articles, voici la procédure :

1. Dupliquez le fichier single.php de votre thème parent : c’est le fichier qui gère la template pour vos articles. Cette méthode suppose un thème classique : un thème blocs, comme Twenty Twenty-Five, n’a pas de fichier single.php (ses modèles sont des fichiers .html).
2. Ouvrez le single.php avec un éditeur de texte et ajoutez le code ci-dessous dans la loop principale, juste au dessus des commentaires : c’est généralement l’endroit idéal pour afficher cette section.
3. Envoyez ce fichier dans votre thème enfant via FTP (si déjà présent sur votre serveur).
4. Stylisez l’apparence des éléments de cette section, en ajoutant du CSS dans le fichier style.css de votre thème enfant, afin de la rendre attrayante. Vous pouvez utiliser le code présent ci-dessous pour exemple.

<div class="section-related-post">
        <?php    
            _e('<h3>Vous aimerez aussi :</h3>'); // correction du 3 février 2017 : texte traduisible
        
            global $post; // correction du 3 février 2017
            $categories = get_the_category($post->ID); // appeler les posts par catégorie, si par tags utilisez : $tags = wp_get_post_tags($post->ID);

            if ($categories) { // si par tags : if ($tags) {
            $category_ids = array(); // si par tags : $tag_ids = array();
            foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id; // si par tags : foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
            
            $args=array(
            'category__in' => $category_ids, // si par tags : 'tag__in' => $tag_ids,
            'post__not_in' => array($post->ID),
            'posts_per_page'=> 3, // Nombre de posts à afficher
            'ignore_sticky_posts'=>1 // correction du 3 février 2017
            );

            $my_query = new wp_query( $args );
            while( $my_query->have_posts() ) {
            $my_query->the_post();
        ?>

<div class="chaque-post">
    <a rel="external" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(150,150)); ?> <!-- 150 correspondent aux pixels de la miniature : largeur, hauteur // correction du 3 février 2017 : ajout d'une balise php manquante -->
        <p class="mon-titre-related"><?php the_title(); ?></p>
    </a>
</div>

<?php 
}
} // correction du 3 février 2017
wp_reset_query(); 
?>
</div>

/*** section VOUS AIMEREZ AUSSI - related post */

.section-related-post {
 width: 100%; 
 margin: 20px 0 20px 0; 
 padding: 20px;
 float: left; 
 font-size: 16px;
 box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
}

.section-related-post h3 {
 font-size: 22px; 
 margin-bottom: 10px; 
}

.chaque-post {
 float: left; 
 width: 30%;
 margin-right: 5%;
}

.chaque-post:last-child {
 margin-right: 0%;
}

.chaque-post img {
 margin: 0 0 3px 0; 
 width: 100%;
 padding: 0;
 background-position:center;
 transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
}

.chaque-post img:hover {
 transform: scale(1.1);
 -moz-transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -o-transform: scale(1.1);
 -ms-transform: scale(1.1); /* IE 9 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */
 filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); /* IE6 and 7 */ 
}

.chaque-post a {
 color : #333; 
 text-decoration: none; 
 display:block; 
 padding: 10px; 
 width: 100%;
 box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);

}

.chaque-post a:hover {
 color: #ff942a;
 /* Firefox */
 -moz-transition: all 0.3s ease-in;
 /* WebKit */
 -webkit-transition: all 0.3s ease-in;
 /* Opera */
 -o-transition: all 0.3s ease-in;
 /* Standard */
 transition: all 0.3s ease-in;
}

@media only screen and (max-width: 580px) {
 
/* placer ici votre CSS Responsive */

}

Voici le résultat :

3. Affichez votre "Cookie Consent" sans plugin

Si votre site dépose des cookies ou traceurs soumis à consentement (publicité personnalisée, boutons de partage des réseaux sociaux, mesure d’audience non exemptée), la loi sur la protection des données personnelles vous impose de recueillir le consentement des visiteurs par un acte positif clair, de rendre le refus aussi simple que l’acceptation (la CNIL recommande un bouton "Tout refuser" à côté du bouton "Tout accepter") et de ne déposer ces traceurs qu’après accord (CNIL, lignes directrices de septembre 2020). Un simple bandeau d’information ne suffit plus. Les plugins prévus à cet effet n’ont jamais eu autant le vent en poupe ! Et pourtant, il est si simple d’ajouter un petit bout de code à son thème pour installer un bandeau de consentement, surtout qu’il existe de très bons outils permettant de générer facilement le code…

Comment faire ? Voici les étapes à suivre :

1. Générez en ligne le code à ajouter : rendez-vous sur Skilltide.com ou bien sur Cookie-Script.com suivez les quelques étapes puis copiez le code qui vous sera fourni.
2. Dupliquez le fichier header.php de votre thème parent (thème classique uniquement : un thème blocs n’a pas de fichier header.php)
3. À l’aide d’un éditeur de texte, ouvrez ce fichier et ajoutez le code ainsi obtenu (voir également l’exemple présent ci-dessous, qui n’affiche qu’une information : il ne bloque aucun traceur et ne permet pas de refuser, il ne convient donc qu’à un site qui ne dépose que des cookies exemptés de consentement) juste après l’ouverture de la balise <head>.
4. Envoyez le fichier header.php dans votre thème enfant via FTP (si le thème enfant est déjà présent sur votre serveur).

 <!-- Notice d'acceptation des cookies sans plugins, plus de choix ici : http://silktide.com/cookieconsent -->
 <script type="text/javascript">
 window.cookieconsent_options = {"message":"Ce site utilise des cookies pour vous offrir la meilleure des expériences","dismiss":"OK","learnMore":"En savoir plus !","link":"http://mon-site.com/cookies","theme":"dark-top"};
 </script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.10/cookieconsent.min.js"></script>
 <!-- Fin de la notice d'acceptation des cookies-->

Voici le résultat :

 

4. La fonction de "Duplicate Post" sans plugin

En natif, WordPress permet de créer, modifier ou supprimer un post mais il ne permet malheureusement pas de dupliquer un post déjà existant…

Cette fonctionnalité serait pourtant très utile car elle vous permettrait de gagner un temps considérable selon l’utilisation que vous en faite. Il existe un plugin très efficace pour effectuer cette opération, il s’agit de Duplicate Post. Pour un tour d'horizon complet, consultez notre guide pour dupliquer vos articles et pages sous WordPress. Sinon vous pouvez tester la méthode sans plugin qui est tout aussi efficace, pour cela :

1. Éditez le fichier functions.php de votre thème enfant
2. Copiez le code ci-dessous puis collez-le dans votre fichier
3. Sauvegardez puis admirez ! Comme par magie, l’option de duplication est apparue du côté admin de votre site. Vous la trouverez au survol de votre curseur sur un article existant.

/*** ajouter la fonction pour dupliquer les posts sans plugin ***/

function dupliquer_sans_plugin() {
    $post_id = isset( $_GET['post'] ) ? absint( $_GET['post'] ) : 0;
    if ( ! $post_id ) {
        wp_die( "Aucun article à dupliquer n'a été fourni." );
    }
    check_admin_referer( 'duplicate-post_' . $post_id ); // jeton de sécurité (nonce) vérifié AVANT toute action
    $post = get_post( $post_id );
    if ( ! $post ) {
        wp_die( "Impossible de trouver l'article original : " . $post_id );
    }
    $type = get_post_type_object( $post->post_type );
    if ( ! $type || ! current_user_can( 'edit_post', $post_id ) || ! current_user_can( $type->cap->create_posts ) ) {
        wp_die( "Vous n'avez pas les droits nécessaires.", 403 );
    }
    $args = array(
        'comment_status' => $post->comment_status,
        'ping_status'    => $post->ping_status,
        'post_author'    => $post->post_author,
        'post_content'   => $post->post_content,
        'post_excerpt'   => $post->post_excerpt,
        'post_parent'    => $post->post_parent,
        'post_password'  => $post->post_password,
        'post_status'    => 'draft',
        'post_title'     => $post->post_title,
        'post_type'      => $post->post_type,
        'menu_order'     => $post->menu_order,
    );
    // wp_insert_post() retire les barres obliques inverses : on les protège avec wp_slash().
    $new_post_id = wp_insert_post( wp_slash( $args ), true );
    if ( is_wp_error( $new_post_id ) ) {
        wp_die( $new_post_id->get_error_message() );
    }
    foreach ( get_object_taxonomies( $post->post_type ) as $taxonomy ) {
        $terms = wp_get_object_terms( $post_id, $taxonomy, array( 'fields' => 'slugs' ) );
        wp_set_object_terms( $new_post_id, $terms, $taxonomy, false );
    }
    // Recopie des métadonnées (image à la une, modèle de page, réglages d'extensions...).
    foreach ( get_post_meta( $post_id ) as $key => $values ) {
        if ( in_array( $key, array( '_edit_lock', '_edit_last', '_wp_old_slug' ), true ) ) {
            continue;
        }
        foreach ( $values as $value ) {
            add_post_meta( $new_post_id, $key, wp_slash( maybe_unserialize( $value ) ) );
        }
    }
    wp_safe_redirect( admin_url( 'post.php?action=edit&post=' . $new_post_id ) );
    exit;
}
add_action( 'admin_action_dupliquer_sans_plugin', 'dupliquer_sans_plugin' );

function dupliquer_le_post( $actions, $post ) {
    if ( current_user_can( 'edit_post', $post->ID ) ) {
        $url = wp_nonce_url( admin_url( 'admin.php?action=dupliquer_sans_plugin&post=' . $post->ID ), 'duplicate-post_' . $post->ID );
        $actions['duplicate'] = '<a href="' . esc_url( $url ) . '">Dupliquer</a>';
    }
    return $actions;
}
add_filter( 'post_row_actions', 'dupliquer_le_post', 10, 2 );

Voir le résultat :

 

5. Mettre son WordPress en maintenance sans plugin

Voilà encore un bel exemple de fonctionnalité qui pourrait facilement se passer d’un plugin ! Pour cela, il vous suffira d’ajouter seulement quelques lignes de code dans le fichier functions.php de votre thème enfant. Grâce à cette fonction, vous continuerez à accéder à votre administration pour continuer à travailler tranquillement sur votre site comme le propose les plugins de maintenance. Tous les visiteurs qui ne seront pas identifiés comme administrateurs, eux, verront une page de "site en maintenance".

À partir du code disponible ci-dessous, vous pouvez très bien imaginer de rajouter une section de liens vers vos réseaux sociaux, un encart d’inscription à la newsletter, une image de fond etc… Et voilà, un plugin de moins !

NB : l’avantage avec ce morceau de code est qu’une fois vos modifications terminées, il vous suffira de mettre le code "en pause" jusqu’aux prochains travaux grâce à un double slash (//)  inséré devant chaque ligne. Vous pourrez facilement le faire depuis votre administration à l’onglet Apparence > Éditeur de fichiers des thèmes (ou Outils > Éditeur de fichiers des thèmes avec un thème blocs), fichier functions.php, ou par FTP si cet éditeur est désactivé ou si un blocage vous empêche d’accéder à l’administration.

 /*** page de maintenance côté visiteur - sans plugins ***/

function mode_maintenance() {
    // Les administrateurs connectés voient le site normalement.
    if ( current_user_can( 'manage_options' ) ) {
        return;
    }
    header( 'Retry-After: 3600' );
    wp_die(
        '<div style="border:solid 1px grey;"><h1 style="color:#FF942A; text-align:center; text-transform:uppercase;">Site en Maintenance</h1><p style="text-align:center; font-size:18px;">Nous effectuons quelques travaux de maintenance afin de vous fournir un site toujours plus efficace... Revenez vite !</p></div>',
        'Maintenance',
        array( 'response' => 503 )
    );
}
// template_redirect ne concerne que les pages publiques : wp-login.php, wp-admin, wp-cron.php et l'API REST restent accessibles.
add_action( 'template_redirect', 'mode_maintenance' );

 /*** page de maintenance côté visiteur - sans plugins ***/

//function mode_maintenance() {
//    // Les administrateurs connectés voient le site normalement.
//    if ( current_user_can( 'manage_options' ) ) {
//        return;
//    }
//    header( 'Retry-After: 3600' );
//    wp_die(
//        '<div style="border:solid 1px grey;"><h1 style="color:#FF942A; text-align:center; text-transform:uppercase;">Site en Maintenance</h1><p style="text-align:center; font-size:18px;">Nous effectuons quelques travaux de maintenance afin de vous fournir un site toujours plus efficace... Revenez vite !</p></div>',
//        'Maintenance',
//        array( 'response' => 503 )
//    );
//}
//// template_redirect ne concerne que les pages publiques : wp-login.php, wp-admin, wp-cron.php et l'API REST restent accessibles.
//add_action( 'template_redirect', 'mode_maintenance' );

Voir le résultat :

 

En conclusion

Vous l’aurez compris, les plugins sont des bouts de code qui ajoutent des fonctionnalités à un site WordPress. Si vous étiez développeur, vous n’auriez certainement pas besoin d’eux (ou très peu), certes, mais rien ne vous empêche de trouver le juste équilibre…

Alors, au travail ?