wordpress撰写模式_如何（以及为什么要）在WordPress中建立阅读模式

最新推荐文章于 2024-11-03 11:01:20 发布

culh2177

最新推荐文章于 2024-11-03 11:01:20 发布

阅读量245

点赞数

文章标签： java css html javascript js ViewUI

原文链接：https://www.sitepoint.com/create-a-minimalist-reading-mode-in-wordpress/

版权

wordpress撰写模式

A “reading mode” as I define it is an optional minimalist view that website visitors can use to view your post content. What I’ve put together is ultra-minimalist — it’s nothing but the content: no sidebar, and no ads. It’s touch-sensitive and responsive, so mobile users won’t have any problem using it. I also added a font size increase and decrease feature.

我定义的“阅读模式”是一种可选的极简视图，网站访问者可以用来查看您的帖子内容。我的作品极简主义-内容无外无：没有侧边栏，也没有广告。它具有触摸感应和响应能力，因此移动用户使用它不会有任何问题。我还添加了字体大小增加和减少功能。

So, what brought about this inspiration for this reading mode?

那么，是什么为这种阅读模式带来了灵感呢？

I recently had a client that spent a small fortune to get all of his advertisements set up in the sidebar and header of the site, only to later request something totally different — a simplified reading mode. I thought this was a strange request considering all the money spent on ad block development, but the contrast and focus on content has had a major positive impact on the site.

最近，我有一个客户花了一点钱在网站的侧边栏和标题中设置了所有广告，但后来又要求完全不同的东西–简化的阅读模式。考虑到所有用于广告块开发的资金，我认为这是一个奇怪的请求，但是内容的对比和关注对网站产生了重大的积极影响。

我为什么要阅读模式？ (Why Would I Want a Reading Mode?)

First of all, people are in fact taking advantage of this reading mode on my client’s site, and users are staying on the site a lot longer than those who do not, suggesting that people who take advantage of this feature tend to consume a lot more content compared to average users who don’t use the reading mode.

首先，人其实都是走在我的客户的网站这种阅读模式的优势，用户停留在网站谁比那些不长了很多，这表明谁拿这个特性的人往往会消耗更多的内容与不使用阅读模式的普通用户相比。

Second, ad revenues didn’t drop off — they increased. Since people were staying on the site longer, they developed more trust and apparently clicked or responded to more ads than before.

其次，广告收入并没有减少-而是增加了 。由于人们在网站上停留的时间更长，因此他们获得了更多的信任，并且显然比以前更多地点击或响应了更多广告。

Further, traffic tracking showed that users of the reading mode ended up coming back much more frequently. The reading mode added significant value to them — they preferred consuming content at this site and returned to get more.

此外，流量跟踪显示，阅读模式的用户最终回来的频率更高。阅读模式为他们带来了巨大的价值-他们更喜欢在此站点上消费内容并返回以获得更多。

现在有一个插件 (There’s a Plugin for That Now)

Sound too good to be true? I’ll sweeten the deal even more — I made a free reading mode plugin that can only be found here on DesignFestival (for now). Eventually, you’ll see this in the plugin repository over at WordPress.org.

听起来好得令人难以置信？我将进一步提高交易量-我制作了一个免费的阅读模式插件，该插件只能在DesignFestival上找到 (目前)。最终，您将在WordPress.org的插件存储库中看到此内容。

Just download this file, upload it using “Plugins” -> “Add New” within WordPress administration, and activate it. You’ll see the “View in Reading Mode” at the top of all your posts, but not on your pages.

只需下载此文件，然后在WordPress管理中使用“插件”->“添加新文件 ”将其上传，然后将其激活即可。您会在所有帖子的顶部看到“以阅读模式查看”，但在页面上却没有。

道具应该放在哪里 (Props Where Props Should Go)

Before jumping into the nuts and bolts of how to customize this plugin for your WordPress site, this is built around the amazing work of Jack Moore, who developed the ColorBox jQuery lightbox. So, check out his documentation, because my plugin builds on this and gives you access to all his useful tools as well.

在深入了解如何为您的WordPress网站自定义此插件的细节之前，这是基于Jack Moore出色的工作而建立的，他开发了ColorBox jQuery lightbox 。因此，请查看他的文档，因为我的插件建立在此基础之上，并且使您也可以使用他的所有有用工具。

There is a load of documentation and support for ColorBox, as well as a community of users. This was a natural fit for the reading mode back end, since it would support so many features above and beyond my basic needs.

对于ColorBox以及用户社区，有大量文档和支持。这自然适合阅读模式后端，因为它可以支持超出我的基本需求之外的许多功能。

自定义阅读模式按钮 (Customizing the Reading Mode Button)

The reading mode button design is controlled by CSS. Within the plugin folder, cruise to the CSS sub-folder and open up the colorbox.css file. The class for the button is rm-button, and the colors can be fully customized. Starting on line 90:

阅读模式按钮的设计由CSS控制。在plugin文件夹中，浏览至CSS子文件夹并打开colorbox.css文件。按钮的类别是rm-button，颜色可以完全自定义。从第90行开始：

[sourcecode language=”css” firstline=”90″]

[源代码语言=“ css”第一行=“ 90”]

