Dostosowywanie szablonów do ThePortal 2 Kró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 Miazga 2008-12-26
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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
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:
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
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:
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
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]”
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.
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.