Jak wstawić suwak pod nagłówkiem WordPress. Jak stworzyć własny suwak obrazu w WordPress. Zainstaluj i skonfiguruj wtyczkę slidera oraz pokaz slajdów TheThe Image Slider WordPress

Znalezienie dobrego slidera dla WordPressa nie jest łatwym zadaniem. Najnowsze dane mówią, że dla WordPressa dostępnych jest 690 wtyczek typu slider. Kto ma tyle czasu na naukę każdej wtyczki?

Aby pomóc Ci oddzielić ziarno od plew, oto recenzja i ocena 10 najpopularniejszych darmowych wtyczek do pokazu slajdów wybranych z tej listy. Te suwaki obrazów zostały niedawno zaktualizowane i wszystkie otrzymały opinie od użytkowników WordPress.

Jakiej wtyczki do pokazu slajdów używasz? Powiedz nam o tym w komentarzach poniżej.

Meta Slider - slider dla WordPressa

Metasuwak to zdecydowanie najpopularniejszy slider WordPress z ponad 2 milionami pobrań.
Posiada cztery suwaki jQuery - Nivo Slider (responsywny, 16 efektów przejścia, cztery motywy), Coin Slider (cztery efekty przejścia), Flex Slider 2 (responsywny, dwa efekty przejścia, tryb karuzeli), Responsive Slides (responsywny, tylko efekt zanikania) .
Tworzenie nowego pokazu slajdów jest łatwe — dodaj obraz, wybierz suwak, którego chcesz użyć, a wtyczka wyplunie krótki kod, który możesz dodać w dowolnym miejscu na swojej stronie.
Dostępna jest również wersja pro tej wtyczki, jeśli chcesz zapłacić za dodatkowe funkcje.

Łagodzenie suwaka

Z prawie 650 000 pobrań, Łagodzenie suwaka Lite– druga najpopularniejsza wtyczka slidera.

Ta lekka wtyczka umożliwia ustawienie rozmiaru i czasu trwania suwaka oraz umożliwia uczynienie pokazu slajdów interaktywnym. Ma dwa efekty przejścia, efekt zanikania. Podobnie jak w przypadku wielu innych suwaków, aby dodać suwak do postu lub strony, musisz użyć krótkiego kodu.
Za pomocą tej wtyczki możesz utworzyć tylko jeden pokaz slajdów, więc jeśli chcesz mieć ich więcej w swojej witrynie, musisz poszukać gdzie indziej.

Gładki suwak

Gładki suwak Tworzy pokazy slajdów dla treści i obrazów z niestandardowym tłem i odstępami między slajdami, które można umieścić w dowolnym miejscu witryny.
Funkcje wtyczki obejmują responsywny projekt i sześć efektów przejścia. Obsługuje także niestandardowe suwaki, suwaki kategorii i najnowszych postów, zawiera tagi szablonów, krótki kod i widżet.
Najnowsza wersja tej wtyczki nie zawsze działa poprawnie po skonfigurowaniu, może to zakłócić działanie witryny. Sądząc po stronie pomocy technicznej Smooth Slider, wielu użytkowników miało problemy z tą wtyczką.

WOW, suwak

Wow, suwak Nietypowe jest to, że do stworzenia pokazu slajdów trzeba pobrać osobny program, kreator WOWSlider. Po wybraniu obrazów do pokazu slajdów możesz przesłać je do wtyczki. Będziesz musiał skopiować i wkleić krótki kod, aby dodać suwak w dowolnym miejscu na swojej stronie.
Witryna wtyczki zawiera dość obszerną dokumentację, która może pomóc w przypadku napotkania jakichkolwiek problemów.

vSlider Multi Image Slider dla WordPress

vSlider pozwala na wyświetlanie nieograniczonej liczby sliderów graficznych na Twojej stronie, choć ilu sliderów to „za dużo”?
Możesz osadzić suwaki w swojej witrynie za pomocą krótkiego kodu, niestandardowego widżetu lub używając ich jako funkcji w swoim motywie.
Wtyczka zawiera pomocne odpowiedzi na najczęściej zadawane pytania oraz samouczek wideo, który wyjaśni Ci, jak skonfigurować pierwszy slider. Jeśli masz jakiekolwiek problemy, dostępne jest również forum.

SlideDeck 2 Lite Responsywny suwak treści

SlideDeck to popularna i wszechstronna wtyczka, która ma zaawansowaną funkcjonalność w porównaniu do poprzednich wtyczek.
Ta wersja Lite nie obejmuje pełnego zestawu 14 źródeł treści, takich jak Facebook, NexGEN i Galeria, które są dostępne w wersji Premium.
Wersja Lite umożliwia jednak szybkie tworzenie pokazów slajdów z dowolnej zawartości, takiej jak obrazy, nagrania i filmy.

EasyRotator dla WordPressa – wtyczka Slider

EasyRotator obiecuje, że użytkownicy otrzymają w ciągu kilku sekund „piękne, interaktywne rotatory i suwaki zdjęć dla swojej witryny WordPress”, ale w rzeczywistości wymaga to pewnej konfiguracji. Najpierw musisz zainstalować oprogramowanie Flash, aby utworzyć slajdy – czyli rotatory – na komputerze, co może być denerwujące. Następnie możesz utworzyć nowy rotator w edytorze strony lub postów. Możesz także użyć krótkiego kodu, aby osadzić rotator na swojej stronie lub dodać rotator do swojego motywu za pomocą odpowiedniej funkcji.
Po wszystkich problemach związanych z instalacją oprogramowania Flash może się okazać, że nie zadziała, gdy spróbujesz ustawić główny suwak w edytorze postów. Małe badania wykazały, że ta wtyczka nie działa z Safari/Chrome.

