Skórki PHP-Fusion

Tym razem trochę o PF’ie, a dokładniej, jak wygląda składnia skórki i co należy w niej mieć…

Pliki skórki są w folderze themes/nazwa_skórki. Powinny się tam znajdować:

• plik theme.php – odpowiedzialny za funkcje skórki
• plik styles.css – w nim zawarte są style skórki
• folder forum – w tym folderze znajduje się grafika do forum np. od przycisków nowy temat, odpowiedz, itd. Nie będę tutaj wchodził w szczegóły. Najlepiej zobaczyć w przykładowej skórce dostępnej w paczce, jakie są tam pliki i podmienić je na własne o takiej samej nazwie.

theme.php

Pierwszy wpis w tym pliku, powinien być taki:

<?php
if (!defined("IN_FUSION")) { die("Access Denied"); }

Ta linijka zabezpiecza, przed wejściem do tego pliku – jest on wczytywany wyłącznie do części strony. Kolejno powinniśmy zdefiniować THEME_BULLET, czyli coś, co m.in. jest na początku linków w panelu użytkownika – takie wypunktowanie, jeśli można to tak nazwać :). Może to być kropka, grafika, cokolwiek. definicja THEME_BULLET wygląda tak:

define("THEME_BULLET", "-");

W naszym przykładzie jest to myślnik. Następnie musimy pobrać plik, który zawiera niezbędne funkcje skórki:

require_once INCLUDES."theme_functions_include.php";

render_page

Teraz możemy przejść do tworzenia wyglądu strony. Pierwszą funkcja, którą musimy zdefiniować jest render_page. Odpowiada ona za całą naszą stronę. Otwieramy więc tę funkcję:

function render_page($license=false) {

Po czym przechodzimy już do pisania HTML’em :). Zaczynamy od góry strony, a więc jakieś logo. Możemy tutaj po prostu dać <img> do obrazka, lub użyć funkcji PHP-Fusion, która wyświetli nam grafikę ustawioną w głównych ustawieniach. Jeśli będziemy mieli wpisany kod banera (W ustawienia strony>Banery), w miejsce loga pójdzie pierwszy i drugi baner.

// Logo z wbudowaną f-cją PF'a:
echo "<div id='logo'>".showbanners()."</div>";

// Logo z obrazkiem:
echo "<div id='logo'><img src='".THEME."images/logo.jpg' alt='logo' /></div>";

Można zauważyć, że w drugim wariancie użyta została stała THEME. Odwołuje się ona do katalogu aktualnie włączonej skórki (nie należy po THEME stawiać slasha!). W moich przykładach podaję kod w najnowszych standardach HTML’a, a więc <img> z atrybutem alt i zamkniętym tagiem.

Pod logiem przydała by się nam nawigacja. Oczywiście, jeśli sobie ktoś nie życzy, lub chce ją zrobić w HTML’u – proszę bardzo. W naszym przykładzie użyjemy menu, które ustawia się z poziomu Panelu Administratora.

echo "<div class='menu'>".showsublinks(" ".THEME_BULLET." ", "menu-poziome")."</div>";

Pierwsza opcja w funkcji showsublinks to rozdzielacz linków, w naszym przykładzie myślnik, bo THEME_BULLET ustalony wcześniej to właśnie “-“. Po przecinku ustalamy drugą opcje menu, a mianowicie styl CSS, jakie będzie ono miało – w naszym przykładzie menu-poziome. Dla uściśnienia, jest to klasa, a wiec w styles.css zaczyna się kropką :).

Możemy także dać w naszym szablonie datę – także ustawianą z PA (Panelu Administratora). W tym celu wklejamy gdzieś funkcję showsubdate().

Gdy już mamy zakodowana górną część skórki, zabieramy się za wyświetlanie paneli:

 echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
 if (LEFT) { echo "<td class='side-left' valign='top'>".LEFT."</td>"; }
 echo "<td class='main-center' valign='top'>".U_CENTER.CONTENT.L_CENTER."</td>";
 if (RIGHT) { echo "<td class='side-right' valign='top'>".RIGHT."</td>"; }
 echo "</tr>\n</table>\n";

Tutaj panele są w tabelce. Druga linia kodu wyświetla panele lewe – jeśli takie są, dlatego znajduje się tam funkcja if. Trzecia linia odpowiada za panele środkowe, a czwarta za prawe. Nazwy klas CSS nie muszą być takie same, jak w naszym przykładzie.

Po panelach zabieramy się za stopkę. Tutaj możemy użyć kilku funkcji. Pominę te, które wyświetlają liczbę zapytań i czas ich wykonywania – są one w dołączonej do PF’a skórce Gillette.

Aby wyświetlić tekst z stopki, którą ustawiamy w PA, należy użyć kodu:

stripslashes($settings['footer'])

Oczywiście można go umieścić w tabelce, czy div’ie. Na koniec należy gdzieś wkleić informację o PHP-Fusion – nie zrobienie tego łamie licencję! W tym celu użyjemy kodu:

