2012-02-04 20 views
14

Czy ktoś może mi pokazać, jak dołączyć ten plik javascript do mojej wtyczki wordpress. Próbowałem wszystkich metod wp_enqeue_script(), ale nic się nie dzieje.jak załadować Javascript w Plugin Wordpress

OK tutaj jest mój przykładowy kod wtyczki z komentarzami wyjaśniającymi, co chciałbym.

<?php 
/* 
Plugin Name: Ava Test 
Plugin URI: http://#.com 
Description: A plugin that is used for my javascript tests 
Author: Ronny Kibet 
Author URI: http://ronnykibet.com 
version: 1.001 
*/ 

include(popup.js); 
/*when I include it this way, it works fine, but gives an error when I activate the plugin 
'plugin generated 453 characters ...' 
*/ 

function popup() { 
$src = plugins_url('popup.js', __FILE__); 
wp_register_script('popup', $src); 
wp_enqueue_script('popup'); 
} 
/* 
when I included it this way, plugin is activated but nothing happens. 
*/ 
?> 

to jest popup.js

<script type="text/javascript"> 

function popup(){ 


alert('hello there this is a test popup') 

} 
</script> 
<body onload="popup()"> 
</body> 

Więc czy ktoś wie, jak nazwać ten skrypt działa prawidłowo wtyczki wordpress?

Odpowiedz

26

musisz określić kiedy obciążenie powinno się zdarzyć, spróbuj tego.

<?php 
/* 
Plugin Name: Ava Test 
Plugin URI: http://#.com 
Description: A plugin that is used for my javascript tests 
Author: Ronny Kibet 
Author URI: http://ronnykibet.com 
version: 1.001 
*/ 

add_action('wp_enqueue_scripts','ava_test_init'); 

function ava_test_init() { 
    wp_enqueue_script('ava-test-js', plugins_url('/js/ava_test_.js', __FILE__)); 
} 

Ponadto, istnieją błędy w JS, ale widziałem poprawną wersję w niektórych odpowiedzi, mam nadzieję, że to pomaga

Aktualizacja: Jest haczyk nazywany wp_enqueue_scripts, jak wspomniano przez @brasofilo który powinien może być użyty zamiast init do ładowania skryptów.

+0

próbowałem tego, nic się nie dzieje, ale nie wyskakuj, dzięki, –

+0

Powinieneś mieć swój plik js nazwany jako ava_test_.js i umieścić go w folderze o nazwie js w katalogu wtyczek, czy zrobiłeś to? – aghoshx

+1

Poprawnie jest 'add_action ('wp_enqueue_scripts', ' ava_test_init '); ' – brasofilo

0

Dołączasz HTML do pliku .js i nigdy nie dodałeś średnika do końca alertu(). Może spróbuj tylko o to w swoich popup.js:

function popup(){ 

    alert('hello there this is a test popup'); 

} 

A potem w HTML dodać onload="popup()" do znacznika body.

+0

Zrobiłem to. wciąż ten sam problem. –

0

popup.js powinien tylko kontemplować kod JavaScript, bez HTML. Spróbuj tego (w popup.js)

function popup(){ 
    alert('hello there this is a test popup'); 
} 
window.addEventListener('load',function(event){popup();},false); 

Lub po prostu:

window.addEventListener('load',function(event){ 
    alert('hello there this is a test popup'); 
},false); 
+0

Dzięki za pomoc Martti, ale ten sam problem nadal występuje. Nic się nie dzieje, gdy wywołuję skrypt za pomocą wp_enqeue_script i kiedy używam include() to działa, ale wtyczka jest aktywowana z błędem. Musi być jakiś sposób .. :( –

+0

Sprawdź konsolę błędów JavaScript, czy jakieś błędy? Sprawdź również od wygenerowanego kodu źródłowego, że skrypt-znacznik jest rzeczywiście stworzony i wskazując dokładnie "popup.js" –

2

Nauka pracy w ramach struktury WP może być frustrująca.

Nauka wprowadzenia javascript może być jeszcze bardziej frustrująca.

Wszyscy tutaj przyczynili się do czegoś wartościowego, ale trzeba to wszystko połączyć. A więc:

Po pierwsze:
Usuń linię uwzględnienia. Nie potrzebujesz tego.

Po drugie:
Upewnij się, że zmienna $ src w kodzie jest w rzeczywistości poprawną ścieżką. Dodałbym:

echo $src; 

TEST, jeśli lokalizacja jest prawidłowa.

trzecie: Aghoshx jest poprawna - trzeba mieć odniesienie Hak:

add_action('init','popup'); 

(Ponieważ nazwie popup funkcyjny, to co mogę umieścić w - Jednak, aby zapobiec nazwa funkcji colissions z innymi funkcjami WP i wtyczek, polecam zmienić to na coś bardziej unikalnego, np. proponowanego aghoshx)

Po czwarte: Sprawdź, czy twój skrypt jest ZAŁADOWANY. Po wykonaniu czynności 1-3 powyżej odejdź na stronę WP i wykonaj "źródło widoku". Poszukaj swojego pliku skryptu. Jeśli używasz przeglądarki Firefox, możesz kliknąć KLIKNIĆ na adres URL i zostanie załadowany - jeśli jesteś w IE, skopiuj i wklej adres URL do paska adresu URL i sprawdź, czy w rzeczywistości Twój plik jest TAK (jeśli tak, to jest to Jeśli NIE, to NIE ładuje pliku poprawnie i musisz naprawić ścieżkę, którą ustawiasz w zmiennej $ src).

Po piąte: Po uzyskaniu powyższego przybicia, cillosis ma rację - należy usunąć wszystko, ALE funkcja javascript (nawet usunąć znaczniki) z pliku javascript.

Na koniec: spójrz na odpowiedź Marttiego Lainesa - musisz powiązać zdarzenie, używając sugerowanego okna.addEventListener, LUB ELSE zmodyfikuj tag w swoim szablonie php tak, aby zawierał onload = "popup" (tak jak w plik skryptu).

Jeden końcowy nieco sugestii:

jQuery sprawia, że ​​wiele rzeczy jest znacznie łatwiejsze. Bardzo łatwo jest wprowadzić jQuery do swojej wtyczki WP. Po prostu dodaj to w swojej funkcji php popup:

enqueue_script('jquery'); 

Powodzenia!

+0

Dzięki Cale_b. zawsze pomocna i dla nas ... dziękuję.) Zrobię zdjęcie, a potem dam znać, co wymyślę :) –

Powiązane problemy