Come aggiungere il browser dell'utente e le classi del sistema operativo in Body Class di WordPress

Quando sviluppi temi WordPress, a volte potresti aver bisogno del browser dell'utente e delle informazioni del sistema operativo per modificare determinati aspetti del tuo design usando CSS o jQuery. WordPress è in grado di farlo per te. In questo articolo, ti mostreremo come aggiungere il browser dell'utente e le classi del sistema operativo nella classe del corpo di WordPress.

Di default WordPress genera classi CSS per diverse sezioni del tuo sito web. Fornisce anche filtri, in modo che gli sviluppatori di temi e plugin possano agganciare le proprie classi. Utilizzerai il body_class filtro per aggiungere informazioni sul browser e sul sistema operativo come classe CSS.

La prima cosa che devi fare è aggiungere il seguente codice nel file functions.php del tuo tema.

 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'); 

La prima parte di questo script rileva il browser dell'utente e lo aggiunge a classi $. La seconda parte rileva il sistema operativo dell'utente e lo aggiunge a classi $ anche. L'ultima riga utilizza WordPress body_class filtro per aggiungere classi.

Ora è necessario aggiungere la classe del corpo al Tag HTML nel tuo tema header.php file. Sostituisci la linea del corpo nel tuo file modello con questo codice:

Nota che se stai lavorando con un tema iniziale come underscore o framework a tema ben codificato come Genesis, allora il tema avrà già la funzione body class nel tag body. Una volta implementato il codice, sarà possibile visualizzare le classi del browser e del sistema operativo con il tag body nell'origine HTML. Noterai anche che ci saranno altre classi aggiunte al tag body da WordPress.

Ora puoi modellare le classi per diversi browser e sistemi operativi o usarli come selettori in jQuery. Speriamo che questo articolo ti abbia aiutato a rilevare il browser dell'utente e le informazioni del sistema operativo in WordPress.

Se sei appena agli inizi con lo sviluppo del tema WordPress, allora potresti anche dare un'occhiata alla nostra introduzione a Sass e WordPress Body Class 101 per i nuovi designer di temi. Facci sapere se hai commenti o domande lasciando un commento qui sotto.

Fonte: Justin Sternberg