Embed Size (px)
Citation preview
Dostosowywanie szablonów do ThePortal 2Krótki poradnik
Wiele osób pisało do nas w sprawie tworzenia szablonów jak i ich dostosowywania. Ten Poradnik niech będzie odpowiedzią na pytanie związane z dostosowywaniem szablonów do ThePortal 2
Jarosław Miazga2008-12-26
Spis treściInformacje ogólne ................................................................................................................................... 3
Zanim stworzysz ...................................................................................................................................... 3
Struktura plików szablonu....................................................................................................................... 4
Pierwsze czynności .................................................................................................................................. 6
Wygląd strony głównej i newsów............................................................................................................ 9
Dalsze pliki i wygląd innych segmentów ............................................................................................... 11
Miniatura............................................................................................................................................... 18
Publikacja szablonu ............................................................................................................................... 19
Zakończenie........................................................................................................................................... 20
Informacje ogólne
ThePortal 2 to system zarządzania treścią, w którym największą zaletą jest łatwość integracji szablonów typu xHTML/CSS. Dzięki wykorzystaniu autorskiego systemu szablonów, nie musisz wykonywać skomplikowanych operacji przy „przyswajaniu” danego gotowego szablonu.
Zanim stworzysz
Jeżeli chcesz tworzyć szablony od podstaw i masz już wykonaną grafikę, pamiętaj, aby zakodowany szablon spełniał następujące warunki (dzięki temu integracja szablonu będzie jeszcze łatwiejsza!):
Szablon powinien posiadać strukturę opartą na divach Nawigacja górna oparta na znacznikach <ul><li> Nawigacja boczna oparta na znacznikach <ul><li><dt> Nazwa podstrony oparta o nagłówki <h1><h2><h3> Kod zgodny ze standardami konsorcjum W3.
Po takim przygotowaniu szablonu przyjdzie kolej na następne czynności, które zostaną opisane w następnym rozdziale.
Struktura plików szablonu
Aby ułatwić tworzenie szablonów i zarazem zwiększyć możliwości dostosowania najdrobniejszych elementów wyglądu, stworzona została specjalna struktura szablonów.
W katalogu głównym znajduje się podkatalog s z a b l o n y , w którym to z kolei są pliki szablonów schowane odpowiednio w katalogu o nazwie danego szablonu.
Pierwsze czynności
Jeżeli posiadamy już ściągnięty gotowy szablon typu xHTML/CSS. Należy pamiętać, że ściągnięty szablon musi zawierać się bezpośrednio w katalogu wg wzoru „[nazwa_szablonu]”, gdzie [nazwa_szablonu] to nazwa ściagniętego szablonu. Następnie musimy przygotować sobie pliki. Skopiuj wszystkie pliki znajdujące się w dowolnym katalogu z szablonem, np. z katalogu domyślny, wszystkie pliki oprócz:
Index.html Style.css Img/ lub images/
Teraz możemy przejść do edycji pliku index.html – jest to główny plik, gdzie definiowane są wszystkie ustawienia poszczególnych bloków, warstw, grafik. Jeżeli otworzysz plik html dowolnym edytorem typu wysiwyg, masz pełen komfort pracy. Możesz dostosować szablon zupełnie tak samo, jakbyś tworzył statyczną stronę w HTML!.
Dodaj znaczniki meta.
Jeżeli chcesz zdefiniować odpowiednio tytuł strony, słowa kluczowe, opis strony, kodowanie, skorzystaj z poniższych instrukcji odpowiedzialnych za wyświetlanie danych meta:
Instrukcja Opis<? Wyświetl($tytul); ?> Wyświetla tytuł strony, który można zdefiniować
w Panelu Administracyjnym.<? Wyświetl($opis); ?> Wyświetla opis strony, które również
zdefiniujemy w PA<? Wyświetl($slowa); ?> Wyświetla słowa kluczowe, definiowane w PA.<? Wyświetl($kodowanie); ?> Wyświetla kodowanie strony, które ustawimy w
PA<? wyswietl($autor); ?> Wyświetla informacje o autorze<? wyswietl($roboty); ?> Zawiera instrukcje dla robotów indeksujących
witryny<? wyswietl(popupy()); ?> Wyświetla aktywne popupyNasz kod w sekcji <head> może wyglądać następująco:
<meta http-equiv="content-type" content="text/html; charset=<? wyswietl($kodowanie); ?>"/><meta name="description" content="<? wyswietl($opis); ?>"/><meta name="keywords" content="<? wyswietl($slowa); ?>"/> <meta name="author" content="<? wyswietl($autor); ?>"/> <meta name="robots" content="<? wyswietl($roboty); ?>"/> <link rel="stylesheet" type="text/css" href="szablony/domyslny/style.css" media="screen"/><link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script><script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script><script src="js/lightbox.js" type="text/javascript"></script><title><? wyswietl($tytul); ?></title><? wyswietl(popupy()); ?>Należy pamiętać, by sprawdzić adres łącza do arkusza stylu css, ma on wyglądać w takiej formie:
<link rel="stylesheet" type="text/css" href="szablony/[nazwa_szablonu]/style.css" media="screen"/>
Jeżeli chcesz w jakimś miejscu wyświetlić np. tytuł strony bądź opis itd., skorzystaj po prostu z w/w znaczników.
Oto lista kolejnych instrukcji, które można wstawić pliku index.html
Instrukcja Opis<? wyswietl(banner('gora')); ?> Wyświetla banner, o miejscu: „ Góra strony”<? wyswietl(nawigacja_gora()); ?> Wyświetla nawigację górną<? wyswietl(nawigacja()); ?> Wyświetla nawigację boczną<? wyswietl(panel_logowanie()); ?> Wyświetla boks z panelem logowania oraz
panelem użytkownika<? wyswietl(katalog_ostatnie()); ?> Wyświetla ostatnio dodane strony do katalogu<? wyswietl(komponent("ostatnie_artykuly")); ?>
Wyświetla ostatnio dodane artykuły
<? wyswietl(ostatnie_fotki()); ?> Wyświetla ostatnio dodane zdjęcia do galerii? @wyswietl(komponent("stopka")); ?> Wyświetla stopkę<? wyswietl(zawartosc()); ?> Wyświetla cały kontent strony, który jest
definiowany w dalszych plikach
<? wyswietl(nawigacja_gora()); ?>
Ten element będzie prawidłowo wyświetlany tylko wtedy, kiedy znajdzie się pomiędzy fragmentami kodu:
<ul>
</ul>
Te znaczniki muszą posiadać odpowiednie definicje w arkuszu stylów, jeżeli nie posiadają, menu górne może nie być wyświetlane prawidłowo.
<? wyswietl(nawigacja()); ?>
Ten element również wymaga wstawienia pomiędzy znaczniki <ul></ul>. Jeżeli nawigacja nie będzie wyświetlana prawidłowo, należy dopisać do pliku stylu CSS element dt, do definicji tego stylu (klasa)
Przedstawię teraz rozmieszczenie poszczególnych części wraz z instrukcją jaką on wymaga. Obrazek został podzielony na dwie części.
Góra strony:
Dalsza część:
Wygląd strony głównej i newsów
Aby zmienić wygląd newsów, należy edytować plik newsy.html .
Oto poszczególna lista instrukcji wraz z ich opisem:
Instrukcja Opis<? wyswietl($tytul); ?> Wyświetla tytuł newsa<? wyswietl($tresc_krotka); ?> Wyświetla treść krótką (na stronie głównej)
Jeżeli obierzemy instrukcję <? Wyświetl($tresc_krotka); ?> w drugą instrukcję emotikony(), wtedy na stronie głównej przy treści krótkiej newsa, zamiast typowych znaczków ;), ;], ;-), :D pojawią się buźki.
Uwaga! Aby się wyświetlały buźki, należy je zdefiniować w panelu administracyjnym
Oto jak będzie wyglądała cała instrukcja:
<? wyswietl(emotikony($tresc_krotka)); ?>
<? wyswietl($dodano); ?> Wyświetla datę dodania newsa<? wyswietl($zrodlo); ?> Wyświetla źródło newsa
Zaprezentujemy teraz jak powinien wyglądać link typu Czytaj więcej
<a href="index.php?strona=news&id=<? wyswietl($id); ?>">Czytaj więcej</a>
Sposób wyświetlanie strony głównej, a mianowicie tekstu na stronie głównej możemy zmienić edytując plik glowna.html.
Oto lista instrukcji wraz z ich opisem:
Instrukcja Opis<? wyswietl(strona_glowna()); ?> Wyświetla tekst na stronie głównej<? wyswietl(banner('glowna')); ?> Wyświetla banner na stronie głównej<? wyswietl(banner('plywajacy_glowna')); ?> Wyświetla banner pływający na stronie głównej
Przy wstawianiu instrukcji odpowiedzialnej za wyświetlanie bannera pływającego na stronie głównej, dobrze jest obrać go w specjalne zdefiniowane divy. Oto gotowy kod:
<div id="layer1" style="position:absolute; left:20; width:410px; height:10; visibility:hidden"> <div style="float:left;"> <span style="float:right; width='20px'; text-align:center; cursor:pointer" onclick="javascript:hideIt()"> X </span> <? wyswietl(banner('plywajacy_glowna')); ?>
</div></div>
Dalsze pliki i wygląd innych segmentów
Do tej pory nauczyłeś się edytować wygląd ogólny szablonu, sposób wyświetlania newsów oraz tekstu powitalnego na stronie głównej, a przecież jeszcze jest tyle innych segmentów! Te wszystkie inne segmenty typu: „Księga gości”, „Download”, „Galeria”, „Artykuły” etc. Edytuje się na podobnej zasadzie. Przedstawimy teraz listę instrukcji do każdego pliku wraz z ich opisem.
Plik artykuly.html
Instrukcja Opis<? wyswietl(artykuly_zawartosc()); ?> Wyświetla zawartość artykułów, tj listę kategorii,
artykuł itd.
Plik dodaj_komentarz.html
W tym pliku powinien znaleźć się formularz odpowiedzialny za dodawanie komentarzy.
Instrukcja Opis<? wyswietl(artykuly_komentarze()); ?> Wyświetla wszystkie dodane komentarze
Plik download.html
Instrukcja Opis<? wyswietl(banner('download')); ?> Wyświetla banner o miejscu: „Download”<? wyswietl(download_zawartosc()); ?> Wyświetla zawartość downloadu.
To co wyświetli się w instrukcji <? wyswietl(download_zawartosc()); ?> można edytować w plikach: download_formularz.html, download_pliki.html
Plik download_formularz.html
Ten plik nie zawiera żadnych instrukcji, jedyne co musisz wstawić, to poniższy kod:
<?$zapytanie = "SELECT `id`, `nazwa` FROM `download_kategorie`";polacz();$zapytanie = mysql_query($zapytanie);while($row=mysql_fetch_row($zapytanie)){
$id = $row[0];$nazwa = base64_decode($row[1]);echo '<option value="'.$id.'">'.$nazwa.'</option>';
}?>
Nie radzimy dokonywania w nim zmian, po prostu można go zostawić takim jaki jest.
Plik download_pliki.html
Instrukcja Formularz<? wyswietl($tytul); ?> Wyświetla tytuł pliku<? wyswietl($opis); ?> Wyświetla opis pliku<? wyswietl($rozmiar); ?> Wyświetla rozmiar pliku<? wyswietl($licencja); ?> Wyświetla licencję pliku<? wyswietl($data); ?> Wyświetla datę dodania pliku<? wyswietl($adres); ?> Wyświetla adres pliku do pobrania
Możesz wstawić taki przycisk, po kliknięciu w którego rozpocznie się pobieranie:
<input type="button" onclick="window.location=('<? wyswietl($adres); ?>');" value="Pobierz" name="B3" style="float: left">
Plik edycja_danych.html
Instrukcja Opis<? wyswietl(edytuj_dane()); ?> Wyświetla zawartość edycji danych
Po wstawieniu tej instrukcji, zawartość, która się wyświetli może zostać zmieniona jeśli zedytujesz plik edycja)danych_formulaz.html
Plik edycja_danych_formularz.html
Instrukcja Opis<? wyswietl($email); ?> Wyświetla adres email<? wyswietl($imie); ?> Wyświetla imię<? wyswietl($nazwisko); ?> Wyświetla nazwisko<? wyswietl($id); ?> Wyświetla ID użytkownika (id należy obrać w
pole hidden o nazwie „id”)<? wyswietl($adres); ?> Wyświetla adres<? wyswietl($skype); ?> Wyświetla login skype<? wyswietl($gg); ?> Wyświetla numer Gadu-Gadu<? wyswietl($avatar); ?> Wyświetla adres avatara
Plik galeria.html
Instrukcja Opis<? wyswietl(galeria_zawartosc()); ?> Wyświetla zawartość galerii, którą można
edytować w pliku galeria_lista.html
Plik galeria_lista.html
Instrukcja Opis<? wyswietl($adres_obrazka); ?> Wyświetla adres obrazka<? wyswietl($tytul); ?> Wyświetla tytuł obrazka<? wyswietl($opis); ?> Wyświetla opis obrazka<? wyswietl($data); ?> Wyświetla datę dodania obrazka<? wyswietl($kategoria); ?> Wyświetla kategorię obrazka
Jeżeli chcesz, aby obrazek po kliknięciu był wyświetlany w lightbox’się czyli w tym ładnym pokazie, do każdego odnośnika typu <a href=”, dodaj rel=”lightbox[numer_kat]”
Oto przykład:
<a href="<? wyswietl($adres_obrazka); ?>" rel="lightbox[<?=$kategoria; ?>]"><img border="0" src="<? wyswietl($adres_obrazka); ?>" title="<?=$tytul; ?>" width="173" height="119"></a>
Plik galleria_formularz.html
Instrukcja Opis<? wyswietl(galeria_dodaj_zdjecie_kategorie()); ?>
Wyświetla listę kategorii przy dodawaniu obrazka do galerii
Sugerujemy, aby nie dokonywać modyfikacji w tym pliku.
Plik katalog.html
Instrukcja Opis<? wyswietl(banner('katalog')); ?> Wyświetla banner o miejscu: „Katalog”<? wyswietl(katalog_zawartosc()); ?> Wyświetla zawartość katalogu
Plik katalog_dodaj.html
Instrukcja Opis<? wyswietl(kategorie()); ?> Wyświetla kategorie przy dodawaniu strony do
katalogu
Plik kontakt.html
Instrukcja Opis<? wyswietl(pokaz_dane()); ?> Wyświetla dane kontaktowe zdefiniowane w
panelu administracyjnym
Plik ksiega.html
Instrukcja Opis<? wyswietl(ksiega_zawartosc()); ?> Wyświetla zawartość księgi gości, którą możemy
edytować w pliku ksiega_wpisy.html
Plik ksiega_wpisy.html
Instrukcja Opis<? wyswietl($www); ?> Wyświetla adres strony<? wyswietl($autor); ?> Wyświetla Nick/imię autora wpisu<? wyswietl(emotikony($tresc)); ?> Wyświetla treść wpisu<? wyswietl($ip); ?> Wyświetla adres IP dodającego<? wyswietl($host); ?> Wyświetla host dodającego
Jeżeli nie podoba Ci się domyśle wyświetlanie wpisów, możesz to zmienić, np. możesz usunąć wyświetlanie adresu IP oraz hosta dodającego
Plik ksiega_dodaj_wpis.html
Ten plik nie zawiera żadnych instrukcji. Ten plik odpowiedzialny jest za wyświetlanie formularza dodania wpisu do księgi. Sugerujemy nie dokonywać w nim modyfikacji
Plik logowanie.html
W tym pliku możesz zmienić sposób wyświetlania formularza logowania. Ten plik nie zawiera żadnych dodatkowych instrukcji
Plik news_dodaj_komentarz.html
Instrukcja Opis<? wyswietl(n_komentarze()); ?> Wyświetla dodane komentarze do newsa
Ten plik odpowiada za wyświetlanie formularza dodania komentarza do newsa oraz za wyświetlanie istniejących już komentarzy do danego newsa. Sugerujemy nie dokonywać w nim modyfikacji
Plik panel_usera.html
W tym pliku możesz określić wygląd panelu użytkownika. Domyślnie znajdują się w nim linki do akcji jakie może wykonać zalogowany użytkownik. Wyświetlane są także materiały dodane przez użytkownika.
Instrukcja Opis<? wyswietl(dodane_materialy('zdjecia', $_SESSION['login'])); ?>
Wyświetla dodane zdjęcie przez zalogowanego użytkownika
<? wyswietl(dodane_materialy('strony', $_SESSION['login'])); ?>
Wyświetla dodane strony przez zalogowanego użytkownika
<? wyswietl(dodane_materialy('pliki', $_SESSION['login'])); ?>
Wyświetla dodane pliki przez zalogowanego użytkownika
Plik podstrona.html
Plik ten jest odpowiedzialny za wyświetlanie podstrony dodanej w panelu administracyjnym.
Instrukcja Opis<? wyswietl(banner('podstrona')); ?> Wyświetla banner o miejscu: „Podstrona”<? wyswietl(banner('plywajacy_podstrona')); ?> Wyświetla banner pływający o miejscu:
„Podstrona”<? wyswietl($nazwa); ?> Wyświetla nazwę podstrony<? wyswietl(emotikony($tresc)); ?> Wyświetla zawartość podstrony wraz z
emotkonkami
Przy wstawianiu instrukcji <? wyswietl(banner('plywajacy_podstrona')); ?> radzimy obrać ją w odpowiednie divy.
Oto przykład:
<p> </p><div id="layer1" style="position:absolute; left:20; width:410px; height:10; visibility:hidden">
<div style="float:left;"> <span style="float:right; width='20px'; text-align:center; cursor:pointer"
onclick="javascript:hideIt()"> X </span><? wyswietl(banner('plywajacy_podstrona')); ?></div></div>
Plik pokaz_artykul.html
Plik ten odpowiedzialny jest za wyświetlanie treści artykułu po wybraniu go z odpowiedniej kategorii
<? wyswietl($nazwa); ?> Wyświetla tytuł/nazwę artykułu<? wyswietl(emotikony($tresc)); ?> Wyświetla treść artykułu wraz z emotikonami<? wyswietl(banner('artykul_srodek')); ?> Wyświetla banner o miejscu: „Artykuł środek”<? wyswietl($dodano); ?> Wyświetla datę dodania artykułu<? wyswietl(z_komentarze($komentarze)); ?> Wyświetla komentarze dodane do danego
artykułu
Plik pokaz_news.html
Plik ten odpowiedzialny jest za wyświetlanie newsa pełnego po kliknięciu w przycisk typu „Czytaj dalej”
Instrukcja Opis<? wyswietl($tytul); ?> Wyświetla tytuł newsa<? wyswietl(emotikony($tresc_krotka)); ?> Wyświetla treść krótką razem z emotikonami<? wyswietl(emotikony($tresc_pelna)); ?> Wyświetla uzupełnienie newsa – Treść pełna<? wyswietl(banner('news_srodek')); ?> Wyświetla banner o miejscu: „News środek”<? wyswietl($data_dodania); ?> Wyświetla datę dodania newsa<? wyswietl($zrodlo); ?> Wyświetla źródło newsa<? wyswietl(news_komentarze($komentarze)); ?>
Wyświetla komentarze dodane do newsa
Plik polec.html
Plik ten odpowiada za wyświetlanie polecenia użytkownika.
Instrukcja Opis<? wyswietl(polec_zawartosc()); ?> Wyświetla zawartość
Sugerujemy nie dokonywać w nim żadnych modyfikacji.
Plik profil.html
Plik ten odpowiada za wyświetlenie postronny z profilem danego użytkownika
Instrukcja Opis<? wyswietl(pokaz_profil()); ?> Wyświetla dane profilu, które można edytować
w pliku profil_dane.html
Plik profil_dane.html
Plik odpowiedzialny za wyświetlanie danych po wejściu na profil danego użytkownika.
Instrukcja Opis<? wyswietl($avatar); ?> Wyświetla adres awatara<? wyswietl($login); ?> Wyświetla login/nazwę użytkownika<? wyswietl($ranga); ?> Wyświetla rangę jako posiada dany użytkownik<? wyswietl(data()); ?> Wyświetla datę rejestracji użytkownika<? wyswietl(punkty()); ?> Wyświetla punkty użytkownika (punkty naliczane
są wg liczby dodanych materiałów, odpowiednio mnożone)
<? wyswietl($imie); ?> Wyświetla imię użytkownika<? wyswietl($nazwisko); ?> Wyświetla nazwisko użytkownika<? wyswietl($adres); ?> Wyświetla adres użytkownika<? wyswietl($email); ?> Wyświetla adres e-mail użytkownika<? wyswietl($gg); ?> Wyświetla numer Gadu-Gadu użytkownika<? wyswietl($skype); ?> Wyświetla login skype użytkownika<? wyswietl($id); ?> Wyświetla ID użytkownika<? wyswietl(dodane_materialy('strony', $login)); ?>
Wyświetla strony dodane przez użytkownika
<? wyswietl(dodane_materialy('zdjecia', $login)); ?>
Wyświetla zdjęcia dodane przez użytkownika
<? wyswietl(dodane_materialy('pliki', $login)); ?> Wyświetla plik dodane przez użytkownika
Plik przypomnij.html
Plik ten odpowiada za wyświetlanie segmentu z przypominaniem hasła
Instrukcja Opis<? wyswietl(przypomnij()); ?> Wyświetla całą zawartość tj formularz i wszystkie
akcje
Plik rejestracja.html
<? wyswietl(rejestracja_zawartosc()); ?> Wyświetla zawartość, którą można edytować w pliku rejestracja_formularz.html
Plik rejestracja_formularz.html
Ten plik jest odpowiedzialny za wyświetlanie formularza rejestracji nowego użytkownika
Plik ten nie posiada żadnych instrukcji, ale musisz pamiętać, żeby umieścić w nim taki kod:
<script language="javascript" type="text/javascript" src="js/ajax.js"></script><div id="response"></div>
Plik wiadomosci.html
Plik odpowiedzialny za wygląd całego system wiadomości.
Instrukcja Opis<? wyswietl(wiadomosci()); ?> Wyświetla wszystkie wiadomości
Miniatura
Po skończeniu pracy przy dostosowywaniu szablonu, dobrą rzeczą jest stworzenie miniaturki dostosowanego design. Należy taką wykonać poprzez wejście na swoją stronę z nowo-dostosowanym szablonem i wciśnięcie przycisku PRINT SCREEN (obok F12). Następnie wkleić zawartość do dowolnego edytora grafiki, wyciąć interesujący fragment.
Powstały obrazek należy przeskalować do rozmiarów 480x564px i zapisać w katalogu szablonu jako: miniatura.jpg. Dzięki temu przy wybieraniu szablonu w panelu administracyjnym, będzie można zobaczyć jego podgląd.
Publikacja szablonu
Jeżeli stwierdziłeś, że chcesz pochwalić się swoją twórczością z całą społecznością ThePortal 2 możesz swój szablon podesłać nam. Zanim to zrobisz sprawdź czy wszystkie pliki są odpowiednio w katalogu, czy wszystkie obrazki są wyświetlane prawidłowo, czy strona działa prawidłowo w przeglądarkach: Internet Explorer, Mozilla Firefox, Opera, Safari. Nie zapomnij wstawić także w stopce informacji o ThePortal 2.
Engine Powered by ThePortal 2 ( ThePortal 2 należy podlinkować do strony http://theportal2.pl ). Jeżeli jesteś jedynym autorem szablonu, możesz wstawić o tym informacje w stopce. Jeżeli nie jesteś autorem szablonu możesz tylko wstawić krótkie info, o tym, że dostosowałeś go do ThePortal2.
Następnie cały katalog spakuj WinRarem. W archiwum musi znajdować się katalog o nazwie szablonu oraz plik Instrukcja.html, który jest domyślnie w każdym szablonie. (można pobrać z naszej strony)/
Zakończenie
Mamy nadzieję, że dzięki temu poradnikowi przybędzie nam więcej szablonów.
© Jarosław Miazga All rights reservedhttp://theportal2.pl
