eRIZ's weblog

PHP, webdesign, Linux, Windows i inne, bo nie samym chlebem człowiek żyje

Tworzymy własny sidebar – „widżety” i :hover w IE

Jak zapewne zauważyliście, mój sidebar w końcu przeszedł pewną metamorfozę. Zgodnie z tym, co sobie obiecałem zmieniłem go, bo był „niedopracowany”. Teraz postanowiłem go „ułebodwazerować” i podzieliłem go na jakby widżety – są one raczej klasyczne. Dodatkowymi są: kalendarz, najnowsze wpisy, losowe wpisy. Co do samej postaci list z linkami – żeby nie straciły na zawartości i aby nie zajmowały tyle miejsca, to postanowiłem opisy pokazywać dopiero po wskazaniu myszą linka.

Teraz opiszę jak utworzyć każdy z takich widgetów u siebie.

Najpierw trochę teorii.

Wszystkie opisy, które pokazują się po wskazaniu myszą na link są oparte na pseudoklasie :hover. Wszystko by było OK, gdyby nie jeden problem: IE. Nie wiem, jak to jest w siódemce, ale we wszystkich pozostałych na użycie :hover bez jakichkolwiek hacków przeglądarka zezwala tylko dla elementu <a>. Nie ma sensu pchać osobnego skryptu tylko po to, aby pod IE się mógł opis pojawiać. Owszem, można by było wszystko wcisnąć link, ale specyfikacja XHTML nie zezwala na umieszczanie linków w linkach. Poza tym, inne obiekty niepotrzebnie by zmieniały wygląd. IE obsługuje technologię zwaną behaviours. Wykorzystał to autor whatever:hover, która pozwala na „normalne” używanie pseudoklas :hover czy :focus we wszystkich elementach. Ma tylko jedną wadę – nie możemy ich użyć w dynamicznie tworzonych obiektach (np. poprzez AJAX).

Aby uaktywnić csshover w IE:

  1. Skopiuj plik csshover.htc do jakiegoś katalogu. WXP od wersji z Service Packiem 2 wymaga również, aby serwer wysyłający plik ustawiał kodowanie na text/x-component htc. Jeśli Twój dziennik stoi na serwerze obsługiwanym przez Apache, to utwórz plik .htaccess w katalogu z csshover i wpisz:

    AddEncoding text/x-component htc

    Wolna linijka na końcu .htaccess jest niezbędna.

    Może się również zdarzyć, że nie ma możliwości skorzystania z .htaccess lub dziennik posiadamy na serwerze innym niż Apache. Wówczas zmieniamy nazwę csshover.htc na csshover.php i na jego początku dodajemy:

  2. W sekcji <head> dopiszemy komentarz warunkowy:

    W zależności od potrzeb zmieniamy ścieżkę do pliku albo rozszerzenie.

To tyle jeśli chodzi o obsługę przez przeglądarki, teraz przejdę do opisu wykonania poszczególnych wstawek:

Znowu trochę teorii

WordPress standardowo udostępnia nam pewien wachlarz funkcji, które możemy wykorzystać w swoim szablonie. W naszym wypadku okażą się one po prostu… niewystarczające. Tak, dobrze napisałem. Oryginalne funkcje narzucają nam jeden ustalony schemat np. list z linkami, który możemy co najwyżej oddzielić jednym tagiem. Ale co w sytuacji, gdy chcemy zrobić coś więcej? Właśnie, niezbyt wiele. Mamy jednak możliwość wykorzystania własnych skryptów PHP w szablonach. I właśnie z tego skorzystamy. ;)

Większość kodu (zapytania SQL), to skopiowane kawałki oryginalnych funkcji WordPressa.

Kalendarz

Tu nie ma się za bardzo nad czym rozwodzić. Zresztą, kod produkowany przez WordPress jest dobrze dopracowany i odpowiednio skonstruowanym CSS-em można z nim zrobić praktycznie wszystko. Co trzeba do kalendarza? Ano, tylko tyle: :P

Liczba w parametrze funkcji określa ilość znaków, która będzie wyświetlana w nagłówkach tabeli przy dniach tygodnia (np. 1 – „w”, 2 – „wt”).

Blogroll/własne linki, itp.

Tu sytuacja będzie troszkę bardziej skomplikowana, ale niekoniecznie. Po prostu będzie więcej PHP.

Spowoduje to wyświetlenie listy z linkami oraz ich opisami. Domyślnie sortowane według nazwy, ale nic nie stoi na przeszkodzie, aby filtrować wyniki na podstawie innego klucza. Ich lista jest dostępna w WordPress Codex.

OK, lista już jest, ale wygląda z lekka paskudnie. Najpierw zaopatrujemy się w ikonki, np. Silki.

