Z notatnika webmasterki

05 Wrz, 2010

Własna skórka do Joomla!. Odc.1 Absolutne minimum

Zamieszczony przez: Joanna w: Archiwum

Na wiki Joomla! można znaleźć artykuł o tym jak stworzyć skórkę, ale jak zwykle nie do końca mi się w nim wszystko podoba i muszę wtrącić swoje trzy grosze. A ponieważ mimo przeczytania tego i innych artykułów trochę zajęło mi wdrożenie się w temat, to daję sobie do tego prawo.

Podstawowa struktura lików

Absolutne minimum niezbędne do tego, żeby stworzyć nową skórkę w Joomla! jest opisane w zalinkowanym artykule, ale pozwolę sobie usystematyzować. Po pierwsze cała strukturę nowego szablonu (katalogi i pliki) należy umieścić w katalogu templates naszej instalacji Joomla!. W tym celu należy stworzyć tam nowy katalog i umieścić w nim następujące elementy:

  • css/
    • style.css
  • images/
  • index.php
  • templateDetails.xml

I to jest absolutne minimum niezbędne do tego, żeby zaistniała nowa skórka. Oczywiście wymienione powyżej pliki muszą jeszcze mieć jakąś (najlepiej nieprzypadkową) zawartość.

Deklaracja elementów szablonu

Tak sobie nazwałam zawartość pliku templateDetails.xml Jego zawartość pokażę na przykładzie skórki, którą właśnie tworzę:

<?xml version="1.0" encoding="utf-8"?>
<install version="1.0" type="template">
	<name>PZ</name>
	<version>0.0.1</version>
	<creationDate>15/08/10</creationDate>
	<author>Joanna Siwiec-Matuszyk</author>
	<authorEmail>webmaster@bexlab.pl</authorEmail>
	<authorUrl>http://blog.joanna-siwiec.pl</authorUrl>
	<copyright></copyright>
	<license>Private</license>
	<description>Pracownia Złotnicza Tomasz Włodarczyk</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>css/style.css</filename>
	</files>

	<positions>
		<position>footer</position>
		<position>horizontal</position>
		<position>hornav</position>
		<position>right</position>
		<position>top</position>
	</positions>
</install>

Na samym początku jest seria znaczników, które definiują coś w rodzaju metryczki skórki. W sekcji <files> muszą znaleźć się deklaracje wszystkich plików wchodzących w skład skórki. Na razie są to te pliki, o których wspomniałam wcześniej. W miarę jak skórka będzie się rozwijać i rozrastać trzeba będzie dodawać kolejne pliki.

Na koniec sekcja <positions>. Zawiera ona nazwy bloków, które będziemy wykorzystywać w naszym szablonie umieszczając w nich różne treści. Na przykład, kiedy zainstalujemy jakiś moduł to konfigurując go musimy wskazać, gdzie ma się pojawić treść generowana przez niego wybierając pozycję z listy (ilustracja poniżej). Ta właśnie lista jest generowana na podstawie zawartości sekcji <positions>. O tym jak te pozycje wykorzystać w szablonie będzie później.

Spotkałam się już w sieci z zaleceniem, by w sekcji <positions> znajdowała się standardowa lista pozycji (wymienione poniżej), co ma ułatwić późniejsze przełączanie skórek. Rzeczywiście, być może jeśli projekt ma być bardzo rozbudowany i złożony z wielu modułów ma to jakiś sens. Sądzę jednak, że i tak zmiana skórki na ogół jest tak dużą rewolucją, że większość modułów i tak trzeba będzie od nowa konfigurować. Podanie nowej lokalizacji to najmniejszy chyba problem.

	<positions>
		<position>left</position>
		<position>right</position>
		<position>top</position>
		<position>breadcrumb</position>
		<position>user1</position>
		<position>user2</position>
		<position>user3</position>
		<position>user4</position>
		<position>debug</position>
		<position>syndicate</position>
	</positions>

Szkielet strony

Czas na omówienie szkieletu strony który powinien znaleźć się w pliku index.php. Najpierw zamieszczę pełen listing a następnie krok po kroku go omówię.

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/PZ/css/style.css" type="text/css" />
</head>

<body>
	<div id="main">
		<div id="top">
			<jdoc:include type="modules" name="top"/>
		</div>
		
		<div id="header">
			<div id="logo">
			</div>
			<div id="navigation">
				<jdoc:include type="modules" name="hornav" style="gold"/>
			</div>
		</div>

		<div id="container">
			<div id="content">
				<jdoc:include type="component" />
			</div>


			<?php if ($this->countModules('right')): ?>
			<div id="right">
				<jdoc:include type="modules" name="right" style="box" />
			</div>
			<?php endif; ?>
			
		</div>
		
		<div id="footer">
			<jdoc:include type="modules" name="footer" />
		</div>
	</div>

