/wordpress-external-link-icon.php Secret
Last active
April 21, 2022 07:15
Adding an icon to external links - https://jeroensormani.com/adding-a-icon-to-external-links/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php // For implementation instructions see: https://aceplugins.com/how-to-add-a-code-snippet/ | |
/** | |
* Add link icons. | |
* | |
* Adds a external-link icon to external links only. | |
* Related post: https://jeroensormani.com/adding-a-icon-to-external-links/ | |
*/ | |
function ace_add_external_link_icon( ) { | |
wp_register_script( 'external-link-icon', false ); | |
wp_enqueue_script( 'external-link-icon' ); | |
wp_add_inline_script( 'external-link-icon', " | |
function externalLinkIcon() { | |
var icon = '<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 20 20\">' + | |
'<path d=\"M9 3h8v8l-2-1V6.92l-5.6 5.59l-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z\" fill=\"currentColor\"/>' + | |
'</svg>'; | |
// Check if content is available | |
if (!document.querySelector('.entry-content')) return; | |
var links = document.querySelector('.entry-content').querySelectorAll('a'); | |
[...links].forEach(function (link) { | |
if (link.host !== window.location.host) { | |
link.innerHTML += ' ' + icon; | |
} | |
}); | |
} | |
window.addEventListener('load', externalLinkIcon, false); | |
" ); | |
} | |
add_action( 'wp_enqueue_scripts', 'ace_add_external_link_icon' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment