it-swarm.com.de

Modernizr und WordPress - Wie kann ich dem HTML-Element eine CSS-Klasse hinzufügen?

In den Anweisungen zum Implementieren von Modernizr wird festgelegt, dass dem Element class="no-js"<html> hinzugefügt werden soll.

Gibt es eine Möglichkeit, dies in WordPress mithilfe eines Hooks oder Filters zu tun? Wenn möglich, würde ich dies lieber tun, ohne die Designdateien zu bearbeiten.

4
Tex

Dies ist nicht genau die Antwort, aber Sie können einen Haken für language_attributes filter verwenden. Diese Aktion wird am Tag <html> ausgelöst und gibt einfach die Zeichenfolge lang=en aus, zum Beispiel. Sie können sich darauf einlassen und die Zeichenfolge durch Ihre CSS-Klasse ersetzen, wie folgt:

add_filter('language_attributes', 'modernizr');
function modernizr($output) {
    return $output . ' class="no-js"';
}

Dies funktioniert nur, wenn Ihr Theme der WordPress Theme Development Checklist folgt. Manchmal folgen Leute diesem und jenem nicht, was die Technik bricht.

7
Anh Tran

Ein bisschen zu spät zum Spiel hier, aber nur um @ Rilwis Antwort hinzuzufügen, könnten Sie das Skript zu einer Funktion hinzufügen, die prüft, ob die no-js Sprachattribute hinzugefügt wurden oder nicht.

Obwohl ich Modernizr nicht verwende, verwende ich das Erkennungsskript no-js ab 16 Jahren, so dass die Einbeziehung ziemlich gleich ist. Auf diese Weise müssen Sie sich nicht um das Entfernen der zu wp_head oder wp_enqueue_scripts hinzugefügten Funktion kümmern, da dies automatisch geschieht, wenn Sie den Filter entfernen.

Hinzufügen Entfernen des Filteransatzes

/** 
 * Javascript Detection Filter
 * 
 * remove_filter( 'language_attributes', 'lang_atts_js_detect' ); 
 */ 
add_filter( 'language_attributes', 'lang_atts_js_detect' );
function lang_atts_js_detect($output) {
    return $output . ' class="no-js"';
}
add_action( 'wp_head', function() {
    if ( has_filter( 'language_attributes', 'lang_atts_js_detect' ) ) {
        echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
    }
}, 0);

Theme Support-Ansatz

Eine andere Möglichkeit könnte sein, dies mit current_theme_supports zu tun.

/** 
 * Javascript Detection Theme Support
 * 
 * add_theme_support( 'js-detect' ); 
 */ 
add_action( 'init', function() {
    if ( current_theme_supports( 'js-detect' ) && !is_admin() )
        add_filter( 'language_attributes', 'lang_atts_js_detect_class' );
        add_action( 'wp_head', 'lang_atts_js_detect_script', 0 );
}
function lang_atts_js_detect_class($output) {
    return $output . ' class="no-js"';
}
function lang_atts_js_detect_script() {
    echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
}
2
Bryan Willis