"Reader" mode in WordPress • WordPress Help

 safari reader mode "title =" safari reader mode "width =" 500 "height =" 373 "class =" aligncenter size-medium wp -image-64536 "srcset =" http://bootstrapx.com/wp-content/uploads/2018/07/modo-lector-safari-500x373.png 500w, https://ayudawp.com/wp-content/uploads /2012/07/modo-lector-safari-1024x765.png 1024w, https://ayudawp.com/wp-content/uploads/2012/07/modo-lector-safari.png 1188w "sizes =" (max-width : 500px) 100vw, 500px "/> </a></p>
<p> If you use the <strong> Apple Safari </strong> you know what I'm talking about, I'm referring to" <em> Reader mode </em> "of this browser , an icon that appears in the navigation bar and that allows you to visualize the page you are visiting without everything that is left over (announcements, header, etc.) <strong> You only see the content of the article, with its images and others but without rest of elements of the web </strong>. </p>
<p> Well, the good news is that We can <span class= add this reading mode for our readers even if they do not use the Safari browser, like an extra functionality in our WordPress which will be much appreciated by visitors.

The process is not as simple as installing a plugin and that's it, but the result is worth it, giving your website a very professional functionality.

Let's go!

1. The solution

We will get to add the reader mode thanks to a plugin for jQuery called Colorbox . Logically, the first step is to download it from the official site .

The current version of Colorbox is 1.3.19, which works with jQuery 1.4.3+ in Firefox, Safari, Chrome, Internet Explorer 6, 7, 8, 9, Opera 11. If you want higher compatibility with older browsers you can use the previous version of the plugin, which is also available on the official website.

2. Installing Colorbox

First of all, download the latest version ( direct link here ). Once you have downloaded the zip, unzip it and you will see the content, this:

 folders colorbox "title =" folders colorbox "width =" 500 "height =" 350 "class =" alignnone size-medium wp -image-64535 "srcset =" http://bootstrapx.com/wp-content/uploads/2018/07/carpetas-colorbox-500x350.png 500w, https://ayudawp.com/wp-content/uploads/2012 /07/carpets-colorbox.png 980w "sizes =" (max-width: 500px) 100vw, 500px "/> </a></p>
<p> There are several examples folders, which contain different styles that you can use for the link" <em> Reader mode </em>. "If you want to decide, open each example folder and open the file <code> index.html </code> of each one to see what the reader mode would look like. </p>
<p> Once decided, we can now get to <strong> upload the plugin to our server </strong> via FTP The idea is this: </p>
<li> Copy the file <code> jquery.colorbox-min.js </code> from the folder called "colorbox" in the directory ' <code> / js / </code> ] 'of your theme (if you do not believe it). </li>
<li> Choose one of the sample styles and copy the file <code> colorbox.css </code> in the directory of your theme. </li>
<li> In the same folder for example, copy all the files in the folder '<code> / images / </code>' in the directory of images of your theme. </li>
<p> If for some reason you prefer to create a folder called '<code> colorbox </code> 'in the directory of your theme, and put all those files there, you can do it, but in this guide the steps are referred to the folder structure of the subject <em> TwentyEleven </em>. </p>
<h2><span id= 3. Connecting the script with WordPress

Once the above is done you have to tell WordPress, and specifically to your theme, where is Colorbox and how to use it .

To do this we open the file functions.php of your theme (if you do not believe it) and we add the following before closing it (before the closing PHP tag '?> '):

Thanks to these lines of code, the topic will know where each Colorbox file is and the JavaScript of the "Reader mode" that we are going to create next. Once saved you will be ready to upload them to the site (only in single entry pages, or " single ").

I remind you, as you can see in the routes used, that I am using the default configuration; putting the script in the folder / js / .

4. We define what is the content

So that the script knows what it has to show in the " Reader mode " it is convenient to mark it clearly. For this we will make a division around the content with a div .

You will tell me that it is usually " surrounded " the " content " with a " div "but it is better to create it" ex profeso "for to have it controlled and well specified .

To do this, we go back to the file functions.php of your theme and we add this to another:

This filter will run every time your theme shows the content of an entry. If the user is on a simple login page the code wraps the content with a div and the class .rm-content around it.

5. We created the link for the "Reader mode"

Once we have all the infrastructure created you are ready to put a link to the " Reader mode ".

To do this we go to the directory / js / of the theme and create a new file that we will call ' aw-reading-mode.js (if you look at the first code we already prepared the " call " a this file.

Well, nothing, we created the file paste this code in it:

Reviewing the code a little, you'll see what in line 4 we set the selector for the element that wraps the input (actually it is not necessary if you use the filter from step 4), and on line 7 is the HTML that will be displayed for the link to " Reader mode ", which of course you can customize to your liking.

Then, line 10 adds that HTML to the element that surrounds the content (that is, creates the link). And on line 12 we start Colorbox with the size options, specifying its content as the wrapped element. There are more possibilities, very well explained on the official Colorbox website.

6. Giving style

With all the above we can already use it and do tests but it never hurts to apply some style to our " Reader mode ", putting the emphasis in any case in the readability and readability that's what it's about, and not about doing virgins and putting colorines, it's not about that as you'll understand.

An example of style, which looks very good, it would be this:

Some notes on this CSS:

  • The div #cboxLoadedContent it is used to adjust the element that surrounds the content. You can make it more flexible by specifying a CSS class name if you prefer.
  • Line 11 is used to prevent the link to "Reader mode" from appearing within the pop-up window
  • If you want to use the existing styles of your theme you can skip the filter and, instead, specify an element such as .entry-content in the JavaScript. This element will move to the pop-up window, so your styles will also be applied to the pop-up window.

And that's it. It is a bit frightening but in reality it is simple, and following these simple steps you will be able to verify that it works of coña it does not slow down your site (Colorbox is only 10Kb of script, 5kb with gzip) and offers a touch of quality and professionalism to your website, for visitors that do not use the Safari browser, which already has this integrated utility, as you know.

(…) Plus: with plugins

How could it be otherwise, there are also plugins that They offer this functionality, and thanks to Quique that you have reminded me in the comments here are a few that look very good:

  • Readability : Simple and effective, offers the window popup mode Easy reader
  • Readability plugin : this is something different, it offers a kind of reading list, ideal for tired views.
  • Easy reader : very easy to configure, it offers a button to insert in input s and pages and thus offers the easy reading mode.

Now, for options that do not remain.

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you: