还记得WordPress在3.2版本中引入了分散注意力的免费写作吗？这是一个了不起的功能，它使您可以忘记其他所有内容并专注于写作。但是读者呢？

如果您是一个纯粹主义者，并且喜欢消费内容而没有广告，最新帖子列表，新闻稿形式，社交媒体小部件之类的东西，那么您可能会喜欢Evernote的Clearly，Pocket，Reeder或任何其他类似产品应用程式。并不是说所有配菜都是不好的，只是有时忽略它们，只专注于满足感，感觉很好，并成为美味的“信息餐”。

那么，向您的WordPress网站添加无干扰的阅读内容并改善其访问者的阅读体验有多难？死。简单。

这是游戏计划：

• 找到一种隔离帖子标题和内容的方法（使用add_filter WordPress函数）
• 添加分散注意力的免费阅读切换链接（jQuery）
• 单击切换链接时，显示无干扰的阅读模式（jQuery）
• 风格分散注意力的阅读模态内容（CSS）
• 单击关闭链接后，它恢复正常（jQuery）

隔离帖子标题和内容

我们在这里需要做的是使得可以在jQuery函数中定位帖子标题和内容。由于主题使用不同的元素来显示这两个元素，因此我们需要使用add_filter函数将标题和内容都包装在div中，然后我们可以轻松地定位：

// 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;
	
}

现在我们有了#thsp-dfr-title和#thsp-dfr-content元素，因此让我们加入一些JS和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'
		);
	}

}

添加分心免费阅读切换

由于分心免费阅读功能无法在禁用JavaScript的情况下使用，因此我们使用jQuery添加切换器。对于非JavaScript用户而言，这毫无用处，无需向他们抛出无效链接。

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

在link元素中添加一些基本的CSS，我们最终得到以下结果：

切换至无干扰阅读模式

我们实现这一目标所需的一切都已经存在。将点击功能附加到的链接-检查，可以克隆两个具有已知ID的元素-检查。所以，让我们开始吧。

// 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;
});

所以，这是我们在这里做的细目：

1.在关闭body标签之前添加两个div。2
.克隆帖子标题和内容并将其添加到内部div中
。3.删除切换链接
。4.添加另一个链接，我们将使用该链接退出无干扰阅读

单击该关闭链接将删除模态和关闭链接本身，并带回激活无干扰阅读模式的链接。

样式分心免费阅读内容

我们需要一些CSS来放置我们的模式和切换链接，并为其提供一些基本样式，所以这里是：

/* 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;
}

请记住，这只会设置overlay和wrapper div的样式，而不是其中的内容。在“十二十二”主题中，最终将看起来像这样：

分散注意力的阅读–无样式的内容

上面写着“ Eric Meyer的CSS重置万岁”，因此，自然地，您需要添加一些踢屁股字体的CSS以使其看起来不错。幸运的是，建立足够具体的CSS选择器，将覆盖主题的默认CSS是很容易的，因为我们分心免费阅读内容包裹在里面#thsp-dfr-overlay和#thsp-dfr-wrapper申报单。改版后（请查看项目的Github页面以获取完整的CSS文件），这是我们需要的：

无干扰的阅读–风格化的内容

好多了，但是你知道他们在说什么……

给前端开发人员一些CSS，他将花费数小时对其进行调整，让前端开发人员编写自己的CSS，而他仍将花费数小时来处理它。

因此，请随意使分心的阅读模态内容看起来好坏一样?

计划是将该概念开发为功能齐全的WordPress插件，因此，如果您想加入并做出贡献，请访问此项目的Github页面。

---

---

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！