The Responsive Content plugin enables you to adjust the content depending on the device/viewport.
An example where this can be very handy for is
telephone numbers. On a mobile device, a telephone number can be a link from which it can be dialed immediately, whereas from a lap/desktop the number does not have to be a link.
With the Responsive Content plugin it is as simple as adding a class to the content to show/hide it for different devices.
The Responsive Content plugin adds a Formats drop down menu (pre WP 3.9 the menu is called "Styles") to the first line of the TinyMCE Editor. Once you have selected a visibility class, the plugin shows that in 3 locations:
- as selected in the drop down menu
- with a "button" in front of the selector (the only function of this "button" is to show you that the element behind it has one of the visibility classes)
- in the path
There are 15 visibility classes in the Styles menu on the Visual Editor:
- 6 for paragraphs (3 to show and 3 to hide)
- 3 for links (only to show as hiding can be done with the inline classes below)
- 6 for spans (3 to show and 3 to hide)
Since version 0.3 I have added 6 buttons to the Text Editor as well. For flexibility purposes these buttons (3 for showing and 3 for hiding) only add a class, so you can add the element yourself.
The plugin already comes with all the styles necessary to show the elements on or hide them from the front end, so all you need to do is save your Post, Page or other Post Type and visit your site from a few different devices (or resize your browser) to see your content change depending on the width of the browser!
Under the
Other Notes-tab I have added some information on 用法 and Languages.
Go to
Plugins > Add New in your WordPress Dashboard, do a search for "Responsive Content" and install it.
… OR …
Follow these steps:
- Download zip file.
- Upload the zip file via the Plugins > Add New > Upload page … OR … unpack and upload with your favorite FTP client to the /plugins/ folder.
- Activate the plugin on the Plugins page.
完成!
Now visit the Instructions page to see what you need to know to use this plugin.
Usage
You can use the Responsive Content plugin basically for any Post Type.
Although possible, I strongly discourage using the classes with images. The reason is that the Responsive Content plugin only uses media queries with display: block;
, display: inline-block;
and display: none;
. If you were to add a large image to only show on large screens, a medium image to show on tablets and a small image to show on smart phones, then the person visiting your site using a phone has to download all 3 images, which can have a major impact on the data plan of the visitor!