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

Die statementen zum Implementieren von Modernizr geben an, dass ich dem -Element class="no-js" hinzufügen soll.

Gibt es eine Möglichkeit, dies in WordPress mit einem Hook oder Filter zu tun? Wenn es mir möglich wäre, würde ich das lieber tun, ohne die Theme-Dateien zu bearbeiten.

Solutions Collecting From Web of "Modernizr und WordPress – Wie kann ich dem HTML-Element eine CSS-class hinzufügen?"

Dies ist nicht die richtige Antwort, aber Sie können einen Hook für den Filter ” language_attributes . Diese Aktion wird am -Tag ausgetriggers, und was sie tut, ist einfach die lang=en Zeichenfolge, z. Sie können den Code anhängen und die Zeichenfolge durch Ihre CSS-class ersetzen:

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

Dies funktioniert nur, wenn Ihr Thema der Checkliste für die Theme-Entwicklung von WordPress folgt. Manchmal folgen Leute diesem nicht und das bricht die Technik.

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

Obwohl ich Modernizr nicht verwende, verwende ich das No-Js-Erkennungsskript ab dem Alter von sechsundzwanzig, also ist die Einschließung ziemlich gleich. Auf diese Weise müssen Sie sich nicht darum kümmern, die function zu entfernen, die zu wp_head oder wp_enqueue_scripts hinzugefügt wurde, da dies automatisch geschieht, wenn Sie den Filter entfernen.

Hinzufügen Entfernen Filter Ansatz

 /** * 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 "\n"; } }, 0); 

Thema Unterstützung Ansatz

Eine andere Option könnte sein, dies unter Verwendung von 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 "\n"; }