Responsywny suwak WordPress – Soliloquy Lite

Monolog to jeden z najsłynniejszych sliderów i nie bez powodu - jest łatwy w instalacji, nie trzeba pobierać programu Flash, aby tworzyć i ładować suwaki lub bawić się ustawieniami. To po prostu działa.
Po dodaniu obrazów wybierz rozmiar suwaka, szybkość i kliknij Opublikuj. Następnie musisz skopiować powstały krótki kod na dowolną stronę lub post, na którym chcesz zainstalować suwak.
Chociaż jest to wersja Lite, nadal ma wystarczająco dużo funkcji, aby spróbować.

Suwak cyklonowy 2

Suwak cyklonowy 2 przywraca suwaki do podstaw. Oferuje łatwą instalację, wyświetla prosty suwak obrazu i zawiera takie funkcje, jak opóźnienia, rozmiary i pauza po najechaniu myszką.
Wtyczka obsługuje obrazy, YouTube, Vimeo, niestandardowy HTML i polecane suwaki. Możesz przeciągać slajdy, aby zmienić ich kolejność, suwaki są interaktywne.
Ta wtyczka ma również wersję pro.

Responsywny suwak

Responsywny suwak to bardzo prosta wtyczka do pokazu slajdów, która wymaga pewnej konfiguracji, ale dzięki temu jest łatwa w użyciu.
Dodawanie nowych slajdów jest łatwe i możesz umieścić je w dowolnym miejscu na swojej stronie za pomocą krótkiego kodu lub wewnątrz motywu za pomocą odpowiedniej funkcji.
Ustawienia pozwalają zmienić szerokość i wysokość suwaka, dodać efekt przejścia, opóźnienie, czas trwania animacji i automatyczny start.
Ta wtyczka jest przeznaczona tylko dla jednego suwaka, więc jeśli chcesz zainstalować wiele suwaków na swojej stronie, będziesz musiał użyć innej wtyczki.

Inteligentny suwak 3

Smart Slider 3 to prawdopodobnie najlepszy slider dla WordPressa. Bardzo potężna wtyczka posiadająca ogromny zestaw narzędzi do tworzenia pokazów slajdów, z których możesz korzystać według własnego uznania, w zależności od sytuacji. Dostępna jest duża baza gotowych sliderów, pięknych efektów przejść. Możesz tworzyć całe strony docelowe za pomocą samych suwaków, ale jest to już w wersji Smart Slider 3 Pro. Ale kiedy zetkniesz się z tą wtyczką po raz pierwszy, najprawdopodobniej będziesz mieć trudności z pracą z nią. Ponieważ bardzo łatwo jest się pomylić w dużej liczbie zakładek z ustawieniami.

Najpopularniejszy i najlepszy slider
A zwycięzców jest dwóch: Metasuwak I Inteligentny suwak 3.

Metasuwak jest nie tylko najczęściej pobieraną wtyczką slider, ale także uzyskała najwyższe oceny od użytkowników.
Jest łatwy w użyciu, ma dobrą równowagę między funkcjami i funkcjonalnością - a wszystko to jest bezpłatne.

vSlider Suwak wielu obrazów,SlideDeck 2 Lite I Literacki monolog– także świetne wtyczki do suwaków, jeśli Twoja witryna jest przeładowana obrazami i chcesz zrobić dużo suwaków. Te trzy tematy są skierowane do profesjonalistów, aby przyciągnąć klientów – zwiększyć sprzedaż – darmowymi produktami.

Jeśli potrzebujesz bardzo prostego suwaka, bez wszystkich bajerów i bajerów, to Cyclone Slider 2 jest zdecydowanie dla Ciebie. To świetny suwak, który można łatwo dostosować i nie jest obciążony niezliczonymi ustawieniami i opcjami.

Jeśli jednak później będziesz potrzebować suwaka z większą funkcjonalnością i możliwością umieszczenia kilku suwaków w swojej witrynie, nie możesz pominąć Meta Slider.

Drodzy odwiedzający, witam Was na łamach mojego bloga, start-lucky. Dzisiaj opowiem Ci jak łatwo i co najważniejsze, za darmo dodać piękny slider do swojej strony internetowej. Będzie atrakcyjnym elementem projektu dowolnego artykułu lub doskonałą alternatywą dla jednostki reklamowej, na której możesz zarobić.

Od 2013 roku różne badania przewidywały, że slidery wkrótce znikną z Internetu, ale ich popularność wciąż nie maleje. Cokolwiek powiesz, „ożywią” portal i zwrócą uwagę na informacje. Chcesz po prostu na nie kliknąć. Oczywiście, jeśli suwak będzie piękny i dobrze zaprojektowany, ale wrócimy do tego później.

Opowiem o suwaku WordPress. Jak szybko, za darmo i bez specjalnej wiedzy dodać na swoją stronę coś atrakcyjnego i ciekawego. Porozmawiajmy, czy warto robić to samodzielnie. Otrzymasz także przydatne wskazówki dotyczące napełniania.

Cóż, możemy zaczynać?

Metasuwak

Na początek chciałbym opowiedzieć o najlepszej wtyczce dla witryny WordPress. Rzadko się zdarza, żeby udało się znaleźć coś wartościowego i jednocześnie darmowego.

