jquery - How Do I change Markup of a link in Wordpress

admin管理员组

文章数量:1420973

first off, I am sorry if this question has been asked before, don't seem to get it.

I would like to change the markup of link in Wordpress to something like this

<a href="#" class="s1  s1--top" data-hint="tooltip here">Just Words.</a>

Where the href would have two extra classes, and I would be able to add words to the data hint dynamically (through the text editor). - It's a tooltip

I have enqueued the stylesheet of the CSS, my main challenge is how to append those extra classes to the a tag, thanks.

I don't mind if someone can help me with JQuery, and lastly, how do I make the tooltip show up.

first off, I am sorry if this question has been asked before, don't seem to get it.

I would like to change the markup of link in Wordpress to something like this

<a href="#" class="s1  s1--top" data-hint="tooltip here">Just Words.</a>

Where the href would have two extra classes, and I would be able to add words to the data hint dynamically (through the text editor). - It's a tooltip

I have enqueued the stylesheet of the CSS, my main challenge is how to append those extra classes to the a tag, thanks.

I don't mind if someone can help me with JQuery, and lastly, how do I make the tooltip show up.

• jquery
• css

Share Improve this question asked Jul 11, 2019 at 12:27 Ahmed FaruqAhmed Faruq 533 bronze badges 2

• 1 Where is the link coming from? Is it generated by a theme or a plugin? – Kumar Commented Jul 11, 2019 at 12:29
• Yh I think, it's basically any link within my post or pages. E.g If I add a link within my post, the class should automatically append to the a tag – Ahmed Faruq Commented Jul 11, 2019 at 12:48

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

First, Create a js folder, at the same level as style.css and inside it Create a main.js file.
For the tooltip, use jQuery UI Tooltips included in WordPress.
You have to call it inside your functions.php file like this :

/**
 * Enqueue jQuery UI Tooltips.
 */
function my_scripts() {
    wp_enqueue_script( 'jquery-ui-tooltip' );
    wp_enqueue_script( 'main', get_theme_file_uri( '/js/main.js' ), array( 'jquery' ), filemtime( get_theme_file_path( '/js/main.js' ) ), true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

As you can see, we have also enqueue the main.js file ;-)
Now, open your main.js file and add the following :

(function ($) {

    $( 'a[href="#"]' ).addClass( 's1  s1--top' );
    $( '.s1' ).tooltip();
    /* OR $( '.s1--top' ).tooltip(); */
    /* OR $( '.s1.s1--top' ).tooltip(); */
    /* OR $( 'a[href="#"]' ).tooltip(); */
    /* OR $( 'a[href="#"].s1' ).tooltip(); */
    /* OR $( 'a[href="#"].s1--top' ).tooltip(); */
    /* OR $( 'a[href="#"].s1.s1--top' ).tooltip(); */

})(jQuery);

FOR THIS TO WORK, YOU SHOULD CHANGE data-hint to title like so :
<a href="#" title="tooltip here">Just Words.</a>
Classes will be added by jQuery and the format will became :
<a href="#" class="s1 s1--top" title="tooltip here">Just Words.</a>

-----EDIT-----
For the script that you are using, you just need to enqueue the hint.css.
Put the file in a css folder at the same level as style.css and in your functions.php add:

/**
 * Enqueue HINT.CSS
 */
function hint_css() {

    wp_enqueue_style( 'hint', get_theme_file_uri( '/css/hint.css' ), array(), filemtime( get_theme_file_path( '/css/hint.css' ) ) );

}
add_action( 'wp_enqueue_scripts', 'hint_css' );

Now, I think that you know how to make it work as you want ;-)

IMPORTANT NOTE
Remember to create a child theme for all your modifications or they will be removed on the next update of the theme that you are using (unless you are developing a theme).

SYA :)

Its very simple just use the below jQuery code:

$("a").addClass("s1");
$("a").addClass("s1--top");

本文标签： jqueryHow Do I change Markup of a link in Wordpress