Chcesz opanować dodawanie kodu jQuery na WordPressie? Więc czytaj dalej, aby dowiedzieć się więcej.

Pomimo faktu, że WordPress jest dostępny od dłuższego czasu, a dodawanie skryptów motywów i wtyczek jest już od dłuższego czasu, nadal istnieje pewne zamieszanie co do tego, której metody użyć. służy do dodawania skryptów w WordPress.

Postaramy się więc wyjaśnić.

Ponieważ jQuery jest najczęściej używanym frameworkiem JavaScript, pokażemy Ci, jak dodać go do motywu lub WordPress Plugin.

Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować blog WordPress w 7 krokach et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu 

Wróćmy do tego, dlaczego tu jesteśmy.

Tryb zgodności z JQuery

Zanim zaczniemy dodawać skrypty do WordPress, przyjrzyjmy się trybowi kompatybilności jQuery. WordPress jest dostarczany z kopią jQuery, z której można korzystać w kodzie. Po załadowaniu jQuery WordPress korzysta z trybu zgodności, który jest mechanizmem pozwalającym uniknąć konfliktów z innymi bibliotekami.

Dowiedz się, czy on Należy usunąć jQuery z motywów i wtyczek WordPress ?

Oznacza to, że nie można używać znaku dolara bezpośrednio tak, jak w innych projektach. Pisząc jQuery na WordPress, musisz użyć jQuery.

Spójrz na poniższy kod, aby zobaczyć, co mam na myśli:

/ * Tryb normalny * / $ ('. Hideable'). On ('click', function () {$ (this) .hide ();}) / * Compatibility mode * / jQuery ('. Hideable'). On ('click', function () {jQuery (this) .hide ();})

Musisz wiedzieć, że po kilku modyfikacjach możesz ponownie użyć znaku dolara. Używanie za każdym razem „jQuery” na całym kodzie skomplikuje pisanie.

Sprawdź Edytory kodów 10 dla programistów WordPress

Podsumowując, jeśli znasz jQuery, znak $ jest tylko aliasem dla jQuery (), a następnie aliasem dla funkcji. Podstawowa składnia to: $ (Selektor) .action () :

• Znak dolara definiujący jQuery
• (Selektor) do „wyszukiwania” elementów HTML
• Działanie jQuery () do wykonania na tych elementach

Jeśli załadujesz swój skrypt w stopce, będziesz mógł opakować swój kod w anonimową funkcję. Oto jak to zrobić:

(function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})}) (jQuery);

Jeśli chcesz dodać swój skrypt w nagłówku (czego powinieneś unikać, jeśli to możliweMożesz zawinąć w funkcję, która działa, gdy dokument jest gotowy.

Odkryj także przy okazji Jak dodać łatwo koduj na WordPressie bez uszkadzania strony

jQuery (dokument) .ready (function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})});

Jak połączyć swoje skrypty z jQuery

Teraz, gdy możesz napisać prawidłowy kod jQuery na WordPress, połączymy naszą pracę z naszą stroną internetową. W WordPress proces nazywa się „ skolejkowania "(system ogona). W przypadku zwykłej witryny HTML powinniśmy użyć taguscenariusz> aby dodać skrypty.

WordPress może zrobić to samo, ale wykorzystamy specjalne funkcje WordPress, aby to osiągnąć. W ten sposób WordPress zarządza dla nas wszystkimi naszymi zależnościami.

Jeśli pracujesz nad motywem, możesz użyć tej funkcji wp_enqueue_script () w twoim pliku functions.php plik. Oto jak możesz to zrobić:

