Ik heb de Codex gelezen en een paar blogposten over het gebruik van jQuery in WordPress, en het is erg frustrerend. Ik heb wat jQuery in functions.phpBestand laadt, maar alle gidsen die er zijn, zijn waardeloos omdat ze aannemen dat je al een heleboel WordPress-ervaring hebt. Ze zeggen bijvoorbeeld dat ik nu jQuery via de functions.phpBestand laad, nu alleen wat ik moet doen, is mijn jQuery.
Hoe doe ik dit precies? Welke bestanden, specifiek, voeg ik code toe aan? Hoe voeg ik het toe voor een enkele WordPress-pagina?
Antwoord 1, Autoriteit 100%
Ik weet wat je bedoelt met de tutorials. Hier is hoe ik het doe:
Eerst moet je je script schrijven. Maak in uw themapap een map genaamd Iets als ‘JS’. Maak een bestand in die map voor uw JavaScript. B.v. Your-script.js. Voeg uw jQuery-script toe aan dat bestand (u hebt niet <script>TAGS in een .js-bestand).
Hier is een voorbeeld van hoe uw jQuery-script (in WP-inhoud / thema’s / uw-thema / JS / YE-script.js) kan eruitzien:
jQuery(document).ready(function($) {
$('#nav a').last().addClass('last');
})
Merk op dat ik jQuery gebruik en niet $ aan het begin van de functie.
OK, open nu het functions.php-bestand van uw theme. U wilt de wp_enqueue_script()-functie gebruiken, zodat u uw script kunt toevoegen terwijl u ook WordPress vertelt dat het op jQuery vertrouwt. Dit is hoe dat te doen:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'your-script', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
Aangenomen dat uw thema WP_HEAD en WP_FOOTER op de juiste plaatsen heeft, zou dit moeten werken. Laat me weten of je nog meer hulp nodig hebt.
WordPress-vragen kunnen worden gevraagd bij WordPress Antwoorden .
Antwoord 2, Autoriteit 25%
Na veel zoeken, ik eindelijk gevonden iets dat werkt met het laatste WordPress. Hier zijn de stappen om te volgen:
- Zoek de map van uw thema, maak een map in de map voor uw aangepaste JS (custom_js in dit voorbeeld ).
- Plaats uw aangepaste jQuery in een .js-bestand in deze map (jQuery_test.js in dit voorbeeld ).
-
Zorg ervoor dat uw aangepaste jQuery .js er als volgt uitzien:
(function($) { $(document).ready(function() { $('.your-class').addClass('do-my-bidding'); }) })(jQuery); -
Ga naar de directory van het thema, open functions.php
-
Voeg een code toe aan de bovenkant die er zo uitziet:
//this goes in functions.php near the top function my_scripts_method() { // register your script location, dependencies and version wp_register_script('custom_script', get_template_directory_uri() . '/custom_js/jquery_test.js', array('jquery'), '1.0' ); // enqueue the script wp_enqueue_script('custom_script'); } add_action('wp_enqueue_scripts', 'my_scripts_method'); - Bekijk uw site om ervoor te zorgen dat het werkt!
Antwoord 3, Autoriteit 5%
Als u WordPress kinderthema voor het toevoegen van scripts aan uw thema, moet u de Get_TemPlate_Directory_uri-functie wijzigen getylesheet_directory_uri, bijvoorbeeld:
Ouder thema:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script(
'parent-theme-script',
get_template_directory_uri() . '/js/your-script.js',
array('jquery')
);
wp_enqueue_script('parent-theme-script');
}
Kinderthema:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script(
'child-theme-script',
get_stylesheet_directory_uri() . '/js/your-script.js',
array('jquery')
);
wp_enqueue_script('child-theme-script');
}
get_template_directory_uri : /your-site/wp-content/themes/parent-theme
get_stylesheet_directory_uri : /your-site/wp-content/themes/child-theme
Antwoord 4, autoriteit 3%
Je kunt jQuery of javascript toevoegen in het functie.php-bestand van het thema.
De code is als volgt:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'your_script_name', // your script unique name
get_template_directory_uri().'/js/your-script.js', //script file location
array('jquery') //lists the scripts upon which your script depends
);
}
Ga voor meer informatie naar deze tutorial: http://www.codecanal .com/add-simple-jquery-script-wordpress/
Antwoord 5, autoriteit 2%
Naast het invoeren van het script via functies, kunt u “gewoon” een link (een link rel tag dus) opnemen in de koptekst, de voettekst, in een sjabloon, waar dan ook. U hoeft alleen maar te controleren of het pad correct is. Ik raad aan om zoiets als dit te gebruiken (ervan uitgaande dat je in de directory van je thema bent).
<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>
Een goede gewoonte is om dit direct voor de afsluitende body-tag op te nemen of in ieder geval net voor je voettekst. Je kunt ook php include gebruiken, of verschillende andere methoden om dit bestand binnen te halen.
<script type="javascript"><?php include('your-file.js');?></script>
Antwoord 6
**#Methode 1:**Probeer uw jQuery-code in een apart js-bestand te plaatsen.
Registreer nu dat script in het bestand Functions.php.
function add_my_script() {
wp_enqueue_script(
'custom-script', get_template_directory_uri() . '/js/your-script-name.js',
array('jquery')
);
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );
Nu ben je klaar.
Het registreren van script in functies heeft voordelen omdat het in de <head>sectie komt wanneer de pagina wordt geladen, dus het maakt altijd deel uit van header.php. U hoeft uw code dus niet telkens te herhalen wanneer u een nieuwe html-inhoud schrijft.
#Methode 2:plaats de scriptcode in de hoofdtekst van de pagina onder de tag <script>. Dan hoef je het niet te registreren in functies.
Antwoord 7
Je kunt met deze plug-in aangepast javascript of jQuery toevoegen.
https://wordpress.org/plugins/custom-javascript-editor/
Als je jQuery gebruikt, vergeet dan niet de jQuery noconflict-modus te gebruiken
Antwoord 8
Er zijn hier veel zelfstudies en antwoorden hoe u uw script kunt toevoegen aan de pagina. Maar wat ik niet kon vinden, is hoe ik die code moet structureren, zodat deze goed werkt. Dit komt doordat de $ niet wordt gebruikt in deze vorm van JQuery.
Dus hier is mijn code en die kun je als sjabloon gebruiken.
jQuery(document).ready(function( $ ){
$("#btnCalculate").click(function () {
var val1 = $(".visits").val();
var val2 = $(".collection").val();
var val3 = $(".percent").val();
var val4 = $(".expired").val();
var val5 = $(".payer").val();
var val6 = $(".deductible").val();
var result = val1 * (val3 / 100) * 10 * 0.25;
var result2 = val1 * val2 * (val4 / 100) * 0.2;
var result3 = val1 * val2 * (val5 / 100) * 0.2;
var result4 = val1 * val2 * (val6 / 100) * 0.1;
var val7 = $(".pverify").val();
var result5 = result + result2 + result3 + result4 - val7;
var result6 = result5 * 12;
$("#result").val("$" + result);
$("#result2").val("$" + result2);
$("#result3").val("$" + result3);
$("#result4").val("$" + result4);
$("#result5").val("$" + result5);
$("#result6").val("$" + result6);
});
});
Antwoord 9
Antwoord vanaf hier: https://premium.wpmudev.org/ blog/adding-jquery-scripts-wordpress/
Ondanks het feit dat WordPress al een tijdje bestaat en de methode om scripts aan thema’s en plug-ins toe te voegen al jaren hetzelfde is, bestaat er nog steeds enige verwarring over hoe je precies scripts moet toevoegen. Dus laten we het opruimen.
Aangezien jQuery nog steeds het meest gebruikte Javascript-framework is, laten we eens kijken hoe u een eenvoudig script aan uw thema of plug-in kunt toevoegen.
Compatibiliteitsmodus van jQuery
Laten we, voordat we scripts aan WordPress gaan koppelen, eens kijken naar de compatibiliteitsmodus van jQuery. WordPress wordt voorverpakt geleverd met een kopie van jQuery, die u met uw code moet gebruiken. Wanneer de jQuery van WordPress wordt geladen, gebruikt het de compatibiliteitsmodus, een mechanisme om conflicten met andere taalbibliotheken te vermijden.
Waar dit op neer komt, is dat je het dollarteken niet rechtstreeks kunt gebruiken zoals je dat in andere projecten zou doen. Wanneer u jQuery voor WordPress schrijft, moet u in plaats daarvan jQuery gebruiken. Bekijk de onderstaande code om te zien wat ik bedoel:
Antwoord 10
De oplossingen die ik heb gezien, zijn vanuit het perspectief van het toevoegen van Javascript-functies aan een thema. De OP vroeg echter specifiek: “Hoe voeg ik het precies toe voor een enkeleWordPress-pagina?” Dit klinkt alsof ik javascript gebruik in mijn WordPress-blog, waar individuele berichten verschillende door javascript aangedreven “widgets” kunnen hebben. Een bericht kan de gebruiker bijvoorbeeld variabelen laten wijzigen (schuifregelaars, selectievakjes, tekstinvoervelden) en de resultaten plotten of weergeven.
Vanuit het JavaScript-perspectief:
- Schrijf uw JavaScript-functies in een apart “.js”-bestand
Denk er niet eens aan om significant JavaScript in de html van uw bericht op te nemen – maak een JavaScript-bestand of -bestanden met uw code.
- Interface uw JavaScript met de html van uw bericht
Als uw JavaScript-widget interageert met HTML-besturingselementen en velden, moet u begrijpen hoe u die elementen vanuit JavaScript kunt opvragen en instellen, en ook hoe u UI-elementen uw JavaScript-functies kunt laten aanroepen. Hier zijn een paar voorbeelden; eerst uit JavaScript:
var val = document.getElementById(“AM_Freq_A_3”).value;
En van html:
<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>
- Gebruik jQuery om de initialisatiefunctie van uw JavaScript-widget aan te roepen
Voeg dit toe aan uw .js-bestand, met de naam van uw functie die uw JavaScript-widget configureert en tekent wanneer de pagina er klaar voor is:
jQuery(document).ready(function( $ ) {
your_init_function();
});
- Laad in de html-code van je bericht de scripts die nodig zijn voor je bericht
In de code-editor van WordPress specificeer ik de scripts meestal aan het einde van het bericht. Ik heb bijvoorbeeld een map scripts in mijn hoofdmap. Binnenin heb ik een directory met hulpprogramma’s met algemeen JavaScript dat sommige van mijn berichten kunnen delen – in dit geval een deel van mijn eigen wiskundige hulpprogramma-functie en de flotr2-plotbibliotheek. Ik vind het handiger om het postspecifieke JavaScript in een andere map te groeperen, met submappen op basis van datum in plaats van bijvoorbeeld de mediamanager te gebruiken.
<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>
- JQuery in de wachtrij zetten
WordPress registreert jQuery, maar het is niet beschikbaar tenzij je WordPress vertelt dat je het nodig hebt, door het in de wachtrij te zetten. Als u dat niet doet, zal de jQuery-opdracht mislukken. Veel bronnen vertellen je hoe je dit commando aan je functions.php kunt toevoegen, maar gaan ervan uit dat je nog enkele andere belangrijke details kent.
Ten eerste is het een slecht idee om een thema te bewerken. Elke toekomstige update van het thema zal uw wijzigingen tenietdoen. Maak een child-thema. Dit is hoe:
https://developer.wordpress.org/themes/advanced- onderwerpen/kind-thema’s/
Het function.php-bestand van het kind overschrijft niet het gelijknamige bestand van het bovenliggende thema, maar voegt eraan toe. In de zelfstudie met onderliggende thema’s wordt voorgesteld hoe het bovenliggende en onderliggende style.css-bestand in de wachtrij kan worden geplaatst. We kunnen eenvoudig een andere regel aan die functie toevoegen om ook jQuery in de wachtrij te plaatsen. Hier is mijn volledige functions.php-bestand voor het child-thema:
<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
// styles
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
// posts with js widgets need jquery
wp_enqueue_script('jquery');
}
Antwoord 11
function xyz_scripts() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');
Antwoord 12
“We hebben Google” cit.
Voor een correct gebruik van het script in WordPress voegt u gewoon gehoste bibliotheken toe. Zoals Google
Na de geselecteerde bibliotheek die u nodig heeft, koppel deze vóór uw aangepaste script: voorbeeld
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
en naar je eigen script
<script type="text/javascript">
$(document).ready(function () {
$('.text_container').addClass("hidden");
});
</script>
Antwoord 13
De eenvoudigste manier om een script toe te voegen aan uw functions.php-bestand (op uw thema / kindthema) zonder wp_enqueue_script te gebruiken, is deze:
// CREATE WORDPRESS ACTION ON FOOTER
add_action('wp_footer', 'customJsScript');
function customJsScript() {
echo '
<script>
// YOUR JS SCRIPT
jQuery(function(){
console.log("test");
});
</script>
';
}
Zoals je ziet, gebruik je de actie wp_footer om de code te injecteren.
Dit is misschien geen goede gewoonte als je het intensief gebruikt of als je moet ‘praten’ met andere plug-ins, enz. Maar het is de snelste manier!
Je kunt de Javascript-code ook rechtstreeks in header.php of footer.php plaatsen als dit een code is die overal in WordPress wordt ingevoegd
Antwoord 14
U kunt de voorgedefinieerde functie van WordPress gebruiken om een scriptbestand toe te voegen aan de WordPress-plug-in.
wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));
Bekijk het berichtwaarmee u begrijpt hoe gemakkelijk u jQuery en CSS kunt implementeren in de WordPress-plug-in.
Antwoord 15
Naast het invoeren van het script via functies, kunt u “gewoon” een link (een link rel tag dus) opnemen in de koptekst, de voettekst, in een sjabloon, waar dan ook.
Nee. Voeg nooit zomaar een link toe aan een extern script zoals dit in WordPress. Door ze via het bestand Functions.php in een wachtrij te plaatsen, zorgt u ervoor dat de scripts in de juiste volgorde worden geladen.
Als u ze niet in de wachtrij plaatst, kan uw script niet werken, hoewel het correct is geschreven.
Antwoord 16
je kunt je script in een ander bestand schrijven.En zet je bestand op deze manier in de wachtrij
stel dat uw scriptnaam image-ticker.jsis.
wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true );
in de plaats van /js/image-ticker.jsmoet je je js-bestandspad plaatsen.
Antwoord 17
In WordPress is de juiste manier om de scripts in uw website op te nemen, door de volgende functies te gebruiken.
wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )
Deze functies worden aangeroepen in de hook wp_enqueue_script.
Voor meer details en voorbeelden kun je kijken op JS-bestanden toevoegen in WordPress met behulp van wp_register_script & wp_enqueue_script
Voorbeeld:
function webolute_theme_scripts() {
wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );
Antwoord 18
Moet je alleen jQuery laden?
1) Zoals de andere handleidingen zeggen, registreer je script als volgt in je Functions.php-bestand:
// register scripts
if (!is_admin()) {
// here is an example of loading a custom script in a /scripts/ folder in your theme:
wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
// enqueue these scripts everywhere
wp_enqueue_script('jquery');
wp_enqueue_script('sandbox.common');
}
2) Merk op dat we jQuery niet hoeven te registreren omdat het al in de kern zit. Zorg ervoor dat wp_footer() wordt aangeroepen in je footer.php en wp_head() wordt aangeroepen in je header.php (dit is waar het de scripttag zal uitvoeren), en jQuery zal op elke pagina worden geladen. Wanneer u jQuery in de wachtrij plaatst met WordPress, bevindt deze zich in de modus “geen conflict”, dus u moet jQuery gebruiken in plaats van $. U kunt jQuery desgewenst afmelden en uw eigen jQuery opnieuw registreren door wp_deregister_script(‘jquery’) te doen.
Antwoord 19
Ik had serieuze problemen met alle andere antwoorden hier, dus hier is mijn toevoeging voor degenen die een meer up-to-date oplossing willen.
Ik weet dat dit niet precies is wat de OP vroeg omdat het shortcodes gebruikt, maar dit is de enige manier waarop ik het kan laten werken en het heeft het extra voordeel dat het alleen de functie heeft wanneer de pagina de shortcode bevat.
Dit gebruikt geen wp_enqueue_script()of add_action()functies.
Ik gebruik de codefragmenten plug-in wat betekent dat het niet nodig is om mee te spelen functions.php en maak nieuwe .js-bestanden.
In een kortecode, echo de jQuery-functie als SO:
echo '<script type="text/javascript">
jQuery(document).ready(function($) {
//your jQuery code goes here.
});
</script>';