--=REKLAMA=--

Podstawowy szablon Joomla!

Z Joomla!WikiPL

Wersja Zwiastun (dyskusja | edycje) z dnia 19:00, 11 lip 2014

(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)

Wprowadzenie

Celem tego poradnika jest wprowadzenie do projektowania szablonów dla Joomla! Przygotujemy niezbędne pliki z kodem potrzebne do stworzenia podstawowego szablonu. Kod zostanie zaprezentowany tak, że można go skopiować i wkleić, a następnie wprowadzić potrzebne, ale nieznaczne modyfikacje.

Struktura katalogu szablonu

Mergefrom.png
Zasugerowano, aby z tym artykułem zintegrować artykuł: Typowy katalog szablonu. (dyskusja)

Aby opracować najprostszy, podstawowy szablon, stwórz nowy katalog w katalogu "templates". Nazwij ten katalog tak, jak planujesz nazwać swój szablon, np. "moj_szablon".

Korzystając z ulubionego edytora tekstu (albo edytora html/php/xml/css takiego jak nVu czy Dreamweaver), stwórz pliki "index.php" oraz "templateDetails.xml".

Aby utrzymać pewien ład, załóż 2 nowe katalogi, nazywając je "images" oraz "css". W katalogu "css" stwórz plik nazwany "css.css".

To jest najbardziej podstawowa praktyczna struktura. Teoretycznie, można by jeszcze zrezygnować z katalogu i pliku arkusza stylów, ale osadzenie go wewnątrz pliku "index.php" powodowałoby niepotrzebnie nadmierną wielkość tego pliku, a tym samym przykre doświadczenia dla użytkowników.

Zarys struktury folderów i plików:

  • moj_szablon/
    • css/
      • style.css
    • images/
      • czysty.jpg
    • index.php
    • templateDetails.xml


Edycja plików szablonu

  1. REDIRECT Narzędzia projektanta/Edytory kodu

Tworzenie podstawowego pliku templateDetails.xml

Plik templateDetails.xml jest niezbędny. Bez niego Twój szablon nie będzie widziany przez Joomla!. Plik ten zawiera metadane o szablonie.

Spójrz na przykład:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
 "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
	<name>mynewtemplate</name>
	<creationDate>2008-05-01</creationDate>
	<author>John Doe</author>
	<authorEmail>john@example.com</authorEmail>
	<authorUrl>http://www.example.com</authorUrl>
	<copyright>John Doe 2008</copyright>
	<license>GNU/GPL</license>
	<version>1.0.2</version>
	<description>My New Template</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>template_thumbnail.png</filename>
		<filename>images/background.png</filename>
		<filename>css/css.css</filename>
	</files>
	<positions>
		<position>breadcrumb</position>
		<position>left</position>
		<position>right</position>
		<position>top</position>
		<position>user1</position>
		<position>user2</position>
		<position>user3</position>
		<position>user4</position>
		<position>footer</position>
	</positions>
</install>

Jak widzisz mamy tutaj zbiór informacji dotyczących szablonu zawartych między znacznikami ( <files>, <positions>... ). Możesz skopiować to i wkleić do Twojego pliku "templateDetails.xml", a następnie pozmieniać odpowiednie informacje (takie jak <name> <author> ).

Część <files> powinna zawierać listę wszystkich plików, z jakich korzysta szablon - prawdopodobnie jeszcze nie wiesz jak się one nazywają - bez obaw, uaktualnisz to później.

Pozostaw wyszczególniony tu zestaw pozycji - to powszechnie stosowany zestaw pozycji w szablonach, dzięki któremu łatwo przełączać się między różnymi szablonami.

Zobacz też

Plik templateDetails.xml

Tworzenie podstawowego pliku index.php

Plik index.php jest trzonem każdej strony generowanej przez Joomla! Zasadniczo tworzymy ten plik tak, jakbyśmy kodowali stronę w HTML, ale w miejscach, w których mają się znaleźć treści witryny umieszczamy nim kod PHP. Tutaj zamieszczamy podstawę pliku index.php do skopiowania i wklejenia w swoim projekcie szablonu.

Rozpocznijmy od początku:

<?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; ?>" >

Pierwsza linia powstrzymuje niegrzecznych ludzi od podpatrywania twojego kodu i realizacji innych nieprzyjaznych zamiarów. Linia druga mówi przeglądarce oraz serwisom wyszukiwawczym i indeksującym, z jakim rodzajem dokumentu mają do czynienia. Linia trzecia określa, w jakim języku napisano stronę.

Teraz rzeczywisty nagłówek:

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

Pierwsza linia powoduje umieszczenie w nagłówku dokumentu poprawne informacje o dokumencie. Zawierają one tytuł strony, metadane oraz połączenia z systemowym arkuszem stylów i skryptami JavaScript. Druga linia tworzy łącze do arkusza stylów strony. Wymaga modyfikacji dostosowującej nazwę, która ustalisz dla swego szablonu.

Teraz kod części głównej:

<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>

Niesamowite, ale tyle wystarczy. To jest podstawowy, bardzo prosty kod, ale wykona całą niezbędną pracę, by witryna ujrzała światło dzienne. Wszystko inne wykona Joomla! Zwróć jedynie uwagę, że w pozycji nazwanej "top" trzeba będzie umieścić moduł głównego menu. module position

Na zakończenie - ostatni fragment:

</html>

Pełny kod źródłowy szablonu

A oto pełny kod źródłowy przykładowego szablonu:

<?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/mojnowyszablon/css/css.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</html>


Katalog z wieloma odrębnymi plikami nie jest wygodnym pakietem dystrybucyjnym. Ostatnim krokiem jest więc stworzenie pakietu instalacyjnego. Jest nim skompresowane archiwum zachowujące strukturę katalogów i rozmieszczenie plików. Pakiet może być stworzony w formacie ZIP (z rozszerzeniem .zip), TAR-gzip (z rozszerzeniem .tar.gz) albo formacie TAR-bz2 (z rozszerzeniem tar.bz2),

Jeśli Twój szablon został umieszczony w katalogu mojszablon/, stwórz pakiet tego katalogu, kozystając z jednego z poniższych poleceń:

  • tar cvvzf ../mojszablon.tar.gz *
  • zip -a -r ..\mojszablon.zip *.*

Uwagi dla użytkowników Mac OS X

Uwaga o szablonach projektantów korzystających z systemu Mac OS X: menedżer plików Finder tworzy pakiet w formacie ZIP, ale z pewną zagadką. Mianowicie pliki przechowywane są w podwójnym formacie, dodatkowo umieszczane są pliki z nazwami rozpoczynającymi się od "._". W efekcie mamy np. plik nazwany "._templateDetails.xml, który Joomla 1.5 niekiedy niewłaściwie interpretuje. Objawem jest komunikat błędu "XML Parsing Error at 1:1. Error 4: Empty document". The work around is to compress from the command line, and set a shell environment variable "COPYFILE_DISABLE" to "true" before using "compress" or "tar". Zobacz artykuł AppleDouble, aby dowiedzieć się więcej.

Podsumowanie

Na tej podstawie możemy stworzyć działający szablon. Oczywiście, nie będzie ani ładny, ani atrakcyjny. Najlepsze, co można teraz zrobić, to poeksperymentować z projektem układu.


Dziękujemy za wkład

» Stefan Wajda [zwiastun],