Modern Footnotes

विवरण

Footnotes optimized for desktop and mobile, inspired by the styles of Grantland and FiveThirtyEight.

Use a footnote in your post by using the footnote icon in the WordPress editor or by using the shortcode: [mfn]this will be a footnote[/mfn] The plugin will automatically associate sequential numbers with each plugin.

On desktop, footnotes will appear as a tooltip when the user clicks on the number. On mobile, footnotes will expand as a section below the current text.

You can also use the [mfn_list] shortcode to display a list of footnotes used in the article.

See the GitHub repository at: https://github.com/seankwilliams/modern-footnotes

स्क्रीनशॉट्स

  • http://prismtechstudios.com/modern-footnotes/modern-footnotes-1.png
  • http://prismtechstudios.com/modern-footnotes/modern-footnotes-2.png
  • http://prismtechstudios.com/modern-footnotes/modern-footnotes-3.png

इंस्टॉलेशन

  1. Upload the modern-footnotes folder to your wp-content/plugins directory.
  2. Activate the plugin in the WordPress Plugins section.
  3. Use a footnote in your post by using the footnote icon in the WordPress editor or by using the shortcode: [mfn]this will be a footnote[/mfn]
  4. Reference numbers will be automatically assigned sequentially so the first footnote is labeled 1, then the next footnote is 2, then 3, etc. You can specify custom reference numbers by using the “referencenumber” attribute to specify a particular reference number. For example: [mfn referencenumber=3]This will have the number 3 with it.[/mfn]
  5. If you want to customize the styles, you can do so by overriding the following styles in custom CSS for your theme:
    .modern-footnotes-footnote – The superscript element displaying the footnote number
    .modern-footnotes-footnote–selected – A superscript element that is currently active
    .modern-footnotes-footnote__note – Styling that applies to both mobile and desktop footnotes
    .modern-footnotes-footnote__note–mobile – The styling for a mobile footnote
    .modern-footnotes-footnote__note–desktop – The styling for a desktop footnote

सामान्य प्रश्न

How do I create a footnote?

Use a footnote in your post by using the footnote icon in the WordPress editor or by using the shortcode: [mfn]this will be a footnote[/mfn]

Can the footnotes also be listed at the bottom of the post?

Yes. Go to Settings -> Modern Footnotes and choose the “Display footnote list at bottom of posts” option. Or, if you only want the footnotes at the bottom of the post when printing, choose the “When printing, list footnotes at the bottom of posts” option.

Can I make desktop footnotes expand like they do on mobile instead of using tooltips?

Yes. Go to Settings -> Modern Footnotes and choose the “Expandable footnotes on desktop” option.

Can I customize the reference numbers output by the plugin?

Yes. You can specify custom reference numbers by using the “referencenumber” attribute to specify a particular reference number. For example: [mfn referencenumber=3]This will have the number 3 with it.[/mfn]

Can I make the footnote numbers “reset” at 1?

Yes. Designate the footnote where you want numbers to reset with the referencereset=’true’ attribute and the reference counter will restart at 1. For example: [mfn referencereset=’true’]This will have the number 1 with it, regardless of how many footnotes came before it. The next footnote after this will be the number 2.[/mfn] Please note that this may not be compatible with all other plugins depending on how the plugin manipulates the HTML, so if the numbers aren’t appearing right, you may have to use the “refnum” attribute instead (see “Can I customize the reference numbers output by the plugin?”)

Can I customize the styles of footnotes?

If you want to customize the styles, you can do so by overriding the following styles in custom CSS for your theme:
.modern-footnotes-footnote – The superscript element displaying the footnote number
.modern-footnotes-footnote–selected – A superscript element that is currently active
.modern-footnotes-footnote__note – Styling that applies to both mobile and desktop footnotes
.modern-footnotes-footnote__note–mobile – The styling for a mobile footnote
.modern-footnotes-footnote__note–desktop – The styling for a desktop footnote

Is there support for the Block Editor/Gutenberg Editor?

Yes. You can use the Modern Footnotes button in the toolbar of the Block Editor to move the selected text into a footnote. However, if you want to customize the reference numbers output by the plugin, you’ll have to type out the shortcode instead.

Why isn’t the word “footnote” appearing by all of my footnotes in the Block Editor/Gutenberg Editor?

The word “footnote” only shows up by the first footnote in each paragraph in the editor, but all footnotes are highlighted gray. This is to work around a technical limitation of Gutenberg’s editor, though hopefully we can come up with a better solution in the future. Don’t worry, your footnotes will show up correctly when viewing the page/blog post though!

समीक्षाएं

