Pomoc - Przystosowanie układu dla Joomla! i Mambo

Start

Programowanie

Szablon

Przystosowanie układu dla Joomla! i Mambo

Szablon dla Joomla! i Mambo powinien być tak zaprojektowany, aby możliwe było dodawanie modułów, poszerzenie głównego obszaru prezentacji na czas korzystania z edytora tekstu oraz ukrywanie kolumn, w których nie został opublikowany żaden moduł. Skorzystajmy z prostoty prostego szablonu, aby objaśnić te kwestie.

Przygotowanie

Utwórz w katalogu /templates nowy katalog: 02_simple_fixed_base i przekopiuj doń całą zawartość utworzonego wcześniej katalogu /01_simple_fixed_abs. Następnie wyedytuj plik templateDetails.xml i zmień nazwę szablonu:

<name>02_simple_fixed_base</name>

Umieszczanie pozycji modułów

Na stronach Joomla! i Mambo główne treści strony wzbogacane są różnymi materiałami towarzyszącymi - modułami umieszczanymi w tzw. pozycjach modułów. Szczegółowe objaśnienia tej kwestii znajdziesz w sekcjach Pozycje modułów oraz Umieszczanie modułów.

Dodajmy więc najpierw kilka pozycji modułów. Oto zmodyfikowany fragment body naszego szablonu:

<body>
 <div id="content">
   <div id="content_main">
      <?php mosMainBody(); ?>
   </div>
   <div id="nav_bar">
      <?php mosLoadModules( 'left' ); ?>
      <?php mosLoadModules( 'user1' ); ?>   <!-- dodane -->
      <?php mosLoadModules( 'user2' ); ?>   <!-- dodane -->
 
   </div>
   <div id="misc_bar">
      <?php mosLoadModules( 'right' ); ?>
      <?php mosLoadModules( 'user5' ); ?>   <!-- dodane -->
      <?php mosLoadModules( 'user6' ); ?>   <!-- dodane -->
   </div> 
   <div id="header">
      <h1><?php echo $GLOBALS['mosConfig_sitename']; ?></h1> 
   </div>
 </div>
</body>

Dodaliśmy cztery pozycje modułów: user1, user2, user4, user5. Można by zastosować własne nazwy pozycji. Stosujemy jednak takie właśnie, ponieważ należące do standardowych dystrybucji Joomla! i Mambo moduły są umieszczane w już nazwanych pozycjach. Zmiana nazw wymagałaby kilku dodatkowych czynności.

Ukrywanie pozycji modułów

W efekcie tak zapisanego kodu w dokumencie źródłowym mogą pojawić się puste znaczniki HTML w sytuacji, gdy w którejś z pozycji nie zostanie opublikowany żaden moduł. Potrzebna jest funkcja ukrywająca pozycje modułów w takich przypadkach.

Aby ukryć moduły, korzystamy z instrukcji warunkowej języka PHP oraz ze specjalnej funkcji Joomla! i Mambo, zliczającej opublikowane moduły - mosCountModules('user2'). Szczegóły zostały omówione w sekcji Ukrywanie kodu modułów. Oto zmieniony kod:

<body>
 <div id="content">
   <div id="content_main">
      <?php mosMainBody(); ?>
   </div>
   <div id="nav_bar">
      <?php mosLoadModules( 'left' ); ?>
      <?php if (mosCountModules('user1')) { ?>   <!-- dodane -->
         <?php mosLoadModules( 'user1');?>
      <?php } ?>                                 <!-- dodane -->
      <?php if (mosCountModules('user2')) { ?>   <!-- dodane -->
         <?php mosLoadModules( 'user2');?>
      <?php } ?>                                 <!-- dodane -->
 
   </div>
   <div id="misc_bar">
      <?php mosLoadModules( 'right' ); ?>
      <?php if (mosCountModules('user5')) { ?>   <!-- dodane -->
         <?php mosLoadModules( 'user5');?>
      <?php } ?>                                 <!-- dodane -->
      <?php if (mosCountModules('user6')) { ?>   <!-- dodane -->
         <?php mosLoadModules( 'user6');?>
      <?php } ?>                                 <!-- dodane -->
   </div> 
   <div id="header">
      <h1><?php echo $GLOBALS['mosConfig_sitename']; ?></h1> 
   </div>
 </div>
</body>

Jak widać, nic skomplikowanego. Można nieco uprościć ten kod, usuwając zbędne znaczniki rozpoczynające i kończące fragmenty instrukcji PHP, ale nie jest to konieczne. Zobaczmy wszakże na przykładzie, jak to zrobić:

   <div id="nav_bar">
      <?php mosLoadModules( 'left' ); 
        if (mosCountModules('user1')) {  
          mosLoadModules( 'user1');
       } 
        if (mosCountModules('user2')) { 
          mosLoadModules( 'user2');?
       } 
      ?>
   </div>

