Hur man skickar PHP-data och strängar till JavaScript i WordPress

Det är bra att sätta alla dina data i statiska strängar i dina PHP-filer. Om du behöver använda vissa data i JavaScript senare, är det också bra att lägga in dina uppgifter som data-* attribut i din HTML. Men i vissa scenarier har du inget annat val än att skicka strängar direkt till din JavaScript-kod.

Om du inkluderar ett JavaScript-bibliotek, och du har funnit dig själv att initiera ett JavaScript-objekt i din header.php sedan tilldela data till dess egenskaper, då denna artikel är för dig.

Denna artikel kommer att lära dig hur du korrekt skickar PHP-data och statiska strängar till ditt JavaScript-bibliotek.

Varför behöver du skicka data till JavaScript

Låt mig illustrera några typiska scenarier för behovet av att skicka data till JavaScript. Till exempel, ibland måste vi få dessa värden i din JavaScript-kod:

• Hemsida, admin, plugin, tema eller ajax webbadresser,
• Translatable strängar, eller
• Ett tema eller WordPress-alternativ.

Det vanliga sättet att skicka data

Låt oss säga att vi har en jQuery-fil som heter myLibrary.js som vi kommer att inkludera i vår WordPress-webbplats:

var myLibraryObject; (funktion ($) "använd strikt"; myLibraryObject = home: ", // populera detta senare pleaseWaitLabel:", // populate använd detta senare someFunction: function () // kod som använder egenskaperna ovan );

Vi uppskattar det i vår functions.php med följande kod:

wp_enqueue_script ('my_js_library', get_template_directory_uri (). '/js/myLibrary.js');

Nu är frågan hur kan vi fylla i Hem och pleaseWaitLabel egenskaper? Du kanske har instinktivt lagt till något så här i din header.php för att få de uppgifter du behöver:

Detta fungerar som avsett emellertid har WordPress gett oss ett bättre och kortare sätt att göra detta.

WordPress-sättet

Det rekommenderade sättet att skicka data till JavaScript är genom att använda wp_localize_script fungera. Den här funktionen är avsedd att användas efter att du har skrivit ett skript med wp_enqueue_scripts.

wp_localize_script ($ handtag, $ objectName, $ arrayOfValues);

Här är parametrarna:

• $ handtag. Handtaget till det skriven skriptet för att binda värdena till
• $ Object. JavaScript-objektet som håller alla värden på $ arrayOfValues
• $ arrayOfValues. En associativ array som innehåller namnet och värdena som ska skickas till skriptet

Efter att ha ringt den här funktionen, $ Object variabel kommer att bli tillgänglig inom det angivna skriptet.

Genomförandet wp_localize_script

Låt oss justera det tidigare exemplet för att använda vår nya metod att skicka data. Först, vi skämtar på skriptet då ringa wp_localize_script i vår functions.php:

wp_enqueue_script ('my_js_library', get_template_directory_uri (). '/js/myLibrary.js'); $ dataToBePassed = array ('home' => get_stylesheet_directory_uri (), 'pleaseWaitLabel' => __ ('Vänta ...', 'standard')); wp_localize_script ('my_js_library', 'php_vars', $ datatoBePassed);

Nu vår Hem och pleaseWaitLabel värden kan nu nås i vårt jQuery-bibliotek via php_vars variabel.

Sedan vi använde wp_localize_script, vi behöver inte springa någonting i vårt header.php och vi kan säkert ta bort innehållet i > märka:

var myLibraryObject; (funktion ($) "använd strikt"; myLibraryObject = someFunction: function () // kod som använder php_vars.home och php_vars.pleaseWaitLabel (jQuery));