function my_theme_scripts () {wp_enqueue_script ('my-great-script', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action („wp_enqueue_scripts”, „my_theme_scripts”);

Funkcja przyjmuje pięć argumentów. Pierwszy, którego możesz użyć, aby odwołać się do skryptu, drugi to lokalizacja pliku skryptu, trzeci parametr to tablica zależności.

Dodałem jQuery jako zależność, ponieważ skrypt go używa. Jeśli utworzysz skrypt, który zależy od „moja pra skrypt Musisz dodać go do listy zależności, aby WordPress wiedział, które pliki musi najpierw załadować.

Odkryj też Jak załadować JavaScript na WordPress

Czwarty parametr to numer wersji, a piąty pozwala WordPressowi wiedzieć, gdzie umieścić skrypt. Domyślnie skrypty będą ładowane w nagłówku, co jest złą praktyką, ponieważ spowalnia ładowanie strony internetowej (przeglądarki zatrzymują ładowanie wszystkich stron po każdym zablokowaniu est rencontré). Musisz załadować wszystkie skrypty do stopki, jeśli to możliwe, ustawiając piąty parametr „ prawdziwy ".

Jak dodać skrypt do pulpitu nawigacyjnego

Możesz także dodać skrypty w tablica rozdzielcza. Używane funkcje są dokładnie takie same, wystarczy użyć „ hak " różne. Spójrz na poniższy przykład:

function my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action („admin_enqueue_scripts”, „my_admin_scripts”);

Zamiast używać Wp_enqueue_scripts musimy użyć admin_enqueue_scripts, i to wszystko !

Zastosowanie tagów warunkowych

Używaj tagów warunkowych, aby wczytywać skrypty tylko wtedy, gdy są potrzebne. Jest to najczęściej używane na dashboardzie, gdzie chciałbyś użyć skryptu tylko na określonej stronie. Oszczędza to przepustowość i czas przetwarzania, co oznacza szybsze ładowanie witryny.

Odkryj także nasze Wtyczki 10 WordPress, aby poprawić szybkość ładowania bloga

Spójrz na dokumentacja admin_enqueue_scripts w Kodeksie WordPress, aby uzyskać więcej informacji.

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. Interaktywne mapy świata

Interaktywne mapy świata to WordPress Plugin który pomaga tworzyć tyle map, ile chcesz, z interaktywnymi i kolorowymi znacznikami, kontynentami, krajami lub regionami.

Jest w pełni kompatybilny z nową wersją WordPress i Program Visual Composer, Dzięki tej wtyczce możesz wyświetlić kilka rodzajów regionów, takich jak: mapa całego świata, kontynentu lub subkontynentu (Afryka, Europa, Ameryki, Azja, Oceania i wszystkie ich subkontynenty), kraj, kraj podzielony według regionów, stan Stanów Zjednoczonych, Stany Zjednoczone podzielone według obszarów metropolitalnych, państwo Stanów Zjednoczonych podzielone według obszarów metropolitalnych.

Pobierz | Demo | hosting

2. Formularz kontaktowy AJAX ze śledzeniem

Ce WordPress Plugin umożliwia łatwe dodawanie formularzy kontaktowych lub komentarzy do Twojego blog WordPress. Jest wyposażony w menedżera ustawień, do którego można uzyskać bezpośredni dostęp za pośrednictwem pulpitu WordPress.

Jego główne cechy to m.in .: a fna e-mail, wsparcie CAPTCHA matematyka dotycząca formularzy, dostosowywania i konfiguracji poprzez pulpit WordPress, możliwość dzdefiniuj niestandardowy autoresponder, wsparcie niestandardowego CSS i więcej

Pobierz | Demo | hosting 

3. PayPal Standard Payment Gateway for Ninja Forms

PayPal Standard Gateway for Ninja Forms umożliwia tworzenie formularzy, które bezproblemowo integrują się z bramką płatności PayPal. 

Będziesz mógł tworzyć spersonalizowane formularze zamówień i otrzymywać płatności za pomocą standardowych kont Paypal. Jego główne cechy to: łatwa i szybka integracja, integracja IPN, możliwość aktywacji / dezaktywacji bramki PayPal na poszczególnych formularzach, obsługa regularnych płatności itp.

Pobierz | Demo |  hosting

Inne zalecane zasoby

Zachęcamy również do zapoznania się z poniższymi zasobami, aby przejść dalej w zakresie kontroli nad witryną i blogiem.

• Jak efektywnie wykorzystać kategorie i tagi na WordPress
• Jak stworzyć elastyczne menu dla telefonu WordPressa
• Jak stworzyć intranet WordPress dla organizacji
• Jak zainstalować wtyczkę w WordPress

Wnioski

Tutaj! To wszystko w tym samouczku. Mam nadzieję, że teraz wiesz, jak dodać skrypt do WordPress. Nie wahaj się podziel się wskazówką ze znajomymi w sieciach społecznościowych.

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.

Ale w międzyczasie opowiedz nam o swoim commentaires i sugestie w dedykowanej sekcji.

...