Adaptacja rotatora z WordPressem – przykład użycia własnych typów wpisów

Rotator w WordPressie - tutorial

Rotatory zdjęć zalały świat weba. Zanim pomyślisz, że są na tyle popularne, że lada dzień wyjdą z mody, przeczytaj ten artykuł. Zanim powiesz, że są dziesiątki gotowych wtyczek, za pomocą których dodasz slider do bloga w WordPressie, pomyśl, ile tracisz, rozwiązując każdą zachciankę za pomocą wtyczki. Albo inaczej – zobacz, co zyskasz, próbując samodzielnie zintegrować rotator zdjęć z WordPressem.

Jaki będzie efekt końcowy

Po przejściu tego tutoriala będziesz mógł w dowolnym miejscu na stronie umieścić taki oto rotator zdjęć:
[slider]

Co zyskasz, czytając ten artykuł

Jeśli lubisz majsterkować przy WordPressie, ten wpis warto przeczytać, nawet jeśli sam temat rotatorów średnio Cię interesuje. Oto powody:

  • Podsumujesz wiedzę z zakresu:
    • integracji zewnętrznego skryptu w postaci javascript/jquery, HTML, CSS z WordPressem
    • wykorzystania własnych typów wpisów (custom post types)
    • tworzenia własnych short code’ów w WordPressie
    • wykorzystania ikon wpisów w motywie
  • Zobaczysz, w jaki sposób twórcy motywów przystosowują motyw do działania z gotowymi skryptami jquery
  • Będziesz mógł integrować dowolny slider na własnym blogu lub stronie tworzonej dla klienta
  • Nauczysz się tworzyć wygodny dla użytkownika interfejs do wprowadzania zdjęć i informacji

Cel i przygotowanie

Naszym zadaniem będzie integracja rotatora znalezionego w sieci z WordPressem oraz implementacja interfejsu do wprowadzania informacji o slajdach (zdjęcia i powiązany z nimi opis).

Co posłuży jako przykład

Jako przykład wykorzystamy pliki źródłowe jquery, autorstwa Nathana Searles’a, pobrane ze strony slidesjs.com, a konkretnie zaadoptujemy przykład o nazwie Linking.

Dlaczego akurat ten rotator

  • kody są darmowe, udostępniane na licencji pozwalającej wykorzystać je nawet w projektach dla klientów
  • autor udostępnia przykłady, pokazujące różne wersje rotatora
  • w łatwy sposób można dostosować wygląd do własnego pomysłu, zmieniając pliki CSS

Gdy już zrozumiesz ideę dostosowania zewnętrznego skryptu do WordPressa, w analogiczny sposób będziesz mógł zaadoptować dowolny slider.

Etapy pracy

Na rysunku niżej przedstawiono w sposób poglądowy czynności, które wykonamy.

Integracja rotatora z WordPressem - etapy prac
Integracja rotatora z WordPressem – etapy prac (powiększ)

Pokazane na obrazku wyżej etapy prac zostaną szczegółowo omówione w poniższych punktach:

Krok 1: Pobranie plików rotatora do siebie na komputer

Ściągamy paczkę z kodami źródłowymi, upewniając się, czy licencja pozwala na jej wykorzystanie do naszych celów. Kody źródłowe stanowiące bazę tego tutoriala pobrałam ze strony slidesjs.com/, klikając w przycisk download.

Krok 2: Stworzenie interfejsu do wprowadzania zdjęć

WordPress jako system zarządzania treścią (CMS) daje nam możliwość spobodnej modyfikacji treści. Rozszerzając motyw o nową funkcjonalność, zawsze powinnyśmy robić to tak, aby późniejsza zmiana zawartości była łatwa i intuicyjna. Dlatego stworzymy wygodny interfejs dla użytkownika do wprowadzania zdjęć i informacji o slajdach. Zanim to zrobimy, musimy wiedzieć, co w ogóle ma obejmować.

Kody HTML roatatora
Wyobdrębnienie elementów o zmiennej treści

Krok 2a. Jakie elementy będą modyfikowane w przypadku rotatora?

Otwieramy (z pobranej paczki) plik HTML pokazujący działanie rotatora na przykładzie i szukamy elementów składających się na pojedynczy slajd. Zwykle będą to następujące pozycje (zobacz ich odpowiedniki zaznaczone ramkami na rysunku obok).

  • zdjęcie (ścieżka do pliku i tekst alternatywny (alt))
  • tytuł slajdu
  • opis
  • odnośnik do wpisu lub podstrony (URL)
  • tytuł odnośnika
Interfejs do wprowadzania slajdów
Interfejs do wprowadzania slajdów
Dodanie informacji o pojedynczm slajdzie
Dodanie informacji o pojedynczm slajdzie

Krok 2b. Wybór struktur WP do implementacji interfejsu

Teraz musimy zdecydować, w jaki sposób zaimplementujemy ten interfejs w WordPressie. Możemy to zrobić na różne sposoby. Ja wybrałam własne typy wpisów (custom post types) z rozszerzeniem ich o własne pola (custom fields).

Tworząc własny typ (rodzaj) wpisu mamy możliwość wykorzystania ikony wpisu (jak przy zwykłych wpisach). Dzięki temu użytkownikowi będzie łatwo załadować zdjęcia, za pomocą znanego mu już mechanizmu uploadu mediów. Zobacz obrazki obok.

Krok 2c. Implementacja interfejsu wprowadzania zdjęć

Niżej, w punktach przedstawiam, do czego sprowadza się tworzenie własnego typu wpisu w naszym konkretnym przypadku:

  • rejestracja własnego typu wpisu (slide) z uwzględnieniem obsługi ikon wpisów
  • dodanie własnych pól do przechowywania informacji (opis slajdu, odnośnik do artykułu, tytuł odnośnika)
  • wymuszenie zapisu informacji z tych pól w bazie wraz z zapisem wpisu
  • wyświetlenie pełnej informacji o slajdzie w układzie kolumnowym

