WordPressテンプレートにGridsterを挿入してください

WordPressプラグインに問題がありますが、プラグインにGridsterを挿入したいのに動作しません。WordPressテンプレートにGridsterを挿入してください

ここでは、フォルダに正しく入っているファイルをロードしています。

function add_my_stylesheet() 
{ 
    wp_enqueue_style('myCSS', plugins_url('/css/bootstrap.css', __FILE__), false); 
    wp_enqueue_style("gridster-style", plugins_url('/css/jquery.gridster.min.css', __FILE__), false); 
} 
add_action('admin_print_styles', 'add_my_stylesheet'); 



function add_my_scripts() 
{ 
    //I tried wp_register_script as well as wp_enqueue_script 
    wp_register_script("jquery-gridster", plugins_url('/js/jquery.min.js', __FILE__)); 
    wp_register_script("gridster-script", plugins_url('/js/jquery.gridster.min.js', __FILE__ )); 
    wp_register_script("gridster-script-extra", plugins_url(  '/js/jquery. gridster.with-extras.min.js', __FILE__)); 

} 
add_action('wp_register_scripts', 'add_my_scripts');

これは予想される出力のコードサンプルですが、もちろんこれはうまくいきません。

echo' 

<section class="demo"> 
     <div class="gridster"> 
      <ul> 
       <li class="bg-blue" data-row="1" data-col="1" data-sizex="1" data-sizey="1">Box1</li> 
       <li class="bg-pink" data-row="1" data-col="2" data-sizex="1" data-sizey="1">Box2</li> 
       <li class="bg-pink" data-row="1" data-col="3" data-sizex="1" data-sizey="2">Box3</li> 
      </ul> 
     </div> 
    </section> 

    <script type="text/javascript"> 
    var gridster; 

    $(function() { 
     gridtster = $(".gridster > ul").gridster({ 
      widget_margins: [10, 10], 
      widget_base_dimensions: [140, 140], 
      min_cols: 6 
     }).data("gridster"); 
    }); 
</script>';

私は、テンプレートヘッダーファイル内だけでなく、プラグインでそれを含めてみましたが、それは私だけのテキストを示しており、私はそれらをドラッグ＆ドロップすることはできませんよ。

出典

2016-01-04 Michael

これらのスクリプトをエンキューしていますか？ちょうどそれらを登録しているように見えます... – rnevius

はい、私はそれが助けになると思ったので、今度はそれらを登録しようとしました。 – Michael

スクリプトを登録すると実際にあなたのページにそれらのスクリプトが含まれているわけではありません... 'wp_enqueue_script（）'と 'wp_enqueue_scripts'アクションフック – rnevius

マイケル - もう一度良い質問！

WordPressは素晴らしいですが、それはどのように動作するかについていくつかのトリック/ニュアンスがあります。

最初に、スクリプトを登録すると便利です（例えば、localizeにしたい場合や、別のprint_scriptsを使ってフッターに出力したい場合（そうでない場合もあります）マークアップへのスクリプトが。

また、あなたは（wp_register_scriptフックで）それらを登録した場所に基づいて、あなたにもそれを変更することもできない出力。

あなたが望むすべてはあなたのスクリプトである場合ページマークアップに出力するには、次のようにコードを変更します。

function add_my_scripts() 
{ 
    // proper way to include jQuery that is packaged with WordPress 
    wp_enqueue_script('jquery'); 
    // Do not EVER include your own jquery. This will cause all sorts of problems for the users of your plugin! 
    // wp_enqueue_script("jquery-gridster", plugins_url('/js/jquery.min.js', __FILE__)); 
    // you need enqueue here. ALSO note the use of the $dependencies parameter - this plugin relies on jquery, so be sure to include that as a dependency! 
    wp_enqueue_script("gridster-script", plugins_url('/js/jquery.gridster.min.js', __FILE__ ), array('jquery')); 
    wp_enqueue_script("gridster-script-extra", plugins_url(  '/js/jquery. gridster.with-extras.min.js', __FILE__), array('gridster-script')); 

} 
// and you need to hook the enqueue action here... 
add_action('wp_enqueue_scripts', 'add_my_scripts');

これはあなたのために動作しない場合、次のステップは、レンダリングされたソースを表示し、何が起こっているか見ることです。これで問題が解決しない場合は、

フロントエンド、管理ダッシュボード、またはその両方でこれを実行しようとしていますか？
<head>タグ内でレンダリングする正確なHTMLは何ですか？
urlが出力されても正しくない場合は、別の問題があります。正しいのかどうかご相談ください。「ソースを表示」すると、通常は、「ビューソース」ビューでスクリプトへのリンクがクリック可能になり、スクリプトファイルがロードされているかどうかをすぐに確認できます（リンクをクリックすると、スクリプトコードが表示されます）、そうでないと（404エラーページのマークアップが表示されるため）
最後に、を削除して、の依存関係を削除してみてください。私は時にはそれらを使用して面白い問題を抱えていた、これは私がやり遂げるものになるだろう。

出典

2016-01-04 15:09:37

ちょっとメモ...' wp_enqueue_script（ 'jquery'）; 'は重複していますそれは他のスクリプトに依存するものとして含まれています。 – rnevius

@mevius - 真実ですが、私はjQueryをエンキューする適切な方法についてMichaelに教えようとしています。そのため、将来的に彼が使用するサンプル/モデルとして明示的に行っています。 –

ありがとう、これは私を助けました:)今私は私のフロントとバックエンドにボックスをドラッグアンドドロップできます。@cale_bあなたの答えは、いつも分かりやすくて分かりやすいので、ありがとうございます。 – Michael

WordPressテンプレートにGridsterを挿入してください

答えて

関連する問題