Tak wygląda mniej więcej mój kawałek arkusza stylów:

ul.box
{list-style-type: none; padding: 0; margin: 0; border: 1px solid #DDD; width: 100%; }

ul.box small
{ display: none; padding: 3px 0; color: #333; border-top: 2px solid #71BDFF; margin: 2px 0; }

ul.box li
{ background: #F7F7F7 url('gfx/asterisk_yellow.png') no-repeat; padding: 3px; padding-left: 23px; }

ul.box li a.title
{ display: block; color: #555; font-weight: bold; text-decoration: none; border: none; width: 100%; }

ul.box li:hover
{ background-color: #CCE6FF; }

ul.box li:hover small
{ display: block; }

ul.box a.title:hover
{ text-decoration: underline; }

ul.box li:hover a.title
{ color: #000; }

ul.box p
{ margin: 0; }

Dostosuj i wklej do swojego CSS-a i tyle. :)

Dla bardziej wnikliwych: Elementem „trzymającym” opis jest tag <small> w stanie spoczynku jest on ukrywany, natomiast – przy najechaniu kursorem na element listy – zmieniana jest własność display w selektorze ul.box li:hover small. Niekoniecznie musi być to widoczność obiektu. Wszystko zależy od wyobraźni, przepis masz. ;)

Następne przykłady będą w większości wykorzystywały powyższego CSS-a i koncepcję opisów. Zmieniał będzie się tylko kod PHP.

Ostatnie wpisy

    get_results('SELECT ID, post_date, post_title, comment_count FROM '.$wpdb->posts.' WHERE post_status="publish" ORDER BY post_date DESC LIMIT 5');

    foreach($posts as $l){
    echo '

  • '.$l->post_title.'Kategorie: ';
    $cats = get_the_category($l->ID);

    $cc = count($cats);
    for($a=0;$a<$cc;$a++){ $cats[$a] = ''.$cats[$a]->cat_name.'';
    }

    echo implode(', ', $cats);

    echo '
    Komentarzy: '.$l->comment_count.'
    Data: ';

    echo date('Y-m-d @ H:i:s', strtotime($l->post_date));

    echo '

    • ';
    }
    ?>

Podstawowe funkcje PHP są wyróżnione, natomiast inne (pochodzące z WP) są opisane w Codeksie. Możemy również zmienić liczbę wyświetlanych wpisów zmieniając LIMIT 5 na dowolną liczbę.

Losowe wpisy

Składnia identyczna jak wyżej, ale zmienia się linijka z zapytaniem do bazy:

$posts = $wpdb->get_results('SELECT ID, post_date, post_title, comment_count FROM '.$wpdb->posts.' WHERE post_status="publish" ORDER BY RAND() LIMIT 5');

Kategorie

    get_results('SELECT cat_ID, cat_name, category_description, category_count FROM '.$wpdb->categories.' ORDER BY cat_name');

    foreach($cats as $c){
    echo '

  • '.$c->cat_name.'Opis: '.($c->category_description!='' ? $c->category_description : '(brak opisu)');

    echo '
    Wpisów: '.$c->category_count;

    echo '

    • ';
    }
    ?>

Archiwa

    get_results('SELECT DISTINCT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, count(ID) as posts FROM '.$wpdb->posts.' WHERE post_date < "'.current_time('mysql').'" AND post_date != "0000-00-00 00:00:00" AND post_status = "publish" GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date DESC'); foreach($archives as $a){ echo '
  • '.sprintf(__('%1$s %2$d'), $month[zeroise($a->month,2)], $a->year).'Wpisów: '.$a->posts.'

    • ';
    }
    ?>

Last.fm

Last.fm daje domyślnie listy oparte na obrazkach. Ma to swoje zalety jak i wady. Powiedziałbym, że tych drugich jest więcej:

  • Zmniejszona dostępność (syntezatory TTS nie potrafią, jeszcze, odczytać tekstu z obrazków),
  • Minimalne wręcz możliwości ustalania wyglądu własnego notowania.

Co można zrobić? Początkowo wydaje się, że nic. Błąd, da się. :) Mianowicie, po zalogowaniu do last.fm mamy link Narzędzia i Źródła danych. Właśnie one przyjdą nam z pomocą. W poniższym skrypcie wykorzystamy plik TXT dla ostatnio odgrywanych utworów. Dostępny jest on pod adresem http://ws.audioscrobbler.com/1.0/user/UŻYTKOWNIK/recenttracks.txt.

Napiszemy teraz skrypt, który będzie ów plik cache’ował. Dlaczego?

  • Na stronie możemy przeczytać, że dozwolone jest maksymalnie jedno wysłanie żądania do źródła danych na sekundę. Niby dużo, ale przy większej liczbie odwiedzin możemy mieć problemy.
  • Serwery są często przeciążone.

A więc do roboty. W katalogu szablonu tworzymy plik lastfm.cache.php z zawartością:

3600){
$data = cacheTracks();
}else{
$data = file_get_contents(TEMPLATEPATH.'/lastfm.cache');
}
}

if($data!=''){
$data = explode("\n", trim($data));
$tracks = array();
foreach($data as $r){
$a = explode(',', $r);
$track['time'] = $a[0];
unset($a[0]);
$track['name'] = implode(', ', $a);
$track['name'] = explode(' '.chr(226).' ', $track['name']);
$tracks[] = $track;
}
}else{
$tracks = array();
}
?>

Następnie, utwórz plik lastfm.cache i ustaw mu prawa dostępu do zapisu

Teraz w sidebarze:

Del.ic.je

Teraz to samo dla Delicji.

Serwis pobieranie danych umożliwia tylko za pośrednictwem JSON/RSS. Wybrałem JSON. Postępowanie praktycznie podobne do last.fm, ale nie do końca. Po pierwsze, musimy posiadać bibliotekę, która umożliwi rozkodowanie danych JSON do postaci zmiennych PHP. Mamy dwa wyjścia: PHP5 posiada wbudowaną obsługę JSON-a, ale 4 nie. Opiszę tu wersję dla czwórki i w komentarzach sposób przejścia na PHP5.

Jeśli mamy do dyspozycji PHP5 (5.2.0) z rozszerzeniem JSON, to możemy ten punkt pominąć.

PHP4: Ściągamy źródło JSON-PHP i zapisujemy w folderze skina pod nazwą json.php. Teraz tworzymy pliki analogicznie jak w przypadku last.fm, ale o innych nazwach – delicious.cache, delicious.cache.php.

Dla delicous.cache ustaw prawa do zapisu.

delicious.cache.php:

decode($data);

//... a te cztery na file_put_contents(TEMPLATEPATH.'/delicious.cache', serialize($data));
$p = fopen(TEMPLATEPATH.'/delicious.cache', 'w');
flock($p, LOCK_EX);
fwrite($p, serialize($data));
fclose($p);

return $data;

}

