WordPress vs. Joomla – szablony

Prace nad wpisem trwają a jego treść może się zmieniać.

Tworzenie szablonów dla WordPressa i Joomla! w wielu miejscach znacząco się różni, jednak jest wiele wspólnych cech. Chciałbym w tym wpisie pokazać różnice pomiędzy kluczowymi elementami architektury szablonów. Warto w tym miejscu zauważyć, że niektóre porównania związane są z natywnymi funkcjonalnościami i z pewnością większość braków danego CMS-a można uzupełnić poprzez dostępne rozszerzenia.

Kod

Bardzo istotną różnicą pomiędzy kodem WordPressa i Joomla! jest to, że API WordPressa bazuje głównie na wywołaniach funkcji, podczas gdy w Joomla! najczęściej korzysta się z metod obiektów. Warto też wspomnieć o wykorzystywanych frameworkach. WordPress w zasadzie wymusza tylko użycie frameworka jQuery (oczywiście można korzystać z innych frameworków ale byłoby to podejście nieoptymalne). Joomla! 2.5 korzysta z frameworka MooTools, natomiast Joomla! 3.x korzysta z jQuery oraz Bootstrapa do stylowania kontrolek komponentów.

Struktura

W WordPressie istnieją pewne wymagane pliki, które powinny znaleźć się w szablonie:  style.css i index.php. W wypadku Joomla! teoretycznie w szablonie wystarczyłyby dwa pliki: templateDetails.xml oraz index.php. Plik templateDetails.xml jest bardziej rozbudowanym odpowiednikiem pliku style.css, który poza informacjami o szablonie zawiera też listę pozycji modułów w nim dostępnych oraz listę opcji konfiguracyjnych, automatycznie generowanych w menadżerze szablonów. Jeżeli zatem chcemy szybko stworzyć opcje konfiguracyjne szablonu dla Joomla!, wystarczy znać XML i odpowiednią składnię aby tworzyć podstawowe kontrolki. W WordPressie poza podstawowymi opcjami wymaga to trochę więcej pracy i często także tworzenia własnych rozwiązań.

Wspominałem wcześniej o nadpisywaniu domyślnego zachowania CMS-a – w Joomla! możemy nadpisywać wygląd podstron komponentów poprzez pliki w katalogu html (przykładowo nadpisanie widoku artykułu odbywa się poprzez plik html/com_content/article/default.php). W nim gromadzimy wszystkie pliki, które nadpisują oryginalne pliki z komponentów, modułów i samej Joomla! (choć w ograniczony sposób, bo w zasadzie można tak nadpisać głównie kontenery modułów i stronicowanie).

Konfiguracja szablonu

W wypadku WordPressa konfigurację szablonu możemy przechowywać w tabeli opcji lub wykorzystać Theme Modification API. W Joomla! konfiguracja szablonów przechowywana jest w oddzielnej tabeli #__template_styles, która jest ściśle powiązana z zawartością pliku XML szablonu. Sporą wadą tego podejścia jest to, że pola konfiguracji nie mogą być w Joomla! tworzone dynamicznie. Warto zauważyć, że w Joomla! możemy wykorzystać w jednej witrynie wiele szablonów – możemy przypisywać szablony do pozycji menu. Dzięki temu można łatwo stworzyć oddzielny szablon dla strony głównej i oddzielny szablon dla reszty podstron.

Menu

W WordPressie menu generowane jest jako element szablonu z użyciem odpowiednich funkcji (wp_nav_menu). W wypadku Joomla! menu jest najczęściej dodatkowym modułem, który może być przypisany do konkretnych podstron.

Miejsce na widżety i moduły

W obu CMS-ach musimy umieścić kod, który wstawi nam odpowiednie panele boczne lub pozycje modułów. W wypadku WordPressa każdy panel boczny definiujemy wraz z wszystkimi parametrami w kodzie szablonu najczęściej w pliku functions.php, w wypadku Joomla! pewne cechy pozycji modułów określamy bezpośrednio w pliku generującym kod HTML pozycji modułów, chodzi tutaj głównie o:

  • rodzaj kontenerów dookoła modułów
  • dodatkowe parametry przekazywane dla danej pozycji modułów

Przykładowa instrukcja zamieniana na pozycję modułów w Joomla!:

<jdoc:include type="modules" name="sidebar" style="none" param="test" />

