Ajouter une lecture sans distraction à WordPress

Vous vous souvenez quand WordPress a introduit l’écriture sans distraction, dans la 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 réseaux sociaux et autres, vous êtes probablement un fan de Clearly d’Evernote, Poche, Reed 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 constitue un délicieux « repas d’information ».

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 ? Morte. Simple.

Voici le plan de match :

• Trouvez un moyen d’isoler le titre et le contenu de la publication (à l’aide de la fonction WordPress add_filter)
• Ajouter un lien de basculement de lecture sans distraction (jQuery)
• Lorsque le lien bascule est cliqué, afficher le modal de lecture sans distraction (jQuery)
• Style de contenu modal de lecture sans distraction (CSS)
• Lorsque le lien de fermeture est cliqué, 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 des articles 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 div que nous pourrions ensuite cibler facilement:

// 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, mettons donc en file d’attente des 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 d’une bascule de lecture sans distraction

Étant donné que la lecture sans distraction ne fonctionnera pas avec javascript désactivé, nous utilisons jQuery pour ajouter un basculeur. Cela n’est d’aucune utilité 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 link 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 que cela se produise est déjà là. Un lien pour attacher la 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;
});

Voici donc la répartition de ce que nous faisons ici :

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

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

Styling Distraction Contenu de lecture gratuit

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

Il y a en quelque sorte « vive la réinitialisation CSS d’Eric Meyer » partout, donc naturellement, vous voudrez ajouter un CSS de typographie épatant 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 div. Après lui avoir fait un lifting (vérifier la page Github du projet pour le fichier CSS complet), voici ce que nous avons :

Lecture sans distraction – contenu stylisé

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

Donnez du CSS à un développeur front-end et il passera des heures à le peaufiner, laissez un développeur front-end écrire son propre CSS et il passera encore des heures à travailler dessus.

Alors n’hésitez pas à faire en sorte que le contenu modal de lecture sans distraction ait l’air 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 la page Github du projet.