Praca z jquery w wordpress

przez Nikołajenko Maksym · Opublikowany Styczeń 19, 2013 · Zaktualizowano Sierpień 8, 2018

Na początek opiszę zadanie, które miałem. Następnie ustawienia WordPressa wyjściowa wersja biblioteki jquery 1.4 z powodu wtyczki, której darmowa wersja nie została jeszcze zaktualizowana c 2009 roku. Nazwa wtyczki “TheFly“, Jestem pewien, że w płatnej wersji wszystko było w porządku, ale ropucha zmiażdżyłaby mnie, gdybym to kupił, kiedy będę mógł stworzyć niezbędny skrypt lub, w skrajnych przypadkach, dowiedzieć się, jak działa wtyczka.

Ogólnie zainteresowałem się i zacząłem grzebać w kodzie. Kopanie w źródłach wtyczek, Zauważyłem ciekawy fragment kodu, jak poniżej.

    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://code.jquery.com/jquery-latest.min.js', false, 'latest');
    wp_enqueue_script( 'jquery' );

    wp_deregister_script( 'jquery-ui' );
    wp_register_script( 'jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js');
    wp_enqueue_script( 'jquery-ui' );

wp_deregister_script( 'jquery' );

wp_register_script( 'jquery', 'https://code.jquery.com/jquery-latest.min.js', false, 'latest');

wp_enqueue_script( 'jquery' );

wp_deregister_script( 'jquery-ui' );

wp_register_script( 'jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js');

wp_enqueue_script( 'jquery-ui' );

Wygląda na to, że powinieneś pobrać najnowszą wersję, ale nie zajęło ). Poprawiłem kod bez wtyczki i wszystko działało dobrze, ale projekt, który znalazłem we wtyczce, Zacząłem rozbierać i teraz pokrótce opiszę co znalazłem.

Z kodu WordPressa dowiedziałem się, że funkcja Skrypt wyrejestrowania wp() potrzebne do wykluczenia skryptu javascript z rejestru WordPress. Co więcej, ta funkcja może usunąć nie tylko bibliotekę JQUERY, ale także każdy inny zarejestrowany skrypt, na przykład, gdy pojawia się konflikt w różnych niepoprawnie napisanych wtyczkach. Często mam ten konflikt., gdy badcoderzy zdecydują się dołączyć inną bibliotekę jquery wraz z wtyczką. Aby użyć tej funkcji, możesz napisać następujący kod:

<?php wp_deregister_script( $handle ); ?>

или

<?php wp_deregister_script('jquery'); ?>

<?php wp_deregister_script( $handle ); ?>

или

<?php wp_deregister_script('jquery'); ?>

Jak widać na przykładzie, zmienna $handle – to są tytuły scenariusza, które należy usunąć. Sama funkcja nie zwraca żadnych wartości i znajduje się pod adresem wp-includes/functions.wp-scripts.php.

Następująca funkcja z fragmentu kodu to wp_register_script(). Nie ma tu wiele do powiedzenia, po prostu dodaj go do parametru funkcji, ten skrypt, który chcesz wyświetlić w nagłówku szablonu WordPressa. Funkcja ma wiele parametrów.

<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>

1	<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>

Rozważ parametry funkcji wp_register_script w celu:

$uchwyt – Nazwa scenariusza. Musi być unikalny, ponieważ jest używany jako identyfikator do późniejszego użycia wp_enqueue_script ().

Domyślna wartość parametru: Nic

$SRC – Skrypt adresu URL, do dodania do szablonu.

Przykład podłączenia skryptu: ” Protokół https://example.com/wp-includes/js/scriptaculous/scriptaculous.js “.

Nigdy nie należy zakodować adresu URL w lokalnym skrypcie. Lepiej użyj konstrukcji get_template_directory_uri, uzyskać ścieżkę z motywu wordpress.

Domyślna wartość parametru: Nic

$dział – tablica zarejestrowanych skryptów, On pokazuje, że ten skrypt zależy od skryptów, który musi zostać załadowany przed załadowaniem tego skryptu. Funkcja zwróci false, jeśli nie wszystkie skrypty zostały wcześniej zarejestrowane. Ten parametr jest wymagany, tylko wtedy, gdy twój skrypt musi załadować inne biblioteki lub skrypty.

