Tomasz Kozioł (Pop)kultura osobista

Zabawy z WordPressem, część #3 – slider, czyli dynamiczne promowanie materiałów

Z

Minęło ponad półtora miesiąca od ostatniego tekstu z cyklu “Zabawy z Wordpreesem” – postanowiłem przerwać to niezręczne milczenie. Cześć z Was zapewne zauważyła, że moja strona wzbogaciła się on nowy element – tak zwany “slider”, mianowicie. Też chcielibyście w ten sposób promować wybrane przez siebie materiały na swoim WordPressie? Dziś Wam podpowiem, jak to zrobić.

Zanim się dokopałem do “tego jedynego, właściwego” slidera, minęło trochę czasu. Od dwóch miesięcy – z przerwami, rzecz jasna – testowałem rozmaite plug-iny, które miały mi zagwarantować taki efekt. Niestety, część nie posiadała prawie żadnych opcji szybkiego dostosowywania (na przykład, jeden słuszny rozmiar), inne po prostu nie działały, nie chcąc się wyświetlić nawet w panelu admina. W końcu zainstalowałem wtyczkę pod wdzięczną nazwą “Smooth Slider“. I tu się los już do mnie uśmiechnął.

Pełny zestaw informacji znajdziecie na stronie producenta. Ze swojej strony dodam, że dzięki naprawdę bogatym opcjom “customizacji” chyba każdy będzie w stanie go dopasować do potrzeb swojego bloga. Z poziomu panelu admina możecie zmienić gabaryty, kolor tła, ramki, rozmiary wyświetlanych obrazków czy liczbę słów tworzących wprowadzenie (zwane też “leadem” “z angielska”).

Jeśli zaś chodzi o dobieranie materiałów, które mają się wyświetlać w sliderze, to sytuacja jest naprawdę komfortowa. Z poziomu edycji posta wystarczy zaznaczyć odpowiedni checkbox i… voila, gotowe. To generuje naprawdę dużą przewagę nad konkurencyjnymi wtyczkami, które na ogół tworzą slidera tylko, na przykład, z pierwszych pięciu najnowszych postów wybranej kategorii.

Niestety, w przypadku niektórych skórek – w tym i mojej – sama instalacja nie wystarczy do tego, by slider pokazywał się na głównej stronie Waszego bloga. Jednak po dłuższym grzebaniu w zasobach Google’a doszedłem do niezwykle satysfakcjonującego rozwiązania, dzięki któremu nie tylko udało mi się slidera wyświetlić, ale i mogłem dowolnie zdefiniować miejsce, w którym ma się pojawić.

Żeby to osiągnąć, trzeba skorzystać z tak zwanego “template tag”. Pisząc o tym językiem laika (czyli moim) – jest to taka komenda, która pozwala nam na przywołanie wybranej funkcji. W przypadku Smooth Slidera wystarczy wkleić poniższy kawałek kodu w odpowiednim miejscu i po sprawie:

<?php if ( function_exists( ‘get_smooth_slider’ ) )
{ get_smooth_slider(); }?>

Jeśli chodzi o wybranie owego “odpowiedniego miejsca”, to tu już musicie trochę testów przeprowadzić samemu. Jeśli chcecie zrobić podłużnego slidera, proponuję edycję pliku header,php (oczywiście, można to zrobić z poziomu panelu administracyjnego: wygląd -> edytor -> header.php). Sam, jak widać, postanowiłem wrzucić slidera do panelu bocznego, więc w moim przypadku wymagało to zabawy z plikiem sidebar.php – kod wrzuciłem zaraz po otwarciu pierwszej sekcji <div>; wygląda to następująco:

<div id=”right-sidebar”>
<?php if ( function_exists( ‘get_smooth_slider’ ) ) {
get_smooth_slider(); }?>
(…)

Kolejna sprawa. Jeśli chcecie, żeby slider wyświetlał się tylko na Waszej stronie głównej, powinniście trochę zmienić powyższy kod, dodając do niego warunek “and is_home()”, otrzymując coś takiego:

