Vous vous souvenez quand WordPress a introduit l’écriture sans distraction, dans la version 3.2? C’est une fonctionnalité incroyable, qui vous permet d’oublier tout le reste et de vous concentrer sur l’écriture. Mais qu’en est-il des lecteurs?

Si vous êtes un puriste et que vous aimez consommer votre contenu sans accompagnement d’annonces, de listes de publications les plus récentes, de formulaires de newsletter, de widgets de médias sociaux et autres, vous êtes probablement un fan d’Evernote. Poche, Reeder ou toute autre application similaire. Ne pas dire que tous les plats d’accompagnement sont mauvais, juste que parfois les ignorer et se concentrer sur rien d’autre que le contenu fait du bien et fait un délicieux «infomeal».

Alors, à quel point est-il difficile d’ajouter une lecture sans distraction à votre site Web WordPress et d’améliorer l’expérience de lecture de ses visiteurs? Mort. Facile.

Voici le plan de match:

  • Trouvez un moyen d’isoler le titre et le contenu de l’article (en utilisant la fonction WordPress add_filter)
  • Ajouter un lien de bascule de lecture sans distraction (jQuery)
  • Lorsque vous cliquez sur le lien bascule, affichez le mode de lecture sans distraction (jQuery)
  • Contenu modal de lecture sans distraction de style (CSS)
  • Lorsque vous cliquez sur Fermer le lien, il revient à la normale (jQuery)

Isoler le titre et le contenu du message

Ce que nous devons faire ici, c’est permettre de cibler le titre et le contenu de l’article dans une fonction jQuery. Étant donné que les thèmes utilisent des éléments différents pour afficher ces deux éléments, nous devons utiliser la fonction add_filter pour envelopper à la fois le titre et le contenu dans des divs que nous pourrions alors facilement cibler:

// Wrap post title in a div
add_filter( 'the_title', 'thsp_dfr_title', 1 );
function thsp_dfr_title( $title ) {
    
    global $post;
    // We only want to do this for the post in main loop in single post view
    if( is_singular() && $title == $post->post_title && in_the_loop() ) {
        return '<h1 id="thsp-dfr-title">' . $title . '</h1>';
    }
    return $title;
    
}

// Wrap post content in a div
add_filter( 'the_content', 'thsp_dfr_content', 1 );
function thsp_dfr_content( $content ) {
    
    global $post;
    // Again, only do this in single post view
    if( is_singular() ) {
        /*
         * New lines are necessary so WordPress wpautop would
         * create the first paragraph
         */
        return '<div id="thsp-dfr-content">' . "n" . "n" . $content . '</div>';
    }
    return $content;
    
}

Maintenant nous avons #thsp-dfr-title et #thsp-dfr-content éléments avec lesquels travailler, alors mettons en file d’attente certains fichiers JS et CSS:

// Enqueue scripts and styles
add_action('wp_enqueue_scripts', 'thsp_dfr_styles');
function thsp_dfr_styles() {

    global $post;
    if( is_singular() ) {
        wp_enqueue_script(
            'thsp_dfr',
            plugins_url( '/js/distraction-free-reading.js', __FILE__ ),
            array( 'jquery' ),
            'v1.0'
        );
        
        wp_enqueue_style(
            'thsp_dfr',
            plugins_url( '/css/distraction-free-reading.css', __FILE__ ),
            array(), 
            'v1.0'
        );
    }

}

Ajout de bascule de lecture sans distraction

Étant donné que la lecture sans distraction ne fonctionnera pas avec javascript désactivé, nous utilisons jQuery pour ajouter toggler. Cela ne sert à rien pour les utilisateurs non javascript, pas besoin de leur lancer des liens morts.

// Add distraction free reading toggler
$('body').append('<a id="thsp-dfr-toggle" href="#">Distraction free reading</a>');

Ajoutez du CSS de base à l’élément de lien et nous nous retrouvons avec ceci:

Bascule de lecture sans distraction

Passage au mode de lecture sans distraction

Tout ce dont nous avons besoin pour y parvenir est déjà là. Un lien pour attacher une fonction de clic à – vérifier, deux éléments avec des identifiants connus que nous pouvons cloner – vérifier. Alors faisons-le.

