( WP Plugins)

WP Plugins

Wordpress Plugin: Read More Right Here

A small, simple to use plugin to automatically transform your <!--more--> links into "view right here" links. When clicked, the rest of that entry's content will be loaded and made visible to the reader immediately, without redirecting them to the post's single page display. To view this plugin in action, visit the Wooliet front page and find an entry with a "read more" link. Click the link and watch the content load. Click again and the content will slide back out of view.

Download and Use Right Now!

The latest version of the "Read More Right Here" plugin is available for download at Wordpress's plugin directory Install
  1. Extract the 'read-more-right-here' directory to your Wordpress installation's 'wp-content/plugins' directory
  2. Find the 'Read More Right Here' entry in the "Plugins" listing within your Wordpress dashboard and click "Activate"
  3. Visit the plugin's Settings page to customize

How It Works

"Read More Right Here" uses the jQuery framework already included with Wordpress installations. When your blog is loaded, all links of the "more" class (as created by Wordpress when you include the <!--more--> quicktag) are modified to no longer send the user to that post's single page display when clicked. Instead, the Wordpress database is queried for that specific post, and all content after the <!--more--> tag (i.e. only what you need) is returned. The new content is then immediately displayed to the user, inline with the opening content. If clicked once more, the new content will slide out of view. Now that it has loaded, any subsequent clicks will simply re-display that existing content. No new server requests are made! If, for some reason, the request fails, an error message is displayed where the new content would have been seen. The <!--more--> link then reverts to normal use so that the reader can still click on it to go to its single page display.

Modifying

1. Available Options
  • Loader Image: Images found in the "loader" directory can be selected as the displayed "ajax spinner" image. You can also choose to display nothing.
  • Link Text On Expanded Content: The 'more link' text displayed when new content is displayed (e.g. 'read less').
  • New Content Expand Speed: The animation speed at which the new content expands.
  • Duplicate More Link: If selected, a duplicate 'more link' is appended to the bottom of new content when it is displayed.
  • Use with Wordpress Pages: If selected, the plugin will work on single pages containing a 'more link'. See here for more information.
  • Use UTF-8 Decode: If selected, the 'more' content retrived will be passed through PHP's utf8_decode function. It might help for situations such as this.
  • Use Debug Script: If selected, the uncompressed javascript used by the plugin will be loaded to help with debugging any issues.
2. The "Loading" Image The "loading" image used to visually inform the user that the new content is arriving was created using the excellent Ajax Load website. If you would like to modify the default image used with this plugin (i.e. make it bigger, match your theme's colors, etc.), create your own image and place it in the loader directory located in the plugin's root directory. Then visit the Settings page and set that image using the Loader Image option. 3. Debugging the Javascript The javascript used for this plugin is found in "read-more-right-here/js/wt_rmrh.js". It has been compressed using Google's Closure Compiler. The original, uncompressed javascript is also included and is named "wt_rmrh-debug.js". To use the uncompressed javascript file, visit the plugin's Settings page and check the Use Debug Script option. 4. Calling the Plugin Manually If the plugin needs to be executed manually for any reason (see this support thread for an example), it can be called directly: 
    // No arguments: executes plugin on entire document (but already modified 'more links' will be ignored)
    $.fn.ReadMoreRightHere();

    // Within a more specific context: executes plugin within provided context
    $.fn.ReadMoreRightHere('div.dynamic-content');
5. Client-side events The plugin client-side code triggers custom "events" using jQuery's trigger method. Other scripts loaded to the page can hook into these events to offer additional functionality.
  • 'RMRHContentExpanded' is triggered when the new content is displayed
  • 'RMRHContentCollapsed' is triggered when the new content is hidden
The events are triggered by the 'more-link' anchor element. Any element futher up the DOM can handle them. Example code for handling these events: 
    // '.post' is the post containing element. 
    jQuery('.post').bind('RMRHContentExpanded RMRHContentCollapsed',function(e,data)
    {
        console.log(e.type);
        console.log(data.itemId);
        console.log(data.moreContentEl);
        console.log(data.linkEl);

        // return false; // prevents event from bubbling up the DOM
    });

Related Posts