<?php if ( function_exists( ‘get_smooth_slider’ ) )
and is_home() { get_smooth_slider(); }?>

Inne możliwości to “and is_single()” (dla dowolnego wpisu) czy “and is_page()” (dla dowolnej statycznej strony).

Jeśli chcecie, żeby slider wyświetlał się wszędzie, powinniście skorzystać z pierwszego z podanych przeze mnie fragmentów kodu. Ale! W tym wypadku będzie to również wymagało od Was, niestety, ręcznego edytowania wszystkich wpisów/stron. Po zainstalowaniu omawianej wtyczki, pojawi Wam się jeszcze jeden dodatkowy checkbox na stronie edycji wpisu/strony – jego zaznaczenie oznacza, że zezwalacie na wyświetlanie się Smooth Slidera w danym miejscu.

To by było na tyle. Gdybyście mieli jakieś problemy z instalacją slidera, śmiało piszcie – postaram się pomóc. Zaś w następnych odcinkach “Zabaw z WordPressem” planuję zająć się tworzeniem kaskadowych menu oraz… zakładaniem wordpressowego forum.

komentarzy 29

Jestem bardzo ciekawy, co masz do powiedzenia! :-]

  • Slider jest świetny, serio. Uwagi również na miejscu. Fajnie się czytało i może coś podobnego zamontuję. Ale raczej nie na głównym blogu.
    Em, swoją drogą – nie uważasz, że trochę za szybko się przesuwa? Nie ma szans, żeby przeczytać tyle znaków w tak krótkim czasie.

  • Racja, wydłużyłem. Gdyby nadal było według Ciebie za szybko, to daj znać, będę wdzięczny. :]
    I cieszę się, że dobrze się czytało – chciałbym, żeby te teksty o WordPressie były przystępne. :]

  • Wiesz co? A nie lepiej byłoby zrobić krótsze te leady? Nie uważasz, że takie długie odstraszają trochę?
    Świetne te poradniki. Będzie kiedyś o tych śmiesznych i niezrozumiałych przeze mnie stylach CSS? ;p

  • “Wiesz co? A nie lepiej byłoby zrobić krótsze te leady? Nie uważasz, że takie długie odstraszają trochę”
    Zastanawiałem się nad tym i testowałem inne formy. Ale jak dałem krótszy tekst i większą czcionkę, to strasznie się rozjeżdżało i brzydko wyglądało. Choć w sumie Twoja uwaga podsunęła mi pomysł, żeby pisać unikalne leady do slidera (zamiast automatycznego pobierania pierwszych X wyrazów).
    I wtedy byłyby krótsze, a i bardziej treściwe przy okazji. A ramkę najwyżej zrobi się niższą. :] Dzięki za uwagę. :]
    Co do CSS-a – nauczyłem się już go tworzyć i posługiwać się nim i na WordPressie, i na Drupalu (choć ten pierwszy dużo łatwiejszy i przystępniejszy jest dla mnie na razie). Ale nie miałbym pomysłu, jak to przerodzić w poradnik… A czego chciałbyś się dowiedzieć? :] To by mnie może naprowadziło na temat. :]

  • Tak właściwie to ogólnych podstaw – jak dany element menu miałby stać się kolorowy, może rozwijalne, efektowne menu? 😉

  • Jeśli chodzi o menu, to będzie w ogóle oddzielny tutorial, ale opisujący wykorzystanie pluginu. :]
    Ale w sumie rozumiem, o co Ci chodzi, jeśli idzie o CSS. Myślę, że byłbym w stanie napisać coś w tych klimatach, żeby takie “podstawowe metody postępowania” opisać – dla osób, które w ogóle się tym na co dzień nie zajmują. :] Nie wiem, kiedy to będzie, ale się postaram, żeby się pojawiło. :]

  • witam
    fajnie wszystko 🙂
    ale mam problem bo chce mieć dwa języki na stronie i nie zminia mi ich w tym sliderze :

  • Witam 🙂
    Hm, a mógłbyś mi linka do swojej strony podać? Wtedy może będzie mi łatwiej coś podpowiedzieć. :]
    Zakładam, że po zmianie języka zmienia Ci się zestaw artykułów. Do slidera przypisujesz zaś konkretne materiały, czyli też w określonej wersji językowej.
    W takim razie powinieneś chyba zrobić dodatkowy slider, do którego dodawałbyś tylko materiały po angielsku. Później musiałbyś skorzystać z wspomnianego template taga po raz drugi – jeden by przywoływał pierwszego slidera, a “drugi drugiego”.
    I teraz tak, musiałbyś pogrzebać w internecie i znaleźć jakiś warunek typu tych wspomnianych w tekście (“and is_home” na przykład). Musiałbyś jednemu sliderowi dodać taki atrybut, żeby wyświetlał się tylko na polskich wpisach, a drugiemu, żeby tylko na angielskich. Tak bym spróbował to rozwiązać. :]

  • Wiatm
    Napisałeś w części #0
    “Poza tym, zapewne będzie też poradnik, jak uruchomić sobie WordPressa na własnym komputerze, tak by było można testować nowe ustawienia inaczej niż na żywym organizmie.”
    Mógłbyś podać jakieś skrótowe informacje teraz ? Nie wiem czy się doczekam na pełen tekst poradnika, a jest to kwestią, którą się ostatnio interesuję. Chciałbym zmiksować grafiki z mojego aktualnego bloga z oprawą bardziej techniczną nowej skórki. I potrzebuję możliwości bezpiecznego eksperymentowania. Jeżeli komentarz nie jest miejscem na jakieś skrótowe wyjaśnienie tej kwestii, to może skłoni Cię to do wybrania tego tematu na następny poradnik.

  • Również witam. :]
    Powiem tak – teraz dziergam na raz kilka rzeczy (w tym kończę pracę dyplomową), więc z napisaniem poradnika może być niestety krucho (wisi też o kaskadowym menu, który to tutorial miałem napisać miesiąc temu). Ale myślę, że to Ci pomoże:
    http://geeksaresexy.blogspot.com/2006/06/installing-wordpress-locally-under.html
    Sam korzystałem z tego tutoriala i poszło bez problemu. A gdybyś miał problem na którymś z poszczególnych kroków, to wtedy pisz śmiało do mnie z konkretnym pytaniem i jakoś zaradzimy. :]

  • No cóż, próbowałem z znanym Ci Ingmarem skorzystać z tego tutoriala, ale coś nam nie wyszło. W każdym razie stworzyłem sobie poligon doświadczalny na serwerze i tam próbuję coś działać w przeróbce tej skórki. Ale dzięki za pomoc.
    Pytanie jedno mam, jak wrzuciłeś na stronie wiedźmina ten wilczy medalion jako tło. Właśnie się zastanawiam jak wgl wrzucać i podmieniać te grafiki. Czy to wszystko jest w Arkuszu stylu? Albo czy wszystko znajdę w edycji wyglądu?

  • Ze wszystkimi tymi problemami myślę, że bez problemu pomogę. :] Postaram się przez weekend na Twoje pytania odpowiedzieć. :]

  • Dzięki, chociaż myślę, że już coś złapałem to i tak pewnie będzie mi mała pomoc potrzebna. Tak wgl to przerabiam dilectio na multichorme, wiem że z tą drugą skórką miałeś do czynienia i widziałem nawet efekt ^^ to mnie głównie przekonało do tej skórki, że można ją naprawdę fajnie przerobić.

  • “Pytanie jedno mam, jak wrzuciłeś na stronie wiedźmina ten wilczy medalion jako tło. Właśnie się zastanawiam jak wgl wrzucać i podmieniać te grafiki. Czy to wszystko jest w Arkuszu stylu? Albo czy wszystko znajdę w edycji wyglądu?”
    Sprawa wygląda tak:
    1. Wszystkie pliki graficzne związane z wyglądem strony (ze skórką) podmieniasz w folderze wp-content/themes/tu-nazwa-skróki/images (czy jakoś tak, na pewno znajdziesz).
    2. Jeśli np. Twoja skórka nie ma żadnego pliku typu background.jpg (np. ma tylko jednolity kolor ustalony z poziomu arkuszu stylu), to sam możesz śmiało dodać dowolny plik, żeby go później wykorzystać.
    3. Żeby osiągnąć taki efekt, jaki jest na Wiedzmin.net, musisz wstawić dokładnie taką linię w miejscu, gdzie definiujesz tło strony (na ogół sekcja body):
    background:#25242B url(‘images/background.jpg’) no-repeat center top fixed
    Oczywiście, wszystko w jednej linijce, bez “enterów”.
    Teraz przetłumaczmy to z ichniego na nasze:
    – no-repeat – oznacza, że dany obrazek nie jest w żaden sposób zapętlony;
    – center top – określa pozycję;
    – fixed – sprawia, że gdy przewijasz stronę, tło zostaje w miejscu.
    Po więcej parametrów odsyłam tutaj:
    http://www.w3schools.com/css/css_background.asp
    Bardzo fajne miejsce, tak swoją drogą – jeśli szukasz jakiejś wskazówki do np. “background”, na ogół znajdujesz od razu zestaw wszystkich przydatnych parametrów.
    Mam nadzieję, że pomogłem. :]

  • wszystko fajnie ale na mojej templatce smooth slider się wyświelta ale nie działa(czytaj nie zmienia nic – ani automatycznie ani po kliknięciu na button 1, 2 ,3 itd.)
    jeśli zmienię skórkę na jakąś podstawową to wszystko śmiga jak trzeba, gdzie szukać rozwiązania takiego problemu?

  • Mam zainstalowany motyw Graphene 1.5.6, autor: Syahir Hakim i chciałbym uruchomić Smooth Slidera w bocznym panelu tak żeby kilka zdjęć mi przemijało. Zrobiłem wszystko tak jak opisane i nie działa. Jestem laikiem w tej dziedzinie i nie wiem jeszzcze co oznacza ” Po zainstalowaniu omawianej wtyczki, pojawi Wam się jeszcze jeden
    dodatkowy checkbox na stronie edycji wpisu/strony – jego zaznaczenie
    oznacza, że zezwalacie na wyświetlanie się Smooth Slidera w danym
    miejscu.”  Prosze o pomoc?
    tomek K

    • Witam,
      niestety, nie potrafię pomóc. Omawiana wyżej wtyczka zmieniła się w dosyć znacząco od czasów, kiedy z niej korzystałem (a był oto już ponad rok temu). Mam nadzieję, że gdzieś uda Ci się odpowiedź na to pytanie (może spróbuj na stronie twórców?)
      Pozdrawiam.

  • Ja mam problem z slideshow na swoim blogu, nie działa automatycznie. Używam motywu Custom Community. Dodam, że slider należy do części motywu. Może ktoś wie jak to ustawić?
    Część kodu:

  • Wszystko pieknie w podczas czytania ale,ale w trakcie robienia tego slidera juz tak nie jest.W jakim miejscu w w pliku header.php wkleic ten plik zeby pokazał sie na stronie

    • Powiem tak – ten poradnik był pisany trzy lata temu, do wersji Word Pressa… bo ja wiem? 2.3? Nawet nie mam pojęcia, czy ten slider jest jeszcze aktualizowany, więc po prostu nie potrafię już pomóc, przykro mi.

  • Oj apostrofy w kodach się koledze poknociły. Trzeba pisać ze zrozumieniem tematu.

Tomasz Kozioł (Pop)kultura osobista

Tu mnie znajdziesz:

Najświeższe teksty

Najnowsze komentarze

%d bloggers like this: