17713433920 info@mac163.com
向WordPress添加分散注意力的免费阅读
向WordPress添加分散注意力的免费阅读

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

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

那么,向您的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页面


微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


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

关闭搜索
购物车
回到顶部