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…

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
        if(has_post_thumbnail($post->ID)) {
            $myCurrentThumbnail = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'full'); // 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 );
        $googleURL = esc_url( ''.$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-googleplus" href="'.$googleURL.'" target="_blank">Google+</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-googleplus {
 background: #D64937;
}
 
.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.
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

Depuis que la loi sur la protection des données personnelles impose aux sites web d’informer les visiteurs au sujet de l’utilisation des cookies, 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 cette barre de notification, 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
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) 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, sinon vous pouvez tester la méthode sans plugin qui est tout aussi efficace, pour cela :

1. Éditez le fichier function.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(){
    global $wpdb;
    if (! ( isset( $_GET['post']) || isset( $_POST['post']) || ( isset($_REQUEST['action']) && 'dupliquer_sans_plugin' == $_REQUEST['action'] ) ) ) {
        wp_die("Aucun post à dupliquer n'a été fourni...");

        check_admin_referer( 'duplicate-post_' . $post->ID ); // correction du 9 février 2017
    }
 
        // RECUPERE LES INFOS A DUPLIQUER
        $post_id = (isset($_GET['post']) ? absint( $_GET['post'] ) : absint( $_POST['post'] ) );
        $post = get_post( $post_id );
        $current_user = wp_get_current_user();
        $new_post_author = $post->post_author; // correction du 9 février 2017

    if (isset( $post ) && $post != null) {
 
        // REGLAGES DU NOUVEAU BROUILLON
        $args = array(
        'comment_status' => $post->comment_status,
        'ping_status' => $post->ping_status,
        'post_author' => $new_post_author,
        'post_content' => $post->post_content,
        'post_excerpt' => $post->post_excerpt,
        'post_name' => $post->post_name,
        'post_parent' => $post->post_parent,
        'post_password' => $post->post_password,
        'post_status' => 'draft',
        'post_title' => $post->post_title,
        'post_type' => $post->post_type,
        'to_ping' => $post->to_ping,
        'menu_order' => $post->menu_order
        );
 
        $new_post_id = wp_insert_post( $args );
 
        $taxonomies = get_object_taxonomies($post->post_type);
        foreach ($taxonomies as $taxonomy) {
        $post_terms = wp_get_object_terms($post_id, $taxonomy, array('fields' => 'slugs'));
        wp_set_object_terms($new_post_id, $post_terms, $taxonomy, false);
    }
 
        $post_meta_infos = get_post_meta( $post_id ); // correction du 9 février 2017
 
        wp_redirect( admin_url( 'post.php?action=edit&post=' . $new_post_id ) );
        exit;
        } else {
        wp_die("Une erreur s'est produite, impossible de trouver le post original : " . $post_id);
        }
    }

add_action( 'admin_action_dupliquer_sans_plugin', 'dupliquer_sans_plugin' );

function dupliquer_le_post( $actions, $post ) {
    if (current_user_can('edit_posts', $post->ID)) { // correction du 9 février 2017
         $url = wp_nonce_url( admin_url( 'admin.php?action=dupliquer_sans_plugin&post=' . $post->ID ), 'duplicate-post_' . $post->ID ); // correction du 9 février 2017
         $actions['duplicate'] = '<a href="' . esc_url( $url ) . '" title="Dupliquer ce post" rel="permalink">Dupliquer</a>'; // correction du 9 février 2017
    }
    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 > functions.php

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

function mode_maintenance(){
    if(!current_user_can('edit_themes') || !is_user_logged_in()){
        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 )); // correction du 9 février 2017
    }
}
add_action('init', 'mode_maintenance'); // correction du 9 février 2017

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

//function mode_maintenance(){
//    if(!current_user_can('edit_themes') || !is_user_logged_in()){
//        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 )); // correction du 9 février 2017
//    }
//}
//add_action('init', 'mode_maintenance'); // correction du 9 février 2017

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 ?