How to Prevent Comment Authors' Links from Being Indexed in WordPress (jQuery Version)

Hello! In this article, we’ll explore another method to hide comment author links to their websites. Previously, we looked at ways to do this using plain JavaScript and CSS. But this time, we’ll use the power of the jQuery framework.

As before, all code edits will be done with the "Twenty Twelve" theme installed.

These operations are fairly simple, and I don’t think you’ll have any major issues. But if you do — feel free to ask questions in the comments.

Before reading this article, I recommend checking out “How to prevent indexing of comment author links in WordPress” as the two topics are closely related.

First. Open the theme’s functions file: “/wp-content/themes/twentytwelve/functions.php”. At the very end of the file, add the following function:

function my_get_comment_author_link( $comment_ID = 0 ) {
	$url    = get_comment_author_url( $comment_ID );
	$author = get_comment_author( $comment_ID );

	if ( empty( $url ) || 'http://' == $url )
	{
		$return = $author;
	}
	else
	{
		$return = "<span class='s-link' data-link="".str_replace('http://', '_', $url)."">".$author."</span>";
	}

	return apply_filters( 'my_get_comment_author_link', $return, $author, $comment_ID );
}

This function does the same thing as “my_get_comment_author_link” in this article, except for one line:

$return = "<span class='s-link' data-link="".str_replace('http://', '_', $url)."">".$author."</span>";

Here, we’re using the “data-link” attribute to store the link.

Next, locate the function “twentytwelve_comment(...)” in the same file, and replace “get_comment_author_link()” with “my_get_comment_author_link()”.

At this point, instead of regular links, the following HTML will appear:

<span class='s-link' data-link="_example.com/">Semen</span>

In your case, the name and URL will differ, of course.

Second. Let’s enqueue the jQuery framework:

if(function_exists('my_wp_enqueue_scripts') == FALSE):
	function my_wp_enqueue_scripts()
	{
		wp_enqueue_script("jquery");
	}
	add_action('wp_enqueue_scripts', 'my_wp_enqueue_scripts');
endif;

Insert this function just below the previous one.

Third. And now, probably the most interesting part. We need to find all the span elements on the page with the class “s-link” and convert them into traditional a tags. For this, we’ll use the following code:

if(function_exists('my_wp_head') == FALSE):
	function my_wp_head()
	{
		?>
		<script type="text/javascript">
		jQuery(document).ready(function()
		{
			jQuery('.s-link').each(function(i){
				jQuery(this).parents('.fn').html('<a href="' + jQuery(this).data('link').replace("_","http://") + '" target="_blank"">' + jQuery(this).text() + '</a>');
			});
		});
		</script>
		<?php
	}
	add_action('wp_head', 'my_wp_head');
endif;

Let’s break this down. Using:
jQuery('.s-link') — we select all elements on the page with the class “s-link”
each(...) — this lets us loop through all matched elements and apply a callback function:

jQuery(this).parents('.fn').html('<a href="' + jQuery(this).data('link').replace("_","http://") + '" target="_blank"">' + jQuery(this).text() + '</a>');

Here:
jQuery(this) — refers to the current element with class “s-link”
parents('.fn') — finds the parent element with class “.fn”
html(...) — replaces its inner content with the new a tag

We build the link using:
jQuery(this).data('link') — gets the value of the data-link attribute
jQuery(this).text() — retrieves the author’s name

This technique is useful because the comment author won't realize their link is actually just a span with a custom attribute. On hover, it behaves like a normal link. Only viewing the page source will reveal the trick.

However, there’s one caveat: we don’t really know how search engine bots handle this. Do they render the DOM like browsers, or just read the raw HTML?

I assume they currently see plain HTML/JavaScript — without executing it.