// Clicking toggle link
$('#thsp-dfr-toggle').click(function(){ 
    // Add distraction free modal       
    $('body').append('<div id="thsp-dfr-overlay"><div id="thsp-dfr-wrapper"></div></div>');
    
    // Add post title to distraction free modal
    $('#thsp-dfr-title').clone().attr('id', 'thsp-dfr-title-cloned').appendTo('#thsp-dfr-wrapper');
    
    // Add post content to distraction free modal
    $('#thsp-dfr-content').clone().attr('id', 'thsp-dfr-content-cloned').appendTo('#thsp-dfr-wrapper');

    // Add close link to distraction free modal
    $('body').append('<a id="thsp-dfr-close" href="#">Close</a>');
    
    // Hide show modal link
    $(this).hide();

    return false;
});

// Clicking close link
$('#thsp-dfr-close').live('click', function(){  
    // Remove modal
    $('#thsp-dfr-overlay').remove();
    
    // Show distraction free toggle again
    $('#thsp-dfr-toggle').show();

    // Hide close modal link
    $(this).hide();
    
    return false;
});

Alors, voici ce que nous faisons ici:

1. Ajout de deux divs juste avant de fermer la balise body
2. Cloner le titre et le contenu du message et les ajouter à la div interne
3. Suppression du lien bascule
4. Ajout d’un autre lien que nous utiliserons pour quitter la lecture sans distraction

Cliquer sur ce lien de fermeture supprimera le lien modal et fermera lui-même et ramènera le lien qui active le mode de lecture sans distraction.

Styling Distraction Free Reading Content

Nous avons besoin de CSS pour positionner notre lien modal et bascule et leur donner un style de base, alors le voici:

/* 100% width and height element to hide site's regular look */
#thsp-dfr-overlay {
    background: #222;
    background: rgba(0,0,0,0.9);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 50px 0;
    
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.admin-bar #thsp-dfr-overlay {
    /* Make it look good with admin bar */
    padding: 78px 0 50px;
}
/* Distraction free reading content wrapper */
#thsp-dfr-wrapper {
    background: #f9f9f9;
    width: 45em;
    max-width: 90%;
    margin: 0 auto;
    padding: 2em 3em;
    height: 100%;
    overflow: scroll;
    
    box-shadow: 0 0 2em rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 0 2em rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 2em rgba(0,0,0,0.8);
    
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
/* Distraction free toggle and close buttons */
#thsp-dfr-toggle,
#thsp-dfr-close {
    position: fixed;
    bottom: 3px;
    right: 3px;
    z-index: 999;
    display: inline-block;
    background: #333;
    color: #fff;
    padding: 0.5em;
    border: 1px solid #fff;
    text-decoration: none;
}

Gardez à l’esprit que cela ne stylisera que les divs de superposition et de wrapper, pas le contenu qu’ils contiennent. Dans le thème Twenty Twelve, cela finira par ressembler à ceci:

Lecture sans distraction - contenu sans style

Lecture sans distraction – contenu sans style

Une sorte de «longue vie à la réinitialisation CSS d’Eric Meyer» est écrite partout, donc naturellement, vous voudrez ajouter une typographie CSS pour le rendre beau. Heureusement, il est facile de créer des sélecteurs CSS suffisamment spécifiques qui remplaceront le CSS par défaut du thème, car notre contenu de lecture sans distraction est enveloppé à l’intérieur #thsp-dfr-overlay et #thsp-dfr-wrapper divs. Après lui avoir donné un lifting (vérifier page Github du projet pour le fichier CSS complet), voici ce que nous avons:

Lecture sans distraction - contenu stylisé

Lecture sans distraction – contenu stylisé

Beaucoup mieux, mais vous savez ce qu’ils disent …

Donnez un peu de CSS à un développeur front-end et il passera des heures à le peaufiner, laisser un développeur front-end écrire son propre CSS et il passera encore des heures à y travailler.

Alors n’hésitez pas à rendre le contenu modal de lecture sans distraction aussi bon ou mauvais que vous le souhaitez 🙂

Le plan est de développer ce concept en un plugin WordPress complet, donc si vous souhaitez participer et contribuer, voici page Github du projet.

Share: