Nawigacja
Konwersja skórek do PHP-Fusion v7 cz.1
Napisane przez jantom
dnia 21 lutego 2009 21:51 ·
4 komentarze ·
14698 czytań ·
· 
· 
Streszczenie:
Artykuł w całości poświęcony systemowi skórek, jaki jest wykorzystywany w PHP-Fusion v7. Znajdziesz w nim wszystkie informacje dotyczące tworzenia, modyfikowania oraz konwersji starszych skórek do najnowszej wersji PHP-Fusion. W tej części dowiesz się o idei, jaka przyświecała autorom systemu szablonów oraz jakie zmiany zostały wprowadzone w pliku theme.php, w którym zapisany jest szkielet każdej skórki dla PHP-Fusion.Idea skórek v7
Jeśli porównamy sposób w jaki działają skórki v6 i v7, stwierdzimy różnice w pewnych aspektach. Autorzy PHP-Fusion 7 postanowili dać więcej możliwości twórcom skórek, a jednocześnie zachować system tak podobny jak to tylko możliwe do wcześniejszych wersji. Dzięki temu ich użytkownicy mogą łatwo przejść na nową wersję. W rezultacie podstawowa idea systemu skórek opartych na funkcjach została zachowana, ale dodane zostały niektóre korzyści skórek opartych na szablonach.
Zmiany w skórkach v7
Plik theme.php
Najistotniejsze zmiany zaszły w pliku theme.php. Funkcje render_header() i render_footer() zostały połączone w jedną render_page(). Daje to projektantom skórek większą kontrolę nad trzema kolumnami zawartości strony. W PHP-Fusion 6 nie można było wpływać na kolejność i strukturę tabeli głównej i jej trzech komórek. W PHP-Fusion 7 taka możliwość jest. Zostały również połączone funkcje openside() i opensidex(), powód był dość oczywisty – obie funkcje miały większość wyników identycznych, a różniły się tylko w zakresie przycisku zwijania/rozwijania. Aby umożliwić użytkownikom bardziej zaawansowane zarządzanie banerami (bez użycia modów), zmienna prosta $header_content, przechowująca baner strony, została zastąpiona funkcją showbanners(), której wynikiem są parametry banera pobrane z ustawień głównych. Udostępniony został również nowy panel administracyjny banerów. Istniejąca w wersji 6 funkcja showsublinks() zwraca teraz listę nieuporządkowaną zamiast zwykłych hiperłączy. W render_news() i render_article() zostały usunięte funkcje openform() i closeform(). Opcje administracyjne dla newsaa bądź artykułu zwraca teraz funkcja itemoptions(). Wyrzucono także funkcję tablebreak(), a margines między panelami jest teraz ustawiany z poziomu css.
Nowe możliwości
Oprócz wspomnianych zmian, pojawił się szereg nowych możliwości, które można wykorzystać w skórkach v7. Uniwersalne klasa do łatwej integracji zmieniarki styli, np. wielkości czcionki czy zmiany kolorów może być użyta do dodatkowego doprawienia skórek. Przy pomocy funkcji get_head_tags można także dodać znaczniki do sekcji head strony, a więc dodawać własny JavaScript lub arkusze stylów bez modyfikacji głównych plików. Projektanci skórek nie są już ograniczeni do używania domyślnej nazwy i formatów obrazów oraz ich lokalizacji, gdyż te ustawienia mogą być zmienione za pomocą odpowiednich funkcji.
Plik styles.css
Zarówno zmienione, jak i nowe cechy PHP-Fusion 7 wymagają kilku nowych klas, np.: identyfikator #navigation jest używany w nowym panelu nawigacyjnym (w wersji css), klasa .news-category jest używana w stosunku do obrazu kategorii newsów, klasa .pagenav jest używany do stronicowania (paginacji). Najczęściej konieczna jest ingerencja w więcej niż jeden z w/w elementów. Np. #navigation li dotyczy elementów listy (poszczególnych hiperłączy) w panelu nawigacyjnym, a #navigation pozwala określać jej ogólny wygląd.
Aktualizacja skórki PHP-Fusion 6 do PHP-Fusion 7
Aby skórka utworzone dla PHP-Fusion 6 stała się zgodna z PHP-Fusion 7, należy dokonać pewnych zmian w odpowiednich plikach. Przedstawimy to na przykładzie skórki Prime autorstwa Digitanium. Jednakże każdy, kto ma trochę doświadczenia ze skórkami PHP-Fusion 6 może po prostu porównać obie wersje skórki (v6 i v7) i stwierdzić samodzielnie jakie zmiany są konieczne. Poniższy opis jest skierowany do osób których doświadczenie w zakresie skórek PHP-Fusion jest niewielkie lub żadne, a mimo to są zdecydowane we własnym zakresie zaktualizować swoją ulubioną skórkę.
Aktualizacja theme.php
Zaczynamy
Po pierwsze, dodajmy poniższy wiersz kodu na początku pliku theme.php:
if (!defined("IN_FUSION")) { die("Access Denied"); }Poprawi to bezpieczeństwo przez zablokowanie możliwości indywidualnego uruchomienia pliku theme.php . Jeśli podobny kod już istnieje, należy go zastąpić powyższym, który jest bezpieczniejszy. W dalszej kolejności należy usunąć niepotrzebne zmienne z początku theme.php, gdyż nie są one używane w v7 (możliwe jest ich stosowanie, ale sugerujemy korzystanie bezpośrednio z możliwości CSS, zgodnie z ideą nowej wersji systemu). W skórce Prime usuwamy zmienne:
$body_text = "#444444"; $body_bg = "#ffffff"; $theme_width = "100%"; $theme_width_l = "170"; $theme_width_r = "170";
Jedyna definicja, jaką należy wykonać w PHP-Fusion 7 to punktor. W naszym przykładzie nie użyjemy obrazu, ale punktora html (kulki). Dodajemy zatem wiersz:
define("THEME_BULLET", "<span class='bullet'>·</span>");
Aby użyć obrazka, należy wprowadzić w odpowiednim miejscu znacznik img (zamiast ·). Klasa bullet ułatwi w dalszej kolejności ustawienie wyglądu elementów nawigacyjnych. Teraz należy upewnić się, że kod zawiera poniższy wiersz (lub jego odpowiednik):
require_once INCLUDES."theme_functions_include.php";
Dołączy to szereg funkcji pomocniczych, niezbędnych w dalszych pracach. Niektóre nowsze skórki dla PHP-Fusion 6 zawierają go, ale skórka Prime niestety nie, więc trzeba go dodać. Początek pliku theme.php dla skórki Prime powinien teraz wyglądać tak:
<?php if (!defined("IN_FUSION")) { die("Access Denied"); } // theme settings define("THEME_BULLET", "<span class='bullet'>·</span>"); require_once INCLUDES."theme_functions_include.php";
Możemy także usunąć funkcję tablebreak(), ponieważ nie jest ona używana w PHP-Fusion 7 (odległość między panelami jest określana za pomocą CSS).
Funkcje render_header() i render_footer()
Jak wspomniano wcześniej, render_header() i render_footer()
zostały połączone w jedną funkcję render_page(). Prostym sposobem jest
zmiana nazwy funkcji render_header() na render_page() oraz
zmiana jej argumentów. render_page() wymaga tylko argumentu $license
funkcji render_footer(), gdyż argument $header_content funkcji
render_header() jest odziedziczony i w związku z tym zbędny na liście
parametrów funkcji. Zmiany w skrócie wyglądają tak:
Przed:
function render_header($header_content) {
Po:
function render_page($license=false) {Teraz należy skopiować treść funkcji render_footer() i wkleić na końcu nowej funkcji render_page() (oprócz deklaracji zmiennych globalnych, które już występują w render_page() ). W przypadku skórki Prime wygląda to następująco:
Przed:
function render_page($license=false) {
global $settings;
[...]
echo "
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>\n";
}
function render_footer($license=false) {
global $theme_width,$settings,$locale;
echo "
</tr>
</table>\n";
tablebreak();
echo "
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='footer'><br>".stripslashes($settings['footer'])."</td>
</tr>
<tr>
<td align='center' class='footer'>\n";
if ($license == false) {
echo "Powered by <a href='http://www.php-fusion.co.uk' target='_blank'>PHP-Fusion</a> v".$settings['version']." © 2003-2005<br><br>\n";
}
echo $settings['counter']." ".($settings['counter'] == 1 ? $locale['140']."<br><br>\n" : $locale['141']."<br><br>\n")."
</td>
</tr>
</table>
</td>
</tr>
</table>\n";
}
Po:
function render_page($license=false) {
global $settings;
[...]
echo "
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>\n";
//Next step goes here
echo "
</tr>
</table>\n";
tablebreak();
echo "
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='footer'><br>".stripslashes($settings['footer'])."</td>
</tr>
<tr>
<td align='center' class='footer'>\n";
if ($license == false) {
echo "Powered by <a href='http://www.php-fusion.co.uk' target='_blank'>PHP-Fusion</a> v".$settings['version']." © 2003-2005<br><br>\n";
}
echo $settings['counter']." ".($settings['counter'] == 1 ? $locale['140']."<br><br>\n" : $locale['141']."<br><br>\n")."
</td>
</tr>
</table>
</td>
</tr>
</table>\n";
}
Teraz można skasować pozostałości po oryginalnej funkcji render_footer().
Przejdźmy do punktu wskazanego komentarzem //Next step goes here w powyższym fragmencie kodu. W PHP-Fusion 6 kod html kolumn był zdefiniowany poza theme.php – w plikach side-border-right.php i side-border-left.php. W PHP-Fusion 7 można to robić samodzielnie i tak właśnie uczynimy, we wspomnianym miejscu. We wszystkich skórkach v6 w tym punkcie użyte były komórki tabeli, ponieważ nie było możliwości wyboru pomiędzy tabelami (table) i blokami (div). Natomiast w PHP-Fusion 7 można w tym miejscu użyć bloków (div). Mimo to naszą przeróbkę wykonamy z użyciem starej, sprawdzonej tabeli. Oto komórki, których potrzebujemy:
<td class='side-border-left'></td> <td class='main-bg'></td> <td class='side-border-right'></td>
Wypełnimy je stałymi przechowującymi panele. Nazwy stałych powinny być samokomentujące (mnemoniczne):
<td class='side-border-left'>".LEFT."</td> <td class='main-bg'>".U_CENTER.CONTENT.L_CENTER."</td> <td class='side-border-right'></td>".RIGHT."
Aby wszystko działało poprawnie należy kod nieco rozbudować i w przypadku skórki Prime otrzymamy:
if (LEFT) { echo "<td class='side-border-left' valign='top'>".LEFT."</td>"; } echo "<td class='main-bg' valign='top'>".U_CENTER.CONTENT.L_CENTER."</td>"; if (RIGHT) { echo "<td class='side-border-right' valign='top'>".RIGHT."</td>"; }
Dlaczego tak? Instrukcje if są konieczne, aby boczne kolumny były wyświetlane tylko wtedy, gdy zawierają panele. Aby zawartość tabeli zaczynała się od góry (a nie była wyrównana domyślnie do środka) przypisano valign=’top’. W dalszej kolejności zastępujemy $header_content wywołaniem showbanners(), która to funkcja jest w PHP-Fusion 7 używana do obsługi bannerów strony. Dla skórki Prime wygląda to tak:
Przed
<td>$header_content</td>
Po
<td>".showbanners()."</td>
Teraz trochę oczyścimy kod wykorzystując funkcje pomocnicze, które zostały dołączone na początku pliku. Możesz pominąć ten punkt i przejść do kolejnego, jeśli Twoja skórka już korzysta z showsublinks(). Starsze skórki PHP-Fusion 6 (np. Prime) mają długi, skomplikowany kod dla wyświetlania hiperłączy w nawigacji poziomej. W skórce Prime jest on następujący:
<td class='white-header'>"; $result = dbquery("SELECT * FROM ".DB_PREFIX."site_links WHERE link_position>='2' ORDER BY link_order"); if (dbrows($result) != 0) { $i = 0; while($data = dbarray($result)) { if (checkgroup($data['link_visibility'])) { if ($data['link_url']!="---") { if ($i != 0) { echo " ·\n"; } else { echo "\n"; } $link_target = ($data['link_window'] == "1" ? " target='_blank'" : ""); if (strstr($data['link_url'], "http://") || strstr($data['link_url'], "https://")) { echo " <a href='".$data['link_url']."'".$link_target." class='white'>".$data['link_name']."</a>"; } else { echo " <a href='".BASEDIR.$data['link_url']."'".$link_target." class='white'>".$data['link_name']."</a>"; } } $i++; } } } echo ($i == 0 ? " " : "")." </td>
Powyższy kod zastąpimy znacznie krótszym:
<td class='white-header'>".showsublinks(" ".THEME_BULLET." ", "white")."</td>
Pierwszym argumentem funkcji showsublinks() jest zdefiniowany wcześniej punktor, a drugi to klasa css stosowana do poszczególnych pozycji listy (hiperłączy). Niektóre skórki v6 wyświetlają datę stosując konstrukcję:
ucwords(showdate($settings['subheaderdate'], time()))
co można i warto skrócić w PHP-Fusion 7 do:
showsubdate()
Notka autorska PHP-Fusion także może być wyświetlona w znacznie prostszy sposób:
Przed:
echo "Powered by <a href='http://www.php-fusion.co.uk' target='_blank'>PHP-Fusion</a> v".$settings['version']." © 2003-2005<br><br>\n";
Po:
echo showcopyright();
Analogicznie wyświetlanie licznika odwiedzin także można zastąpić odpowiednią funkcją:
Przed:
echo $settings['counter']." ".($settings['counter'] == 1 ? $locale['140']."<br><br>\n" : $locale['141']."<br><br>\n")."
Po:
echo showcounter().”
Pozostało jeszcze usunięcie ewentualnych wystąpień funkcji tablebreak(), która (jak już wspomniano) została usunięta w PHP-Fusion 7. Marginesy poprawimy później, używając css. Funkcja render_page() skórki Prime po wszystkich poprawkach, oczyszczeniu i połączeniu niektórych poleceń echo wygląda następująco:
function render_page($license=false) {
global $settings;
echo "<table align='center' cellspacing='0' cellpadding='0'>
<tr>
<td>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='full-header'>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td>".showbanners()."</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='white-header'>".showsublinks(" ".THEME_BULLET." ", "white")."</td>
<td align='right' class='white-header'>".showsubdate()."</td>
</tr>
</table>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>";
if (LEFT) { echo "<td class='side-border-left' valign='top'>".LEFT."</td>"; }
echo "<td class='main-bg' valign='top'>".U_CENTER.CONTENT.L_CENTER."</td>";
if (RIGHT) { echo "<td class='side-border-right' valign='top'>".RIGHT."</td>"; }
echo "
</tr>
</table>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='footer'><br>".stripslashes($settings['footer'])."</td>
</tr>
<tr>
<td align='center' class='footer'>\n";
if ($license == false) {
echo showcopyright();
}
echo showcounter()."
</td>
</tr>
</table>
</td>
</tr>
</table>\n";
}
Funkcja render_news()
Funkcja render_news() jest łatwa do aktualizacji. W nowszych skórkach PHP-Fusion 6 występuje kod:
".openform("N",$info['news_id']).newsposter($info,"·").newsopts($info,"·").closeform("N",$info['news_id'])."Wystarczy tylko usunąć openform() i zamiast closeform() wpisać itemoptions() :
".newsposter($info,"·").newsopts($info,"·").itemoptions("N",$info['news_id'])."W skórkach, które nie wykorzystują nowych funkcji (np. Prime), należy zastąpić cały kod nową wersją, jak poniżej:
Przed:
<td align='right' class='news-footer'> <img src='".THEME."images/bullet.gif' alt='·'> ".$locale['040']."<a href='profile.php?lookup=".$info['user_id']."'>".$info['user_name']."</a> ".$locale['041'].showdate("longdate", $info['news_date'])." · ".($info['news_ext'] == "y" ? "<a href='news.php?readmore=".$info['news_id']."'>".$locale['042']."</a> ·\n" : ""); if ($info['news_allow_comments']) echo "<a href='news.php?readmore=".$info['news_id']."'>".$info['news_comments'].$locale['043']."</a> ·\n"; echo $info['news_reads'].$locale['044']." <a href='print.php?type=N&item_id=".$info['news_id']."'><img src='".THEME."images/printer.gif' alt='".$locale['045']."' style='vertical-align:middle;border:0px;'></a> </td>
Po:
<td align='right' class='news-footer'>”. newsposter($info, THEME_BULLET).newsopts($info, THEME_BULLET).itemoptions("N",$info['news_id']).” </td>Nie zapomnij o usunięciu wywołań funkcji tablebreak() jeśli występują.
Funkcja render_article()
Funkcję aktualizujemy na identycznych zasadach jak render_news(). Wystarczy zastąpić "news" przez "article" oraz "N" przez "A":
<td align='right' class='news-footer'>”. articleposter($info, THEME_BULLET).articleopts($info, THEME_BULLET).itemoptions("A",$info['article_id']).” </td>Tu również należy usunąć wywołania funkcji tablebreak() .
Funkcje openside() and opensidex()
Jak już wiadomo, funkcje te również zostały połączone. Akurat w tym
przypadku jest to trochę skomplikowane, gdyż autor każdej skórki robił je po
swojemu. Dlatego niezłym sposobem jest porównanie funkcji opensidex()/openside()
w już przekonwertowanych skórkach. Oczywiście opiszemy teraz kolejne kroki,
które pozwolą to zrealizować. Na początek należy usunąć funkcje openside()
i closeside(), a funkcji closesidex() zmienić nazwę na closeside()
i zmienić nagłówek funkcji opensidex() na nową openside():
Przed:
function opensidex($title,$open="on") {
Po:
function openside($title, $collapse = false, $state = "on") {Następnie wykonaj poniższe kroki: Usuń poniższy wiersz kodu:
if($open=="on"){$box_img="off";}else{$box_img="on";}Dodaj poniższe wiersze na samym początku nowej funkcji openside():
global $panel_collapse; $panel_collapse = $collapse; $boxname = str_replace(" ", "", $title);Dodaj poniższy wiersz na samym początku nowej funkcji closeside():
global $panel_collapse;
Zastąp starą wersję przycisku zwijania nową, opartą na funkcji (niektóre
skórki mogą już korzystać z nowej wersji) i umieść ją w instrukcji if, co
spowoduje, że przycisk będzie widoczny tylko w panelach, które można zwijać:
Przed:
<td class='scapmain' align='right'><img src='".THEME."images/panel_$box_img.gif' name='b_$title' alt='' onclick=\"javascript:flipBox('$title')\"></td>
Po:
".($collapse ? "<td class='scapmain' align='right'>".panelbutton($state, $boxname)."</td>" : "")."Zastąp także poprzednie znaczniki blokowe (div) nową funkcją odpowiedzialną za ukrywanie zawartości:
<td colspan='2' class='side-body'> <div id='box_$title'"; if($open=="off"){ echo "style='display:none'"; } echo ">\n"; } function closeside() { global $panel_collapse; echo " </div> </td> </tr> </table>\n";
Po:
<td colspan='2' class='side-body'>";
if ($collapse == true) { echo panelstate($state, $boxname); }
}
function closeside() {
global $panel_collapse;
if ($panel_collapse == true) { echo "</div>\n"; }
echo "
</td>
</tr>
</table>\n";
Pierwszy test
Możemy już spróbować włączyć naszą aktualizowaną skórkę. Strona powinna się wyświetlić, chociaż na pewno nie wszystkie element wyglądają tak, jak powinny. Jeśli nie wyświetla się zupełnie lub zwraca błędy, należy jeszcze raz sprawdzić wszystkie poprzednie kroki tego przewodnika i ogólną poprawność kodu. Jeśli nie jesteś w stanie zlokalizować błędu, szukaj pomocy na stronach PHP-Fusion Themes (http://themes.php-fusion.co.uk) lub na stronach polskiego supportu (http://www.php-fusion.pl).
Zapraszamy do lektury drugiej części artykułu
Oryginał tego artykułu pochodzi z PHP-Fusion Wiki.
Autor: Matonor
Tłumaczenie: lomcskw
Korekta i skład: jantom
Komentarze
Dodaj komentarz
Oceny
Zaloguj się lub zarejestruj, żeby móc zagłosować.
| Świetne! |  |
75% | [3 głosy] |
| Bardzo dobre | |
25% | [1 głos] |
| Dobre | |
0% | [0 głosów] |
| Średnie | |
0% | [0 głosów] |
| Słabe | |
0% | [0 głosów] |