/* Reading Mode Button */ .rm-button { border-top: 1px solid #000000; background: #4d4d4d; padding: 5px 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; color: white; font-size: 22px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; text-align:center; vertical-align: middle; width:220px; max-width:90%; } .rm-button:hover { border-top-color: #bdbdbd; background: #bdbdbd; color: #171717; } .rm-button:active { border-top-color: #000000; background: #000000; } .rm-button a:link, a:visited { text-decoration:none; font-size: 22px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; color:#fff; } [/sourcecode]

/ *阅读模式按钮* / .rm-按钮{border-top：1px solid＃000000; 背景：＃4d4d4d; 填充：5px 10px; -webkit-border-radius：8px; -moz-border-radius：8px; border-radius：8px; 白颜色; font-size：22px; 字体家族：Helvetica，Arial，Sans-Serif；文字修饰：无； text-align：center; 垂直对齐：中间；宽度：220像素；最大宽度：90％; } .rm-button：hover {border-top-color：#bdbdbd; 背景：#bdbdbd; 颜色：＃171717; } .rm-button：active {border-top-color：＃000000; 背景：＃000000； } .rm-button a：link，a：visited {text-decoration：none; font-size：22px; 字体家族：Helvetica，Arial，Sans-Serif；文字修饰：无；垂直对齐：中间；颜色：#fff; } [/源代码]

Note that on line 104 and 105 is where you can adjust the size of the button and tweak how it works responsively.

请注意，在第104和105行上，您可以调整按钮的大小并调整其响应方式。

更改阅读模式的宽度 (Changing the Width of the Reading Mode)

The reading mode window itself is tougher to work with. You’ll need to work with the jquery.colorbox.js JavaScript file. (Note: There is a minified version available of the ColorBox jQuery, but it’s much more difficult to edit.)

读取模式窗口本身很难使用。您需要使用jquery.colorbox.js JavaScript文件。 (注意：ColorBox jQuery有一个缩小的版本，但是编辑起来要困难得多。)

In the jquery.colorbox.js file, found within the “js” subfolder of the plugin, you can find the size of the default window on line 13:

在插件的“ js”子文件夹中的jquery.colorbox.js文件中，您可以在第13行找到默认窗口的大小：

[sourcecode language=”javascript” firstline=”10″ highlight=”4″]

[源代码语言=“ javascript”第一行=“ 10”突出显示=“ 4”]

defaults = { transition: "elastic", speed: 300, width: "85%", initialWidth: "600", innerWidth: false, maxWidth: false, height: false, initialHeight: "450", innerHeight: false, maxHeight: false, scalePhotos: true, scrolling: true, inline: false, html: false, iframe: false, fastIframe: true, photo: false, href: false, title: false, rel: false, opacity: 0.9, preloading: true,

默认值= {过渡：“弹性”，速度：300，宽度：“ 85％”，initialWidth：“ 600”，innerWidth：false，maxWidth：false，高度：false，initialHeight：“ 450”，innerHeight：false，maxHeight： false，scalePhotos：true，滚动：true，内联：false，html：false，iframe：false，fastIframe：true，照片：false，href：false，标题：false，rel：false，不透明度：0.9，预加载：true，

[/sourcecode]

[/源代码]

You can use pixels or percentages, just make sure to keep the double quotes.

您可以使用像素或百分比，只需确保保留双引号即可。

自定义文本大小调整器按钮 (Customizing the Text Resizer Buttons)

In an effort to keep the plugin as simple as possible and the reading mode as functional as possible, I used text-based buttons to control the size of the font. You can add images by editing the image-sizer.js file on line 7:

为了使插件尽可能简单，并使阅读模式尽可能地正常运行，我使用了基于文本的按钮来控制字体的大小。您可以通过在第7行中编辑image-sizer.js文件来添加图像：

[sourcecode language=”javascript” wraplines=”true”]

[源代码语言=“ javascript” wraplines =“ true”]

jQuery(document).ready(function($) { // Set this to the CSS selector of the element that wraps your post content. // e.g. .entry or .entry-content var selector = ‘.rm-content’;

jQuery(document).ready(function($){//将其设置为包裹您的帖子内容的元素CSS选择器。//例如.entry或.entry-content var selector ='.rm-content';

// The HTML for your "View This in Reading Mode" link. var html = ‘<a href="#" class="reading-mode" rel="nofollow">View in Reading Mode</a><a href="javascript:void(0);" οnclick="resizeText(1)" id="plustext">Make text bigger</a> | <a href="javascript:void(0);" οnclick="resizeText(-1)" id="minustext">Make text smaller</a>’;

//您的“在阅读模式下查看此内容”链接HTML。 var html =' <a href="#" class="reading-mode" rel="nofollow">在阅读模式下查看</a> <a href =“ javascript：void(0);” onclick =“ resizeText(1)” id =“ plustext”>使文本变大</a> | <a href =“ javascript：void(0);” onclick =“ resizeText(-1)” id =“ minustext”>使文本变小</a> ';

$(selector) .prepend(html) .find(‘.reading-mode’) .colorbox({ innerHeight: "80%", innerWidth: "40%", inline: true, href: selector }); });

$(selector).prepend(html).find('。reading-mode').colorbox({innerHeight：“ 80％”，innerWidth：“ 40％”，inline：true，href：选择器}); });

[/sourcecode]

[/源代码]

Instead of the text, drop whatever image you want to use into the folder (or a sub-folder) with the JS file and link as you would using:

代替文本，将要使用的任何图像拖放到带有JS文件的文件夹(或子文件夹)中，并按以下方式链接：