Jak tworzyć responsywne szablony w wordpressie ?

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 } ?>
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (Brak ocen)
Loading...

Adres Biura
360px Sp.z.o.o.
ul. Sadowa 10,
41-200 Sosnowiec

NIP: 6443546391
REGON: 381910184

Adres Korespondencyjny
ul. Gwiezdna 8/10,
Sosnowiec 41-218