Szczegółową rozpiskę co jest czym w tworzeniu własnych typów wpisów i w co otrzymujemy jako rezultat wykonania danego fragmentu kodu, znajdziemy w artykule WordPress jako CMS – własne typy wpisów Twoim kołem ratunkowym.

Poniższy kod należy wstawić do pliku functions.php wybranego motywu.

add_theme_support( 'post-thumbnails' );

/* rejestracja własnego typu wpisów - slide */

add_action('init', 'slides_register');
function slides_register() {
	$args = array(
    	'label' => __('Slides'),
    	'singular_label' => __('slide'),
    	'public' => true,
    	'show_ui' => true,
    	'capability_type' => 'post',
    	'hierarchical' => false,
    	'rewrite' => true,
    	'supports' => array('title','thumbnail'),
    	'menu_icon' => get_template_directory_uri()  . '/img/slider-icon.png'
    );
	register_post_type( 'slide' , $args );
}


/* dodanie własnych pól do przechowywania informacji o slajdzie 
   (opis slajdu, odnośnik do artykułu, tytuł odnośnika) */
 
add_action("admin_init", "slide_info");
function slide_info() {
	add_meta_box("prodInfo-meta",  __( 'Slide information') , "slide_meta_options", "slide", "normal", "low");
}

function slide_meta_options() {
	global $post;
	
	$custom = get_post_custom($post->ID);
	
	$slide_content = $custom["slide_content"][0];?>
	<label style="display: block; margin-bottom: 5px"> <?php _e( 'Enter slide description:' ) ?> </label><textarea cols="20" rows="5" name="slide_content" style="width:99%"><?php echo esc_attr( $slide_content ); ?> </textarea>
	
	<?php $post_ref_title = $custom["post_ref_title"][0]; ?>
	<label><?php _e( 'Enter reference post title:' ) ?></label><input type="text" name="post_ref_title" value="<?php echo esc_attr( $post_ref_title ); ?>" size="80" style="width:99%" />
	
	<?php $post_ref_url = $custom["post_ref_url"][0]; ?>
	<label><?php _e( 'Enter reference URL:' ) ?></label><input type="text" name="post_ref_url"   value="<?php echo esc_attr( $post_ref_url ); ?>" size="80" style="width:99%" />

<?php }


/* wymuszenie zapisu informacji z tych pól w bazie wraz z zapisem wpisu */

add_action('save_post', 'save_slide_data');
function save_slide_data() {
	global $post;
	update_post_meta($post->ID, "slide_content", $_POST["slide_content"]);
	update_post_meta($post->ID, "post_ref_title", $_POST["post_ref_title"]);
	update_post_meta($post->ID, "post_ref_url", $_POST["post_ref_url"]);
}


/* wyświetlenie pełnej informacji o slajdzie w układzie kolumnowym */

add_filter("manage_edit-slide_columns", "slide_edit_columns");
function slide_edit_columns($columns) {
	$columns = array(
		"cb" => "<input type="checkbox" />",
		"slide_thumbnail" => __('Thumbnail'),
		"title" => __('Slide title'),						
		"slide_content" => __('Description'),
		"post_ref_title" => __('Reference title'),
		"post_ref_url" => __('Reference URL'),
		'date' => __('Date'),
	);
	return $columns;
}

add_action("manage_posts_custom_column",  "slide_custom_columns");
function slide_custom_columns($column) {
	global $post;	
	
	switch ($column) {
		case "slide_thumbnail":
			echo get_the_post_thumbnail($post->ID, array(100,80));
			break;
		case "slide_content":
			$custom = get_post_custom();
			echo $custom["slide_content"][0];
			break;
		case "post_ref_title":
			$custom = get_post_custom();
			echo $custom["post_ref_title"][0];
			break;
		case "post_ref_url":
			$custom = get_post_custom();
			echo $custom["post_ref_url"][0];
			break;	
	}		
}

Rezultat wykonania tego kodu można zobaczyć na obrazkach pokazanych w opisie do punktu Krok 2b.

Uplaod zdjęć jako ikony wpisów
Uplaod zdjęć jako ikony wpisów

Krok 2d. Wprowadzenie zdjęć i opisów

Interfejs gotowy. Może już wprowadzić zdjęcia i powiązane z nim informacje. Do załadunku zdjęć używamy Ikon wpisów, jak pokazano na obrazku obok.

Krok 3. Adaptacja kodów źródłowych do działania z WordPressem

Integracja javascript i css z WordPressem
Kody javascript i css

Wracamy do analizy przykładowego pliku HTML, który pobraliśmy w paczce z kodami. Jak działa ten skrypt?

  • mamy 3 skrypty javascript odpowiedzialne za efekt przewijania slajdów
  • mamy zewnętrzny plik ze stylami CSS odpowiedzialny za wygląd rotatora
  • mamy kod HTML, zawierający powtarzające się bloki do wyświetlenia poszczególnych slajdów

Nasze zadanie sprowadza się do odwzorowania tych elementów w struktury WordPressa. Przed nami:

  • integracja skryptów javascript z motywem WordPressa
  • integracja plików css z motywem WordPressa
  • integracja kodu HTML z motywem WordPressa w postaci short code do wywołania

Krok 3a. Dołączenie skryptów javascript do motywu WordPressa

Musimy dołączyć do motywu z WordPressem 3 skrypty javascript zaznaczone ramką na obrazku wyżej. Pierwszy linkuje do biblioteki jquery, drugi do katalogu js, a trzeci w oryginalnych kodach był wywołany bezpośrednio na stronie HTML.

Przed ich integracją z WordPressem, kod trzeciego ze skryptów zapiszemy również w zewnętrznym pliku (ja wybrałam nazwę slides_custom.js) i odwołamy się do niego w taki sam sposób jak do skryptu nr 2.

