Jak przekazać zmienne PHP do JavaScript w WordPress
Kiedy tworzysz motyw WordPress lub wtyczkę, czasami masz kod JavaScript, który musi używać danych/wartości z PHP. Na przykład potrzebujesz tych wartości w kodzie JavaScript :
-
Homepage URL
Theme option values
WordPress posts data
etc
Najłatwiej to zrobić, inicjując te wartości w obiektach JavaScript w pliku motywu header.php lub haczyku wp_head. Na przykład :
<script> var myThemeParams = { homeURL: <?php echo home_url(); ?>, themeOptions: <?php echo get_theme_mod( 'mytheme_options', false ); ?>, } </script>
Mimo, że to działa, WordPress dostarczył nam funkcję do robienia czegoś takiego. Nazywa się wp_add_inline_script.
wp_add_inline_script( $handle, $data, $position = 'after' )
-
$handle : Nazwa skryptu, do którego ma zostać dodany skrypt wbudowany.
$data : Ciąg zawierający dodany JavaScript.
$position : Określa, czy dodać skrypt inline przed uchwytem, czy po.
Ta funkcja doda wbudowany skrypt przed lub po kodzie JavaScript. W rzeczywistości może zrobić więcej poza przekazywaniem zmiennych PHP do JavaScript. Tutaj możesz zobaczyć inny przypadek użycia.
Tak więc, aby użyć wp_add_inline_script do przekazywania zmiennych z PHP do JavaScript, musisz ustawić właściwości position na before, tak aby skrypt inline został dodany przed twoim plikiem JS. A następnie zainicjuj obiekt JavaScript i ustaw wartość danymi z PHP.
$myThemeParams = array( 'homeURL' => home_url(), 'themeOptions' => get_theme_mod( 'mytheme_options', false ) ); wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js' ); wp_add_inline_script( 'my-theme-script', 'var myThemeParams = ' . wp_json_encode( $myThemeParams ), 'before' );
W swoim JavaScript możesz uzyskać do niego dostęp w ten sposób:
console.log( myThemeParams.homeURL ); console.log( myThemeParams.themeOptions );
Powiązane zagadnienia
- 2024-04-25 Apple twierdzi, że pracuje nad niestandardowym chipem serwerowym AI opartym na procesie 3 nm TSMC
- 2024-04-25 badacze wykorzystują części superkondensatora do zbudowania nowego typu baterii sodowo-jonowej
- 2022-08-20 Google stara się ulepszyć wyniki wyszukiwania, zapobiegając nieoryginalnym treściom
- 2022-08-16 Microsoft wyłączy TLS 1.0 i 1.1 w Internet Explorerze i EdgeHTML 13 września
- 2022-08-15 Google wydaje Read Along w sieci: uczenie dzieci czytania
Państwa uwagi
- forex 1楼
- Hi would you mind letting me know which hosting company you're working with? I've loaded your blog in 3 completely different web browsers and I must say this blog loads a lot faster then most. Can you recommend a good web hosting provider at a fair price? Thank you, I appreciate it!
- 发布于 2022/03/17 09:11
- Ranking gorąca
-
- Jak uaktualnić system Windows 10 do Windows 11 za darmo?
- Jak uniknąć powielania formularzy na stronie
- Jak przekazać zmienne PHP do JavaScript w WordPress
- Co to jest słabo napisany język programowania
- Różnica między przerwami między wierszami a znakami akapitu
- Czym jest window.postMessage w HTML5?
- Jak zaimplementować funkcje przeglądania do przodu i do tyłu dla przycisków formularzy internetowych
- Układ tabeli jest nagle bardzo mylący
- Jak ustalić, czy PHP jest dobre dla mojej witryny lub WordPressa?
- Co to jest język skryptowy
- Rola znacznika listy nieuporządkowanej ul
- Co to jest deklaracja dokumentu XML?
- Wpływ automatycznego buforowania na strony dynamiczne
- Jakie wartości można zastosować dla właściwości background-position?
- Jaka jest różnica między wartością stałą a bezwzględną?
- Ostatnie odpowiedzi
-
-
Jak uniknąć powielania formularzy na stronie
binary options system strategy page Odpowiedźt 2022-04-01 03:42:00
-
Jak ustalić, czy PHP jest dobre dla mojej witryny lub WordPressa?
แอพเปลี่ยนรูปเป็นภาพวาด Odpowiedźt 2022-03-27 18:27:12
-
Wpływ automatycznego buforowania na strony dynamiczne
50 deposit binary options Odpowiedźt 2022-03-24 05:31:20
-
Jak uniknąć powielania formularzy na stronie
free binary options signals providers of goods Odpowiedźt 2022-03-20 12:29:02
-
Jak uniknąć powielania formularzy na stronie
binary options strategy 5 minutes 15 min no loss acord Odpowiedźt 2022-03-20 09:44:29
-