web-dev-qa-db-fra.com

Est ce que quelqu'un peut me dire ce qui ne va pas avec mon plugin?

Il y a deux jours, un plugin m'a permis d'insérer une bascule dans le message avec le shortcode [toggle Title="My title"]toggle test[/toggle]

J'ai aussi posté mon plugin sur les plugins WordPress.org

http://wordpress.org/extend/plugins/toggle-box/ .

le problème

J'ai créé le plugin entier sur le bac à sable que j'ai créé sur ma machine locale avec XAMPP, puis après un moment, j'ai installé le plugin sur un autre blog WordPress où il était installé. OK CSS et JS se chargeaient dans la page, mais la bascule ne fonctionnait pas. !!!! (le style et JS apparaissaient dans la tête et l'en-tête apparaissait également, mais il ne basculait pas lorsque je cliquais dessus.) J'ai alors essayé d'utiliser les plugins sur d'autres blogs mais j'ai rencontré le même problème. puis j'ai installé un autre bac à sable WordPress sur ma machine et utilisé le plugin là-bas; il ne fonctionnait pas là-bas. J'ai alors réalisé qu'il y avait un problème avec mon code que je ne pouvais pas trouver.

Alors quelqu'un peut-il s'il vous plaît identifier et fournir la solution au problème merci

Code de mon plugin

/ bascule box.php

<?php
/**
 * Plugin Name: Toggle box
 * Plugin URI: http://wordpress.org/extend/plugins/toggle-box/
 * Description: This is an awesome custom plugin which adds toggle box funtionality in to your theme themes.
 * Author: phantom.omaga
 * Author URI: http://profiles.wordpress.org/users/phantom.omaga/
 * Version: 0.1.0
**/

//*************************** Toggle Boxes Short Code ***************************//

function togglebox($atts, $content = null) {
    extract(shortcode_atts(array(
        'title'      => '',
    ), $atts));

    $out .= '<h3 class="toggle"><strong><a href="#">' .$title. '</a></strong></h3>';
    $out .= '<div class="toggle-box" style="display: none;"><p>';
    $out .= do_shortcode($content);
    $out .= '</p></div>';

   return $out;
}

add_shortcode('toggle', 'togglebox');


//*************************** Get Plugin URL  ***************************//

function get_pluginurl() {
// WP < 2.6
if ( !function_exists('plugins_url') )
    return get_option('siteurl') . '/wp-content/plugins/' . plugin_basename(dirname(__FILE__));
    return plugins_url(plugin_basename(dirname(__FILE__)));
}
//*************************** Calls Toggle Box css and js***************************//

function add_togglebox () {
?>
    <link type="text/css" href="<?php echo plugins_url('toggle-box'); ?>/toggle-box.css" rel="stylesheet" />
    <script type="text/javascript" src="<?php echo plugins_url('toggle-box'); ?>/toggle-box.js"></script>

<?php }
add_action('wp_head', 'add_togglebox');
?>

/toggle-box.css

/*************************** Shortcodes: Toggle Box ***************************/

h3.toggle {
background-repeat: no-repeat;
background-position: -27px -23px;
font-size: 16px;
padding: 0 0 20px 23px;
cursor: pointer;
}
h3.toggle a {
text-decoration: none;
display: block;
}
h3.toggle-active {
background-position: -6px -50px;
}
.toggle-box {
clear:both;
margin: 0 0 10px 0;
overflow: hidden;
}
h3.toggle {
background-image: url(images/Sprite.png);
}

/toggle-box.js

/*************************** Toggle Content ***************************/

jQuery(document).ready(function(){
jQuery(".toggle-box").hide(); 

jQuery(".toggle").toggle(function(){
    jQuery(this).addClass("toggle-active");
    }, function () {
    jQuery(this).removeClass("toggle-active");
});

jQuery(".toggle").click(function(){
    jQuery(this).next(".toggle-box").slideToggle();
});
});

/images/ Sprite.png


En utilisant firebug, j’ai trouvé que le problème venait de jQuery.

jQuery n'est pas défini

[Break On This Error] jQuery (document) .ready (function () {

et je l'ai bien défini. Je pense que quelqu'un peut me dire ce que je devrais faire pour que tout soit bien fait.

pluginsjquerycssjavascriptshortcode
1
phantom.omaga

Vous devez refaire la manière dont vous incluez le Javascript et le CSS, ou au moins juste le javascript.

WordPress a un moyen d'enregistrer les scripts et les styles et de déclarer leurs dépendances. Dans votre cas, cela ne fonctionne probablement pas car jQuery n'est pas chargé.

Pour inclure javascript, faites ceci dans le hook init:

add_action( 'init', 'toggle_box_init' );
function toggle_box_init() {
    if ( ! is_admin() ) {
        wp_enqueue_script( 'toggle-box', plugins_url( 'toggle-box' ) . '/toggle-box.js', array( 'jquery' ) );
    }
}

La fonction wp_enqueue_script() prend quelques arguments, les 3 premiers sont les plus importants.

  1. Le premier argument est le descripteur , qui est essentiellement un identifiant pour le script dans WordPress.
  2. Le deuxième argument est le src , par exemple. l'URL du script.
  3. Le troisième argument est un tableau de dépendances . Le tableau des dépendances devrait contenir les poignées de tous les scripts sur lesquels repose votre propre script. Dans ce cas, nous utilisons 'jquery', qui est fourni avec WordPress.

Vous pouvez inclure votre CSS en utilisant wp_enqueue_script() de la même manière. Je suggère de lire la page du codex pour obtenir une meilleure compréhension et davantage d'exemples de ce que vous pouvez en faire.

La raison pour inclure vos scripts et styles de cette façon est que plusieurs plugins qui s'appuient sur jQuery ne chargent pas tous leur propre copie de celui-ci.

1
sanchothefat