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 (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ć.
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
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
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
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
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 codeDodanie możliwości zmiany kolejności pólW 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ówSkoro 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?
Comments