Jeśli przeczytacie mój artykuł na ten temat, będziecie pamiętać, jak bardzo byłem oburzony niektórymi propozycjami. Narzędzie z tej publikacji również kosztuje.

Cóż, pokażę ci, jak pracować z programem.

Instalacja

Możesz więc przeczytać szczegółowy artykuł na temat korzystania z WordPressa na moim blogu. Powtórzmy krótko, co należy zrobić w konkretnej sytuacji. Przejdź do sekcji wtyczek i wybierz z listy opcję „Dodaj nowy”; w pasku wyszukiwania w prawym górnym rogu wpisz: „Meta Slider” i Enter. Gdy tylko otworzy się strona z żądaną aplikacją, kliknij „Zainstaluj”.

Nie zapomnij aktywować Meta Slider w zakładce „Zainstalowane” lub w oknie, które otworzy się po instalacji.

W rezultacie w panelu sterowania po prawej stronie powinna pojawić się nowa kategoria. Możesz kupić wersję Pro za 19 dolarów lub skorzystać z darmowej, moim zdaniem jej funkcje są w zupełności wystarczające, więc zakup nie jest wcale konieczny.

Możliwości

Teraz zastanówmy się, jak utworzyć i wstawić karuzelę; czasami nazywa się to również suwakiem. Przejdź do aplikacji korzystając z linku po prawej stronie (w panelu administracyjnym WordPress) i kliknij plusik obok frazy „Dodaj nowy”.

Możesz przesłać dowolną liczbę zdjęć, ale nie radzę przesadzać. Nikt nie będzie przeglądał zbyt wiele. Optymalna liczba waha się od trzech do ośmiu.

Na prawo od przesłanych zdjęć znajduje się pole, w którym można wpisać adres strony, na którą dana osoba przejdzie po kliknięciu w zdjęcie. Możesz także dodać opis, przyciąć i alt do obrazów.

Masz również 4 opcje projektowania. W poniższym filmie pokażę Wam jak wygląda każdy z nich.

Wersja Pro zawiera wszystkie opcje efektów, czyli sposobu zastąpienia jednego slajdu drugim, dla każdej metody wyświetlania. Darmowa wersja ma ograniczone funkcje. Ale wciąż jest ich mnóstwo. Znajdziesz dobrą opcję.

Oprócz 4 głównych wariantów projektu, możesz wybrać jeden z czterech schematów kolorystycznych.

Oprócz tego istnieje również dodatkowe ustawienie. Jeśli chcesz dać czytelnikowi możliwość sterowania przewijaniem, musisz zaznaczyć pole obok słowa „Strzałki”. Nawigacja możliwa jest także za pomocą punktów. Pamiętaj, aby dać czytelnikowi kontrolę, zwłaszcza jeśli jest to jednostka reklamowa.

Jeśli chodzi o rozmiary, możesz je podać. Jednak wtyczka nie jest głupia, widzi maksymalne ograniczenia i jest automatycznie integrowana z projektem. Jeśli zainstalujesz go w bocznych paskach strony głównej, nieco później pokażę, jak to zrobić, proporcje zmienią się automatycznie.

Następnie pojawiają się „Ustawienia zaawansowane”. Tutaj możesz zwiększyć lub zmniejszyć czas trwania klatek i prędkość animacji. Nie powinni poruszać się zbyt szybko, w przeciwnym razie opuszczą Twoją witrynę. Jeśli zdjęć jest dużo, lepiej pozwolić na pokazywanie ich osobno.

Zmieniając obraz, można go podzielić na kilka części. Nie polecam podawać małej ilości. W przeciwnym razie będzie olśnić twoje oczy. Otóż ​​zamiast strzałek do przewijania polecam dodać własny tekst.

Na zrzucie ekranu poniżej możesz zobaczyć utworzony przeze mnie suwak. Dla ułatwienia polecam skorzystać z opcji podglądu. Menu tworzenia zawiera dwa przydatne przyciski w prawym górnym rogu: Pokaż, aby zobaczyć zmiany, i Zapisz.

Na samym dole prawego panelu znajduje się krótki kod do wstawiania do postów oraz do . Zaawansowani programiści tego potrzebują, a dla początkujących pokażę, jak osiągnąć stylowy efekt prostymi metodami. Ale o tym później.

Na początek przyjrzyj się jak slider wygląda w akcji. Oczywiście wszystko trzeba przetestować na własnej stronie internetowej, wiele mnie ominęło i nie pokazałem tego w tym filmie, ale można już z grubsza zorientować się w programie.

Integracja bloga

Wstawienie stworzonej karuzeli nie jest trudne. Nie musisz w tym celu kopiować niczego specjalnego. Jedyną rzeczą, o której zapomniałem wspomnieć w poprzednim akapicie, jest prawidłowe nazwanie suwaków, aby się nie pomylić.

Otwórz post, do którego chcesz dodać nowy suwak, lub utwórz nowy. Następnie umieść kursor w zamierzonym miejscu, w którym będzie zlokalizowana karuzela. Teraz kliknij „Dodaj suwak”, przycisk znajduje się w górnej części pola roboczego.

Wybierz żądany tytuł z listy i kliknij „Wstaw pokaz slajdów”.

Gotowy. W moim przypadku będzie to wyglądało tak na stronie.

Aby umieścić blok na stronie głównej, przejdź do kategorii „Wygląd” - „Widżety”. U góry zobaczysz „Meta Slider”.