W katalogu z naszym motywem tworzymy katalog js i do niego przesyłamy pliki slides.min.jquery.js oraz slides_custom.js

Do pliku functions.php dodajemy:

add_action('wp_print_scripts', 'load_slide_javasrcipts');
function load_slide_javasrcipts() {
	if(!is_admin()) {
		wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js');
        wp_enqueue_script( 'jquery' );            
	    
		wp_register_script( 'slides', get_bloginfo('template_directory') . '/js/slides.min.jquery.js');
		wp_enqueue_script('slides');
		
		wp_register_script( 'slides_custom', get_bloginfo('template_directory') . '/js/slides_custom.js');		
		wp_enqueue_script('slides_custom');
	}
}

Uwaga: Jeśli interesują Cię szczegóły dlaczego powyższy kod wygląda tak, a nie inaczej, zajrzyj do artykułu Jak zintegrować dowolną bibliotekę jquery z WordPressem, gdzie w sposób szczegółowy wyjaśniam na czym polega dołączanie skryptów javascript do WordPressa.

Krok 3b. Dołączenie zewnętrznego pliku CSS do motywu WordPressa

W katalogu z naszym motywem tworzymy katalog css i do niego przesyłamy plik global.css.

Do pliku functions.php dodajemy:

add_action('wp_print_styles', 'add_slide_css');
function add_slide_css() {
  	wp_enqueue_style('slides_global', get_template_directory_uri() . '/css/global.css');
}

Uwaga: tutaj musimy zachować ostrożność, żeby style rotatora nie weszły w konflikt ze stylami naszego motywu.

Bloki dotyczące slajdów - HTML
Bloki dotyczące slajdów – HTML

Krok 3c. Integracja kodu HTML z motywem WordPressa w postaci short code’u do wywołania

