Samouczek WordPress: Jak stworzyć niesamowitą wtyczkę Flip strony

Artykuł napisany przez:
  • Inbound Marketing
  • Zaktualizowano: Sep 15, 2014

Uwaga: nie obsługujemy już tej wtyczki WP, ponieważ autor nie pisze do nas na razie.

Od dzisiaj, co tydzień, udostępniamy niesamowity samouczek dotyczący kodowania, który nauczy Cię, jak wykonywać niestandardowe czynności za pomocą WordPressa, od podstawowego do zaawansowanego. Dzisiaj utworzymy wtyczkę (aby poznać podstawowe kroki), aby wygenerować galerię "odwrócenia strony", używając JS.

Założę się, że widziałeś jeden z tych we wczesnych dniach w sieci, ale w większości były one wykonywane za pomocą flasha, który teraz jest dość przestarzały (wciąż ma swoją wartość, ale nie jest już najlepszą opcją dla tego typu rzeczy).

Podstawową funkcjonalnością będzie stworzenie nowego rodzaj galerii na podstawie kilku zdjęć i ich rozmiarów, za pomocą krótkiego kodu.

Zacznijmy więc!

Zip i instalacja

Najlepszym sposobem obejrzenia go w akcji jest zainstalowanie go samodzielnie. Możesz pobierz go tutaj. Zainstaluj i aktywuj wtyczkę, wszystko co musisz zrobić, to dodać krótki kod na stronie, na przykład:

[flip_book ids = "78 79 78 79 79 78 XNUM XNUM 78 79" width = "79" height = "78" display = "double"]

Szybki podgląd

I to jest ten rodzaj wyniku, który otrzymasz:

Efekt Flipbook

Ale jaki rodzaj czarnej magii się tam dzieje? Cóż, to naprawdę proste. Nauczmy się tworzyć coś takiego.

Nagłówek

Przede wszystkim musisz utworzyć nowy folder i nowy plik .php. W tym momencie byłoby wspaniale, gdybyś miał środowisko testowe, abyś mógł się włamać i przetestować.

Plik i folder powinny mieć prostą i unikalną nazwę, dzięki czemu unikniesz konfliktu z istniejącymi wtyczkami. Następnie podstawowa zawartość naszego pliku wygląda mniej więcej tak:

/ * Nazwa wtyczki: FlipBook Gallery Opis: Utwórz skrót do galerii flipbooków. Wersja: 1.0 Autor: Web Revenue Blog Licencja: GPL2 * /

Całkiem proste, co? Po utworzeniu tego pliku zobaczysz swoją wtyczkę na liście w obszarze Administrator WP> Wtyczki i możesz ją aktywować (ale jeśli masz tylko tę zawartość w swoim pliku, nie zmieni ona zbytnio twojej witryny).

Wywoływanie skryptów

Teraz musimy uwzględnić tutaj kilka ważnych zasobów zewnętrznych. Wymagane pliki zewnętrzne dla podstawowej funkcjonalności to:

  • jQuery (1.9 +)
  • Skrypt Turn.js
  • Zmień podstawowy styl

Jeśli po prostu dodasz tagi skryptu i stylu tam, będziesz miał pewne problemy. Na przykład podwójne wywołanie jQuery prawdopodobnie złamie twoją witrynę. Również sam WordPress nie "wie", że utworzyłeś te elementy, więc jeśli inna wtyczka wywoła ponownie plik turn.js lub inny styl, złamie twoją witrynę.

Dlatego powinniśmy zawsze używać funkcji wp_enqueue_script i wp_enqueue_style. Oto podstawowe zastosowanie:

function plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('turn', plugins_url ('js / turn.js', __FILE__), array ('jquery'), '1.3', false); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), false, '1.3', 'all'); }

W 3 wywołujemy elementy zewnętrzne w różny sposób, oto one:

  • Wywołanie istniejącego elementu: jQuery - Nie musimy przekazywać wielu parametrów, jeśli wiemy na pewno, że WordPress wczytał już ten skrypt, mówimy mu tylko: "Dude, ten skrypt MUSI być tutaj inaczej nasz kod nie będzie praca"
  • Tworzenie nowego skryptu - musisz podać kilka atrybutów, takich jak nazwa, lokalizacja pliku, wymagane elementy (w tym przypadku wymaga jQuery), wersja i czy jest ona załadowana w stopce lub nagłówku (false = header, true = footer)
  • Tworzenie nowego stylu - prawie tak samo jak poprzedni, z niewielką różnicą w ostatnim atrybucie, który mówi, jakie media wpisz ten styl, jeśli dla