W powyższym wypadku definiujemy pozycję modułów o nazwie sidebar, która nie będzie otaczać modułów dodatkowymi kontenerami (styl none) oraz przekazujemy dodatkowy parametr param o wartości test do funkcji wyświetlającej moduły.

W WordPressie panel boczny definiujemy poprzez funkcję register_sidebar a sam panel generujemy poprzez następujący kod:

<?php dynamic_sidebar( 'sidebar' ); ?>

Warto zwrócić uwagę, że odpowiednikiem znanych z Joomla! styli kontenerów modułów są argumenty funkcji register_sidebar: before_widget, after_widget, before_title i after_title. Choć trzeba przyznać, że nie są one w tej kwestii tak elastyczne i chociazby nie umożliwiają przekazywania dodatkowych argumentów.

Skoro jesteśmy już przy temacie modułów – bardzo ciekawym rozwiązaniem obecnym w Joomla!, które nie ma natywnego odpowiednika w WordPressie są sufiksy klas CSS modułów. Każdy moduł pozwala określić klasy CSS, które będą dodane do kontenera otaczającego dany moduł. Dzięki temu można zastosować różne style CSS dla modułów.

W obu CMS-ach można łatwo sprawdzić czy jest w ogóle sens wyświetlać dany blok widżetów/modułów.

W WordPressie mamy od tego funkcję is_active_sidebar:

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
// kod od panelu bocznego
<?php endif; ?>

Natomiast w Joomla! służy do tego metoda countModules:

<?php if($this->countModules('sidebar') : ?>
// kod od pozycji modułów
<?php endif; ?>

Dla użytkowników WordPressa ciekawostką może być fakt, że metoda countModules pozwala też na bardziej złożone testy np. sprawdzenie czy pozycje sidebar i menu posiadają co najmniej po jednym module:

$this->countModules('sidebar and menu')

Można też sprawdzić czy pozycje sidebar i menu posiadają razem więcej niż 5 modułów:

if ($this->countModules('sidebar + menu') > 5) { ...

Tagi warunkowe

Tagi warunkowe (conditional tags) są znanym i często używanym przez programistów WordPressa sposobem na wykonywanie fragmentów kodu w zależności od podstrony. W wypadku Joomla! takie rozwiązanie nie istnieje, ale też nie istniała ku temu większa potrzeba, gdyż w zasadzie każdy rodzaj podstrony ma swoje pliki widoków, stąd zamiast modyfikować warunki, po prostu modyfikuje się konkretne widoki (najczęściej nadpisując je w katalogu html szablonu).

Osadzanie skryptów i styli CSS

Zarówno w Joomla! jak i w WordPressie powinno się wykorzystywać specjalnie przygotowane metody do osadzania skryptów i styli CSS – dzięki temu można umożliwić działanie wszelakiej maści pluginom, które operują na tych plikach (np. mechanizmy cache).

W Joomla! przed wywołaniem metod dodawania skryptów musimy jeszcze zdefiniować zmienną przechowującą obiekt dokumentu:

$doc = JFactory::getDocument();

I dalej możemy już korzystać z następujących metod:

$doc->addScript('path.js'); // odpowiednik wp_enqueue_script
$doc->addScriptDeclaration('kod js'); // odpowiednik hooków dodających kod do head
$doc->addStyleSheet('path.css'); // odpowiednik wp_enqueue_style
$doc->addStyleDeclaration('kod css'); // odpowiednik hooków dodających kod do head

Jak widać nie ma metod od kolejkowania skryptów i plików CSS – to moim zdaniem spora bolączka Joomla!, gdyż czasem uniemożliwia ona ułożenie plików CSS/JS według naszych potrzeb.

Niezbędne elementy strony

W obu CMS-ach istnieją niezbędne z punktu widzenia elastyki szablonu elementy (CMS musi mieć możliwość umieszczania kodu innych rozszerzeń w odpowiednich miejscach). W wypadku Joomla koniecznie trzeba w szablonie zawrzeć następujące fragmenty kodu:

<jdoc:include type="head" /> // generuje tagi sekcji head
<jdoc:include type="message" /> // generuje systemowe komunikaty np. o błędnych danych logowania
<jdoc:include type="component" /> // generuje zawartość bieżącego komponentu

W wypadku WordPressa są to:

<?php wp_head(); ?> // generuje treść sekcji head
<?php wp_footer(); ?> // generuje treść stopki strony