Keeping in mind some personal preferences, while reading posts and some experimentation with UI of links within posts, I started using info-cards and footnotes for non-essential links within the posts published, here on this blog.
Too many links within a post, distract me from the post that I am reading. This fact, coupled with the post published by De Correspondent, on improving the UI of links, for preventing broken links from cropping up on published posts, led me down a road, where I started my own experimentation. That led me to use a variation of info-cards and footnotes for nonessential links.
Some members of the blogging and publishing community, that I am part of, asked me how I was doing this. If it was a plugin I was using or custom code/markup. Since this blog is a jekyll build. I use a custom jekyll plugin to include info-cards, within posts.
I decided to go ahead and create a simple WordPress plugin that would do the same, for WordPress based blogs.
What are info-cards?
Think of info-cards as tooltips. These tooltips contain more information about a topic. Without the info-cards, the topic would be linking to an external webpage or other such resource. A clink on such a link would take the user away from the post. And if you have too many links within a post, it does gets distracting. Enter info-cards (click on the blue plus sign) .
Introducing the WordPress Plugin - Hints.
A simple, small and lightweight WordPress plugin that enables you to use info-cards (the variation of info-cards that I use), easily from, within WordPress.
No settings, no nothing. Install it and start using it. It uses short tags to create and display info-cards. It uses jQuery, because jQuery comes bundled up with a WordPress install.
If you would like to change the css/style information for the plugin. Open up the CSS file and start editing.
Download Link, Usage and Installation Video.
Usage is Shortcode based:
1 - Without Options:
[hints] Some hint/info about a keyword maybe? [/hints]2 - With Options:
[hints unique_id="should_be_unique_is_optional" custom_text="not required, but just incase you want a text based link, instead of an icon (optional)"]
Some hint/info about a keyword maybe?
[/hints]Please note: The unique_id option is alphanumeric, should start with a character and should not contain spaces.
Video.
Download Hints WordPress Plugin.
Not Using WordPress?
You can download the plain, vanilla code from Github or see it in action over at CodePen.io
Feature Requests? Support?
If you would like me to add a feature or/and offer any kind of help, leave a comment below.
