E-Mail Adressen im HTML schützen, inkl. WordPress Shortcode

E-Mails ins Frontend ausgeben ist immer eine unangenehme Sache. Crawler holen sich deine E-Mail und dann erhälst du ziemlich viel Spam. Um deine E-Mail Adresse ein bisschen zu schützen kann man versuchen sie im HTML zu verstecken und nur für echte Menschen lesbar machen.

E-Mail verstecken als praktischer WordPress Shortcode

Damit alles aus dem Gutenberg oder Elementor funktioniert habe ich einen handlichen Shortcode gebaut, den du wie folgt verwenden kannst: [jl_protected_mail email="[email protected]"]

function print_protected_email( $atts ) {

    $atts = shortcode_atts( 
        [
            // Fallback default E-Mail z.b. ein allgemeiner Theme Option Wert (jl_theme_email)
            'email' =>  get_theme_mod('jl_theme_email')
        ], 
    $atts );
    
    if ( '' !== trim($atts['email']) && filter_var($atts['email'], FILTER_VALIDATE_EMAIL) ) {
        $email = $atts['email'];
        $explodeArr = explode('@',$email);
        $emaildomain = $explodeArr[1];
        $emailname = $explodeArr[0];

        $output = '<a href="#" 
        class="cryptedmail" 
        style="display: inline"
        onclick="window.location.href = \'mailto:\' + this.dataset.name + \'@\' + this.dataset.domain; return false;"
        data-name="'. $emailname .'" 
        data-domain="'. $emaildomain .'">
            <span><span data-name="'. $emailname .'" data-domain="'. $emaildomain .'"></span></span>
        </a>';
        
        return $output;
    }
}
add_shortcode( 'jl_protected_email', 'print_protected_email' );

Zusätzlich brauchst du noch dieses CSS

.cryptedmail > span > span:after {
    content: attr(data-name) "@" attr(data-domain); 
}

Idee / Code stammt von: https://stackoverflow.com/questions/163628/making-email-addresses-safe-from-bots-on-a-webpage

Filter: Ersetze automatisch alle E-Mails im the_content mit diesem Shortcode

Pixelbarts Filter um auf alle E-Mails einen Shortcode zu legen:

add_filter('the_content', function ($content) {

    // @source: https://stackoverflow.com/a/15050961
    $regex = '/[a-z\d._%+-]+@[a-z\d.-]+\.[a-z]{2,4}\b/mi';

    preg_match_all($regex, $content, $matches, PREG_SET_ORDER, 0);

    if ($matches) {
        $results = [];
        $shortcodes = [];

        foreach ($matches as $match) {
            $results[] = $match[0];
        }

        // Die doppelten Einträge entfernen
        $results = array_unique($results);

        foreach ($results as $result) {
            $shortcodes[] = sprintf('[jl_protected_email email="%s"]', $result);
        }

        // Die E-Mails mit den Shortcodes ersetzen
        $content = str_replace($results, $shortcodes, $content);
    }

    return $content;
});