Cum să adaugi script jQuery într-o pagină individuală?

Question

Cum să adaugi script jQuery într-o pagină individuală?

27 iun. 2013, 21:02:38

Vizualizări: 37.8K

Voturi: 7

Am acest cod pe care vreau să-l adaug într-o pagină specifică a mea. Nu vreau să creez un fișier pentru el și apoi să-l includ etc (deși spuneți-mi dacă ar fi singura modalitate). De asemenea, nu vreau să fie în header deoarece ar fi inclus în toate paginile. Codul este:

<script type="text/javascript">
$(function () {
    $('input[name=done]:radio').click(function () {
        // Verifică dacă valoarea este "Yes"
        if ($(this).val() === "Yes") {
            $('#p-days').show();
        } else {
            $('#p-days').hide();
        }
    });
    $('input[name=already-b]:radio').click(function () {
        // Verifică dacă valoarea este "Yes"
        if ($(this).val() === "Yes") {
            $('#div-name').show();
        } else {
            $('#div-name').hide();
        }
    });
});
</script>

Am adăugat acest cod în editor selectând modul Text (nu în modul Visual). Dar nu funcționează. Aveți idei despre ce fac greșit?

Mulțumesc.

ISnoculrucdees

71

pagini jquery

Comentarii

Mulțumesc, a funcționat. Te rog să răspunzi ca un răspuns, astfel încât să-l pot accepta.

ISnoculrucdees

27 iun. 2013 21:15:14

Cum știi exact pe ce pagină vrei să incluzi acest script?>

Chip Bennett

27 iun. 2013 21:47:30

poți folosi funcția WordPress is_page

Rohit Kishore

26 aug. 2016 11:47:28

Toate răspunsurile la întrebare

Comentarii

Adaugă esența răspunsului în plus față de linkul către o sursă externă.

bravokeyl

26 aug. 2016 09:12:44

am votat în jos deoarece răspunsul ar trebui să fie pe acest site, și nu pe un site terț necunoscut și nesigur

Mark Kaplun

26 aug. 2016 09:26:38

Am votat în jos. Acesta nu este un răspuns la întrebare. Mai degrabă, este un link către site-ul tău extern, care apoi necesită ca utilizatorul să se aboneze la newsletterul tău pentru a obține chiar și plug-inul pe care l-ai prezentat ca "răspuns" la întrebare.

omega33

2 sept. 2017 13:56:20

Brooke. 3.89K · Answer 1 · 2013-06-28T01:00:10Z

Deși @s_ha_dum are dreptate că VETI avea nevoie să folosiți jQuery no conflict în WordPress, întrebarea originală rămâne fără răspuns.

Am acest cod pe care vreau să-l adaug pe o anumită pagină a mea.

Există câteva moduri de a face acest lucru

Bazat pe numele/slug-ul paginii în WordPress în functions.php al temei

Această metodă utilizează hook-ul WordPress wp_enqueue_scripts

Creați un nou fișier js pentru scriptul dvs. my-nifty-custom.js

În fișierul dvs. functions.php adăugați următoarele

/* Încarcă scripturile (și fișierele de stil asociate) */
    add_action( 'wp_enqueue_scripts', 'my_nifty_scripts' );
/**
 * Înregistrează scripturile pentru temă și încarcă cele folosite pe întreg site-ul.
 *
 * @since 0.1.0.
 */

function my_nifty_scripts() {
    wp_register_script('my-nifty-custom', get_stylesheet_directory_uri() . '/js/my-nifty-custom.js', false, null, true);
if(is_page('page-slug-here')){
    wp_enqueue_script('my-nifty-custom'); 
}}

Notă: dacă utilizați o temă copil sau doriți să faceți lucrurile mai bine, înfășurați totul în after_setup_theme, adică:

add_action( 'after_setup_theme', 'nifty_theme_setup' );
function nifty_theme_setup() {
// funcția pentru script și alte funcții care ar trebui să se întâmple după configurarea inițială a temei
}

Bazat pe clasa Body (DOM-based Routing)

Aceasta este un pic mai complicat. Din fericire, Paul Irish a scris un blog fantastic despre asta aici: http://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/

Dacă folosiți această metodă, vă va aduce JS-ul personalizat pe baza paginii, conform clasei Body. De exemplu <body class="nifty">

Apoi ați folosi:

//clip 
 nifty : {
    init     : function(){ //scriptul personalizat va fi aici }
  }
//clip

Singura problemă este că pagina trebuie să aibă clasa body pe care o apelați. Pentru aceasta, WordPress are funcția body_class

add_filter('body_class','nifty_class_names');
function nifty_class_names($classes) {
    if(is_page('page-slug-here')){
        $classes[] = 'nifty';
    }

    return $classes;
}

Deci, care metodă ar trebui să folosiți?

Recomand o combinație a ambelor metode. Creați un fișier JavaScript care folosește metoda lui Paul. Apoi folosiți wp_enqueue_scripts pentru a apela acea metodă.

Metoda leneșă în header.php

În cele din urmă, există și metoda leneșă (pe care nu o recomand, dar o menționez doar pentru referință).

În fișierul header.php puteți face:

 <?php if(is_page('page-slug-here')){
           echo ('<script type="text/javascript" src="'. get_stylesheet_directory_uri() . '/js/my-nifty-custom.js"> </script>'); 
        } ?>

s_ha_dum 65.5K · Answer 2 · 2013-06-27T21:17:21Z

WordPress încarcă jQuery în modul "No Conflict". Alias-ul "$" nu funcționează. Folosește întregul "jQuery"-- jQuery.$.ajax({... sau înfășoară scriptul tău ca în exemplul din documentația jQuery...

(function($) { 
  $(function() {
    // cod suplimentar folosind $ ca alias pentru jQuery
  });
})(jQuery);

Există informații despre acest lucru și în Codex.

s_ha_dum

65.5K

27 iun. 2013 21:17:21

John Negoita 9 · Answer 3 · 2016-08-26T09:05:24Z

De fiecare dată când am vrut să folosesc un plugin jQuery în articolele și paginile mele, am întâmpinat această problemă. Soluția mea a fost să creez un shortcode generic pentru plugin-uri jQuery http://www.coding-dude.com/wp/web-design/javascript/how-to-use-jquery-plugin-with-wordpress-plugin-tutorial/

John Negoita

9

26 aug. 2016 09:05:24