web-dev-qa-db-ja.com

誰かが私のプラグインの何が問題なのか教えてもらえますか？

2日前、ショートコード[toggle Title="My title"]toggle test[/toggle]を付けてトグルボックスを投稿に挿入できるプラグインを作成しました。

私はまたWordPress.orgプラグインに私のプラグインを投稿しました

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

問題

ローカルマシン上でXAMPPを使用して作成したサンドボックス上にプラグイン全体を作成しました。しばらくしてから、プラグインを他のWordPressブログにインストールし、そこでインストールしました。 !!!! （スタイルとJSが頭に表示されていて、見出しも表示されていましたが、クリックしても切り替えられませんでした。）それから他のブログでプラグインを使用しようとしましたが、同じ問題が発生しました。それから私は自分のマシンに別のWordPressサンドボックスを設定してそこでプラグインを使用しましたがそれがそこでは動作していなかったので、私は自分が見つけられなかったコードに問題があることに気づきました。

だから誰かが問題の解決策を識別して提供することができます

私のプラグインのコード

/ 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


firebugを使用している間、問題は私のjQueryにあることがわかりました

jQueryが定義されていません

[このエラーを打破] jQuery（document）.ready（function（）{

そして、私はそれを定義しました。私はそれを正しくするために私がすべきことを私に言う人もいるでしょう。

pluginsjquerycssjavascriptshortcode
1
phantom.omaga

JavascriptとCSS、あるいは少なくともJavascriptを含める方法をやり直す必要があります。

WordPressには、スクリプトとスタイルを登録し、それらの依存関係を宣言する方法があります。あなたの場合は、jQueryがロードされていないのでおそらくうまくいかないでしょう。

JavaScriptを含めるには、これを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' ) );
    }
}

wp_enqueue_script()関数はいくつかの引数を取ります、最初の3つは最も重要です。

  1. 最初の引数はハンドルです。これは基本的にはWordPress内のスクリプトのIDです。
  2. 2番目の引数はsrcです。スクリプトのURL.
  3. 3番目の引数は、依存関係の配列です。 dependencies配列はあなた自身のスクリプトが依存するすべてのスクリプトのハンドルを含まなければなりません。この場合はWordPressに同梱されている 'jquery'を使います。

wp_enqueue_script()を使って同じようにCSSをインクルードすることができます。私は コーデックスページ を読んで、理解を深め、それを使ってできることの例をもっと得ることをお勧めします。

あなたのスクリプトとスタイルをこのように含める理由は、jqueryに依存する複数のプラグインがすべてそれ自身のコピーをロードするわけではないためです。

1
sanchothefat