Premium, Treści

Jak rozpoznawać przeglądarkę i dodawać jej nazwę jako klasę w WordPressie?

  • Poziom trudności:

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

10 PLN

Projektując szablon warto pamiętać o podstawowych możliwościach jakie daje nam mechanizm WordPressa. W zasadzie nie trzeba szukać specjalnych metod rozpoznawania przeglądarki z której korzysta użytkownik, bo mechanizm podstawowy zapewne działa na Twojej stronie. Wystarczy dodać fragment kodu, który dopisze odpowiednią klasę i pozwoli się do niej odwołać w kodzie CSS.

Na początek kilka podstawowych faktów. Body Class (body_class) to standardowa funkcja na WordPressie, której wywołanie można znaleźć w prawie każdym pliku header.php. Jeśli Twój szablon nie posiada takiego elementu wystarczy, że podmienisz:

<body>

na:

<body <?php body_class($class); ?>>

Dodanie tej funkcji do znacznika <body> znacznie rozbudowuje ten znacznik. Wystarczy, że skorzystasz z podglądu źródła strony i okaże się, że do body zostały dopisane przykładowo takie klasy jak: „home blog logged-in admin-bar customize-support” i być może także inne. W zależności od rodzaju strony WordPress sam umieści w <body> właściwe klasy. Przykładowo jeśli jesteś na stronie głównej to możesz być pewien, że zostanie dodana klasa „home”, a gdy otworzysz statyczną stronę, wtedy pojawi się tam klasa „page”.

Poniżej znajdziesz spis klas, które WordPress może dodać:

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(nazwa-uzytkownika) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(nazwa szablonu) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(numer strony) {}
.page-paged-(numer strony) {}
.category-paged-(numer strony) {}
.tag-paged-(numer strony) {}
.date-paged-(numer strony) {}
.author-paged-(numer strony) {}
.search-paged-(numer strony) {}

Teraz wystarczy drobna modyfikacja aby oprócz standardowych klas zostały dodane klasy odpowiadające otwieranej przeglądarce. Aby to zrobić musisz wejść do pliku functions.php i dopisać w obrębie PHP następujący kod:

add_filter('body_class','browser_body_class');
function 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';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}

Teraz możesz przy pomocy tej metody dopisać do pliku style.css (sekcja Wygląd -> Edytor) przykładowo

.ie #nav {jeśli potrzebujesz dokonać poprawek wartości padding lub margin - tu wpisz swój kod CSS}

Możesz także dostosowywać różne elementy witryny pod użytkowników określonych przeglądarek np. prowadząc sklep internetowy z elektroniką dodać dodatkowy banner reklamowy z akcesoriami Apple widoczny tylko dla tych, którzy otworzą Twoją stronę w przeglądarce Safari.

UDOSTĘPNIJ

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

10 PLN