Jak dodać na stronie dynamiczną listę ostatnich wpisów?
- Poziom trudności:
Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:
Tradycyjny widget pozwalający na wyświetlenie tytułów ostatnich wpisów jest mocno okrojony. Pozwala na dodanie ostatnich kilku tekstów w bocznym pasku lub stopce, daje możliwość nazwania tej sekcji w dowolny sposób oraz określenia ile tych wpisów ma się wyświetlać. Nic poza tym domyślnie nie możemy w nim zmienić. Chciałbym Ci pokazać wtyczkę pozwalającą na znacznie więcej. Dodaj samodzielnie dynamiczną listę ostatnich wpisów. Do dzieła!
Wszystkich zainteresowanych wtyczką, która pozwala na utworzenie automatycznie przewijanej listy z tytułami ostatnich wpisów (albo określonej kategorii) wyglądającej w podobny sposób:
zapraszam do lektury tego kursu.
Krok 1 – instalacja wtyczki
Na samym początku przejdź do sekcji Wtyczki -> Dodaj nową i wpisz w wyszukiwarce nazwę Easy News Ticker. Zainstaluj i aktywuj wtyczkę.
Krok 2 – umieszczenie elementu na witrynie
Po aktywacji wtyczki przejdź do sekcji Wygląd -> Widgety i przeciągnij widget Easy News Ticker z lewej strony na prawą do wybranej przez Ciebie przestrzeni. Teraz już wystarczy, że zmienisz nazwę wtyczki i gotowe.
No prawie gotowe. W kolejnym kroku pokażę Ci co zrobić aby sprytnie zarządzać wyświetlanymi się tytułami.
Krok 3 – zróbmy to po swojemu
W zasadzie na tym mógłbym skończyć i się z Wami pożegnać, ale to nie byłoby w moim stylu. Po włączeniu widgetu nie wszystko mi pasowało. Postanowiłem więc pogrzebać trochę w opcjach i znalazłem furtkę do zmiany ustawień, których nie można zmodyfikować z poziomu sekcji Widgety.
Zależało mi na tym aby trochę opóźnić przeskok kolejnych wpisów oraz ograniczyć ich ilość do trzech. Aby zmodyfikować wtyczkę na moje potrzeby musiałem wykonać dwie czynności:
- Wyłączyć skrypt wywoływany przez wtyczkę odpowiadający m.in. za ustawienia ilości wyświetlających się wpisów oraz prędkość przewijania.
- Wywołać np. w stopce swój skrypt ze zmienionymi wartościami.
Ad.1
Aby dokonać wyłączenia przeszedłem do sekcji Wygląd -> Edytor i zacząłem edytować plik functions.php. Wkleiłem do niego następujący fragment kodu:
function off_easy_news_ticker() { wp_dequeue_script( 'easy-ticker-init' ); wp_deregister_script( 'easy-ticker-init' ); } add_action( 'wp_print_scripts', 'off_easy_news_ticker' );
Ad.2
Teraz wkleiłem w sekcji Wygląd -> Edytor w pliku footer.php zmodyfikowaną funkcję odpowiadającą za wszystkie efekty wtyczki.
<script type="text/javascript"> (function($){ $(document).ready(function(){ $('.ent_ticker').easyTicker({ direction: 'up', easing: 'swing', speed: 'slow', interval: 3000, height: 'auto', visible: 3, mousePause: 1, controls: { up: '', down: '', toggle: '', playText: 'Play', stopText: 'Stop' } }); }); })(jQuery); </script>
Poprzednio kod zawierał wartość interval na 2000 oraz visible na 0. Znaczyło to nic innego jak przewijanie tytułów wpisów co 2000 milisekund (2 sekundy) oraz wyświetlanie wszystkich tytułów. Postanowiłem wydłużyć czas do 3 sekund oraz wyświetlić na początku tylko trzy ostatnie tytuły. Po zapisaniu zmian odświeżyłem i czas przewiania był wydłużony, a tytułów było dokładnie tyle ile chciałem.
Zachęcam Cię do eksperymentowania z ustawieniami. Pamiętaj aby przed modyfikacją jeśli nie masz pewności co do tego co robisz zrobić kopię zapasową plików functions.php oraz footer.php.
Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:
Komentarze — Napisz pierwszy komentarz
Czy powyższe wskazówki były skuteczne? Jeśli tak, podziel się swoimi spostrzeżeniami w komentarzu. Gdybyś chciał się podzielić ze mną skrawkiem kodu aby uzupełnić minikurs to skorzystaj z portalu pastebin.com i wyślij linka do kodu. Instrukcje jak to zrobić znajdziesz tutaj.