När du utvecklar WordPress-teman kan du ibland behöva information om användarens webbläsare och operativsystem för att modifiera vissa aspekter av din design med hjälp av CSS eller jQuery. WordPress kan göra det åt dig. I den här artikeln visar vi hur du lägger till klasser för användarens webbläsare och OS i WordPress body class.
Som standard genererar WordPress CSS-klasser för olika delar av din webbplats. Det tillhandahåller också filter, så att tema- och plugin-utvecklare kan koppla sina egna klasser. Du kommer att använda body_class-filtret för att lägga till information om webbläsare och operativsystem som CSS-klasser.
Det första du behöver göra är att lägga till följande kod i din temas functions.php-fil.
function mv_browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = 'lynx';
elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) {
$classes[] = 'ie';
if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version))
$classes[] = 'ie'.$browser_version[1];
} else $classes[] = 'unknown';
if($is_iphone) $classes[] = 'iphone';
if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) {
$classes[] = 'osx';
} elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) {
$classes[] = 'linux';
} elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) {
$classes[] = 'windows';
}
return $classes;
}
add_filter('body_class','mv_browser_body_class');
Den första delen av detta skript upptäcker användarens webbläsare och lägger till den i $classes. Den andra delen upptäcker användarens operativsystem och lägger till det i $classes också. Den sista raden använder WordPress body_class-filtret för att lägga till klasser.
Nu behöver du lägga till body-klassen till HTML-taggen <body> i din temas header.php-fil. Ersätt body-raden i din mallfil med den här koden:
<body <?php body_class(); ?>>
Notera att om du arbetar med ett starttema som underscores eller välkodade temaramverk som Genesis, så kommer ditt tema redan att ha funktionen för kroppsklasser i kroppstaggen. När koden har implementerats kommer du att kunna se webbläsar- och operativsystemklasser med kroppstaggen i HTML-källan. Du kommer också att märka att det kommer att finnas andra klasser som läggs till kroppstaggen av WordPress.
Nu kan du styla klasserna för olika webbläsare och operativsystem eller använda dem som selektorer i jQuery. Vi hoppas att den här artikeln hjälpte dig att upptäcka information om användarens webbläsare och operativsystem i WordPress.
Om du precis har börjat med utveckling av WordPress-teman, kanske du också vill titta på vår introduktion till Sass och WordPress Body Class 101 för nya temadesigners. Låt oss veta om du har några synpunkter eller frågor genom att lämna en kommentar nedan.
Källa: Justin Sternberg
mrcio
Av någon anledning visar Safari på en Mac gecko linux
WPBeginner Support
Om du har ett säkerhetstillägg eller CDN kan det skicka den informationen till webbläsaren istället för korrekt information.
Admin
Adam
Vad händer om användaren använder Edge? Ersättningswebbläsaren för IE.
WPBeginner Support
This is an older article but for Edge, it is: is_edge following the above formatting
Admin
Adam
Lätt nog. Tack!
Mel
Hi.. I’ve been a fan of this website for almost 3 years.. by the way any update on this function for edge browser? thanks
Mer kraft!!!
WPBeginner Support
Hej Mel,
Du kan lägga till
$is_edgei koden för att upptäcka Microsoft Edge.Admin
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
This is what i want exacly… thank you so much…
best ever
Bill Robbins
Detta är ett underbart sätt att finjustera stilar för enskilda webbläsare. Den enda stora nackdelen är att det kan slå tillbaka när det används med vissa cache-plugins/system. Du kommer att sluta tillämpa stilar avsedda för en webbläsare på alla webbläsare eftersom body-taggen kommer att cachas precis som resten av innehållet på sidan.
WPBeginner Support
Bill, Bra poäng. Vi letar efter en alternativ lösning och kommer att uppdatera artikeln snart. Tack för att du påpekade detta.
Admin