Come aggiungere uno script jQuery in una singola pagina?

Question

Come aggiungere uno script jQuery in una singola pagina?

27 giu 2013, 21:02:38

Visualizzazioni: 37.8K

Voti: 7

Ho questo codice che voglio aggiungere in una pagina specifica del mio sito. Non voglio creare un file separato e poi includerlo ecc. (anche se ditemi se sarebbe l'unico modo). Inoltre non voglio che sia nell'header poiché verrebbe incluso in tutte le pagine. Il codice è:

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

Ho aggiunto questo nell'editor selezionando la modalità Testo (non in modalità Visuale). Ma non funziona. Avete idee su cosa sto sbagliando?

Grazie.

ISnoculrucdees

71

pagine jquery

Commenti

Grazie, ha funzionato. Per favore rispondi come risposta così che io possa accettarla.

ISnoculrucdees

27 giu 2013 21:15:14

Come fai a sapere esattamente su quale pagina vuoi includere questo script?>

Chip Bennett

27 giu 2013 21:47:30

puoi usare la funzione is_page di WordPress

Rohit Kishore

26 ago 2016 11:47:28

Tutte le risposte alla domanda

Commenti

Aggiungi l'essenza della risposta oltre a collegarti a un link esterno.

bravokeyl

26 ago 2016 09:12:44

downvotato poiché la risposta dovrebbe essere su questo sito, e non su un sito terzo sconosciuto e inaffidabile

Mark Kaplun

26 ago 2016 09:26:38

Down-votato. Questa non è una risposta alla domanda. Piuttosto, è un link al tuo sito esterno, che poi richiede all'utente di iscriversi alla tua newsletter solo per ottenere il plug-in che hai presentato come "risposta" alla domanda.

omega33

2 set 2017 13:56:20

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

Sebbene @s_ha_dum abbia ragione che DOVRAI utilizzare jQuery in modalità no conflict all'interno di WordPress, la domanda originale rimane senza risposta.

Ho questo codice che voglio aggiungere in una pagina specifica del mio sito.

Ci sono un paio di modi per farlo

Basato sul nome/slug della pagina in WordPress nel file functions.php del tema

Questo metodo utilizza l'hook di WordPress wp_enqueue_scripts

Crea un nuovo file js per il tuo script my-nifty-custom.js

Nel tuo functions.php aggiungi il seguente codice

/* Carica gli script (e i relativi fogli di stile) */
    add_action( 'wp_enqueue_scripts', 'my_nifty_scripts' );
/**
 * Registra gli script per il tema e carica quelli utilizzati in tutto il sito.
 *
 * @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('slug-della-pagina-qui')){
    wp_enqueue_script('my-nifty-custom'); 
}}

Nota: se stai utilizzando un child-theme o vuoi farlo in modo migliore, incapsula tutto in after_setup_theme ad esempio:

add_action( 'after_setup_theme', 'nifty_theme_setup' );
function nifty_theme_setup() {
// funzione per gli script e altre funzioni che dovrebbero essere eseguite dopo l'inizializzazione del tema
}

Basato sulla classe del Body (DOM-based Routing)

Questo è un po' più complicato. Fortunatamente Paul Irish ha scritto un fantastico articolo al riguardo qui: http://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/

Se usi questo metodo otterrai il tuo JS personalizzato su base per pagina in base alla classe del Body. Ad esempio <body class="nifty">

Quindi useresti:

//clip 
 nifty : {
    init     : function(){ //inserisci qui lo script personalizzato }
  }
//clip

L'unico problema è che la pagina deve avere la classe del body che stai richiamando. Per questo WordPress ha la funzione body_class

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

    return $classes;
}

Quindi quale metodo dovresti usare?

Consiglio una combinazione di entrambi. Crea un file JavaScript che utilizza il metodo di Paul. Quindi usa wp_enqueue_scripts per chiamare quel metodo.

Metodo pigro in header.php

Infine c'è SEMPRE il modo pigro (che non consiglio ma annoto solo per riferimento).

Nel tuo header.php puoi fare:

 <?php if(is_page('slug-della-pagina-qui')){
           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 carica jQuery in modalità "No Conflict". L'alias "$" non funziona. Usa il nome completo "jQuery"-- jQuery.$.ajax({... oppure incapsula il tuo script come nell'esempio della documentazione di jQuery...

(function($) { 
  $(function() {
    // altro codice usando $ come alias per jQuery
  });
})(jQuery);

C'è anche informazione su questo nel Codex.

s_ha_dum

65.5K

27 giu 2013 21:17:21

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

Mi sono imbattuto in questo problema ogni volta che volevo utilizzare un plugin jQuery nei miei articoli e pagine. La mia soluzione è stata creare uno shortcode generico per i plugin jQuery http://www.coding-dude.com/wp/web-design/javascript/how-to-use-jquery-plugin-with-wordpress-plugin-tutorial/

John Negoita

9

26 ago 2016 09:05:24