hreflang Flag

A wordpress plugin to add a flag icon to link corresponding to the hreflang attribute.

Description

hreflang Flag plugin uses css3 selectors to add a flag icon to your links depending on their hreflang attribute.

Installation

  1. Upload the hreflang-flag directory to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Go to setting -> hreflang Flag configuration and configure the flags you want to see (some sample flags are already filled in).
  4. Use the hreflang attribute in the links you want to see flags.

Sample

bla bla English link bla bla
bla bla French link bla bla
bla bla link to USA bla bla
bla bla link to GB bla bla

The block above was written using the following html code:

bla bla <a hreflang="en" href="#">English link</a> bla bla
bla bla <a hreflang="fr" href="#">French link</a> bla bla
bla bla <a hreflang="en-US" href="#">link to USA</a> bla bla
bla bla <a hreflang="en-GB" href="#">link to GB</a> bla bla

wordpress.org

You can install the plugin from hreflang Flag plugin page on wordpress.org !

Translations

I recently added internationalization support to the plugin, so if you want to see it translated to your language, you can translate it !
If you do so, please send me your .po file so I can integrate it to next release, thanks.
Also if you think my english writing does not sound good, send me a patch 😉

Todo list

  • Editor plugin to assist link editing

2 thoughts on “hreflang Flag”

  1. Christel

    Hi there,
    I love the functionality offered by your plugin but cannot seem to get it to work.
    Ideally, I would like to know the code so that by clicking on the flag icon and not on text, people are directed to the same page in English.

    If that is not possible, with the above code, I do not seem to be able to create the link to the page I choose.

    Looking forward to your feedback.

    Christel

  2. Julien Post author

    I guess you misunderstood the functionality of the plugin…
    It does not create links on the flag, it simply “decorates” the existing links with an icon.
    Kind of the same way wikipedia adds a special icon on the ‘external’ links (ie: links that point outside wikipedia).
    But here it decorates it according to the language of the link target (as described by the hreflang attribute).

    What you seam to want is to add a real link to an english content using only a flag image as a link “text”.
    something like:

    <a hreflang="en" href="#"><img src="en.png" alt="english link"/></a>

    hope this helps

Comments are closed.