Jedną z ważnych rzeczy, które powinieneś rozważyć podczas wywoływania skryptów zewnętrznych, jest to, że jest więcej kodu, który będzie zależał od tej wtyczki. To w zasadzie określa, czy Twój plik zostanie wywołany w nagłówku lub stopce.

W naszym przypadku mamy kilka dodatkowych skryptów do ustawienia galerii tylko wtedy, gdy utworzony zostanie jej kod HTML, który zostanie dodany do treści. Właśnie dlatego MUSIMY dodać ten skrypt w głowie, w przeciwnym razie, gdy nasz kod zostanie nazwany, funkcja "włącz" jeszcze nie istnieje.

Po tym ładnym kodzie musimy powiedzieć WordPressowi, aby załadował je jako skrypty, zrobi to akcja "wp_enqueue_scripts":

add_action ('wp_enqueue_scripts', 'plugin_scripts');

The Shortcode

Zacznijmy od akcji, aby utworzyć shortcode. To całkiem proste, wystarczy dodać wyzwalacz shortcode i funkcję, która zostanie wykonana:

add_shortcode ("flip_book", "create_flip_book");

Teraz musimy stworzyć naszą funkcję i uzyskać nasze atrybuty. Ale niektóre atrybuty mogą być opcjonalne, co oznacza, że ​​musimy utworzyć dla nich wartości domyślne. Moglibyśmy stworzyć wiele, jeśli istnieje testowanie, czy atrybut jest pusty, ale jest to jeden z przypadków, w których działanie trójki jest lepsze niż zwykłe wywołanie.

Operacje potrójne są rodzajem instrukcji if bezpośrednio w wartości zmiennej. Jeśli podąża za tą strukturą:

$ variable = (CONDITION)? "WARTOŚĆ, ŻE WARUNEK JEST PRAWDZIWY": "WARTOŚĆ, JEŚLI WARUNEK JEST FAŁSZYWNY";

Możesz zobaczyć je w akcji w pierwszej części naszej funkcji:

function create_flip_book ($ attr) {// Przygotowywanie identyfikatorów do przetworzenia $ array ['ids'] = explode ("", $ attr ['ids']); // tryb wyświetlania $ array ['display'] = pusty ($ attr ['display'])? "single": $ attr ['display']; // standardowa wartość // width $ array ['width'] = empty ($ attr ['width'])? 400: $ attr ['szerokość']; // height $ array ['height'] = empty ($ attr ['height'])? 300: $ attr ['height'];
    // Tu idzie HTML i reszta kodu}

Następnie będziemy musieli stworzyć HTML i podstawowe wezwanie do naszych obrazów. Kolejnym ważnym punktem jest dostosowanie rozmiaru, jeśli korzystamy ze stylu magazynu (powinna to być szerokość 2x, ponieważ zamiast jednego mamy obrazy 2):

<? php if ($ array ['display'] == "double") {$ array ['width'] = $ array ['width'] * 2; } // HTML, JS i Black Magic?> <Div id = "flipbook"> <? Php for ($ i = 0; $ i <sizeof ($ array ['ids']); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ array ['ids'] [$ i], 'full'); if ($ array ['display'] == "single") {?> <span> <? = "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids'])?> </ span> <? php} else {?> <spanright ":" left ");?>"> <? php echo "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids']); ?> </ span> <? php}?> </ div> <? php}?> </ div> <script type = "text / javascript"> jQuery ("# ​​flipbook") turn ({width: < ? php echo $ array ['width'];?>, height: <? php echo $ array ['height'];?>, autoCenter: true, display: '<? php echo $ array [' display ']; ?> ', // akceleracja pojedynczej strony lub podwójnej strony: true, gradienty:! jQuery.isTouch,}); </ script>

Co o tym myślisz?

Teraz możesz je modyfikować i modyfikować wedle własnego uznania, dodając więcej opcji (sprawdź ich niesamowite przykłady, aby uzyskać więcej inspiracji), dostosowując to, co nie działa dla ciebie lub łącząc to z innymi wtyczkami.

Czy masz jakąś koncepcję WordPressa, której chcesz się nauczyć trochę więcej? Może coś, czego chcesz się nauczyć? Daj nam znać za pomocą komentarzy, a my z przyjemnością uwzględnimy to w przyszłym poście!

O Rochester Oliveira

Jestem web designer i przedsiębiorca z Itajubá (MG), Brasil. Uwielbiam pisać o niejasnych tematach i robić fajne rzeczy.