External links indicator is an icon used for indicating external links (the links which directs visitors to some other website/domain) in webpages. The feature is quite popular on Mediawiki websites like Wikipedia etc and now you can enable the same feature in your WordPress site too.
Indicate External Links is the new WordPress plugin by Cubecolour which lets you activate external link indicator globally on your WordPress site so that whenever you add any external link, your visitors and can know they are going away from your domain. It is a simple and lightweight plugin for indicating all external http and https links present in posts, pages and other custom content by appending a small diagonal arrow icon to the link.
Simply install and activate Indicate External Links plugin and you are done, no more configuration is required. It starts working immediately.
Although there is no admin page and options to set but still if you like you can customize it by adding some CSS to your child theme:
.nav-menu .extlink:after
{
color:'#bada55';
}For good flexibility you can simply copy the plugin’s CSS to you child theme’s stylesheet (style.css file present in your child theme’s directory) and then you can make changes if you like preventing the default CSS from loading. CSS rules can be added for enabling the use of a glyph from a custom icon.
For deactivating default CSS, simply add the following code inside your child theme’s functions.php (present in your theme’s directory) file:
<?php remove_action('wp_head', 'cc_extlink_style'); ?>There are some exceptions like images linked to external websites or captions with external links will not be showing any indication (as it can make image appearance look bad). Another exception is external links present inside custom menus will not have the arrows added but if you are good in CSS then you can add custom CSS to override these things.
Also you can yourself enable other exceptions and prevent some link types from showing off external links arrow. Simply add CSS rules to your child theme. Target the links you don’t want affected with greater specificity to override the default CSS of the plugin.
For Example:
.myclass .extlink:after
{
content:'';
}