--=REKLAMA=--
--=REKLAMA=--
Dotychczas mamy układ z trzema zawsze widocznymi kolumnami, bez względu na to, czy zawierają jakąkolwiek treść. Z perspektywy szablonu CMS to nie jest zbyt przydatne. Na stronie statycznej rozplanowanie treści nie zmienia się, natomiast w systemie zarządzania treścią, takim jak Joomla!, chcemy dać administratorom możliwość umieszczania treści gdziekolwiek chcą, bez konieczności poprawiania CSS. Administratorzy winni mieć możliwość "wyłączyć" kolumnę automatycznie albo "zwinąć" ją (ukryć), gdy nie ma w niej żadnych treści.
W historii Joomla! było kilka zmian i poprawek silnika szablonów. Cytując z blogu projektantów Joomla!: "Zmiany w systemie szablonów Joomla! 1.5 można podzielić na dwie kategorie. Pierwszą są zmiany sposobów realizacji funkcji (zadań), jakie były możliwe w Joomla! 1.0, na przykład nowe sposoby umieszczania modułów, drugą kategorią są nowo dodane właściwości, jak na przykład parametry.
Funkcja mosCountModules została zastąpiona przez funkcję $this->countModules, w której dodano obsługę warunków. Pozwala to projektantom łatwo policzyć ilość modułów w wielu pozycjach szablonu tylko za pomocą jednej linii kodu, na przykład $this->countModules('user1 + user2'); która zwraca sumę ilości modułów w pozycjach user1 i user2.
Więcej informacji można znaleźć na forum Joomla!. Oto pseudokod objaśniający stosowanie funkcji $this->countModules:
<?php if($this->countModules('warunek')) : ?> zadania do wykonania <?php else : ?> lub zadania do wykonania <?php endif; ?>
Możliwe są cztery warunki. Jako przykład policzymy ilość modułów na ilustracji 9.7. W pliku index.php możemy wstawić poniższy kod:
left=<?php echo $this->countModules('left');?> left and right=<?php echo $this->countModules('left and right');?> left or right=<?php echo $this->countModules('left or right');?> left + right=<?php echo $this->countModules('left + right');?>
W tej sytuacji potrzebujemy skorzystać z funkcji, która pozwala nam policzyć moduły znajdujące się w jakimś miejscu. Tak na przykład jeśli żadnej treści nie ma w prawej kolumnie, możemy dostosować wielkość kolumny centralnej, by wypełnić zwolnioną przestrzeń.
Jest kilka sposobów, aby to zrobić. Możemy w części body użyć instrukcji warunkowej, by nie wyświetlać kolumny, a następnie zastosować różne style, zależnie od ilości kolumn. Aby to zrobić najprościej, jak to możliwe, zamieszczamy serię instrukcji warunkowych w części body oraz definiujemy style w arkuszu CSS.
<?php $contentwidth = "100"; if($this->countModules('left or right') == 1) $contentwidth = "80"; if($this->countModules('left and right') == 1) $contentwidth = "60"; ?>
Tak więc, zliczamy:
W pliku index.php musimy wprowadzić odpowiednią poprawkę dla elementu div zawierającego treść główną:
<div id="content<?php echo $contentwidth; ?>">
W pliku css zmieniamy style określające rozplanowanie na:
#content60 {float:left;width:60%;overflow:hidden;} #content80 {float:left;width:80%;overflow:hidden;} #content100 {float:left;width:100%;overflow:hidden;}
Instrukcje warunkowe PHP muszą znajdować się za linią z łączem do pliku template.css. Wynika to z zasady, że jeśli mamy dwie lub więcej identycznych reguły CSS, to ostatnia nadpisuje wszystkie poprzednie.
Można również importować plik z dodatkowym CSS.
Kiedy testujesz swoje instrukcje warunkowe, możesz dodać do kodu w pliku index.php linię wyświetlająca szerokość:
Kolumna "content" zajmuje <?php echo $contentwidth; ?>% szerokości.
Dobrą praktyką w projektowaniu układów z ukrywanymi kolumnami jest zapobieganie generowaniu przez Joomla! kodu ramek otaczających moduły w przypadku, gdy w pozycji modułu nie zostanie umieszczony żaden moduł. Jeśli tego nie uczynimy, w kodzie źródłowym pojawią się puste elementy <div> albo oznakowanie tabel, zależnie od stylu ramki, jaka miałaby otaczać moduł.
Aby ukryć pusty element <div>, używamy następującej instrukcji:
<?php if($this->countModules('left')) : ?> <div id="sidebar"> <div class="inside"> <jdoc:include type="modules" name="left" style="xhtml" /> </div> </div> <?php endif; ?>
Zastosowanie tego kodu spowoduje, że jeśli w pozycji left nie zostanie opublikowany żaden moduł Joomla nie wygeneruje również kodu ramki xhml
Jeśli zastosujemy tę technikę dla lewej i prawej kolumny, nasz plik index.php będzie wyglądać jak poniżej. Włączyliśmy jeszcze moduł Ścieżka powrotu (breadcrumbs). Zwróć uwagę, że w Joomla 1.5 ścieżkę powrotu również włączamy inaczej - właśnie jako moduł.
<?php // no direct access 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="templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> <?php $contentwidth = "100"; if($this->countModules('left or right') == 1) $contentwidth = "80"; if($this->countModules('left and right') == 1) $contentwidth = "60"; ?> </head> <body> <div id="wrap"> <div id="header"> <div class="inside"> <h1><?php echo $mainframe->getCfg('sitename');?></h1> <jdoc:include type="modules" name="top" style="xhtml" /> </div> </div> <?php if($this->countModules('left')) : ?> <div id="sidebar"> <div class="inside"> <jdoc:include type="modules" name="left" style="xhtml" /> </div> </div> <?php endif; ?> <div id="content<?php echo $contentwidth; ?>"> <div class="inside"> <jdoc:include type="module" name="breadcrumbs" style="none" /> <jdoc:include type="component" /> </div> </div> <?php if($this->countModules('right')) : ?> <div id="sidebar-2"> <div class="inside"> <jdoc:include type="modules" name="right" style="xhtml" /> </div> </div> <?php endif; ?> <?php if($this->countModules('footer')) : ?> <div id="footer"> <div class="inside"> <jdoc:include type="modules" name="footer" style="xhtml" /> </div> </div> <?php endif; ?> <!--end of wrap--> </body> </html>
Takie elementy jak kolumny lub pozycje modułów mogą być ukrywane (lub składane), kiedy nie ma w nich żadnej zawartości. Osiągamy ten cel za pomocą instrukcji warunkowych PHP i połączeniu z odpowiednimi stylami CSS.
Polecałbym nieznacznie zmodyfikowany sposób generowania stopki. W sposobie podanym tutaj korzystamy ze sztywnego wpisu w pliku index.php, co utrudnia wprowadzanie zmian. Aktualnie moduł "footer" wyświetla prawa własności Joomla w panelu administracyjnym i nie jest łatwy w modyfikacji. Wygodniejszym rozwiązaniem jest umieszczenie w miejscu stopki zwykłego modułu (X)HTML, który administrator mógłby łatwo modyfikować. Jeśli chciałbyś stworzyć swoją własną stopkę, możesz zakończyć publikację tego modułu i stworzyć własny moduł HTML w wybranym języku (???? projektowania).
W tym przypadku zastąpilibyśmy
<jdoc:include type="modules" name="footer" style="xhtml" />
na
<jdoc:include type="modules" name="bottom" style="xhtml" />
Musisz pamiętać aby dodać pozycję bottom do pliku templateDetails.xml.
Jako nazw pozycji modułów projektanci szablonów używają różnych znaczących słów: banner, left, right, user1, footer i tak dalej. Ważne, by uzmysłowić sobie, że nazwy te nie odpowiadają jakiemuś konkretnemu miejscu. Rozplanowanie pozycji modułów, jak widzieliśmy, jest kontrolowane przez projektanta szablonu. Przyjęło się, żeby nazwy wskazywały na miejsce, w którym pozycja została umieszczona, ale nie jest to wymagane.