showcopyright()

i mamy gotowy tekst  PF’ie. Na koniec nie zapomnijmy zamknąć funkcji render_page:

}

render_news

Teraz utworzymy funkcję odpowiedzialną za wyświetlanie newsów. Otwieramy funkcję i w HTML’u z użyciem zmiennych tworzymy wygląd naszych informacji:

function render_news($subject, $news, $info) {

echo "<div class='opentable'>".$subject."</div>\n
<div class='news'>".$news."</div>\n
<div class='news-footer'>\n";
// Poniższa linia odpowiada za informacje o autorze, dacie i komentarzach
echo newsposter($info," &middot;").newsopts($info,"&middot;").itemoptions("N",$info['news_id']);
echo "</div>\n";

}

W naszym kodzie może kogoś zaciekawić, po co są te \n? Ano po to, żeby patrząc na źródło strony, kod wyglądał czytelnie. Znak \n oznacza przejście do następnej linii.

W naszym przykładzie newsy są w div’ach. Zmienna $subject odpowiada za tytuł newsa, $news za jego treść. Oczywiście style użyte w naszym przykładzie mogą być inne.

render_article

Kolejna funkcja odpowiada za wyświetlanie artykułów. Jest ona bardzo podobna do f-cji render_news. W naszym przykladzie przerobimy po prostu trochę render_article.

function render_article($subject, $article, $info) {

echo "<div class='opentable'>".$subject."</div>\n
<div class='article'>".$article."</div>\n
<div class='article-footer'>\n";
// Poniższa linia odpowiada za informacje o autorze, dacie i komentarzach
echo articleposter($info," &middot;").articleopts($info,"&middot;").itemoptions("A",$info['article_id']);
echo "</div>\n";

}

openside

Funkcja openside odpowiada za panele boczne. Tutaj także możemy skorzystać, jak kto woli, z tabelek albo div’ów.

function openside($title, $collapse = false, $state = "on") {
// Potrzebne zmienne, które będą w tej funkcji użyte:
global $panel_collapse; $panel_collapse = $collapse;

echo "<div class='openbox'>".$title."</div>";

// Poniższy kod odpowiada za wyświetlanie przycisku, do pokazania/ukrycia bocznego panelu
 if ($collapse == true) {
 $boxname = str_replace(" ", "", $title);
 echo "<div class='oc' align='right'>".panelbutton($state, $boxname)."</div>\n";
}
echo "<div class='box'>\n";

// Poniższy kod wyświetla/ukrywa treść panelu, w zależności od domyślnych ustawień
if ($collapse == true) { echo panelstate($state, $boxname); }

}

Funkcja musi się skończyć w momencie, kiedy ma wystąpić treść panelu.

closeside

Tutaj zamykamy panel boczny.

function closeside() {

 // Potrzebne zmienne
global $panel_collapse;

if ($panel_collapse == true) { echo "</div>\n"; }
echo "</div>\n";
}

opentable i closetable

Podobnie jak w openside i closeside, funkcje te odpowiadają za otwieranie i zamykanie paneli lecz tym razem środkowych. Przykładowy wygląd kodów:

function opentable($title) {

echo "<div class='openbox'>".$title."</div>";
echo "<div class='box'>\n";

}
function closetable() {

echo "</div>\n";

}

styles.css

Tutaj definiujemy nasze style, które użyliśmy w naszym pliku theme.php. Tego już nie będę opisywał. Jednak poza naszymi stylami, będą nam potrzebne domyślne style, które używa PHP-Fusion, a więc:

• a.side – odpowiada za linki w panelach bocznych
• .admin-message – odpowiada za wyświetlanie wiadomości dla administratora – najczęściej po zmianie ustawień, albo dodawaniu/edytowaniu newsa, artykułu, itd.
• .button – odpowiada za wygląd przycisków
• .bbcode – wygląd BB Code
• .textbox – pola tekstowe
• .news-category – odpowiada za obrazki kategorii – przydaje się dodanie border:0, jakiś margin i float:left 🙂
• .center { margin: 0 auto; } – także się przydaje, choć super IE 6 tego nie zrozumie :/
• .tbl-border – ramka niektórych tabeli
• .tbl1 i .tbl2 – tabele aktywne i nieaktywne, np po wejściu do PA cztery linki u góry…
• .forum-caption
• .quote – cytaty m.in. na forum
• .poll – ankieta
• .comment-name – nick przy komentarzu
• .shoutboxname – nick przy shoutboxie
• .shoutbox
• .shoutboxdate – data przy shoutboxie
• .small i .small2 – pomniejszenie, przyciski do tego są m.in. przy pisaniu newsów
• .side-small – pomniejszony tekst w panelach bocznych
• #navigation – nawigacja pionowa z użyciem CSS’a
• .pagenav – nawigacja stron – np. pod newsami…

To chyba wszystko.

Jeśli coś będzie niezrozumiałe, proszę o komentarze 🙂