</body>
</html>

W pierwszej linii znajduję się instrukcja chroniąca skrypt Joomla! wstawia sie ją na początku każdego pliku zawierającego jakikolwiek kod php. W linii drugiej znajduje się obowiązkowa deklaracja dokumentu HTML. W linii 4 umieszczono instrukcję rozpoczynającą strukturę dokumentu HTML, w której umieszczono min informację o języku strony.

W liniach od 7 do 10 znajduje się deklaracja nagłówka strony. Instrukcja <jdoc:include type=”head” / > widoczna w linii 8 powoduje wstawienie w jej miejscu standardowej zawartości nagłówka generowanej przez skrypt Joomla! na podstawie konfiguracji strony. Następnie w linii 9 znajduje się deklaracja szablonu css użytego w naszej skórce. Oczywiście nic nie stoi na przeszkodzie by wstawić tam więcej znaczników meta i dodatkowych szablonów oraz innych elementów umieszczanych na ogół w nagłówku dokumentu HTML.

W liniach od 12 do 44 znajduje się szablon oparty na blokach <div>. Jest to prosty szablon zawierający top, nagłówek z logo i nawigacją oraz dwie kolumny (główną i prawą). Wprawne oko od razu zauważy, że pomiędzy znacznikami HTML (w liniach: 15, 22, 28, 33 oraz 40) znajdują się dodatkowe instrukcje. Są to instrukcje wskazujące umiejscowienie w szablonie bloków zdefiniowanych uprzednio w pliku templateDetails.xml w sekcji <positions>. Ot i cała tajemnica.

Instrukcje te mają na ogół następująca postać: <jdoc:include type=”modules” name=”top” /> Oznacza to, że we wskazanym miejscu zostanie wstawiona treść wygenerowana przez te moduły, których pozycja będzie ustawiona na wartość ‚top’. Czasami pojawia się atrybut ‚style’, ale to omówię w następnym odcinku.

Jedna instrukcja wygląda nieco inaczej i jest odpowiedzialna za wstawienie w odpowiednim miejscu głównej zawartości strony. Jest to instrukcja o postaci <jdoc:include type=”component” /> (linia 28);

Podsumowanie

Mam nadzieję, że dla czytelnika, który dotarł do końca tego artykułu tworzenie skórki dla Joomla! przestało być czarna magią. Nie jest to jednak koniec pracy. We wskazanych przez nas miejscach zostanie wstawiona treść automatycznie generowana przez silnik Joomla!. O tym jaki będzie miała ona format decydują kawałki kodu rozrzuconego po całym skrypcie (między innymi w modułach, które zdecydujemy się dołączyć). Zaproponowany tam sposób prezentacji treści nie koniecznie musi nam się podobać. Oczywiście można wykonać ciężką prace i pozmieniać w modułach różne pliki, ale nie jest to najbardziej elegancki sposób rozwiązania problemu. W następnych odcinkach pokażę jak rozbudować ten prosty szablon, żeby w pełni zapanować nad wyglądem strony.

6 komentarzy na "Własna skórka do Joomla!. Odc.1 Absolutne minimum"

1 | strony www

26. października 2010 o 2:24 pm

Avatar

Bardzo fajny artykul, pisz takich wiecej.

2 | radosne dni

11. lutego 2011 o 11:15 pm

Avatar

Super przejrzyście i rzeczowo. Dodałem do ulubionych :)

3 | Baś

21. stycznia 2012 o 1:21 pm

Avatar

Ja normalnie jestem fanką:) Szukałam jakiegoś klarownego tekstu i mam. Jeśli możesz to prowadź dalej tego bloga. Programistek na tym świecie jest mało.

4 | Baś

21. stycznia 2012 o 2:24 pm

Avatar

btw chcę więcej chcę więcej! :D

5 | Paweł

6. maja 2013 o 7:33 am

Avatar

do czego służy ten skrypt w szablonie
countModules(‚right’)): ?>

6 | Joanna

29. maja 2013 o 10:06 am

Avatar

Liczy ile jest modułów przypisanych do sekcji ‚right’, żeby wiedzieć, czy ją ma wyświetlić?

Formularz komentarza

Wrzesień 2018
P W Ś C P S N
« Cze    
 12
3456789
10111213141516
17181920212223
24252627282930

Archiwa

About

Moje notatki z pracy

Subskrypcja

Wprowadź swój adres email aby zaprenumerować ten blog i otrzymywać powiadomienia o nowych wpisach przez email.

Dołącz do 40 pozostałych subskrybentów

Tematy

%d bloggers like this: