Wordpress et .prepend();

hatfab
Javascript

Bonjour,
Je cherche à inserrer un <hr> entre mes différents modules de ma sidebar. J'ai importé jquery dans mon header :

<?php
wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"')
?>

et dans mon sidebar.php j'ai écrit ça :

<script>
$( ".widget_archive" ).prepend( "<hr>" );
</script>

Evidemment ça ne fonctionne pas (sinon je ne serais pas là…) et j'ai une erreur dans l'inpecteur que je ne comprends pas :

(index):119 Uncaught TypeError: undefined is not a function
(index):119(anonymous function)

Je n'arrive pas à savoir si mon script jquery est bien chargé, dans fire bug il y avait un onglet script mais dans l'inspecteur de Chrome je ne sais pas ou ça se trouve. Si quelqu'un peut m'aider.
Merci beaucoup

15 réponses

Khalysto
Réponse acceptée

Le problème c'est le script, j'ai fait ça vite fait, il y a une erreur.

var elem = document.getElementsByClassName('widgettitle');

for(i=0; i < elem.length; i++) {
    var hr = document.createElement('hr');
    elem[i].appendChild(hr);
}
Antoine Courtin
Réponse acceptée

Hello,

function custom_scripts(){
    wp_enqueue_script('olga', get_template_directory_uri() . '/js/olga.js', '', '', true);
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );
Khalysto

Salut,
Il faut faire ton wp_enqueue_script dans ton functions.php

hatfab
Auteur

Merci de ta réponse. J'ai la même erreur en mettant mon enqueue dans functions.php :

<?php
require TEMPLATEPATH.'/framework/theme.php';
$theme = new Theme(array(
'menus' => array(
'nav' => 'Navigation'
),
'sidebar' => array(
'Sidebar Olga' => array()
),
'images' => array(
'inspiration' => array(
array('thumb',200,200,true)
)
)
));
wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"')
?>
Khalysto

Tu as vérifié l'ordre d'appel de tes scripts?

hatfab
Auteur

Non, je ne sais pas ou ça se trouve dans l'inspecteur de Chrome…

hatfab
Auteur

Le seul autre script que j'ai à priori c'est ça, dans le head :

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
    <head>
        <title>Le Château d'Olga</title>
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width">
        <link rel="profile" href="http://gmpg.org/xfn/11">
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

        <!--[if lt IE 9]>
        <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
        <![endif]-->
        <script>(function(){document.documentElement.className='js'})();</script>
    <?php wp_head(); ?>

        <link href='http://fonts.googleapis.com/css?family=Questrial|Muli:300,400|Lato:400,700' rel='stylesheet' type='text/css'>
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
Khalysto

Bah tu ouvres ta console et tu déplies le head.

Et si tu importes jQuery juste pour faire un prepend, c'est tuer une mouche avec un shotgun comme on dit...

hatfab
Auteur

Bon , jquery s'importe correctement. Voici les 2 seules scripts qui sont présents dans le head :

<script type="text/javascript" src="http://localhost/lechateaudolga/wp-includes/js/jquery/jquery.js?ver=1.11.1"></script>
<script type="text/javascript" src="http://localhost/lechateaudolga/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>

Pour .prepend() j'ai pas trouvé d'autre solution pour insérer ce hr entre mes Widgets. Mais sans doute qu'il y a plus simple. Je vais chercher autre chose, en HTML peut-être, parce que là il ne veut rien savoir… :(
Merci à toi de ton aide !

Khalysto

Tu peux le faire en natif, c'est 3 - 4 lignes au lieu d'une, avec un truc dans ce genre là.

var elem = document.getElementsByClassName('widget'); /* Si tes widgets ont une class widget */
var hr = document.createElement('hr');

for(i=0; i < elem.length; i++) {
    elem[i].parentNode.insertBefore(hr, elem[i].nextSibling);
}

EDIT : btw, tu as pris jQuery UI, qui n'est pas la même chose que jQuery. Prend le bon script sur le CDN de Google

hatfab
Auteur

Oui, j'avais vu mon erreur sur l'importation du script jquery. Je l'ai modifié pour prendre le bon mais c'est pareil. Je vais essayer le code que tu m'as proposé ! Je mets ça dans sidebar.php je suppose ? Merci

Khalysto

Non, tu dois créer un script JS externe et l'importer dans WP avec un register/enqueue_script.
Ça te permettra d'indiquer que ton script à des dépendances s'il y en a.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Parameters

hatfab
Auteur

Ça ne fonctionne pas. Je ne comprends pas pourquoi…
Alors, j'ai un fichier .js avec ça dedans :

var elem = document.getElementsByClassName('widgettitle');
var hr = document.createElement('hr');

for(i=0; i < elem.length; i++) {
    elem[i].parentNode.insertBefore(hr, elem[i].nextSibling);
}

Je le charge à partir de functions.php avec un register/enqueue_script.

<?php
wp_enqueue_script('script-name', get_template_directory_uri() . '/js/olga.js')
?>

Il est bien chargé, je le vois dans l'inpecteur et il n'y a pas d'erreur. Mais aucun hr à l'horizon.
Mein Got que ça m'agace !

hatfab
Auteur

En fait c'est mon wp_enqueue qui ne marche pas. Quand je mets ton script directement dans mon footer la ça marche. Je ne suis pas sûr du premier argument " script-name" ?

<?php
require TEMPLATEPATH.'/framework/theme.php';
$theme = new Theme(array(
    'menus' => array(
        'nav' => 'Navigation'
        ),
    'sidebar' => array(
        'Sidebar Olga' => array()
        ),
    'images' => array(
        'inspiration' => array(
            array('thumb',200,200,true)
        )
    )
));
wp_enqueue_script('script-name', get_template_directory_uri() . '/js/olga.js')
?>
hatfab
Auteur

Yes !! Ça marche ! Maintenant je voudrais bien savoir pourquoi. Je vais étudier ta fonction. Merci !
Et merci à Khalysto de m'avoir aider jusque là !