Przesuń tę płytkę w wybrane miejsce, w którym będzie umieszczony suwak. Jeśli chcesz umieścić go natychmiast po wyszukiwaniu, powinien znajdować się tutaj na tej liście. Wybierz slider z listy utworzonych i zapisz zmiany.

Na mojej stronie testowej blok po prawej stronie wygląda tak.

Projekt tej witryny zakłada umieszczenie jej w obszarze treści i stopce, czyli w dolnej części witryny. Jeśli chcę dodać tutaj blok, po prostu przesunę go we właściwe miejsce.

Wygląd witryny ulegnie natychmiastowej zmianie.

Podsumowując, chciałbym dać ci kilka zaleceń. Jeśli chcesz dobrze zarobić na reklamach, zdecydowanie radzę nie oszczędzać na projektowaniu samych zdjęć. Zrozumienie wszystkich zawiłości marketingu, przeczytanie wielu książek o reklamie wizualnej i udoskonalenie umiejętności projektowania zajmuje jednej osobie dużo czasu.

Dopóki nie będziesz mógł rozwijać się w tym obszarze, radzę skorzystać z pomocy freelancerów. Można to zrobić na stronach internetowych WebLancer.net I FL.ru . Pierwsza jest nieco prostsza, ale na drugiej można spotkać prawdziwych profesjonalistów.

Cena zależy od budżetu, ale myślę, że zdjęcie będzie kosztować maksymalnie 500 rubli. Za tę kwotę można kupić trzy, jednak w tym przypadku chętnych do realizacji zamówienia będzie mniej, co oznacza gorszy wynik.

Życzę sukcesów, a jeśli spodobał Ci się ten artykuł, zapisz się do newslettera. Do następnego razu.

Suwaki są teraz w modzie i nie bez powodu! Możesz dodać do swojej witryny zdjęcia, treści, filmy i inne elementy, które przyciągną uwagę odwiedzających. W tej lekcji przyjrzymy się, jak to zrobić stwórz sam piękny suwak z obrazami opartymi na .

I choć istnieje wiele wtyczek do suwaków (moja obecnie ulubiona to), nie ma wtyczki dla FlexSlider, suwaka, który ma Skróty klawiszowe i który działa przy przesuwaniu ekrany dotykowe.

Pobierz źródła

Najpierw pobierz źródła z kodem, który będzie nam wkrótce potrzebny.

Tak będzie wyglądał sam suwak:

Krok 1. Przygotowanie

Pierwszą rzeczą, którą musimy zrobić, to Zainstaluj wtyczkę. Utwórz folder /envato-flex-slider/, a w nim znajduje się plik o nazwie „ envato-flex-slider.php’. Tutaj dodamy wszystkie niezbędne informacje i kod naszej wtyczki, zaczynając od bloku deklaracji wtyczki:

Chcę też zainstalować kilka stałe w celach informacyjnych, którego będę często używać we wtyczce. Poniżej deklaracji bloku, ale przed tagiem zamykającym php, dodaję następującą informację:

Define("EFS_PATH", WP_PLUGIN_URL. "/" .nazwa_bazy_wtyczki(nazwakatalogu(__FILE__)). "/"); zdefiniuj("EFS_NAME", "Envato FlexSlider"); zdefiniuj("WERSJA_EFS", "1.0");

Stworzyłem trzy stałe: ścieżka do wtyczki, nazwa wtyczki I wersja wtyczki, co jest niezbędne do aktualizacji i w razie potrzeby powiadamiania katalogu wtyczek WordPress o zmianach.

Pamiętaj, że wszystkie moje stałe zaczynam od „ EFS". To samo zrobię z nazwami funkcji, aby nie powodować konfliktów z innymi wtyczkami lub rdzeniem WordPressa.

Teraz, gdy już zakończyliśmy przygotowania, dodajmy pliki i kod FlexSlider.

Krok 2. Dodaj

Teraz czas dodać ważną część: JavaScript I CSS dla FlexSlidera. Zrobimy to za pomocą wp_enqueue_script I wp_enqueue_style Sam WordPress, aby uniknąć konfliktów. Możesz pobrać FlexSlider Tutaj. Będziemy potrzebować 2 plików: jquery.flexslider-min.js, i , w folderze /temat/.