Domyślna wartość parametru: Szyk ()

$wer – parametr jest opcjonalny, jeśli nie musisz używać wersji skryptu. To ustawienie służy do, tak, aby poprawna wersja została wysłana do klienta, niezależnie od buforowania. Można pozostawić puste, aby wyłączyć.

Domyślna wartość parametru: Fałszywe

$w_stopce – zwykle umieszczane są skrypty <głowa> Sekcja. Jeśli ten parametr jest równy fałszywe, skrypt jest umieszczony na dole <ciało> . Aby parametr na dole szablonu działał, potrzebujesz funkcji wp_footer() w jego miejsce, a twój skrypt zostanie wyświetlony. Uwaga, że powinieneś mieć również funkcję na górze strony wp_head(), nawet jeśli scenariusz jest umieszczony w piwnicy.

Domyślna wartość parametru: Fałszywe

Się funkcja wp_register_script nie zwraca żadnych wartości.

Wszystkie skrypty, które można podłączyć i są w środku CMS WordPress, domyślnie są wymienione w kodzie, Nie będę ich wymieniać. Czytanie tutaj.

Źródła funkcji znajdują się w: wp-includes/functions.wp-scripts.php

Po zarejestrowaniu skryptu pomoc funkcji wymagany skrypt wp_register_ niezbędny umożliwić użycie tego właśnie skryptu w szablon WordPressa za pomocą funkcji wp_enqueue_script.

Kod funkcji, gdy jest używany, wygląda następująco:

<?php wp_enqueue_script( $handle, $src, $deps, $ver ); ?>

1	<?php wp_enqueue_script( $handle, $src, $deps, $ver ); ?>

Ponadto ta funkcja ma odmiany i dokładnie wskaże, gdzie skrypt powinien zostać uwzględniony..

wp_enqueue_scripts – dla zewnętrznej części serwisu;
admin_enqueue_scripts – dla panelu sterowania;
login_enqueue_scripts – dla strony logowania.

$uchwyt – unikalna nazwa skryptu skryptu. Opisałem to już powyżej..

Domyślna wartość parametru: Nic

$źródło – Parametr określa ścieżkę do skryptu i jest potrzebny tylko w przypadkach, jeśli WordPress jeszcze o tym nie wie, gdzie jest skrypt. Jeśli przed wywołaniem tej funkcji nie zarejestrowałeś swojego skryptu w tej funkcji wp_register_script.

Domyślna wartość parametru: Nic

$dział -jak opisano w poprzedniej funkcji, ten parametr będzie zawierał tablicę z identyfikatorami skryptów, które muszą zostać połączone przed wywołaniem skryptu.

Domyślna wartość parametru: Szyk ()

W Kod WordPressa zaleca się również korzystanie z wtyczki Korzystaj z bibliotek Google w celu uniknięcia konfliktów z bibliotekami podczas podłączania wtyczek innych firm.

Przykład podłączenia kopii CDN biblioteki jquery z google.

<?php
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    
 
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

<?php

