Afficher un panneau au clic dans Twentyfourteen-child // Problème JS (Créer un compte)

  • Statut : non résolu
8 sujets de 1 à 8 (sur un total de 8)
  • Auteur
    Messages
  • #557846
    Tche
    Participant
    Chevalier WordPress
    182 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 4.4
    – Version de PHP/MySQL : 5.4
    – Thème utilisé : Twentyfourteen-child
    – Extensions en place : akismet, comment attachment, comment popularity, jetpack, post soumis par utilisateurs, posts viewed recently, search and filter, subscribe to comments reloaded, super socializer, Theme my login, transposh, wp user avatar, wp-greet, yoast SEO
    – Nom de l’hebergeur : OVH
    – Adresse du site : http://tst.allwewish.org/?cat=22

    Problème(s) rencontré(s) :

    J’ai besoin de l’aide d’un expert en javascript. J’essaie en fait de faire apparaître mes sidebars au click, un peu comme le search-toggle de base de twentyfourteen. Comme le comportement du search toggle est défini dans twentyfourteen/js/functions.js J’ai copié et adapté la fonction js comme ce qui suit(voir left-toggle juste après la search-toggle)

    /**
    * Theme functions file
    *
    * Contains handlers for navigation, accessibility, header sizing
    * footer widgets and Featured Content slider
    *
    */

    ( function( $ ) {
    var body = $( ‘body’ ),
    _window = $( window );

    // Enable menu toggle for small screens.
    ( function() {
    var nav = $( ‘#primary-navigation’ ), button, menu;
    if ( ! nav ) {
    return;
    }

    button = nav.find( ‘.menu-toggle’ );
    if ( ! button ) {
    return;
    }

    // Hide button if menu is missing or empty.
    menu = nav.find( ‘.nav-menu’ );
    if ( ! menu || ! menu.children().length ) {
    button.hide();
    return;
    }

    $( ‘.menu-toggle’ ).on( ‘click.twentyfourteen’, function() {
    nav.toggleClass( ‘toggled-on’ );
    } );
    } )();

    /*
    * Makes « skip to content » link work correctly in IE9 and Chrome for better
    * accessibility.
    *
    * @link http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
    */
    _window.on( ‘hashchange.twentyfourteen’, function() {
    var element = document.getElementById( location.hash.substring( 1 ) );

    if ( element ) {
    if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
    element.tabIndex = -1;
    }

    element.focus();

    // Repositions the window on jump-to-anchor to account for header height.
    window.scrollBy( 0, -80 );
    }
    } );

    $( function() {
    // Search toggle.
    $( ‘.search-toggle’ ).on( ‘click.twentyfourteen’, function( event ) {
    var that = $( this ),
    wrapper = $( ‘.search-box-wrapper’ );

    that.toggleClass( ‘active’ );
    wrapper.toggleClass( ‘hide’ );

    if ( that.is( ‘.active’ ) || $( ‘.search-toggle .screen-reader-text’ )[0] === event.target ) {
    wrapper.find( ‘.search-field’ ).focus();
    }
    } );
    $( function() {
    // left toggle.
    $( ‘.left-toggle’ ).on( ‘click.twentyfourteen’, function( event ) {
    var that = $( this ),
    wrapper = $( ‘.left-box-wrapper’ );

    that.toggleClass( ‘active’ );
    wrapper.toggleClass( ‘hide’ );

    if ( that.is( ‘.active’ ) || $( ‘.left-toggle .screen-reader-left’ )[0] === event.target ) {
    wrapper.find( ‘.left-field’ ).focus();
    }
    } );

    /*
    * Fixed header for large screen.
    * If the header becomes more than 48px tall, unfix the header.
    *
    * The callback on the scroll event is only added if there is a header
    * image and we are not on mobile.
    */
    if ( _window.width() > 781 ) {
    var mastheadHeight = $( ‘#masthead’ ).height(),
    toolbarOffset, mastheadOffset;

    if ( mastheadHeight > 48 ) {
    body.removeClass( ‘masthead-fixed’ );
    }

    if ( body.is( ‘.header-image’ ) ) {
    toolbarOffset = body.is( ‘.admin-bar’ ) ? $( ‘#wpadminbar’ ).height() : 0;
    mastheadOffset = $( ‘#masthead’ ).offset().top – toolbarOffset;

    _window.on( ‘scroll.twentyfourteen’, function() {
    if ( ( window.scrollY > mastheadOffset ) && ( mastheadHeight < 49 ) ) {
    body.addClass( 'masthead-fixed' );
    } else {
    body.removeClass( 'masthead-fixed' );
    }
    } );
    }
    }

    // Focus styles for menus.
    $( '.primary-navigation, .secondary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() {
    $( this ).parents().toggleClass( 'focus' );
    } );
    } );

    _window.load( function() {
    // Arrange footer widgets vertically.
    if ( $.isFunction( $.fn.masonry ) ) {
    $( '#footer-sidebar' ).masonry( {
    itemSelector: '.widget',
    columnWidth: function( containerWidth ) {
    return containerWidth / 4;
    },
    gutterWidth: 0,
    isResizable: true,
    isRTL: $( 'body' ).is( '.rtl' )
    } );
    }

    // Initialize Featured Content slider.
    if ( body.is( '.slider' ) ) {
    $( '.featured-content' ).featuredslider( {
    selector: '.featured-content-inner > article’,
    controlsContainer: ‘.featured-content’
    } );
    }
    } );
    } )( jQuery );

    // Scroll le sommaire.
    jQuery(document).ready(function($){
    $(document).on(‘click’,’.sommaire-article a’,function(){
    var h = $(this).attr(‘href’);

    $(‘body,html’).animate({
    scrollTop:$(h).offset().top
    }, 500);
    return false;
    });
    });

    Et j’ai ajouté ce qui suit à mon functions.php pour remplacer le js de twentyfourteen par celui de l’enfant:

    ///Lire le functions.js du child
    function enqueue_child_functions_js() {
    wp_dequeue_script( ‘twentyfourteen-script’ );
    //dequeue the parent script
    wp_enqueue_script( my-child-script’, get_stylesheet_directory_uri() . ‘/js/functions.js’, array( ‘jquery’ ), ‘20140717’, true );
    //enqueue new modified script}
    add_action( ‘wp_enqueue_scripts’, ‘enqueue_child_functions_js’, 999 );

    Malheureusement, il y a un soucis avec mon ajout de fonction dans functions.js et je me demande si quelqu’un pourrait me dire ce que je dois changer.

    Un grand merci d’avance pour votre aide.
    A bientôt j’espère

    #1034551
    luciole135
    Participant
    Maître WordPress
    13714 contributions
    Tche wrote:
    Malheureusement, il y a un soucis avec mon ajout de fonction dans functions.js

    Et quel est ce problème ?

    #1034552
    Tche
    Participant
    Chevalier WordPress
    182 contributions

    C’est ce que j’aimerais découvrir. Quand je teste le code dans des sites comme jsbin ou webtoolkittester, ces sites indiquent des problèmes d’accolade ou de parenthèses…

    Dans jsbin:
    4 errors
    Line 9: Unmatched ‘{‘.
    Line 9: Unmatched ‘(‘.
    Line 155: Expected an assignment or function call and instead saw an expression.
    Line 155: Missing semicolon.

    Cela te dit-il quelque chose? En fait la fonction que j’ai copiée (ou pensé copier) commence par $ … et je ne trouve pas d’explications sur $ ( function() ) … et je n’y connais pas grand chose en js.

    #1034553
    Tche
    Participant
    Chevalier WordPress
    182 contributions

    PS: le code initial de twentyfourteen fonctionne évidemment très bien…
    Mais ça bug quand j’y insère ceci:

    $( function() {
    // left toggle.
    $( ‘.left-toggle’ ).on( ‘click.twentyfourteen’, function( event ) {
    var that = $( this ),
    wrapper = $( ‘.left-box-wrapper’ );

    that.toggleClass( ‘active’ );
    wrapper.toggleClass( ‘hide’ );

    if ( that.is( ‘.active’ ) || $( ‘.left-toggle .screen-reader-left’ )[0] === event.target ) {
    wrapper.find( ‘.left-field’ ).focus();
    }
    } );

    #1034554
    luciole135
    Participant
    Maître WordPress
    13714 contributions
    Tche wrote:
    C’est ce que j’aimerais découvrir.

    Mettez le debug à TRUE dans le fichier wp-config.php et regardez s’il y a un message d’erreur.

    #1034555
    Tche
    Participant
    Chevalier WordPress
    182 contributions

    J’ai déjà essayé, y compris en ajoutant le script debug

    define(‘WP_DEBUG’, true);
    define(‘SCRIPT_DEBUG’, true);

    J’ai tout remis mais pas de message d’erreur visible :( pourtant le search toggle et le left-toggle ne fonctionnent pas (même si la page s’affiche)

    #1034556
    luciole135
    Participant
    Maître WordPress
    13714 contributions

    Il y a dans Firequery (dispo sur Firefox) ou sur les autres inspecteurs web un débugeur jQuery : FireQuery 2.0.1

    Un tuto : Firebug Extension: FireQuery – jQuery development

    je ne l’ai jamais utilisé mais un développeur de jQuery doit savoir l’utiliser…

    #1034557
    Tche
    Participant
    Chevalier WordPress
    182 contributions

    Merci Luciole, j’essaie

8 sujets de 1 à 8 (sur un total de 8)
  • Vous devez être connecté pour répondre à ce sujet.