Piszemy funkcję, która w wyniku zwraca jeden długi tekst HTML. Tekst niemal identyczny do tego, jak w pliku HTML w pobranym w ściągniętej paczce (zobacz rysunek obok) z następującymi różnicami:

  • powtarzające się bloki z informacją o slidzie generujemy w pętli
  • elementy zawierające zmieniającą się treść zastępujemy informacją wprowadzoną przez interfejs zdjęć
  • wykorzystywane ikonki (np. strzałek) dołączamy odwołując do pełnego adresu URL plików obrazków (wcześniej należy je umieścić w podkatalogu img w katalogu motywu

Do pliku functions.php wstawiamy następujący kod:

function slides_with_desc() {

	global $post;

	$output = '';
	$output .= '<div id="container">'."n";
	$output .= '<div id="example">'."n";
	$output .= '<div id="slides">'."n";
	$output .= '<div class="slides_container">'."n";
	
	$args = array( 'post_type' => 'slide', 'posts_per_page' => -1);			
	$loop = new WP_Query($args);
	while ($loop->have_posts()) : $loop->the_post();
	
		$custom = get_post_custom($post->ID); 
		$output .= '<div class="slide">'."n";
		if ( has_post_thumbnail()) 
			$output .= get_the_post_thumbnail($post->ID, array(200,170));
		
		$output .= '<h2>' . $alt_text  . $post->post_title . '</h2>'."n";			
		$output .= '<p>' . $custom["slide_content"][0] . '</p>'."n";	
		$output .= '<p><a href="'. $custom["post_ref_url"][0] .'" class="ref_link">' . $custom["post_ref_title"][0] . '</a></p>'."n";			
		$output .= '</div><!--slide-->'."n";	


	endwhile; 
	wp_reset_query(); 		  
	
	$output .= '</div><!--slides container-->'."n";	
	$output .= '<a href="#" class="prev"><img src="'. get_bloginfo('template_directory') .'/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>'."n";	
	$output .= '<a href="#" class="next"><img src="'. get_bloginfo('template_directory') .'/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>'."n";	
	$output .= '</div><!--slides-->'."n";
	$output .= '</div><!--examples-->'."n";		
	$output .= '</div>'."n";		
				
	return $output;		
}

add_shortcode('slider', 'slides_with_desc');

Wynik zwrócony przez funkcję udostępniamy użytkownikowi w formie short code’u o nazwie slider (ostatnie linia w kodzie wyżej). Dzięki temu wstawienie rotatora zdjęć będzie możliwe w dowolnym miejscu na stronie lub we wpisie, za pomocą zapisu [slider]

Krok 4. Wyświetlenie rotatora

Otwieramy dowolną stronę lub wpis w edytorze WordPressa i wstawiamy rotator za pomocą kodu: [slider]

Gdybyśmy mieli potrzebę wstawienia rotatora do któregoś z plików php naszego motywu (np. index.php albo header.php), również możemy to zrobić, za pomocą funkcji do_shortcode.

Możliwe udoskonalenia

Tak przygotowany rotator wraz z interfejsem wprowadzania zdjęć nadaje się już do zastosowania w motywie dla nas lub dla klienta.
Sam interfejs możemy dalej udoskonalać. Oto propozycje rozszerzeń:

Dodanie do edytora przycisku, który wstawi podany short code
Dodanie możliwości zmiany kolejności pól
W tej chwili slajdy wyświetlana są w kolejności wprowadzenia. Żeby wpłynąć na ich kolejność, trzeba by zmienić datę.

Innym sposobem będzie instalacja pluginu Post Types Order. Plugin sprawdza się świetnie – pociągnięciami myszy decydujemy o kolejności wyświetlania wpisów. Wg mnie ma tylko jedną wadę: widoczny przycisk „Donate”. Gdy oddajemy motyw klientowi, wygląda to niezbyt profesjonalnie, ale może się czepiam… 😉

Rozwijana lista podpowiedzi zamiast ręcznego dodawania odnośników
Skoro slajdy linkują do artykułów/stron danej witryny, można pokusić się o automatyzację tego elementu. Zamiast mówić użytkownikowi, żeby ręcznie wpisał adres URL, wyświetlamy listę ostatnich 10 wpisów pozwalając na elastyczny wybór z listy.

Ten pomysł podsunęła mi kiedyś Ola, autorka bloga o WordPressie – webtuts.pl, w komentarzu do artykułu o tematyce pokrewnej.

Twoje doświadczenia z rotatorami

A co Ty sądzisz o rotatorach umieszczanych na stronach? Miałeś/aś do czytanie ze sliderem w WordPressie? Wykonywałeś to dla siebie czy dla klienta? Za pomocą wtyczki czy innym sposobem?

Inne wpisy o podobnej tematyce:

56 przemyśleń nt. „Adaptacja rotatora z WordPressem – przykład użycia własnych typów wpisów”

  1. Bardzo fajny poradnik. Jak zwykle 🙂 Na razie tylko przeleciałem – zabieram się za czytanie dokładne.

    Co do mody na slidery – jest z nimi tak, jak ze wszystkimi modami – są totalnie nadużywane, ale to jest ogólny problem z dziedziny usability i komunikacji wizualnej. Z 90% serwisów w sieci można wywalić 50% rzeczy (tak zwanych atrakcji) tylko je w ten sposób naprawiając. Ale są takie serwisy gdzie slidery są w punkt i… właśnie taki robię, więc przetestuję Twojego tutoriala w praktyce.

    1. Marek, zgadzam się. Ale swoją drogą ciekawe co robisz, jak przychodzi do Ciebie klient, który upiera się, że slider musi być na stronie.

      1. Jeśli byłaby to klasyczna fucha za kasę, to gdyby klient się upierał, zrobiłbym pewnie co chce. Zadbałbym jednak o to, żeby zrozumiał, że uważam to za niedobre i żeby ta moja opinia pozostała udokumentowana, nawet w mailu. Bo zdarza się, że taki klient potem narzeka po jakimś czasie choć sam sobie zaszkodził.

        Wiesz, fryzjerzy też maja klientów, którzy sami sobie szkodzą swoim gustem. Takie jest życie 😉

  2. W przykładowym rotatorze na tej stronie w momencie kliknięcia linku cofa się on do tyłu i w miejscu zostawia pustą przestrzeń bez przechodzenia na wskazaną stronę

    Pozdrawiam

    1. Dzięki Ci czujny czytelniku! Na szybko wyeliminowałam błąd zmieniając klasę odnośnika „link” na „neutralną”, czyli taką, z którą skrypt rotatora nic nie robi poza moją wiedzą.

  3. Parę dni temu tworzyłem slider dla klienta.
    Zapominałem sobie, a raczej nie wpadłem na pomysł, aby stworzyć oddzielną zakładkę w WP.
    Mój slider działa na zasadzie ikony wpisu i wyświetlania wpisów z danej kategorii.
    Wyodrębnienie tego w WP jest czytelniejsze a przy zastosowaniu shortcode bardziej funkcjonalne. Dzięki za tutorial.
    Jeśli możesz to powiedz mi czy własne pola w tym przypadku to custom post type czy taxonomy ? (jaka tutaj jest różnica bo się lekko zagubiłem).

    1. Mój slider działa na zasadzie ikony wpisu i wyświetlania wpisów z danej kategorii.

      To też jest ciekawe rozwiązanie.

      Jeśli możesz to powiedz mi czy własne pola w tym przypadku to custom post type czy taxonomy ? (jaka tutaj jest różnica bo się lekko zagubiłem).

      Tu został użyty tylko mechanizm „custom post type”. Jeżeli byśmy teraz dla tych naszych wpisów (slajdów) chcieli zrobić podział na coś w rodzaju kategorii, ale nie przy użyciu tych standardowych w WordPressie, tylko niejako dedykowanych specjalnie dla klasyfikacji naszych slajdów, wówczas byśmy tworzyli taksonomie. To tak na szybko. Pomyślę nad artykułem na temat różnicy między jednym a drugim, bo jak się sama z tym zetknęłam po raz pierwszy to też nie do końca czułam co jest czym.

      1. Teraz jeszcze raz czytając swoją wypowiedź i Twoją odpowiedź pisząc custom post type cały czas myślałem o custom field (własne pola). Coś mi się tutaj pomieszało.
        W moim sliderze wykorzystałem własnie custom field do wprowadzania adresu url danego slidu.

        Tworzyłem kiedyś taxonomy w celu „filtrowania” wpisów, dotyczyło to przetargów. taxonomia w 2 kryteriach: lokalizacja i rodzaj.
        W łatwy sposób można było wtedy wyświetlić np przetargi z danego miasta. Problemem, który nie rozwiązałem było np chęć wyświetlenia wpisów z lokalizacji A i rodzaju B (podwójne filtrowanie).

        1. No właśnie te pojęcia się nie Tobie jednemu mylą, bo brzmią podobnie. W tym przykładzie custom fields też zostały użyte, żeby było ciekawiej 🙂

          Problemem, który nie rozwiązałem było np chęć wyświetlenia wpisów z lokalizacji A i rodzaju B (podwójne filtrowanie).

          A nie wystarczył odpowiedni warunek w query? Zresztą, pewnie trzeba by było teraz wnikać w szczegóły tego przypadku.

          1. z PHP jestem noga więc ciężko mi coś powiedzieć w tej kwestii.

            jeśli wybierzemy jakiś taxonomy to adres wygląda tak: np. ?rodzaj=dostawy
            spróbowałem teraz dać taką kombinację ?rodzaj=dostawy&?lokalizacja=inne-lokalizacja , ale filtruje tylko po 1 parametrze.

            rozwiązanie traktuje raczej jako ciekawostkę, nie pracuję już nad tą stroną.

          2. A, teraz kumam, Tobie chodzi nie tyle o query w kodzie templatki, tylko jak z GET’a (zapytania stworzonego na bazie wyboru w formularzu) przesłać query do WP. To jest bardziej skomplikowane i nie nadaje się na wyjasnienie w komentarzu. Nie mogę teraz tego znaleźć, ale widziałam na anglojęzycznych stronach świetny tutorial, z którego sama korzystałam jak rozpracowywałam ten temat.

            Podam Ci inne ciekawe, warte przeanalizowana linki w tym temacie:
            http://ottopress.com/2010/wordpress-3-1-advanced-taxonomy-queries/
            http://wordpress.org/support/topic/search-form-with-custom-taxonomy-dropdown (odpowiedź larsemil’a)
            http://www.aroundwp.com/search-form-with-custom-taxonomy-terms-and-categories/

  4. Dzięki stokrotne za ten wpis.
    Jakiś czas temu naszło mnie aby stworzyć motyw z róznymi rodzajami slidera ale poległam na połączeniu jquery z WP. Stworzyłam ten slider przez utworzenie widgetu i wstawienie go niego galerii z wtyczki nextgen gallery. Nie wiem czy to jest dobry pomysł.
    Opisany wyżej sposób jest lepszy bo klient może dodawać samodzielnie zdjęcia i nie może bawić się widgetami (jesli się wstawi shortcode do pliku php).

    A teraz proszę o pomoc bo u mnie nastąpiły błędy mimo że robiłam wszystko dokładnie jak wyżej:

    1. wpis gdzie wstawiłam [slider] stworzył się 2 razy – jak to poprawić
    2. gdy dodaję ikonę wpisu czy do wpisu czy do slides pojawia się monit:
    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‚admin_init’ not found or invalid function name in C:xampphtdocswordpresswp-includesplugin.php on line 405

    przedtem tego nie było.
    linia 405 to jest:
    call_user_func_array($the_[‚function’], array_slice($args, 0, (int) $the_[‚accepted_args’]));

    jak to poprawić?

    3. punkt 3c
    piszesz na samym początku, że dzięki tej instrukcji będzie można wstawić dowolny slider. Od dawna już chcę to rozgryźć ale boję się że utknę na punkcie 3c. Niestety z php u mnie marnie.
    Czy możesz to jakoś objaśnić albo gdzie można poczytać na ten temat.
    Zresztą i tak spróbuję wstawić inny slider jquery w najbliższych dniach i zobaczymy czy się uda.

    1. No super, że komuś się to przyda i przy okazji przetestuje. Bo właśnie zgłaszając komunikat błędu wykryłaś błąd w kodzie w punkcie 2c. Wykasuj całkiem tą linię:

      add_action("admin_init", "admin_init");
      

      .

      Nie wiem, co to znaczy, że wpis pojawił się dwa razy? Sam się dwa razy dodał do WordPressa? Pewnie o coś innego chodzi.

      Pisząc, że będzie można wstawić dowolny slider miałam na myśli zrozumienie idei na czym polega dostosowywanie zewnętrznych kodów do współpracy z WP. Próbuj, trzymam kciuki, żeby się udało.

  5. Bardzo interesujący artykuł. Właśnie myślałem o tym, by zainstalować rotator na swojej stronie i nie bardzo wiedziałem jak się to tego zabrać. Tylko czy sobie z tym poradzę? Muszę dokładnie to przestudiować i przetestować na zapasowej stronie. Pozdrawiam.

    1. Dzięki. Jeśli gdzieś utkniesz, to zapytaj w komentarzu, właśnie po to one są. Podaj też wtedy link do kodów źródłowych, które próbujesz adaptować. Ale może nie będzie takiej potrzeby.

  6. Dzięki, jedna usterka zniknęła.

    Mam jeszcze 2 problemy:
    1. Wstawiłam slider we wpisie – wpis jest 1 a wyświetla się na blogu 2 razy – u góry poprawnie a pod spodem tylko strzałki do przesuwania i jak się w nie kliknie to wskakuje na wpisy pierwszy.
    2. przestał dzialać inny skrypt, który jest uzyty w tym motywie. Powoduje to fragment 3c.

    1. Małgosia, jeśli chodzi o punkt 1) co się wyświetla dwa razy – wpis czy slider? Jeśli przestał inny skrypt oparty na jquery, to może być konflikt na poziomie jquery.

  7. Bardzo przydatny artykuł! Integrowałam już w ten sposób kilka różnych sliderów dla klientów. Jedyna różnica jest taka, że sama nie tworzę meta boxów, tylko korzystam z gotowego skryptu – Meta Box.
    A w moim darmowym szablonie Delicacy, zrobiłam slider na stronie głównej tak jak pisze Oloo – w oparciu o konkretną kategorię i miniatury wpisów 🙂

    Pozdrawiam!

    1. Ola, dzięki za komentarz. W takim razie muszę się zapoznać z tym skryptem Meta Box. Twój szablon jest popularny. Klienci wymieniają mi go w liście szablonów, które im się podobają 🙂

      Ja się zabieram do przeczytania Twojego wpisu o wtyczce facebookowej (bo teraz o to wszyscy pytają) i zabrać nie mogę z powodu braku czasu. Jak w końcu mi się to uda, to skrobnę jakiś komentarz.

  8. Wracając do mojego motywu to używam skryptu equalcolumns, który powoduje że kolumny na divach są równej wysokości. To nie jest skrypt oparty o jquery. Niestety przestał działac co oznacza ze musze przebudować css aby uzyskac równie kolumny.

    pod dodaniu zmian powyżej i dodaniu do wpisu [slider], tworzy się jakby podwójny wpis na blogu. Wpis jest jeden ale wyświetla się podwójnie: u góry wpis ze sliderem a na dole taki sam wpis tylko zę są same strzalki przesuwu slidera.

    Ostatecznie można stosować tylko shortcode w kodzie motywu i o to mi w końcu chodziło.

  9. Kolejny problem! Wstawiłam rotator jako shortcode. Niestety obrazki przeskalowują sie do 200px bez względu na to jaki rozmiar się ustawi. Nie wiem jak to poprawić.
    Tą metoda można tylko wykorzystać taki slider do wstawiania tekstów z małą miniaturką. Myślalam że mozna wstawić całe zdjęcia.

    1. W kodzie w kroku 3c w linii 18 usuń drugi parametr wywołania get)the_post_thumbnail:

      $output .= get_the_post_thumbnail($post->ID);
      

      albo zmień go na taki rozmiar jaki chcesz.

  10. Męczę ten skrypt na wszystkie sposoby.

    Jak obejsć problem wielkości obrazka?

    Dobrze by było żeby rotator był elastyczny, zeby mozna było wstawić albo duży obrazek albo tekst z miniaturką. Jak to zrobić.
    Wg, skryptu powyżej można wstawic tylko tekst z minaturką 200×170 pikseli.

    jak zmienię w tej linijce wielkosć obrazka na duzy
    $output .= get_the_post_thumbnail($post->ID, array(1250,550 ));
    to już muszą być tylko duże obrazki.
    Czyli albo jedno albo drugie.

    1. Małgosia, Twoje komentarze trafiły do spam, dopiero teraz je stamtąd wyciągnęłam. Ja w rotatorze przykładowym potrzebowałam obrazka o szerokości 200px, więc dlatego użyłam tego parametru. Gdyby było tak, że w danym rotatorze potrzebujemy wyświetlić ten sam obrazek w dwóch różnych wielkościach, to też możemy to zrobić.

  11. ok juz rozumiem ze zamiast index.html przekleja sie do functions.php tamten fragment odpowiedzialny za integrację kodu HTML z motywem WordPressa w postaci short code’u. ale nadal mi sie same strzalki wyswietlaja. zrobilem wszystko tak jak w tutorialu. a moze cos innego robie zle. nalezy utworzyc oddzielny podkatalog ze wszystkimi plikami rotatora w podkatalogu szablonu?moze to jest zle. bo ja te pliki(functions.php, podkatalogi css i js) po prostu wrzucilem do katalogu z szablonem.

    1. Konrad, cieszę się, że próbujesz przejść tutka krok po kroku. Tak, dobrze robisz, wrzucając plik do katalogu z motywem. Być może ja coś pominęłam przy wklejaniu kodów. Sprawdzę i dam znać.

    2. Konrad, przetestowałam wszystkie kody z tego tutka na zasadzie copy-paste w witrynie testowej i slajder się pojawił, no i działa. Zauważyłam natomiast, że w tutku jest słabo wyróżniony ten krok:
      „W katalogu z naszym motywem tworzymy katalog js i do niego przesyłamy pliki slides.min.jquery.js oraz slides_custom.js”
      – może go pominąłeś?

      Inna uwaga jest taka, że trzeba samodzielnie wystylizować tak wstawiony rotator, w zależności o kolorystyki i czcionek motywu.

  12. Nienawidzę tych sliderów czy tam rotatorów – zwał jak zwał. Powsadzali to do każdej darmowej templatki WordPressa i męcz się człowieku z ręcznym usuwaniem tego, a często nawet nie jest opisane w kodzie gdzie taki slider się zaczyna i gdzie kończy. Nie lubię ich bo strasznie dużo z nimi pracy: trzeba wyszukać odpowiedni obrazek, przyciąć, wrzucić, a jeśli mamy bloga na którym na prawdę dużo piszemy trzeba robić to kilka razy dziennie co jest strasznie czasochłonne.

    1. Ciekawy komentarz, bo od osoby, która nie chce rotatora, a w pewnym sensie na siłę go dostaje. W skórkach premium zwykle jest możliwość rezygnacji ze slidera z poziomu kokpitu, w elegancki sposób.

      Faktycznie, z „utrzymaniem” rotatora to zawsze dodatkowa robota, ale jeśli dobrze się go zrobi (w sensie wypełni ciekawym contentem), to może i ściągnie uwagę czytelnika na kolejne posty. Ja widzę, że z tego rotatora, który mam w tym wpisie kilka osób przeszło dalej w głąb bloga w artykuły, do których normalnie by nie zajrzeli, bo nie były wyeksponowane.

  13. fajny tutek.

    Jak odczytac wszystkie posty za pomocą jednego WP_Query.
    Stworzyłem pare typów własnych wpisów typu note, content etc. chcialbym móc wybrac sobie posty z tychze typów. umiem wybrac jeden typ a jak zróbic by było wiecej niz jeden zadeklarowanych w jednym query?
    czy moze tworzyc nowa zmienna i nowe query?

    1. Bogdanc, żeby osiągnąć efekt o który pytasz, w linii 11 ostatniego kodu, w miejscu ‚post_type’ => ‚slide’ użyć array’a:

      'post_type' => array('post', 'slide', '_other_custom_post_type','custom_post_type_2', 'custom_post_type3')
      
  14. Witam, bardzo fajnie opisany i wytłumaczony tutorial.
    Cały kod przerobiłem tak, żeby uzyskać z niego wtyczkę, która nie będzie zintegrowana tylko z jednym szablonem, a raczej w pełni konfigurowalna. Mam jednak mały kłopot:) Mianowicie, chciałbym dodać do zakładki Slides „pod-zakładkę” ustawienia. I tutaj moja prośba, czy jesteś w stanie w prostych słowach opisać jak mogę to uczynić:) Będę bardzo wdzięczny.
    Z góry dziękuję za okazaną pomoc

  15. Witam,

    Chciałbym zapytać jaki plugin należy wgrać aby uzyskać zakładke Slides w menu wordpressa? Ponieważ ja dopiero co go zainstalowałem i tego niestety nie mam ;/

    Pozdrawiam!

    1. Marcin, przepraszam, że dopiero teraz odpowiadam. Powiadomienia o komentarzach wpadz mi do spamu i ich w ogle nie widziałam.

      Co masz na myśli pisząc „uzyskać zakładkę Slides w menu WordPress”? Czy to ma coś współnego z tym tutorialem i pytasz o dodanie własnego odnośnika do menu tak w ogóle?

  16. Witam
    Dopiero zaczynam przygodę z wordpressem więc proszę o wyrozumiałość 🙂 zrobiłem wszystko krok po kroku według Twojego tutorialu i rotator mi nie działa, wyświetla się obrazek wraz z tekstem i to wszystko. Nie ma strzałek, nie ‚przewija się’, także nie pojawiają się żadne błędy. Od wczoraj kombinuję jak koń pod górkę i nic… co może być nie tak?

    Pozdrawiam

  17. Już jest wszystko ok, ale nie wiem co było powodem. Skopiowałem jeszcze raz wszystkie funkcje i teraz działa poprawnie. Najwyraźniej coś źle skopiowałem…

  18. Witam, czytam wszystkie artykuły po kolei i przy tym zacząłem się zastanawiać czy tego typu zabiegi czyli np, dodawanie rotatora, własnej galerii czy nawet własnych typów w postaci Notatek nie powinno być zrealizowane za pomocą wtyczki nie tyle gotowej co przez nas napisanej. Być może się mylę ponieważ dopiero zaczynam wgryzać się w środowisko WordPress’a i wielu rzeczy nie wiem, albo raczej niewiele jeszcze wiem ;d

    Do takiego wniosku doszedłem ponieważ wszystkie wypisane prze zemnie rzeczy realizujemy w szablonie, w function.php rejestrujemy nowe typy, interfejs ich wprowadzania i wyświetlanie, a czy nie lepiej dla klienta i elastyczniej byłoby to wszystko zrealizować za pomocą wtyczek? Bo co jeśli klient czy też sami zdecydujemy się o zmianie wyglądu strony, ale będziemy chcieli zachować wszystkie dotychczas wprowadzone funkcjonalności. Po wyłączeniu czy odinstalowaniu starego stylu tracimy też wszystkie nasze typy i musimy je skopiować do nowego stylu jeśli chcemy zapewnić ich dalsze wsparcie. W przypadku pluginów takiej potrzeby by nie było, nie wiem jedynie czy dałoby się zrealizować we wtyczce np rotatora podłączanie go do strony/wpisu za pomocą Short Code.

    Zastanawiam się również czy rotator lub galeria nie powinna wyglądać troszeczkę inaczej. Wydaje mi się że powinniśmy mieć możliwość dodawania poszczególnych stron rotatora czy zdjęć z opisami do galerii które dopiero „grupujemy” w pojedynczą galerię lub rotator i dopiero taką grupę wyświetlać. Przy obecnej realizacji zagadnienia (tak mi się wydaje że to działa ponieważ opieram się tylko na kodzie który widzę i Pani tłumaczeniach) mamy możliwość stworzenia jedynie jednego rotatora, a dodawanie kolejnych „stron” czy elementów rotatora powoduje aktualizację tego jednego. Jeśli umieścimy w naszym serwisie za pomocą „[slider]” kilka rotatorów a chcemy zaktualizować jeden konkretny to przy takim rozwiązaniu się nie da ponieważ dodając kolejną pozycję do wyświetlenia w rotatorze w panelu administracyjnym dodajemy ją do wszystkich umieszczonych (a dokładniej jednego) rotatorów w naszym serwisie. Jedynym sposobem by zrobić klika takich rotatorów jest stworzenie kolejnego analogicznego do typu postu z tego artykułu, ale to powoduje powielanie tego samego kodu raz jeszcze używając nazwy dla typu i short code’u z dopiskiem liczby oznaczającej numer rotatora ([slider-2]).

    Swoją droga bardzo dobry blog i świetnie redagowane artykuły zawierające niesamowity zastrzyk wiedzy przekazywanej w bardzo przystępny sposób 😉
    Brakuje mi tylko dokładniejszego tłumaczenia kodu i funkcji WordPress’a o ile dla mnie nie jest to problemem ponieważ jestem w stanie domyślić się o co chodzi po przykładzie, a w najgorszym wypadku wpisać nazwę funkcji w google i powiedzieć na głos „Ahaa, o to chodz …” lecz dla osób zaczynających z jakąkolwiek formą programowania może to być bariera nie do przeskoczenia 😉

    Pozdrawiam i życzę więcej tak udanych artykułów w przyszłości i mam nadzieję że te których jeszcze nie przeczytałem będą tylko lepsze 😉

    1. Dziękuję za rzeczowy komentarz.

      Kwestia co wstawiać do functions.php a co jako plugin od dawna zaprząta głowy WordPressowcom. Ot, choćby jeden z artykułów:
      http://tommcfarlin.com/functions-php-vs-plugin-who-wins/

      Generalnie nie sposób się nie zgodzić z wszystkim tym, co napisałeś. Punkt widzenia zależy też od tego, jak na dane zagadnienie popatrzymy.

      Ja, gdy robię stronę dla klienta wszystko wrzucam jako functions.php, bo wówczas i rotator i własne wpisy, pola stają się integralną częścią zaprojektowanej strony.

      Przedstawiony rotator faktycznie jest tylko jeden i nie daje możliwości wstawiania go w różne miejsca z różnymi zdjęciami. Można by go rozwinąć np. wprowadzając kategorie (taksonomie).

      Wezmę sobie do serca uwagę odnośnie dokładniejszego tłumaczenia kodu. Ktoś inny tez mi na to zwrócił uwagę, więc jednak jest taka potrzeba. I fajnie.

      Dziękuję za Twoją wypowiedź. Bardzo lubię takie konstruktywne komentarze. Pozdrawiam! Aga

  19. Muszę się zgodzić że ze strony biznesowej takie posunięcie jest korzystne ponieważ klient przy samodzielnej próbie zmiany stylu lub przy zleceniu tego innej firmie będzie miał problem i najprawdopodobniej wróci do nas o ile zależy mu na naszych funkcjonalnościach. Oczywiście może się zdenerwować że tak zrobiliśmy i się do nas więcej nie odzywać, ale załóżmy że chodzi o stronę zwykłego Kowalskiego to gdy sam nie będzie mógł zrobić, a wcześniej był zadowolony z naszych usług to się znów do nas odezwie i o ile nie będziemy chcieli zaporowej ceny to do konkurencji nie zajrzy.

    Ale czy to się nie odpije nam samym czkawką, np gdyby przyszło Pani zmienić styl na tym blogu i załóżmy że gruntownie trzeba go przebudować ponieważ ten jest przestarzały i nie jest zgodny ze standardami, wydaje mi się że przebudowa samego stylu może zająć w takim przypadku więcej czasu niż zrobienie nowego od podstaw. W tym momencie pojawiają się schody implementacji np notatek na stronie i rotatora w stylu ponieważ to wszystko trzeba napisać od nowa w stylu lub skopiować ze starego. Z doświadczenia wiadomo że tego typu działania nie zawsze udają się zrobić bez problemów i nerwów bo nie do końca pamiętamy co i gdzie umieściliśmy w starym stylu i co należy przenieść oraz czy to co przenieśliśmy to wszystko czy może o czymś zapomnieliśmy.
    Więc czy nie lepiej dla nas samych będzie zrealizować notatki w postaci wtyczki, a ich wyświetlanie na stronie za pomocą widgetu?

    W tym miejscu zacząłem się zastanawiać czy nie dałoby się jakoś ukryć widgetów i wtyczek w stylu tak aby wilk był syty i owca cała. Chodzi mi o to czy nie da się powiadomić WordPress’a w function.php stylu o tym by uruchomił czy też wiedział o naszych wtyczkach i widgetach. W taki sposób uzyskalibyśmy łatwo przenośne wtyczki i widgety do nowego stylu oraz stają się one integralną częścią naszego stylu czyli projektu strony.

    1. Przepraszam, ale jakimś cudem nie zadziałała mi odpowiedź do Pani odpowiedzi w moim poprzednim komentarzu, mam nadzieję że nie sprawi to zbyt dużo problemu i łatwo da się to naprawić z poziomu panelu administracyjnego, ale tego jeszcze nie wiem 😉

    2. Muszę się zgodzić że ze strony biznesowej takie posunięcie jest korzystne ponieważ klient przy samodzielnej próbie zmiany stylu lub przy zleceniu tego innej firmie będzie miał problem i najprawdopodobniej wróci do nas o ile zależy mu na naszych funkcjonalnościach

      Nie wiem, czy myślimy o tych samych rzeczach. Gdy robimy stronę dedykowaną pod klienta, tzw. CMS (nie motyw na tradycyjny blog), rozwijamy całą funkcjonalność w ramach tworzonego motywu i to jest w porządku.

      Ale czy to się nie odpije nam samym czkawką, np gdyby przyszło Pani zmienić styl na tym blogu

      Własne wpisy są pamiętane w bazie, więc przy zmianie motywu wystarczy przekopiować kod z pliku functions.php do functions.php nowego motywu.

      W tym miejscu zacząłem się zastanawiać czy nie dałoby się jakoś ukryć widgetów i wtyczek w stylu tak aby wilk był syty i owca cała.
      na tym blogu

      Widgety można zaimplementować jako część motywu.

  20. Hej,

    Super poradnik ujarzmilem juz kilka sliderow, ale mam dziwny problem. Otóż chce za pomaca jednego skryptu jquery ujarzmić 3 slidery. Każdy zarządzany inna zakładka w PA. Wszystko ładnie śmiga, ale na 3 skryptach, a mi zależy na tym aby było na jednym. Po pierwsze mniejsze obciazenie serwera, po drugie strona ma mniejsze pole kolidacji.

    Co dziwne jak w zwykłym HTMLu powielę slider kilka krotnie i w pliku custom dopisze odpowiednie identyfikatory wszystko działa, a w wordpressie? Poprzez wyświetlenie źrodła okazuje sie, ze tworzy sie tylko głowny identyfikator np. ale tak jakby cos trzymało ja w załadowaniu treści. Dodam, ze jak w ogole wyrzucę ten główny identyfikator to treść jest ładowana (wiadomo nie w sliderze tylko normalnie), a pierwszy slider normalnie i działa i ładuje treść.

    Jest na to jakas rada, ktos miał podobny problem?

  21. Witam
    Jestem początkująca, więc proszę o łaskawość 🙂
    Przeczytałam twoje wpisy o własnych typach wpisów, nauczyłam się je tworzyć, umiem też wyświetlić je na stronie głównej. Chciałabym teraz zrobić tak, żeby móc decydować o ilości wyświetlonych wpisów w panelu administracyjnym np. wpisywać ilość. Jak zrobić coś takiego? Mogłabyś mi pomóc?
    Napisałam coś takiego, ale nie wiem jak wrzucić tu pole tekstowe, zapamiętać tą wartość w bazie i później użyć (jeśli gadam głupoty, bardzo proszę popraw mnie):
    add_action( ‚admin_menu’, ‚my_plugin_menu’ );

    function my_plugin_menu() {
    add_menu_page( ‚My Plugin Options’, ‚My Plugin’, ‚manage_options’, ‚my-unique-identifier’, ‚my_plugin_options’ );
    }

    function my_plugin_options() {
    if ( !current_user_can( ‚manage_options’ ) ) {
    wp_die( __( ‚Przepraszamy, nie masz wystarczających uprawnień.’ ) );
    }
    echo ”;
    echo ‚Ustaw ilość wpisów:’;
    echo ”;
    }

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *