web-dev-qa-db-fra.com

Comment faire pour que ma page charge la bibliothèque d'effets jQuery UI?

J'utilise javascript pour la première fois pour faire des animations simples sur la page d'accueil de mon site web. Jusqu'ici, j'ai ajouté ce qui suit à mon fichier header.php (qui n'est utilisé que pour ma page d'accueil), avant la ligne wp_head.

<?php
function my_scripts_method() {
    wp_enqueue_script('jquery');            
}    

add_action('wp_enqueue_scripts', 'my_scripts_method'); // For use on the Front end (ie. Theme)
?>

Il est en train de charger jquery dans ma page! J'en ai seulement besoin sur la page d'accueil, c'est pourquoi je ne l'appelle pas dans functions.php ou quoi que ce soit.

J'ai juste besoin de faire des animations simples sur ma page d'accueil et j'ai besoin de conseils. Lorsque la page est chargée, je souhaite que le logo descende du haut de la page, puis que le menu apparaisse en dessous à l'aide de l'effet Aveugle. Lorsque quelqu'un clique sur un élément de menu, le menu doit être masqué à l'aide de l'effet aveugle, de la couleur d'arrière-plan à modifier, du logo à déplacer et du logo à transformer d'un fichier png à un autre png (pour qu'il semble également changer de couleur). ).

Le codex ( http://codex.wordpress.org/Function_Reference/wp_enqueue_script ) indique Les effets de l'interface utilisateur jQuery ne sont pas inclus avec le jquery-ui-core.

Comment puis-je charger ma page de la bibliothèque d’effets jQuery UI?

Alternativement, quelqu'un peut peut-être donner des conseils sur un meilleur fichier js à utiliser pour cela que jQuery UI Effects?

jqueryjavascriptwp-enqueue-scriptjquery-ui
1
user2093838

Vous pouvez appeler des scripts dans votre fonction pour ne les charger que pour la page d'accueil ou la page d'accueil. Le codex n’est pas une référence très complète. Pour inclure le noyau jQuery UI Effects, vous pouvez effectuer les opérations suivantes:

wp_enqueue_script( 'jquery-effects-core');

Ou vous pouvez inclure uniquement les effets souhaités, tels que:

 wp_enqueue_script( 'jquery-effects-blind');

Voici une référence aux noms des effets jQuery que vous pouvez mettre en file d'attente:

  • jquery-effects-core
  • jquery-effects-blind
  • jquery-effects-bounce
  • jquery-effects-clip
  • jquery-effects-drop
  • jquery-effects-explode
  • jquery-effects-fade
  • jquery-effects-fold
  • jquery-effects-highlight
  • jquery-effects-pulsate
  • jquery-effects-scale
  • jquery-effects-shake
  • jquery-effects-slide
  • jquery-effects-transfer

Pour l'inclure uniquement dans votre page de police, vous feriez quelque chose comme:

function my_scripts_method() {
    if ( is_front_page ) { 
    // make sure jQuery is loaded
    wp_enqueue_script('jquery-ui-core', '', '', array('jquery'));
    wp_enqueue_script('jquery-effects-core', '', '', array('jquery'));
    }
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
2
Wyck