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