Jak dodać na stronie dynamiczną listę ostatnich wpisów?

  • Poziom trudności:

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:

news-ticker

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ę.

wtyczka-easy-news-ticker

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.

dodanie-widgetu-easy-news-ticker

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:

  1. 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.
  2. 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.

UDOSTĘPNIJ