if(!file_exists(TEMPLATEPATH.'/delicious.cache')){
$data = cacheDelicious();
}else{
if(time()-filemtime(TEMPLATEPATH.'/delicious.cache')>3600){
$data = cacheDelicious();
}else{
$data = file_get_contents(TEMPLATEPATH.'/delicious.cache');
$data = unserialize($data);
}
}
?>

Teraz w sidebarze:

    0){
    foreach($data as $t){
    $tags = array();
    foreach($t->t as $u){
    //zamień UŻYTKOWNIK na swój login
    $tags[] = ''.$u.'';
    }

    $tags = implode(', ', $tags);

    echo '

  • '.$t->d.''.($t->n!='' ? $t->n.'
    ' : '').'Tagi: '.$tags.'

    • ';
    }
    }
    ?>

Dostosowanie do własnych potrzeb

Jak zapewne zauważyłeś(aś), przy każdym <ul> oprócz nazwy klasy znajduje się również ID. Posłuży ono nam do upiększania poszczególnych list, np. do zmiany ikonek:

#archives li
{ background-image: url('gfx/calendar_view_day.png') !important;}

Myślałem jeszcze o Delicjach, ale muszę trochę posiedzieć nad tym, bo tam do dyspozycji jest tylko JSON. Kto wie, może kiedy będę miał czas… :) – korciło, korciło i jest. :)

Naniosłem parę poprawek.

18 komentarzy

dopisz swój :: trackback :: RSS z komentarzami

RSS z komentarzami :: trackback

Skomentuj

Możesz używać znaczników XHTML. Dozwolone są następujące tagi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">

Wszystkie komentarze przechodzą przez moderację oraz filtry antyspamowe. Nie zostanie opublikowany komentarz, jeśli:

  • Jego treść obraża kogokolwiek.
  • W treści znajdują się wulgaryzmy i słownictwo ogólnie uznane za nieprzyzwoite.
  • Mam wątpliwości co do autora wpisu (Wszelkie anonimy są kasowane - niezależnie od zawartości - wpisz prawdziwy e-mail. Jeśli usunąłem, Twoim zdaniem, komentarz niesłusznie - daj znać). Zdarza się, iż sprawdzam kim jest komentujący.
  • Zawiera jakąkolwiek formę reklamy.

Warning: Undefined variable $user_ID in /usr/home/er1zpl/domains/eriz.pcinside.pl/public_html/weblog/wp-content/themes/inBlueDiary/comments.php on line 112

Szufladka