function my_scripts_method() {

wp_deregister_script( 'jquery' );

wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');

wp_enqueue_script( 'jquery' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Korzystanie z filtra wp_enqueue_scripts (zamiast filtra w tym, do których odsyłają niektóre artykuły na stronach osób trzecich), unikamy rejestracji wersji alternatywnej jQuery na stronach panelu sterowania, co zmniejsza ryzyko uszkodzenia edytora postów podczas aktualizacji.

Przykład

Dodaj i załaduj nowy skrypt, co zależy od scenariusza (powoduje to również ładowanie scriptaculous na stronie):

<?php
function my_scripts_method() {
	wp_enqueue_script(
		'newscript',
		plugins_url( '/js/newscript.js', __FILE__ ),
		array( 'scriptaculous' )
	);
}    
 
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

<?php

function my_scripts_method() {

wp_enqueue_script(

'newscript',

plugins_url( '/js/newscript.js', __FILE__ ),

array( 'scriptaculous' )

);

}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Ładowanie skryptu w motywie, Zależne od skryptu w wordpress

Często wymagane, do przed JavaScript-pliki, dostarczany z motywem, załadowano inny JavaScript-plik. WordPressa zapewnia API, pozwalając określić jego zależności podczas rejestracji skryptu. Na przykład, wymaga motyw z poniższym kodem, przed scenariuszem custom_script.js biblioteka została załadowana jQuery:

<?php
function my_scripts_method() {
	wp_enqueue_script(
		'custom-script',
		get_template_directory_uri() . '/js/custom_script.js',
		array('jquery')
	);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

<?php

function my_scripts_method() {

wp_enqueue_script(

'custom-script',

get_template_directory_uri() . '/js/custom_script.js',

array('jquery')

);

}

add_action('wp_enqueue_scripts', 'my_scripts_method');

Skrypty wtyczek ładujemy tylko na jego stronach

<?php
    add_action( 'admin_init', 'my_plugin_admin_init' );
    add_action( 'admin_menu', 'my_plugin_admin_menu' );
    
    function my_plugin_admin_init() {
        /* Регистрируем наш скрипт. */
        wp_register_script( 'my-plugin-script', plugins_url('/script.js', __FILE__) );
    }
    
    function my_plugin_admin_menu() {
        /* Регистрируем страницу нашего плагина */
        $page = add_submenu_page( 'edit.php', // Родительская страница меню
                                  __( 'Мой плагин', 'myPlugin' ), // Название пункта меню
                                  __( 'Мой плагин', 'myPlugin' ), // Заголовок страницы
                                  'manage_options', // Возможность, определяющая уровень доступа к пункту
                                  'my_plugin-options', // Ярлык (часть адреса) страницы плагина
                                  'my_plugin_manage_menu' // Функция, которая выводит страницу
                               );
   
        /* Используем зарегистрированную страницу для загрузки скрипта */
        add_action( 'admin_print_scripts-' . $page, 'my_plugin_admin_scripts' );
    }
    
    function my_plugin_admin_scripts() {
        /*
         * Эта функция будет вызвана только на странице плагина, подключаем наш скрипт
         */
        wp_enqueue_script( 'my-plugin-script' );
    }
    
    function my_plugin_manage_menu() {
        /* Выводим страницу плагина */
    }
?>

<?php

add_action( 'admin_init', 'my_plugin_admin_init' );

add_action( 'admin_menu', 'my_plugin_admin_menu' );

function my_plugin_admin_init() {

/* Регистрируем наш скрипт. */

wp_register_script( 'my-plugin-script', plugins_url('/script.js', __FILE__) );

}

function my_plugin_admin_menu() {

/* Регистрируем страницу нашего плагина */

$page = add_submenu_page( 'edit.php', // Родительская страница меню

__( 'Мой плагин', 'myPlugin' ), // Название пункта меню

__( 'Мой плагин', 'myPlugin' ), // Заголовок страницы

'manage_options', // Возможность, определяющая уровень доступа к пункту

'my_plugin-options', // Ярлык (часть адреса) страницы плагина

'my_plugin_manage_menu' // Функция, которая выводит страницу

);

/* Используем зарегистрированную страницу для загрузки скрипта */

add_action( 'admin_print_scripts-' . $page, 'my_plugin_admin_scripts' );

}

function my_plugin_admin_scripts() {

* Эта функция будет вызвана только на странице плагина, подключаем наш скрипт

wp_enqueue_script( 'my-plugin-script' );

}

function my_plugin_manage_menu() {

/* Выводим страницу плагина */

}

Możesz przeczytać więcej z kodu tutaj. W tym samym miejscu poniżej znajdują się linki do anglojęzycznych artykułów na temat łączenia skryptów w WordPress. Powodzenia w rozwoju!

Usługi korepetycji online. Lista kursów, które prowadzę

Podstawowy kurs projektowania stron internetowych;
Układ stron;
Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
Tworzenie stron internetowych w PHP.

Czytaj więcej na stronie Nauczyciel WordPressa