Zagadnienie jest nieco zbyt skomplikowane aby można było opisać je w jednym krótkim wpisie. Wszystko zależy od tego, czy posiadasz już jakieś doświadczenie programistyczne, potrafisz tworzyć szablony i znasz nieco css. Do osób, które podstawy programistyczne już posiadają, i porywają się na takie zadanie, chcielibyśmy zaprezentować dwie przydatne funkcje.
Tak ciekawie przemyślany jest WordPress, że w większości szablonów o ile nie robił tego kompletny amator, mamy specjalną funkcję, która dodaje różnego rodzaju klasy do ciała dokumentu (body).
W konsoli wygląda to mniej więcej tak:
Jak widzimy mamy tutaj podane jaki to jest szablon, jaki post, czy jesteśmy zalogowani i różne inne klasy. To znacząco ułatwia stylowanie niektórych elementów na stronie.
Idąc tym tropem postanowiliśmy do body dorzucić jeszcze jedną klasę – która wykrywa czy strona jest uruchomiona na urządzeniu mobilnym czy też nie.
Wystarczy poniższy kod wkleić do functions.php
function 360px_bodyclass_names( $classes ) { if ( wp_is_mobile() ) { $classes[] = 'mobile'; return $classes; } else { return $classes; } } add_filter( 'body_class', '360px_bodyclass_names' );A następnie można śmiało stylować elementy zaczynając deklaracje od .mobile – przykładowo:
.mobile .container { width: 80%; }Wprawne programistyczne oko zauważy, że konstrukcja tego skryptu jest bardzo prosta, z racji użycia pewnej funkcj a mianowicie wp_is_mobile();
wp_is_mobile();
Tak moi dordzy, nie mylicie się, członkowie zespołów programistycznych WordPress pomyśleli i o tym, i dodali do core, funkcję wykrywającą, czy odtwarzamy stroną na desktopie czy na urządzeniu mobilnym. Dzięki takiej funkcji możemy w php banalnie prosty sposób ukrywać elementy czy całe sekcje renderowanej strony www. Równie dobrze można z użyciem tej funkcji pokusić się o napisanie całkowicie różnych wersji szablonu dla wersji mobilnej i desktopowej.
Przykład:<?php if(wp_is_mobile()) { ?> <main> <!-- Treść szablonu dla urządzeń mobilnych --> </main> <?php } else { ?> <main> <!-- Treść szablonu dla komputerów --> </main> <?php } ?>