दिसम्बर 2, 2020
This is a great piece of work, so much credit to Sean Williams of Prism for graciously providing this gratis. It's beautiful, and made my task very easy. Being able to see the footnotes inline makes reading huge documents on desktops and all docs on mobiles a much less painful/disorienting process.
मई 10, 2020
It's a good plugin. At least it fits the needs of our website. I really hope that it will be supported, developed and added new features and possibly paid addons. Thank you.
दिसम्बर 12, 2019
This plugin works very well with a minimum of effort on the user part. The output is good looking even with some very looong notes. And you can customize it quite easily, if you want a different look. It is very light on the page, and works well in mobile, something very needful nowadays but difficult to find. To top all this, the support is very good and quick. The author always answer questions quickly, gives good solutions and is very nice and friendly!

ok!

अक्टूबर 31, 2019
This plugin worked for me
14 के सभी समीक्षा पढ़ें

सहायक &डेवलपर्स

यह खुला स्रोत सॉफ्टवेयर है। अनुगामी लोगो ने इस प्लगइन के लिए योगदान दिया है।

योगदानकर्ता

“Modern Footnotes” has been translated into 2 locales. Thank you to the translators for their contributions.

Translate “Modern Footnotes” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

बदलाव विवरण

1.4.4 – 4/7/21 – Fixed PHP warning
1.4.3 – 3/29/21 – Add an option to list footnotes at the bottom of an RSS feed
1.4.2 – 3/17/21 – Change “x” button to only close one collapsible footnote at a time to prevent mobile scrolling issues
1.4.1 – 3/9/21 – Added CSS to make the footnotes list display better with some themes.
1.4 – 3/8/21 – Added option to list footnotes at bottom of the page. Fixed issue where Display Posts plugin would cause posts to sometimes render with incorrect numbering.
1.3.11 – 6/23/20 – Prepared plugin for localization
1.3.10 – 6/17/20 – Fixed problem on pages that listed multiple posts where footnote numbers wouldn’t reset. Added an option to reset footnote numbering with an attribute. Fixed a minor code issue with the Gutenberg editor.
1.3.9 – 12/29/19 – Fixed problem in Chrome where a footnote near the right side of the screen would appear with compressed width on desktop
1.3.8 – 11/12/19 – Fixed problems with some custom implementations where footnotes wouldn’t open due to extra DOM elements being placed between the footnote link & content
1.3.7 – 11/7/19 – Fixed JavaScript error
1.3.6 – 11/6/19 – Fix for problem where clicking on a footnote with the same numbering as another footnote would open both footnotes
1.3.5 – 10/28/19 – Fix for problem where footnote numbering would incorrectly start with ‘3’ in some cases, especially when combined with the Yoast SEO plugin
1.3.4 – 10/23/19 – Fix for problem where some extra, empty footnotes would randomly appear
1.3.3 – 10/16/19 – Fix issue where applying multiple formats in conjunction with footnotes in the Gutenberg editor would mess up footnote formatting
1.3.2 – 9/18/19 – Fix issue where links inside footnotes wouldn’t appear inline with other text
1.3.1 – 9/18/19 – Updated style so that long links are truncated with ellipsis in tooltips
1.3.0 – 2/19/19 – Fixed problem where Classic Editor button did not appear in WP 5.x. Added Gutenberg button. Allow shortcode within footnotes.
1.2.7 – 1/29/19 – Fixed additional shortcode rendering issue in RSS feeds.
1.2.6 – 1/28/19 – Removed footnote shortcodes from rendering in RSS feeds.
1.2.5 – 11/30/18 – Fixed issue with footnotes causing line breaks.
1.2.4 – 11/30/18 – Fixed a problem where HTML tags could not be entered inside a footnote.
1.2.3 – 11/1/18 – Tested with WordPress 5.0
1.2.2 – 10/8/18 – Changed license from LGPL to GPL2.
1.2.1 – 10/3/18 – Fixed a problem where footnote would improperly size when it was opened multiple times at the edge of a container
1.2 – 9/14/18 – Stopped using href=”#” for a HTML elements for increased theme compatibility. Added ability to have a custom shortcode. Added a custom CSS area. Added the ability to manually override citations.
1.1.4 – 1/27/18 – Fixed issue where footnote numbering wouldn’t be sequential when other plugins like TablePress caused shortcodes to render in a different order than they appear in the HTML.
1.1.3 – 1/11/18 – Fixed issue where icon was not showing in the admin MCE editor
1.1.2 – 1/6/18 – Fixed problem where scripts were enqueued incorrectly.
1.1.1 – 11/22/17 – Fixed error occuring in PHP versions below 5.3
1.1 – 11/8/17 – Added option to use expandable version of footnotes on desktop instead of the default tooltip style.
1.0 – 4/1/17 – initial version.