Wp_enqueue_script("flexslider", EFS_PATH."jquery.flexslider-min.js", array("jquery")); wp_enqueue_style("flexslider_css", EFS_PATH.flexslider.css");

W obu wierszach nadajemy każdemu skryptowi nazwę, a następnie łączymy pliki .js i .css. Pamiętaj, że używamy naszej stałej ESF_PATH. Musimy użyć pełnej ścieżki, w przeciwnym razie pliki nie będą poprawnie połączone.

Możesz także zauważyć, że mamy trzeci parametr wp_enqueue_script. Jest to szereg innych skryptów, od których zależy nasz skrypt. W tym przypadku istnieje tylko jeden taki skrypt - ten JQuery. Jest pełna lista skrypty dołączone do WordPressa. Można użyć dowolnego z nich, korzystając z określonej tablicy zależności.

Następną rzeczą, którą chcemy zrobić, to włączyć JavaScript, co sprawi, że skrypt będzie działał. Zrobimy to za pomocą naszej własnej funkcji i Działanie-Funkcje WordPressa.

Funkcja efs_script() ( print " "; ) add_action("wp_head", "efs_script");

Ważna linia jest tutaj add_action("wp_head", "efs_script"); który będzie uruchamiał naszą funkcję efs_script() kiedy wywoływany jest wp_head. Nasza funkcja po prostu generuje kod JavaScript niezbędny do wykonania zadania FlexSlide.

Możesz zauważyć, że używam „ JQuery„zamiast tradycyjnego” $ ', który jest powszechnie używany w skryptach JQuery. Robię to po to, aby nasz skrypt nie kolidował z innymi bibliotekami JavaScript, np. Pismo Święte.

Na koniec po prostu skopiuj folder /temat/ do swojego folderu /envato-flex-slider/.

Krok 3: Krótki kod i tag szablonu

Następnie stworzymy nasze krótki kod(krótki kod, krótki kod) i tag szablonu. Krótki kod umożliwi użytkownikom wstawienie suwaka na dowolnej stronie lub poście. Aby zapoznać się z przewodnikiem wprowadzającym dotyczącym krótkich kodów, możesz obejrzeć Tutaj.

Znacznik szablonu umożliwi twórcom motywów osadzenie suwaka bezpośrednio w ich motywach. Jako twórca motywów uważam, że niezwykle ważne jest utworzenie obu motywów i zapewnienie ich łatwego dostępu w dokumentacji. Nigdy nie wiesz, kto będzie korzystał z Twojej wtyczki.

Funkcja efs_get_slider())( //Wypełnimy to później. ) /**dodaj krótki kod dla suwaka – do użycia w edytorze**/ funkcja efs_insert_slider($atts, $content=null)( $slider= efs_get_slider ( ); return $slider; ) add_shortcode("ef_slider", "efs_insert_slider"); /**dodaj znacznik szablonu- do użycia w motywach**/ funkcja efs_slider() ( print efs_get_slider(); )

Teraz ten kod wygląda całkiem prosto. W przypadku krótkiego kodu wywołujemy naszą funkcję ogólną efs_get_slider() i zwróć wynik. W przypadku tagu szablonu wyprowadzamy wynik. Celowo pominąłem implementację efs_get_slider(), ponieważ nie ustaliliśmy jeszcze, skąd będziemy pobierać obrazy.

Aby dodawanie dowolnej ilości zdjęć do slidera było wygodne, utworzymy osobny typ wpisu.

Krok 4: Niestandardowy typ postu z obrazem suwaka

Pierwszą rzeczą, którą zrobimy, będzie utworzenie nowego pliku o nazwie „ slider-img-type.php', gdzie będzie znajdował się cały nasz kod dla niestandardowego typu postu. Najpierw dokonamy pewnych przygotowań, tak jak to zrobiliśmy w przypadku wtyczki.

Jak widać, jedyne, co do tej pory zrobiłem, to stworzyłem kilka stałe(co będzie bardzo przydatne w przypadku bardziej złożonych niestandardowych typów postów) i dodano obsługę miniatur dla naszego nowego typu.

Jedyną inną rzeczą, którą tutaj zrobimy, jest rejestracja nowy niestandardowy typ postu. Więcej informacji na temat niestandardowych typów postów znajdziesz w ręczne tworzenieświetne portfolio. Tuż przed zamknięciem php tag, dodamy następujący kod:

Funkcja efs_register() ( $args = array("label" => __(CPT_NAME), "singular_label" => __(CPT_SINGLE), "public" => true, "show_ui" => true, "capability_type" => " post", "hierarchiczny" => fałsz, "przepisz" => prawda, "obsługuje" => array("tytuł", "edytor", "miniatura")); Register_post_type(CPT_TYPE , $args); ) add_action(" init", "efs_register");

Stworzyliśmy funkcję rejestrowania niestandardowego typu postu, który wykorzystuje bloki tytułu, edycji i miniatur. Następnie dodaliśmy Akcja WordPressa aby wywołać tę funkcję natychmiast po zainicjowaniu WordPressa.

Wszystko! Ostatnią rzeczą, którą musimy zrobić, to dołączyć nasz nowy plik poprzez dodanie require_once("typ suwaka-img.php"); V envato-flex-slider.php. Dodałem go tuż nad wywołaniem naszych skryptów.

Teraz, gdy wiemy, jak osadzać obrazy w suwaku, wróćmy i wypełnijmy naszą ogólną funkcję suwaka.

Krok 5. Generowanie slidera

Wróć do reklamy efs_get_slider() i wymienić //Wypełnimy to później do następujących:

"; $efs_query= "post_type=obraz-slider"; query_posts($efs_query); if (have_posts()): while (have_posts()): the_post(); $img= get_the_post_thumbnail($post->ID, "duży "); $suwak.="
• „.$img.”
"; endwhile; endif; wp_reset_query(); $slider.= "

";zwróć $suwak;

Pierwsze dwie linie są wymagane ze względu na sposób działania. Będzie to wymagać nieuporządkowanej listy o nazwie „ slajdy’ wewnątrz warstwy „” i zastosuje ją do niej animacja JavaScriptu. W naszym CSS również zdefiniowano i ul.zjeżdżalnie.

Następnie tworzymy pętlę WordPress, zbierając wszystkie posty typu obraz suwaka(nasz niestandardowy typ postu) i wyświetl większą wersję obrazu.

Kilka notatek

• Dzięki naszemu nowemu niestandardowemu typowi postu możemy dodać tytuł i obraz, a także dodaliśmy blok edycji posta. I chociaż obecnie używamy tylko obrazu (i tytułu dla atrybutu alt), dodaliśmy także edytor na wypadek, gdyby w przyszłości np. chcieliśmy umożliwić umieszczanie podpisu na sliderze.
• Dodanie nowego postu np Obraz suwaka, musimy załadować obraz miniatury, aby suwak działał. Nie może po prostu zabrać pliku dołączonego do wiadomości.

Krok 6. Testowanie

Teraz czas na testy! Po dodaniu kilku obrazów do niestandardowego typu postu utwórz Nowa strona(Właśnie nazwałem mój Slider) i dodałem do niego nasz nowo utworzony krótki kod. Zapisz stronę i wyświetl ją. Powinieneś zobaczyć coś takiego:

Wniosek

To wszystko. Oczywiście jest jeszcze kilka rzeczy, które można poprawić we wtyczce. Na przykład dodanie obsługi opcji zaawansowanego dostosowywania, które oferuje FlexSlider, lub dodanie obsługi tytułów.

Jak powiedziano, ta wtyczka zapewnia wszystko, czego potrzebujesz, aby stworzyć naprawdę prostą, łatwą w zarządzaniu i łatwą do osadzenia wersję dla WordPress!

Jeśli nie masz pewności, czy wkleić lub dodać pliki, możesz pobrać źródła, korzystając z łącza na górze przewodnika. Powodzenia!

Suwak to jeden z tych elementów, który można spotkać niemal na każdej stronie internetowej. Są łatwe do wdrożenia i prawie zawsze wyglądają świetnie, jeśli użyjesz atrakcyjnych obrazów. Ponadto możesz robić ciekawe rzeczy za pomocą suwaka WordPress, na przykład dodając do niego efekty przejścia.

Jednak suwaki nie są funkcją WordPress, więc do ich dodania potrzebne będą wtyczki. W tym artykule nauczymy Cię, jak to zrobić w zaledwie trzech krokach:

1. Zainstaluj suwak WordPress i dodaj multimedia, których chcesz użyć.
2. Dostosuj swój suwak dla WordPress.
3. Umieść nowy suwak w miejscu, w którym ma się pojawić.

Gdy to zrobisz, przedstawimy Ci również niektóre z najlepszych wtyczek suwakowych WordPress, abyś wiedział, jakie masz opcje. Weźmy się za to!

Dlaczego potrzebujesz suwaka dla WordPress

Suwaki to proste funkcje, ale jeśli wybierzesz odpowiednie obrazy, mogą wyglądać niesamowicie.

Suwak (lub karuzela w przypadku WordPressa) jest w rzeczywistości dość prostą funkcją. Suwak to zbiór obrazów, które obracasz za pomocą przycisków lub czekasz na automatyczne przejście. Inaczej mówiąc, jest to pokaz slajdów składający się z obrazów.

Za pomocą suwaka możesz jednak zrobić znacznie więcej. Możesz także dodać do niego zabawne efekty przejścia, zmienić jego tekst, stworzyć unikalne przyciski i wiele więcej. Krótko mówiąc, istnieje wiele sposobów przejścia od nudnego, zwykłego suwaka do czegoś, co naprawdę wyróżni Twoją stronę internetową.

Jeśli chodzi o Gdy Używanie suwaków ma sens, zależy to od Twojej witryny i celów. Wiele stron internetowych korzysta z tak zwanych suwaków „bohaterów”, które są umieszczane na górze strony jako alternatywny nagłówek. Przykład w działaniu możesz zobaczyć na początku tej sekcji.

Oprócz tych suwaków możesz także publikować recenzje klientów, takie jak ta:

Ostatecznie suwaki są doskonałym dodatkiem do prawie każdej witryny internetowej. Jednak najlepiej nadają się do celów praktycznych, takich jak wyświetlanie wielu obrazów na małej przestrzeni, a nie po prostu jako dekoracja. Dodają także odrobinę interaktywności do Twojej witryny, co jest świetnym sposobem na zwiększenie zaangażowania użytkowników.

Jak utworzyć suwak dla WordPress (w 3 krokach)

W następnych kilku sekcjach pokażemy, jak utworzyć suwak dla WordPress za pomocą Master Slider. Wybraliśmy tę wtyczkę, ponieważ jest łatwa w użyciu, oferuje wiele ciekawych funkcji i pozwala zainstalować dowolną liczbę suwaków.

Następnie przedstawimy Ci niektóre wtyczki karuzelowe WordPress, których możesz użyć, i porozmawiamy więcej o samym Master Sliderze. W międzyczasie zainstaluj Master Slider, aby rozpocząć!

Krok 1: Skonfiguruj suwak WordPress i dodaj multimedia, których chcesz użyć

Po aktywowaniu wtyczki Mistrz Slidera, w swoim panelu znajdziesz nową zakładkę Master Slider. Tam zobaczysz listę wszystkich suwaków WordPress (które powinny być teraz puste). Śmiało, naciśnij przycisk Utwórz nowy suwak:

Wtyczka zapyta Cię, jaki typ slidera chcesz zainstalować. Możesz wybierać spośród ośmiu opcji, w tym poziomych suwaków z miniaturami i bez:

W tym samouczku skonfigurujemy prosty niestandardowy suwak, dzięki czemu będziesz mógł zobaczyć, jak działa cały proces. Wybierz więc tę opcję i kliknij przycisk TWORZYĆ.

Wtyczka przeniesie Cię następnie do zakładki SLAJDÓW Twój nowy element. Tutaj możesz dodać wszystkie obrazy, które chcesz umieścić w suwaku, za pomocą WordPress Media Uploader lub wybrać istniejące obrazy ze swojej biblioteki:

Po dodaniu kilku zdjęć pojawia się zakładka SLAJDÓW powinno wyglądać mniej więcej tak:

Twoje obrazy są gotowe do użycia. Pozostaw tę kartę otwartą i przejdź do następnego kroku.

Krok 2: Dostosuj suwak WordPress

Następnie możesz dostosować sposób działania suwaka WordPress. Aby to zrobić, przejdź do sekcji Tło w zakładce SLAJDÓW. Dla każdego slajdu możesz dostosować unikalne tło, używając wybranego obrazu oraz dowolnych kolorów i tekstu:

Teraz skonfigurujemy prosty suwak WordPress, korzystając ze wszystkich przesłanych przez nas obrazów. Jeśli przewiniesz w dół, zobaczysz, jak każdy obraz będzie wyglądał na suwaku. Jest też przycisk Zapowiedź, które możesz wybrać, aby zobaczyć kształt suwaka WordPress:

Kiedy już tu skończysz, musisz przejść do zakładki STEROWANIE SUWAKIEM. Tam możesz wybrać, jakiego typu elementy sterujące będą używane przez suwak. Nazywa się ustawienie domyślne Strzałki i prawdopodobnie domyślacie się, jak wyglądają:

Oczywiście możesz wybrać dowolny schemat sterowania. Następnie musisz przejść do zakładki USTAWIENIA SUWAKA, gdzie możesz jeszcze bardziej dostosować suwak WordPress.

Na przykład znajdziesz opcje, które pozwalają dostosować szerokość i wysokość suwaka. Możesz ustawić nazwę, która będzie wyświetlana w zakładce Mistrz Slidera:

Jeśli przewiniesz nieco dalej, możesz także dodać do suwaka proste efekty przejścia. Pamiętaj, że darmowa wersja Master Slider zawiera tylko dwa efekty: Normalna I Znikać. Zalecamy pierwszą opcję, ponieważ zapewnia schludne przejście dla suwaka WordPress:

Na koniec możesz także bawić się skórkami, przewijając w dół do sekcji Wygląd. Są to szablony sliderów, które pozwalają na zmianę jego wyglądu.

Do tej pory pokazaliśmy domyślną skórkę w naszych przykładach, ale są też inne świetne opcje, z którymi możesz się pobawić. Możesz nawet przejść do suwaków WordPress, jeśli lubisz takie rzeczy:

Po zakończeniu dostosowywania stylu suwaka WordPress kliknij przycisk Zapisz zmiany i przejdź do ostatniego kroku.

Krok 3: Umieść nowy suwak tam, gdzie chcesz, aby się pojawił

Teraz Twój suwak WordPress jest gotowy, pozostaje tylko umieścić go na swojej stronie internetowej. Proces jest prosty, ponieważ wtyczka Master Slider generuje krótki kod dla każdego utworzonego suwaka.

Aby znaleźć te skróty, przejdź do zakładki Mistrz Slidera na pasku narzędzi i spójrz pod kolumnę Krótki kod:

Skopiuj krótki kod slidera, który chcesz umieścić na swojej stronie, a następnie otwórz edytor strony lub wpisu, w którym chcesz go umieścić. Po prostu wklej krótki kod w miejscu, w którym chcesz wyświetlić suwak WordPress, jak w poniższym przykładzie:

Jeśli sprawdzisz swoją stronę, w interfejsie powinna ona wyglądać mniej więcej tak:

Pamiętaj, że za pomocą wtyczki Master Slider możesz utworzyć dowolną liczbę sliderów. Możesz nawet usunąć te, których nie chcesz już używać na karcie Mistrz Slidera naciskając przycisk Usuwać obok dowolnego z nich:

Teraz możesz zacząć tworzyć najlepszy slider WordPress dla swojej witryny! Zanim jednak zakończymy, przyjrzyjmy się kilku alternatywnym opcjom wtyczek.

5 najlepszych wtyczek suwakowych WordPress

Widzieliśmy już jedną z najlepszych wtyczek suwakowych WordPress w akcji. Nie mieliśmy jednak jeszcze okazji przedstawić Wam wszystkich jego funkcji. Zróbmy to od czasu do czasu, a potem pokażemy Ci inne najlepsze rozwiązania, z których możesz skorzystać, jeśli Master Slider nie jest Twoją rzeczą.

1. Suwak główny

Znasz już Master Slider, więc przejdźmy od razu do tego, czego możesz nie wiedzieć o wtyczce. Oprócz możliwości tworzenia suwaków WordPress, wtyczka ta zapewnia również pełną responsywność. Współpracuje z nawigacją dotykową, dlatego idealnie nadaje się do witryn mobilnych i jest przystosowany do współpracy z wyszukiwarkami.

Kluczowe cechy:

• Utwórz tyle suwaków, ile chcesz.
• Dodaj suwaki do swoich stron WordPress za pomocą krótkich kodów.
• Dostosuj styl suwaka i efekty przejścia.
• Upewnij się, że suwaki są w pełni responsywne i nie wymagają żadnego dodatkowego dostosowywania.
• Zoptymalizuj zawartość swoich suwaków pod kątem wyszukiwarek.

Cena: Możesz wypróbować darmową wersję Master Slider lub wybrać pełną wersję premium.

2. Inteligentny suwak 3

Smart Slider 3 oferuje wiele takich samych funkcji jak Master Slider. Posiada jednak również edytor „przeciągnij i upuść” na żywo, którego można używać do tworzenia suwaków. Jeśli jesteś osobą, która lubi dostosowywać elementy swojej witryny za pomocą narzędzia do tworzenia stron, a nie list dostosowywania, ta wtyczka może być świetną opcją.

Oprócz tej funkcji Smart Slider 3 zapewnia także, że Twoje suwaki będą domyślnie gotowe do użycia, nawet bez żadnych dodatkowych ustawień. Dodatkowo zawiera kilka szablonów, których możesz użyć do szybkiego dostosowania silników.

Kluczowe cechy:

• Twórz suwaki WordPress za pomocą edytora „przeciągnij i upuść”.
• Użyj zewnętrznych narzędzi do tworzenia stron, takich jak Divi i Beaver Builder, wraz z wtyczką.
• Ustaw suwaki na domyślne.
• Wybierz jeden z kilku szablonów, aby szybko uruchomić suwaki.
• Dodaj czcionki do treści swoich slajdów.

Cena: Smart Slider 3 oferuje bezpłatną wersję podstawową oraz kilka płatnych poziomów.

3.MetaSlider

Jeśli chodzi o wtyczki suwakowe WordPress, niewiele jest tak popularnych jak MetaSlider. Z prawie 1 000 000 aktywnych instalacji w momencie publikacji tego artykułu, znajduje się on na szczycie łańcucha pokarmowego wtyczek.

Chociaż MetaSlider nie ma tak eleganckiego interfejsu jak inne wtyczki, które do tej pory sprawdziliśmy, wyróżnia się łatwością użycia. Dodawanie slajdów jest łatwe, podobnie jak zmiana ich układu, dodawanie tekstu, a nawet optymalizacja ich metadanych. W przypadku innych wtyczek cała ta praca może zająć trochę czasu, ale MetaSlider ułatwia to dzięki prostemu i intuicyjnemu interfejsowi.

Kluczowe cechy:

• Zainstaluj kilka suwaków WordPress.
• Szybko dodawaj slajdy i zmieniaj ich kolejność.
• Dodaj tekst do swoich slajdów i wykonaj optymalizację pod kątem wyszukiwarek (SEO).
• Dostosuj efekty przejścia swoich suwaków.
• Dodaj suwaki do dowolnej strony za pomocą krótkich kodów.

Cena: MetaSlider jest darmowy w katalogu wtyczek WordPress lub możesz uzyskać licencję premium z kilkoma dodatkowymi funkcjami.

4. Suwak firmy WD

Jeśli jesteś osobą, która lubi dostosowywać każdy najdrobniejszy szczegół swojej witryny internetowej, Slider firmy WD może być dla Ciebie odpowiedni. Ma wiele funkcji, które odróżniają ją od innych wtyczek do suwaków, takich jak obsługa wielu slajdów, responsywny projekt i wiele innych.

Wtyczka naprawdę wyróżnia się liczbą dostosowań, które możesz wprowadzić dla każdego ze swoich slajdów. Można na przykład bawić się ich rozmiarami, kolorami i efektami przejścia. Możesz nawet importować i eksportować suwaki, aby skopiować je z jednej witryny do drugiej. Wreszcie wtyczka umożliwia znakowanie zdjęć znakami wodnymi, co może się przydać, jeśli chcesz chronić swoje oryginalne dzieło.

Kluczowe cechy:

• Zainstaluj mobilne suwaki WordPress.
• Uzyskaj dostęp do szerokiego zakresu ustawień suwaków.
• Znak wodny na slajdach, aby chronić je przed kradzieżą.
• Importuj i eksportuj suwaki, aby móc je kopiować z jednej witryny do drugiej.

Cena: Darmowa wersja Slider WD to niezawodne narzędzie, chociaż można także uaktualnić go do licencji premium.

5. Przesuń wszystko

Jak dotąd wszystkie wtyczki, o których mówiliśmy, skupiają się głównie na obrazach. Jednak, jak wspomnieliśmy wcześniej, suwaków WordPress możesz używać także do innych celów. Możesz prezentować recenzje klientów i nie tylko.

Wtyczka Slide Everything umożliwia skonfigurowanie suwaków przy użyciu niemal dowolnego rodzaju treści. Oprócz obrazów i tekstu umożliwia także korzystanie z HTML, a nawet krótkich kodów, co pozwala tworzyć zabawne kombinacje. Ponadto ta wtyczka zawiera kilka ciekawych funkcji, takich jak nieskończone przewijanie (a więc pętle suwaka). Ta wtyczka zawiera także całą kolekcję fajnych efektów przejścia i wiele więcej.

Kluczowe cechy:

• Ustaw suwaki, używając dowolnego rodzaju treści.
• Wybierz jeden z kilku efektów przejścia dla swoich slajdów.
• Używaj krótkich kodów w swoich suwakach.

Cena: Możesz wypróbować Slide Everything Pro za darmo lub uzyskać dostęp do kilku dodatkowych funkcji (takich jak wyskakujące okienka) w wersji premium.

Wniosek

Nie bez powodu slidery są tak popularne. Wszystko, co musisz zrobić, to wybrać kilka obrazów, dodać jeden lub dwa efekty przejścia i być może dodać tekst, a otrzymasz element, który będzie wyglądał świetnie w dowolnym miejscu Twojej witryny (szczególnie jako nagłówek). Dzięki WordPressowi możesz łatwo dostosować swój suwak za pomocą ulubionej wtyczki. Nie lubimy Master Slider ze względu na jego bogactwo funkcji, ale istnieje wiele innych świetnych opcji.

Czy masz już doświadczenie w dostosowywaniu suwaka WordPress? Opowiedz nam o tym w sekcji komentarzy poniżej!