My current method involves utilizing the WordPress antispambot code from their Code Reference:
https://developer.wordpress.org/reference/functions/antispambot/
While the code is functional, I am interested in customizing the appearance of the email addresses that it generates. I aim to apply a specific style to obfuscated email addresses located in the footer, and a different style to those within the body of a page.
My attempt involved incorporating a title attribute in the <a> tag within the code snippet below:
function wpcodex_hide_email_shortcode( $atts, $content = null ) {
if ( ! is_email( $content ) ) {
return;
}
return '<a href="mailto:' . antispambot( $content ) . '" title="encrypted-email">' . antispambot(
$content ) . '</a>';
}
add_shortcode( 'email', 'wpcodex_hide_email_shortcode' );
Subsequently, I attempted to style the email addresses using the CSS provided below:
/* GENERAL STYLE FOR ENCRYPTED EMAILS */
a[title="encrypted-email"]{
color: #4472e6 !important;
text-decoration: none !important;
}
a[title="encrypted-email"]:hover{
text-decoration: underline !important;
}
/* STYLE FOR ENCRYPTED EMAILS IN FOOTER */
.fusion-footer-widget-area .custom-html-widget a[title="encrypted-email"]{
color: #ff0000;
text-decoration: none !important;
}
.fusion-footer-widget-area .custom-html-widget a[title="encrypted-email"]:hover{
color: #e4d06f;
}
However, this approach resulted in all encrypted emails, including those in the footer, adopting the 'General' styles.
I am now contemplating whether this method is the most effective way to implement distinct CSS styles for encrypted emails in varying sections of the page, such as body text versus footer content.
Additionally, I am uncertain if my CSS implementation is correct.
UPDATE
The HTML generated corresponds to the following structure:
<ul style="list-style-type: none; margin: 0; padding: 0;">
<li style="font-size: 16px; margin-bottom: 0px;"><a
href="mailto:wbu@bd"
title="encrypted-email">wb&u@bd</a></li>
</ul>