How To Style Links in Content Area With <span> Tag Automatically?

Question

This is like a suicide mission for me.

I have to avoid CSS because I want to build a website that will help me to create HTML templates for email campaigns.

Email readers can't read CSS, so CSS is not a solution for me.

When I put in WP content editor this:

<a target="_blank" href="http://google.com">My Anchor text</a> 

I want to see something like this on the front-end:

<a target="_blank" href="http://google.com"><span style="font-family:Arial,Verdana;font-size:12px;font-weight:12px;color:#337D98;"><strong>My Anchor text</strong></span></a>

Does anybody have an idea how to solve this?

Answer 1

If you decided to go that route, this should work. Just add this to your themes functions.php file:

// Add Shortcode
function link_inline_styling( $atts , $content = null ) {

    // Attributes
    extract( shortcode_atts(
        array(
            'url' => '',
            'target' => '',
        ), $atts )
    );

    // Code
return '<a href="'.$url.'" target="'.$target.'" ><span style="font-family:Arial,Verdana;font-size:12px;font-weight:12px;color:#337D98;"><strong>'.$content.'</strong></span></a>';
}
add_shortcode( 'link', 'link_inline_styling' );

and then in your content area you can use the shortcode like this:

[link url="http://google.com" target="_blank"]My Anchor text[/link]

The output will be this:

<a href="http://google.com" target="_blank" ><span style="font-family:Arial,Verdana;font-size:12px;font-weight:12px;color:#337D98;"><strong>My Anchor text</strong></span></a>