Jak tworzyć responsywne szablony w wordpressie ?

11 lutego 2019

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.

Funkcja dodająca klasę mobile do body

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 } ?>