today 16.02.2017

Po zainstalowaniu najnowszej wersji CMS Joomla 3.6.5 mamy w panelu administracyjnym tylko, albo aż 2 szablony, które możemy wykorzystać do budowy naszej strony. Z doświadczenia wiem, że jest to zdecydowanie niewystarczający zasób i konieczne jest znalezienie nowych szablonów, lub modyfikacja istniejących.

Co do nowych szablonów, to również nigdy nie będzie tak, że w 100% będzie nam odpowiadał, zawsze jakieś miany są nieuniknionym etapem przygotowania naszego serwisu.

Poniżej postarama się w prosty spobó pokazać jak zmidyfikować sablon i dostosować go do naszych oczekiwań

Wybór szablonu i kopia zapasowa

Zanim zaczniemy jakiekolwiek zmiany warto zrobić kopie zapasową folderu szablonu, który chcemy zmodyfikować. W razie jakichkolwiek niepowodzeń, czy problemów można wrócić, lub podejrzeć jak było w oryginale.
A więc kopiujemy cały folder z szablonem beez3

 kopia katalogu szablonu joomla

Mając już skopiowany folder, możemy śmiało rozpoczać modyfikację i zmianę naszego szablonu beez3. A więc wchodzimy do środka katalogu i widać, że jest tam nawet sporo plików i folderów. Do zmiany potrzebne nam będzie w tym przypadku plik index.php, oraz folder css.

struktura katalogu szablonu joomla

Edycja kodu

Po otwarciu pliku index.php może wydawać się, że jest tego bardzo dużo, i ciężko się w tym kodzie odnaleźć. Nic bardziej mylnego! Tak na dobrą sprawę to całą zawartość body i większość skryptu php możemy usunąć. I tak właśnie zrobimy. Zanim to skasujemy warto zostawić te elementy, które odpowiedzialne są za wyświetlanie zawartości merytorycznej, wiadomości oraz pozycje dla modułów.


// wyświetla komunikaty na stronie
< jdoc:include type="message" />

//wyświetla zawartość główną na stronie
< jdoc:include type="component" />

//pozycje dla modułów
< jdoc:include type="modules" name="position-6" />

Mając te 3 elementy, możemy całą zawartość z body usunąć. A więc zabieramy się do tworzenia naszej strony od zera. Chyba nie odkryję Ameryki, jak powiem, że dobrzebyłoby bydować naszą stroną o jakiś framework do responsywnego wyświetlania strony. Można się kłócić, kóry lepszy, ale ja zastosuje Bootstrap.

Nie chcę, żeby jakieś elementy były zaciągane z zewnątrz, a więc pobieram pliki bootstrapa, jquery i ładuję do struktury katalogu. I tak:

  • bootstrap.min.css do folderu css
  • bootstrap.min.js do folderu javascript
  • jquery.min.js do folderu javascript
Mając już na naszym serwerze te potrzebne do skonstruowania strony pliki dodajemy do istniejącego skryptu php z źródłami innych plików js oraz css

?php
$this->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/bootstrap.min.css', 'text/css', 'screen');

$this->addScript($this->baseurl . '/templates/' . $this->template . '/javascript/bootstrap.min.js');
$this->addScript($this->baseurl . '/templates/' . $this->template . '/javascript/jquer.min.js');
?>

Lub bezpośrednio w znaczniku HEAD tuż pod meta tagami źródła naszych plików.

Budowanie struktury strony

Ostatni etap to jużdowolne budowanie strony w moim przypadku w oparciu o bootstrap. Nie będę tutaj całego kodu pokazywać, bo to już każdy tworzy według własnych koncepcji i gusta. Należy jednak pamiętać, żeby w odpowiednim miejscu strony dodać nasze zostawione wyżej linie kodu odpowiedzialne za wyświetlanie wiadomości, contentu oraz modułów.

Przykład takiej kompetnej struktury:

< div class="szablon-joomla">
< header>
	< div class="container">
    	< div class="row">
        	< div class="col-md-4">
             Logotype
            < /div>
            < div class="col-md-8">
            	Menu główne:
                < jdoc:include type="modules" name="position-0" />
            < /div>
        < /div>
    < /div>
< /header>
< div class="content">
	< div class="container">
    	< div class="row">
        	< div class="col-md-12">
            	< jdoc:include type="message" />
                < jdoc:include type="component" />
            < /div>
        < /div>
    < /div>
< /div>
< footer>
	< div class="container">
    	< div class="row">
        	< div class="col-md-12">
            	Menu stopka
                < jdoc:include type="modules" name="position-12" />
            < /div>
            < div class="col-md-12">
            	< h2>
                	Copyright © 2017
                < /h2>
            < /div>
        < /div>
    < /div>
< /footer>
< /div>

Mamy kompletny szablon w pełni responsywny, który wyświetli na stronie zawartośc główną, moduł o pozycji "position-0", "position-12". Przypisywanie modułów do strony to już trochę inny temat, dla początkujących warto zapoznać się z tematem.

Można by jeszcze nadmienić jedeną funkcję, która na pewno jest pomocna, w przypadku wielu pozycji, wielu modułów, oraz umiejscowienia ich na stronie. A mianowicie funkcja if. Działanie jest bardzo proste, którego warunkiem jest sprawdzanie, czy dany moduł jest aktualnie dostępny dla danej pozycji na danej stronie.


< ?php if ($this->countModules('position-12')) : ?>

Najprostsze zastosowanie możemy zobrazować w przykładzie:


< ?php if ($this->countModules('position-12')) : ?>
	< div id="top">
		< jdoc:include type="modules" name="position-12" />
	< /div>
< ?php endif; ?>

A więc jeśli moduł z pozycją position-12 jest publikowani i wyświetlany na danej stronie to cały powyższy skrypt będzie wyświetlany na stronie. Jesli żadnego modułu nie ma z przypisaną pozycją position-12, lub nie będzie wyświetlany na danej stronie nie będzie wyświetlany div id="top", jak i cała jego zawartość.