Po zakończeniu prac nad projektem zawsze warto zoptymalizować kod, aby zmniejszać do niezbędnego minimum i obciążenie serwera i ilość przesyłanych danych.

Ukrycie kolumny

Ukrycie kolumny jest bardziej skomplikowane. Kolumna centralna - content_main ma ustaloną szerokość. Samo ukrycie prawej kolumny - misc_bar nie spowoduje wypełnienia zawartością #content_main powstałego po niej pustego obszaru. Musimy w arkuszu stylów zadeklarować reguły dla poszerzonej odmiany #content_main. Aktualnie kolumna ta ma 384px. Jeśli dodamy szerokość misc_bar, otrzymamy 576px. Do tego musimy jeszcze dodać 6px odstępu między kolumną centralną i prawą. Dodajmy w pliku template_css.css fragment:

#content_main_ext {
  position      : absolute;
  top           : 90px;
  left          : 198px;
  width         : 582px;   
 }

W pliku index.php musimy teraz sformułować instrukcję, którą można wyrazić zwykłym językiem tak:

Jeżeli zostanie wywołany edytor lub jeżeli w prawej kolumnie nie ma modułów, ukryj prawą kolumną, a treść główną umieść w pojemniku content_main_ext. Oto kod. Komentarz w kodzie objaśnia dodane fragmenty.

<body>
 <div id="content">
<!-- Wszystkie trzy kolumny -->
<!-- Jeśli ilość modułów w prawej kolumnie nie równa się 0
    i jeśli nie zostało wywołane zadanie 'edycja' -->
    <?php
if ( ( mosCountModules('right')  != 0) && ($_REQUEST['task'] != 'edit'))  { ?>
 
<!-- pokaż -->
 
   <div id="content_main">
      <?php mosMainBody(); ?>
   </div>
   <div id="nav_bar">
      <?php mosLoadModules( 'left' ); ?>
      <?php if (mosCountModules('user1')) { ?>
         <?php mosLoadModules( 'user1');?>
      <?php } ?>
      <?php if (mosCountModules('user2')) { ?>
         <?php mosLoadModules( 'user2');?>
      <?php } ?>
 
   </div>
   <div id="misc_bar">
      <?php mosLoadModules( 'right' ); ?>
      <?php if (mosCountModules('user5')) { ?>
         <?php mosLoadModules( 'user5');?>
      <?php } ?>
      <?php if (mosCountModules('user6')) { ?>
         <?php mosLoadModules( 'user6');?>
      <?php } ?>
   </div>
   <div id="header">
      <h1><?php echo $GLOBALS['mosConfig_sitename']; ?></h1> 
   </div>
<!-- koniec I części instrukcji -->
 <?php
 } else { ?>
<!-- Tylko 2 kolumny -->  
<!-- w przeciwnym przypadku pokaż -->
   <div id="content_main_ext">
      <?php mosMainBody(); ?>
   </div>
   <div id="nav_bar">
      <?php mosLoadModules( 'left' ); ?>
      <?php if (mosCountModules('user1')) { ?>
         <?php mosLoadModules( 'user1');?>
      <?php } ?>
      <?php if (mosCountModules('user2')) { ?>
         <?php mosLoadModules( 'user2');?>
      <?php } ?>
   </div>  
   <div id="header">
      <h1><?php echo $GLOBALS['mosConfig_sitename']; ?></h1> 
   </div>       
<?php
}
?>
<!-- koniec II części instrukcji --> 
 
 </div>
</body>

Prawa kolumna została ukryta

Wykonując ten skrypt, serwer sprawdzi najpierw, czy w pozycja right nie jest pusta i czy użytkownik nie chce korzystać z edytora. Zależnie od wyniku sprawdzenia, wykona albo pierwszą, albo drugą część instrukcji.

Dla uproszczenia przykładu w instrukcji warunkowej pominęliśmy fragment kodu, sprawdzający, czy nie ma przypadkiem modułów w pozycjach user5 i user6. Pełny kod przedstawimy w jednym z kolejnych projektów.

Uwagi, źródła

Jeżeli masz sugestie odnośnie treści lub chcesz zgłosić poprawki do tego rozdziału, skomentuj go albo umieść wiadomość na forum: Dokumentacja - Propozycje, zmiany, poprawki

Dziękujemy!

Stefan Wajda, Zespół Dokumentacji PCJ